From 6791a36d85a9b2f7f0be07428ed32ce454f0b6ee Mon Sep 17 00:00:00 2001
From: "Sergio R. Caprile" <scaprile@cesanta.com>
Date: Tue, 27 Dec 2022 18:12:55 -0300
Subject: [PATCH] Add reduced functionality version

---
 examples/device-dashboard/net.c            |   13 +
 examples/device-dashboard/packed_fs.c      | 3064 ++++++++++++++------
 examples/device-dashboard/web_root/main.js |   15 +-
 3 files changed, 2146 insertions(+), 946 deletions(-)

diff --git a/examples/device-dashboard/net.c b/examples/device-dashboard/net.c
index 3416fdf7..58bc0738 100644
--- a/examples/device-dashboard/net.c
+++ b/examples/device-dashboard/net.c
@@ -10,7 +10,9 @@
 #define MQTT_SUBSCRIBE_TOPIC "mg/#"
 
 static time_t s_boot_timestamp = 0;               // Updated by SNTP
+#ifndef DISABLE_ROUTING
 static struct mg_connection *s_sntp_conn = NULL;  // SNTP connection
+#endif
 
 // Define a system time alternative
 time_t ourtime(time_t *tp) {
@@ -94,6 +96,8 @@ static void timer_metrics_fn(void *param) {
                     10 + (int) ((double) rand() * 10 / RAND_MAX));
 }
 
+#ifndef DISABLE_ROUTING
+
 // MQTT event handler function
 static void mqtt_fn(struct mg_connection *c, int ev, void *ev_data, void *fnd) {
   if (ev == MG_EV_CONNECT && mg_url_is_ssl(s_config.url)) {
@@ -154,13 +158,17 @@ static void timer_sntp_fn(void *param) {  // SNTP timer function. Sync up time
   }
 }
 
+#endif
+
 // HTTP request handler function
 void device_dashboard_fn(struct mg_connection *c, int ev, void *ev_data,
                          void *fn_data) {
   if (ev == MG_EV_OPEN && c->is_listening) {
     mg_timer_add(c->mgr, 1000, MG_TIMER_REPEAT, timer_metrics_fn, c->mgr);
+#ifndef DISABLE_ROUTING
     mg_timer_add(c->mgr, 1000, MG_TIMER_REPEAT, timer_mqtt_fn, c->mgr);
     mg_timer_add(c->mgr, 1000, MG_TIMER_REPEAT, timer_sntp_fn, c->mgr);
+#endif
     s_config.url = strdup(MQTT_SERVER);
     s_config.pub = strdup(MQTT_PUBLISH_TOPIC);
     s_config.sub = strdup(MQTT_SUBSCRIBE_TOPIC);
@@ -179,9 +187,14 @@ void device_dashboard_fn(struct mg_connection *c, int ev, void *ev_data,
       // All URIs starting with /api/ must be authenticated
       mg_http_reply(c, 403, "", "Denied\n");
     } else if (mg_http_match_uri(hm, "/api/config/get")) {
+#ifdef DISABLE_ROUTING
+      mg_http_reply(c, 200, NULL, "{%Q:%Q,%Q:%Q,%Q:%Q}\n", "url", s_config.url,
+                    "pub", s_config.pub, "sub", s_config.sub);
+#else
       mg_http_reply(c, 200, NULL, "{%Q:%Q,%Q:%Q,%Q:%Q,%Q:%s}\n", "url",
                     s_config.url, "pub", s_config.pub, "sub", s_config.sub,
                     "connected", s_connected ? "true" : "false");
+#endif
     } else if (mg_http_match_uri(hm, "/api/config/set")) {
       // Admins only
       if (strcmp(u->name, "admin") == 0) {
diff --git a/examples/device-dashboard/packed_fs.c b/examples/device-dashboard/packed_fs.c
index ac0b61e8..8eb9229e 100644
--- a/examples/device-dashboard/packed_fs.c
+++ b/examples/device-dashboard/packed_fs.c
@@ -3,40 +3,6 @@
 #include <time.h>
 
 static const unsigned char v1[] = {
-  60,  33,  68,  79,  67,  84,  89,  80,  69,  32, 104, 116, // <!DOCTYPE ht
- 109, 108,  62,  10,  60, 104, 116, 109, 108,  32, 108,  97, // ml>.<html la
- 110, 103,  61,  34, 101, 110,  34,  62,  10,  32,  32,  60, // ng="en">.  <
- 104, 101,  97, 100,  62,  10,  32,  32,  32,  32,  60, 116, // head>.    <t
- 105, 116, 108, 101,  62,  68, 101, 118, 105,  99, 101,  32, // itle>Device 
-  68,  97, 115, 104,  98, 111,  97, 114, 100,  60,  47, 116, // Dashboard</t
- 105, 116, 108, 101,  62,  10,  32,  32,  32,  32,  60, 109, // itle>.    <m
- 101, 116,  97,  32,  99, 104,  97, 114, 115, 101, 116,  61, // eta charset=
-  34, 117, 116, 102,  45,  56,  34,  32,  47,  62,  10,  32, // "utf-8" />. 
-  32,  32,  32,  60, 109, 101, 116,  97,  32, 104, 116, 116, //    <meta htt
- 112,  45, 101, 113, 117, 105, 118,  61,  34,  88,  45,  85, // p-equiv="X-U
-  65,  45,  67, 111, 109, 112,  97, 116, 105,  98, 108, 101, // A-Compatible
-  34,  32,  99, 111, 110, 116, 101, 110, 116,  61,  34,  73, // " content="I
-  69,  61, 101, 100, 103, 101,  34,  32,  47,  62,  10,  32, // E=edge" />. 
-  32,  32,  32,  60, 109, 101, 116,  97,  32, 110,  97, 109, //    <meta nam
- 101,  61,  34, 118, 105, 101, 119, 112, 111, 114, 116,  34, // e="viewport"
-  32,  99, 111, 110, 116, 101, 110, 116,  61,  34, 119, 105, //  content="wi
- 100, 116, 104,  61, 100, 101, 118, 105,  99, 101,  45, 119, // dth=device-w
- 105, 100, 116, 104,  44,  32, 105, 110, 105, 116, 105,  97, // idth, initia
- 108,  45, 115,  99,  97, 108, 101,  61,  49,  46,  48,  34, // l-scale=1.0"
-  32,  47,  62,  10,  32,  32,  32,  32,  60, 108, 105, 110, //  />.    <lin
- 107,  32, 114, 101, 108,  61,  34, 115, 116, 121, 108, 101, // k rel="style
- 115, 104, 101, 101, 116,  34,  32, 104, 114, 101, 102,  61, // sheet" href=
-  34, 115, 116, 121, 108, 101,  46,  99, 115, 115,  34,  32, // "style.css" 
-  47,  62,  10,  32,  32,  60,  47, 104, 101,  97, 100,  62, // />.  </head>
-  10,  32,  32,  60,  98, 111, 100, 121,  62,  60,  47,  98, // .  <body></b
- 111, 100, 121,  62,  10,  32,  32,  60, 115,  99, 114, 105, // ody>.  <scri
- 112, 116,  32, 116, 121, 112, 101,  61,  34, 109, 111, 100, // pt type="mod
- 117, 108, 101,  34,  32, 115, 114,  99,  61,  34, 109,  97, // ule" src="ma
- 105, 110,  46, 106, 115,  34,  62,  60,  47, 115,  99, 114, // in.js"></scr
- 105, 112, 116,  62,  10,  60,  47, 104, 116, 109, 108,  62, // ipt>.</html>
-  10, 0 // .
-};
-static const unsigned char v2[] = {
   39, 117, 115, 101,  32, 115, 116, 114, 105,  99, 116,  39, // 'use strict'
   59,  10, 105, 109, 112, 111, 114, 116,  32, 123,  67, 111, // ;.import {Co
  109, 112, 111, 110, 101, 110, 116,  44,  32, 104,  44,  32, // mponent, h, 
@@ -408,78 +374,46 @@ static const unsigned char v2[] = {
  100,  97, 116, 101, 115, 117,  98,  32,  61,  32, 101, 118, // datesub = ev
   32,  61,  62,  32, 117, 112, 100,  97, 116, 101,  40,  39, //  => update('
  115, 117,  98,  39,  44,  32, 115, 117,  98,  41,  59,  10, // sub', sub);.
-  10,  32,  32,  47,  47,  32,  99, 111, 110, 115, 111, 108, // .  // consol
- 101,  46, 108, 111, 103,  40, 112, 114, 111, 112, 115,  44, // e.log(props,
-  32,  91, 117, 114, 108,  44,  32, 112, 117,  98,  44,  32, //  [url, pub, 
- 115, 117,  98,  93,  41,  59,  10,  32,  32, 114, 101, 116, // sub]);.  ret
- 117, 114, 110,  32, 104, 116, 109, 108,  96,  10,  60, 100, // urn html`.<d
- 105, 118,  32,  99, 108,  97, 115, 115,  61,  34, 115, 101, // iv class="se
-  99, 116, 105, 111, 110,  34,  62,  10,  32,  32,  60, 104, // ction">.  <h
-  51,  32, 115, 116, 121, 108, 101,  61,  34,  98,  97,  99, // 3 style="bac
- 107, 103, 114, 111, 117, 110, 100,  58,  32,  35,  99,  48, // kground: #c0
-  51,  52,  51,  52,  59,  32,  99, 111, 108, 111, 114,  58, // 3434; color:
-  32,  35, 102, 102, 102,  59,  32, 112,  97, 100, 100, 105, //  #fff; paddi
- 110, 103,  58,  32,  48,  46,  52, 101, 109,  59,  34,  62, // ng: 0.4em;">
-  10,  32,  32,  32,  32,  68, 101, 118, 105,  99, 101,  32, // .    Device 
-  67, 111, 110, 102, 105, 103, 117, 114,  97, 116, 105, 111, // Configuratio
- 110,  60,  47, 104,  51,  62,  10,  32,  32,  60, 100, 105, // n</h3>.  <di
- 118,  32, 115, 116, 121, 108, 101,  61,  34, 109,  97, 114, // v style="mar
- 103, 105, 110,  58,  32,  48,  46,  53, 101, 109,  32,  48, // gin: 0.5em 0
-  59,  32, 100, 105, 115, 112, 108,  97, 121,  58,  32, 102, // ; display: f
- 108, 101, 120,  59,  34,  62,  10,  32,  32,  32,  32,  60, // lex;">.    <
- 115, 112,  97, 110,  32,  99, 108,  97, 115, 115,  61,  34, // span class="
-  97, 100, 100, 111, 110,  32, 110, 111, 119, 114,  97, 112, // addon nowrap
-  34,  62,  77,  81,  84,  84,  32, 115, 101, 114, 118, 101, // ">MQTT serve
- 114,  58,  60,  47, 115, 112,  97, 110,  62,  10,  32,  32, // r:</span>.  
-  32,  32,  60, 105, 110, 112, 117, 116,  32, 116, 121, 112, //   <input typ
- 101,  61,  34, 116, 101, 120, 116,  34,  32, 115, 116, 121, // e="text" sty
- 108, 101,  61,  34, 102, 108, 101, 120,  58,  32,  49,  32, // le="flex: 1 
-  49,  48,  48,  37,  59,  34,  10,  32,  32,  32,  32,  32, // 100%;".     
-  32,  32,  32,  32,  32, 118,  97, 108, 117, 101,  61,  36, //      value=$
- 123, 117, 114, 108, 125,  32, 111, 110,  99, 104,  97, 110, // {url} onchan
- 103, 101,  61,  36, 123, 117, 112, 100,  97, 116, 101, 117, // ge=${updateu
- 114, 108, 125,  10,  32,  32,  32,  32,  32,  32,  32,  32, // rl}.        
-  32,  32, 111, 110, 105, 110, 112, 117, 116,  61,  36, 123, //   oninput=${
- 101, 118,  32,  61,  62,  32, 115, 101, 116,  85, 114, 108, // ev => setUrl
-  40, 101, 118,  46, 116,  97, 114, 103, 101, 116,  46, 118, // (ev.target.v
-  97, 108, 117, 101,  41, 125,  32,  47,  62,  10,  32,  32, // alue)} />.  
-  32,  32,  60,  98, 117, 116, 116, 111, 110,  32,  99, 108, //   <button cl
-  97, 115, 115,  61,  34,  98, 116, 110,  34,  32, 100, 105, // ass="btn" di
- 115,  97,  98, 108, 101, 100,  61,  36, 123,  33, 117, 114, // sabled=${!ur
- 108, 125,  32, 111, 110,  99, 108, 105,  99, 107,  61,  36, // l} onclick=$
- 123, 117, 112, 100,  97, 116, 101, 117, 114, 108, 125,  10, // {updateurl}.
-  32,  32,  32,  32,  32,  32, 115, 116, 121, 108, 101,  61, //       style=
-  34, 109,  97, 114, 103, 105, 110,  45, 108, 101, 102, 116, // "margin-left
-  58,  32,  49, 101, 109,  59,  32,  98,  97,  99, 107, 103, // : 1em; backg
- 114, 111, 117, 110, 100,  58,  32,  35,  56,  97,  97,  59, // round: #8aa;
-  34,  62,  85, 112, 100,  97, 116, 101,  60,  47,  98, 117, // ">Update</bu
- 116, 116, 111, 110,  62,  10,  32,  32,  60,  47, 100, 105, // tton>.  </di
- 118,  62,  10,  32,  32,  60, 100, 105, 118,  32, 115, 116, // v>.  <div st
- 121, 108, 101,  61,  34, 109,  97, 114, 103, 105, 110,  58, // yle="margin:
-  32,  48,  46,  53, 101, 109,  32,  48,  59,  32, 100, 105, //  0.5em 0; di
- 115, 112, 108,  97, 121,  58,  32, 102, 108, 101, 120,  59, // splay: flex;
-  32,  34,  62,  10,  32,  32,  32,  32,  60, 115, 112,  97, //  ">.    <spa
+  10,  32,  32,  99, 111, 110, 115, 111, 108, 101,  46, 108, // .  console.l
+ 111, 103,  40, 112, 114, 111, 112, 115,  44,  32,  91, 117, // og(props, [u
+ 114, 108,  44,  32, 112, 117,  98,  44,  32, 115, 117,  98, // rl, pub, sub
+  93,  41,  59,  10,  32,  32, 114, 101, 116, 117, 114, 110, // ]);.  return
+  32, 104, 116, 109, 108,  96,  10,  60, 100, 105, 118,  32, //  html`.<div 
+  99, 108,  97, 115, 115,  61,  34, 115, 101,  99, 116, 105, // class="secti
+ 111, 110,  34,  62,  10,  32,  32,  60, 104,  51,  32, 115, // on">.  <h3 s
+ 116, 121, 108, 101,  61,  34,  98,  97,  99, 107, 103, 114, // tyle="backgr
+ 111, 117, 110, 100,  58,  32,  35,  99,  48,  51,  52,  51, // ound: #c0343
+  52,  59,  32,  99, 111, 108, 111, 114,  58,  32,  35, 102, // 4; color: #f
+ 102, 102,  59,  32, 112,  97, 100, 100, 105, 110, 103,  58, // ff; padding:
+  32,  48,  46,  52, 101, 109,  59,  34,  62,  10,  32,  32, //  0.4em;">.  
+  32,  32,  68, 101, 118, 105,  99, 101,  32,  67, 111, 110, //   Device Con
+ 102, 105, 103, 117, 114,  97, 116, 105, 111, 110,  60,  47, // figuration</
+ 104,  51,  62,  10,  32,  32,  60, 100, 105, 118,  32, 115, // h3>.  <div s
+ 116, 121, 108, 101,  61,  34, 109,  97, 114, 103, 105, 110, // tyle="margin
+  58,  32,  48,  46,  53, 101, 109,  32,  48,  59,  32, 100, // : 0.5em 0; d
+ 105, 115, 112, 108,  97, 121,  58,  32, 102, 108, 101, 120, // isplay: flex
+  59,  34,  62,  10,  32,  32,  32,  32,  60, 115, 112,  97, // ;">.    <spa
  110,  32,  99, 108,  97, 115, 115,  61,  34,  97, 100, 100, // n class="add
- 111, 110,  32, 110, 111, 119, 114,  97, 112,  34,  62,  83, // on nowrap">S
- 117,  98, 115,  99, 114, 105,  98, 101,  32, 116, 111, 112, // ubscribe top
- 105,  99,  58,  60,  47, 115, 112,  97, 110,  62,  10,  32, // ic:</span>. 
-  32,  32,  32,  60, 105, 110, 112, 117, 116,  32, 116, 121, //    <input ty
- 112, 101,  61,  34, 116, 101, 120, 116,  34,  32, 115, 116, // pe="text" st
- 121, 108, 101,  61,  34, 102, 108, 101, 120,  58,  32,  49, // yle="flex: 1
-  32,  49,  48,  48,  37,  59,  34,  10,  32,  32,  32,  32, //  100%;".    
-  32,  32,  32,  32, 118,  97, 108, 117, 101,  61,  36, 123, //     value=${
- 115, 117,  98, 125,  32, 111, 110,  99, 104,  97, 110, 103, // sub} onchang
- 101,  61,  36, 123, 117, 112, 100,  97, 116, 101, 115, 117, // e=${updatesu
-  98, 125,  10,  32,  32,  32,  32,  32,  32,  32,  32, 111, // b}.        o
+ 111, 110,  32, 110, 111, 119, 114,  97, 112,  34,  62,  77, // on nowrap">M
+  81,  84,  84,  32, 115, 101, 114, 118, 101, 114,  58,  60, // QTT server:<
+  47, 115, 112,  97, 110,  62,  10,  32,  32,  32,  32,  60, // /span>.    <
+ 105, 110, 112, 117, 116,  32, 116, 121, 112, 101,  61,  34, // input type="
+ 116, 101, 120, 116,  34,  32, 115, 116, 121, 108, 101,  61, // text" style=
+  34, 102, 108, 101, 120,  58,  32,  49,  32,  49,  48,  48, // "flex: 1 100
+  37,  59,  34,  10,  32,  32,  32,  32,  32,  32,  32,  32, // %;".        
+  32,  32, 118,  97, 108, 117, 101,  61,  36, 123, 117, 114, //   value=${ur
+ 108, 125,  32, 111, 110,  99, 104,  97, 110, 103, 101,  61, // l} onchange=
+  36, 123, 117, 112, 100,  97, 116, 101, 117, 114, 108, 125, // ${updateurl}
+  10,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, 111, // .          o
  110, 105, 110, 112, 117, 116,  61,  36, 123, 101, 118,  32, // ninput=${ev 
-  61,  62,  32, 115, 101, 116,  83, 117,  98,  40, 101, 118, // => setSub(ev
+  61,  62,  32, 115, 101, 116,  85, 114, 108,  40, 101, 118, // => setUrl(ev
   46, 116,  97, 114, 103, 101, 116,  46, 118,  97, 108, 117, // .target.valu
  101,  41, 125,  32,  47,  62,  10,  32,  32,  32,  32,  60, // e)} />.    <
   98, 117, 116, 116, 111, 110,  32,  99, 108,  97, 115, 115, // button class
   61,  34,  98, 116, 110,  34,  32, 100, 105, 115,  97,  98, // ="btn" disab
- 108, 101, 100,  61,  36, 123,  33, 115, 117,  98, 125,  32, // led=${!sub} 
+ 108, 101, 100,  61,  36, 123,  33, 117, 114, 108, 125,  32, // led=${!url} 
  111, 110,  99, 108, 105,  99, 107,  61,  36, 123, 117, 112, // onclick=${up
- 100,  97, 116, 101, 115, 117,  98, 125,  10,  32,  32,  32, // datesub}.   
+ 100,  97, 116, 101, 117, 114, 108, 125,  10,  32,  32,  32, // dateurl}.   
   32,  32,  32, 115, 116, 121, 108, 101,  61,  34, 109,  97, //    style="ma
  114, 103, 105, 110,  45, 108, 101, 102, 116,  58,  32,  49, // rgin-left: 1
  101, 109,  59,  32,  98,  97,  99, 107, 103, 114, 111, 117, // em; backgrou
@@ -489,702 +423,711 @@ static const unsigned char v2[] = {
   32,  32,  60, 100, 105, 118,  32, 115, 116, 121, 108, 101, //   <div style
   61,  34, 109,  97, 114, 103, 105, 110,  58,  32,  48,  46, // ="margin: 0.
   53, 101, 109,  32,  48,  59,  32, 100, 105, 115, 112, 108, // 5em 0; displ
-  97, 121,  58,  32, 102, 108, 101, 120,  59,  34,  62,  10, // ay: flex;">.
-  32,  32,  32,  32,  60, 115, 112,  97, 110,  32,  99, 108, //     <span cl
-  97, 115, 115,  61,  34,  97, 100, 100, 111, 110,  32, 110, // ass="addon n
- 111, 119, 114,  97, 112,  34,  62,  80, 117,  98, 108, 105, // owrap">Publi
- 115, 104,  32, 116, 111, 112, 105,  99,  58,  60,  47, 115, // sh topic:</s
- 112,  97, 110,  62,  10,  32,  32,  32,  32,  60, 105, 110, // pan>.    <in
- 112, 117, 116,  32, 116, 121, 112, 101,  61,  34, 116, 101, // put type="te
- 120, 116,  34,  32, 115, 116, 121, 108, 101,  61,  34, 102, // xt" style="f
- 108, 101, 120,  58,  32,  49,  32,  49,  48,  48,  37,  59, // lex: 1 100%;
-  34,  10,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, // ".          
- 118,  97, 108, 117, 101,  61,  36, 123, 112, 117,  98, 125, // value=${pub}
-  32, 111, 110,  99, 104,  97, 110, 103, 101,  61,  36, 123, //  onchange=${
- 117, 112, 100,  97, 116, 101, 112, 117,  98, 125,  10,  32, // updatepub}. 
-  32,  32,  32,  32,  32,  32,  32,  32,  32, 111, 110, 105, //          oni
- 110, 112, 117, 116,  61,  36, 123, 101, 118,  32,  61,  62, // nput=${ev =>
-  32, 115, 101, 116,  80, 117,  98,  40, 101, 118,  46, 116, //  setPub(ev.t
-  97, 114, 103, 101, 116,  46, 118,  97, 108, 117, 101,  41, // arget.value)
- 125,  32,  47,  62,  10,  32,  32,  32,  32,  60,  98, 117, // } />.    <bu
- 116, 116, 111, 110,  32,  99, 108,  97, 115, 115,  61,  34, // tton class="
-  98, 116, 110,  34,  32, 100, 105, 115,  97,  98, 108, 101, // btn" disable
- 100,  61,  36, 123,  33, 112, 117,  98, 125,  32, 111, 110, // d=${!pub} on
-  99, 108, 105,  99, 107,  61,  36, 123, 117, 112, 100,  97, // click=${upda
- 116, 101, 112, 117,  98, 125,  10,  32,  32,  32,  32,  32, // tepub}.     
-  32, 115, 116, 121, 108, 101,  61,  34, 109,  97, 114, 103, //  style="marg
- 105, 110,  45, 108, 101, 102, 116,  58,  32,  49, 101, 109, // in-left: 1em
-  59,  32,  98,  97,  99, 107, 103, 114, 111, 117, 110, 100, // ; background
-  58,  32,  35,  56,  97,  97,  59,  34,  62,  85, 112, 100, // : #8aa;">Upd
-  97, 116, 101,  60,  47,  98, 117, 116, 116, 111, 110,  62, // ate</button>
-  10,  32,  32,  60,  47, 100, 105, 118,  62,  10,  32,  32, // .  </div>.  
-  60, 100, 105, 118,  62,  10,  32,  32,  32,  32,  89, 111, // <div>.    Yo
- 117,  32,  99,  97, 110,  32, 117, 115, 101,  32,  60,  97, // u can use <a
-  32, 104, 114, 101, 102,  61,  34, 104, 116, 116, 112,  58, //  href="http:
-  47,  47, 119, 119, 119,  46, 104, 105, 118, 101, 109, 113, // //www.hivemq
-  46,  99, 111, 109,  47, 100, 101, 109, 111, 115,  47, 119, // .com/demos/w
- 101,  98, 115, 111,  99, 107, 101, 116,  45,  99, 108, 105, // ebsocket-cli
- 101, 110, 116,  47,  34,  62,  10,  32,  32,  32,  32,  72, // ent/">.    H
- 105, 118, 101,  77,  81,  32,  87, 101,  98, 115, 111,  99, // iveMQ Websoc
- 107, 101, 116,  32, 119, 101,  98,  32,  99, 108, 105, 101, // ket web clie
- 110, 116,  60,  47,  97,  62,  32, 116, 111,  32, 115, 101, // nt</a> to se
- 110, 100,  32, 109, 101, 115, 115,  97, 103, 101, 115,  32, // nd messages 
- 116, 111,  32, 116, 104, 105, 115,  32,  99, 111, 110, 115, // to this cons
- 111, 108, 101,  46,  10,  32,  32,  60,  47, 100, 105, 118, // ole..  </div
-  62,  10,  32,  32,  60, 100, 105, 118,  32,  99, 108,  97, // >.  <div cla
- 115, 115,  61,  34, 109, 115, 103,  34,  62,  10,  32,  32, // ss="msg">.  
-  32,  32,  84, 104, 101,  32, 100, 101, 118, 105,  99, 101, //   The device
-  32, 107, 101, 101, 112, 115,  32,  97,  32, 112, 101, 114, //  keeps a per
- 115, 105, 115, 116, 101, 110, 116,  32,  99, 111, 110, 110, // sistent conn
- 101,  99, 116, 105, 111, 110,  32, 116, 111,  32, 116, 104, // ection to th
- 101,  32,  99, 111, 110, 102, 105, 103, 117, 114, 101, 100, // e configured
-  32,  77,  81,  84,  84,  32, 115, 101, 114, 118, 101, 114, //  MQTT server
-  46,  10,  32,  32,  32,  32,  67, 104,  97, 110, 103, 101, // ..    Change
- 115,  32, 116, 111,  32, 116, 104, 105, 115,  32,  99, 111, // s to this co
- 110, 102, 105, 103, 117, 114,  97, 116, 105, 111, 110,  32, // nfiguration 
-  97, 114, 101,  32, 112, 114, 111, 112,  97, 103,  97, 116, // are propagat
- 101, 100,  32, 116, 111,  32,  97, 108, 108,  32, 100,  97, // ed to all da
- 115, 104,  98, 111,  97, 114, 100, 115,  58,  32, 116, 114, // shboards: tr
- 121,  10,  32,  32,  32,  32,  99, 104,  97, 110, 103, 105, // y.    changi
- 110, 103,  32, 116, 104, 101, 109,  32, 105, 110,  32, 116, // ng them in t
- 104, 105, 115,  32, 100,  97, 115, 104,  98, 111,  97, 114, // his dashboar
- 100,  32,  97, 110, 100,  32, 111,  98, 115, 101, 114, 118, // d and observ
- 101,  32,  99, 104,  97, 110, 103, 101, 115,  32, 105, 110, // e changes in
-  32, 111, 116, 104, 101, 114,  32, 111, 112, 101, 110, 101, //  other opene
- 100,  10,  32,  32,  32,  32, 100,  97, 115, 104,  98, 111, // d.    dashbo
-  97, 114, 100, 115,  46,  10,  32,  32,  60,  47, 100, 105, // ards..  </di
- 118,  62,  60, 100, 105, 118,  32,  99, 108,  97, 115, 115, // v><div class
-  61,  34, 109, 115, 103,  34,  62,  10,  32,  32,  32,  32, // ="msg">.    
-  78, 111, 116, 101,  58,  32,  97, 100, 109, 105, 110, 105, // Note: admini
- 115, 116, 114,  97, 116, 111, 114, 115,  32,  99,  97, 110, // strators can
-  32, 115, 101, 101,  32, 116, 104, 105, 115,  32, 115, 101, //  see this se
-  99, 116, 105, 111, 110,  32,  97, 110, 100,  32,  99,  97, // ction and ca
- 110,  32,  99, 104,  97, 110, 103, 101,  32, 100, 101, 118, // n change dev
- 105,  99, 101,  10,  32,  32,  32,  32,  99, 111, 110, 102, // ice.    conf
- 105, 103, 117, 114,  97, 116, 105, 111, 110,  44,  32, 119, // iguration, w
- 104, 105, 108, 115, 116,  32, 117, 115, 101, 114, 115,  32, // hilst users 
-  99,  97, 110, 110, 111, 116,  46,  10,  32,  32,  60,  47, // cannot..  </
- 100, 105, 118,  62,  10,  60,  47, 100, 105, 118,  62,  96, // div>.</div>`
-  59,  10, 125,  59,  10,  10,  10,  99, 111, 110, 115, 116, // ;.};...const
-  32,  77, 101, 115, 115,  97, 103, 101,  32,  61,  32, 109, //  Message = m
-  32,  61,  62,  32, 104, 116, 109, 108,  96,  60, 100, 105, //  => html`<di
- 118,  32, 115, 116, 121, 108, 101,  61,  34, 109,  97, 114, // v style="mar
- 103, 105, 110,  58,  32,  48,  46,  53, 101, 109,  32,  48, // gin: 0.5em 0
-  59,  34,  62,  10,  32,  32,  60, 115, 112,  97, 110,  32, // ;">.  <span 
-  99, 108,  97, 115, 115,  61,  34, 113, 111, 115,  34,  62, // class="qos">
- 113, 111, 115,  58,  32,  36, 123, 109,  46, 109, 101, 115, // qos: ${m.mes
- 115,  97, 103, 101,  46, 113, 111, 115, 125,  32,  60,  47, // sage.qos} </
- 115, 112,  97, 110,  62,  10,  32,  32,  60, 115, 112,  97, // span>.  <spa
- 110,  32,  99, 108,  97, 115, 115,  61,  34, 116, 111, 112, // n class="top
- 105,  99,  34,  62, 116, 111, 112, 105,  99,  58,  32,  36, // ic">topic: $
- 123, 109,  46, 109, 101, 115, 115,  97, 103, 101,  46, 116, // {m.message.t
- 111, 112, 105,  99, 125,  32,  60,  47, 115, 112,  97, 110, // opic} </span
-  62,  10,  32,  32,  60, 115, 112,  97, 110,  32,  99, 108, // >.  <span cl
-  97, 115, 115,  61,  34, 100,  97, 116,  97,  34,  62, 100, // ass="data">d
-  97, 116,  97,  58,  32,  36, 123, 109,  46, 109, 101, 115, // ata: ${m.mes
- 115,  97, 103, 101,  46, 100,  97, 116,  97, 125,  60,  47, // sage.data}</
- 115, 112,  97, 110,  62,  10,  60,  47, 100, 105, 118,  62, // span>.</div>
-  96,  59,  10,  10,  99, 111, 110, 115, 116,  32,  77, 101, // `;..const Me
- 115, 115,  97, 103, 101, 115,  32,  61,  32, 102, 117, 110, // ssages = fun
-  99, 116, 105, 111, 110,  40, 112, 114, 111, 112, 115,  41, // ction(props)
-  32, 123,  10,  32,  32,  99, 111, 110, 115, 116,  32,  91, //  {.  const [
- 109, 101, 115, 115,  97, 103, 101, 115,  44,  32, 115, 101, // messages, se
- 116,  77, 101, 115, 115,  97, 103, 101, 115,  93,  32,  61, // tMessages] =
-  32, 117, 115, 101,  83, 116,  97, 116, 101,  40,  91,  93, //  useState([]
-  41,  59,  10,  32,  32,  99, 111, 110, 115, 116,  32,  91, // );.  const [
- 116, 120, 116,  44,  32, 115, 101, 116,  84, 120, 116,  93, // txt, setTxt]
-  32,  61,  32, 117, 115, 101,  83, 116,  97, 116, 101,  40, //  = useState(
-  39,  39,  41,  59,  10,  10,  32,  32, 117, 115, 101,  69, // '');..  useE
- 102, 102, 101,  99, 116,  40,  40,  41,  32,  61,  62,  32, // ffect(() => 
- 123,  10,  32,  32,  32,  32,  99, 111, 110, 115, 116,  32, // {.    const 
- 105, 100,  32,  61,  32,  80, 117,  98,  83, 117,  98,  46, // id = PubSub.
- 115, 117,  98, 115,  99, 114, 105,  98, 101,  40, 102, 117, // subscribe(fu
- 110,  99, 116, 105, 111, 110,  40, 109, 115, 103,  41,  32, // nction(msg) 
- 123,  10,  32,  32,  32,  32,  32,  32, 105, 102,  32,  40, // {.      if (
- 109, 115, 103,  46, 110,  97, 109, 101,  32,  61,  61,  32, // msg.name == 
-  39, 109, 101, 115, 115,  97, 103, 101,  39,  41,  32, 115, // 'message') s
- 101, 116,  77, 101, 115, 115,  97, 103, 101, 115,  40, 120, // etMessages(x
-  32,  61,  62,  32, 120,  46,  99, 111, 110,  99,  97, 116, //  => x.concat
-  40,  91, 109, 115, 103,  46, 100,  97, 116,  97,  93,  41, // ([msg.data])
-  41,  59,  10,  32,  32,  32,  32, 125,  41,  59,  10,  32, // );.    });. 
-  32,  32,  32, 114, 101, 116, 117, 114, 110,  32,  80, 117, //    return Pu
-  98,  83, 117,  98,  46, 117, 110, 115, 117,  98, 115,  99, // bSub.unsubsc
- 114, 105,  98, 101,  40, 105, 100,  41,  59,  10,  32,  32, // ribe(id);.  
- 125,  44,  32,  91,  93,  41,  59,  10,  10,  32,  32,  99, // }, []);..  c
- 111, 110, 115, 116,  32, 115, 101, 110, 100, 109, 101, 115, // onst sendmes
- 115,  97, 103, 101,  32,  61,  32, 101, 118,  32,  61,  62, // sage = ev =>
-  32, 102, 101, 116,  99, 104,  40,  39,  47,  97, 112, 105, //  fetch('/api
-  47, 109, 101, 115, 115,  97, 103, 101,  47, 115, 101, 110, // /message/sen
- 100,  39,  44,  32, 123,  10,  32,  32,  32,  32,  32,  32, // d', {.      
-  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
-  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
- 109, 101, 116, 104, 111, 100,  58,  32,  39, 112, 111, 115, // method: 'pos
- 116,  39,  44,  10,  32,  32,  32,  32,  32,  32,  32,  32, // t',.        
-  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
-  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  98, 111, //           bo
- 100, 121,  58,  32,  96, 109, 101, 115, 115,  97, 103, 101, // dy: `message
-  61,  36, 123, 101, 110,  99, 111, 100, 101,  85,  82,  73, // =${encodeURI
-  67, 111, 109, 112, 111, 110, 101, 110, 116,  40, 116, 120, // Component(tx
- 116,  41, 125,  96,  10,  32,  32,  32,  32,  32,  32,  32, // t)}`.       
-  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
-  32,  32,  32,  32,  32,  32,  32,  32,  32, 125,  41,  46, //          }).
- 116, 104, 101, 110,  40, 114,  32,  61,  62,  32, 115, 101, // then(r => se
- 116,  84, 120, 116,  40,  39,  39,  41,  41,  59,  10,  32, // tTxt(''));. 
-  32,  99, 111, 110, 115, 116,  32,  99, 111, 110, 110, 115, //  const conns
- 116,  97, 116, 117, 115,  32,  61,  32, 112, 114, 111, 112, // tatus = prop
- 115,  46,  99, 111, 110, 102, 105, 103,  46,  99, 111, 110, // s.config.con
- 110, 101,  99, 116, 101, 100,  32,  63,  32,  39,  99, 111, // nected ? 'co
- 110, 110, 101,  99, 116, 101, 100,  39,  32,  58,  32,  39, // nnected' : '
- 100, 105, 115,  99, 111, 110, 110, 101,  99, 116, 101, 100, // disconnected
-  39,  59,  10,  32,  32, 114, 101, 116, 117, 114, 110,  32, // ';.  return 
- 104, 116, 109, 108,  96,  10,  60, 100, 105, 118,  32,  99, // html`.<div c
- 108,  97, 115, 115,  61,  34, 115, 101,  99, 116, 105, 111, // lass="sectio
- 110,  34,  62,  10,  32,  32,  60, 104,  51,  32, 115, 116, // n">.  <h3 st
- 121, 108, 101,  61,  34,  98,  97,  99, 107, 103, 114, 111, // yle="backgro
- 117, 110, 100,  58,  32,  35,  51,  48,  99,  48,  52,  48, // und: #30c040
-  59,  32,  99, 111, 108, 111, 114,  58,  32,  35, 102, 102, // ; color: #ff
- 102,  59,  32, 112,  97, 100, 100, 105, 110, 103,  58,  32, // f; padding: 
-  48,  46,  52, 101, 109,  59,  34,  62,  77,  81,  84,  84, // 0.4em;">MQTT
-  32, 109, 101, 115, 115,  97, 103, 101, 115,  60,  47, 104, //  messages</h
-  51,  62,  10,  32,  32,  60, 100, 105, 118,  62,  10,  32, // 3>.  <div>. 
-  32,  32,  32,  77,  81,  84,  84,  32, 115, 101, 114, 118, //    MQTT serv
- 101, 114,  32, 115, 116,  97, 116, 117, 115,  58,  32,  60, // er status: <
-  98,  62,  36, 123,  99, 111, 110, 110, 115, 116,  97, 116, // b>${connstat
- 117, 115, 125,  60,  47,  98,  62,  10,  32,  32,  60,  47, // us}</b>.  </
- 100, 105, 118,  62,  10,  32,  32,  60, 100, 105, 118,  32, // div>.  <div 
- 115, 116, 121, 108, 101,  61,  34, 104, 101, 105, 103, 104, // style="heigh
- 116,  58,  32,  49,  48, 101, 109,  59,  32, 111, 118, 101, // t: 10em; ove
- 114, 102, 108, 111, 119,  58,  32,  97, 117, 116, 111,  59, // rflow: auto;
-  32, 112,  97, 100, 100, 105, 110, 103,  58,  32,  48,  46, //  padding: 0.
-  53, 101, 109,  59,  32,  34,  32,  99, 108,  97, 115, 115, // 5em; " class
-  61,  34,  98, 111, 114, 100, 101, 114,  34,  62,  10,  32, // ="border">. 
-  32,  32,  32,  36, 123, 109, 101, 115, 115,  97, 103, 101, //    ${message
- 115,  46, 109,  97, 112,  40, 109, 101, 115, 115,  97, 103, // s.map(messag
- 101,  32,  61,  62,  32, 104,  40,  77, 101, 115, 115,  97, // e => h(Messa
- 103, 101,  44,  32, 123, 109, 101, 115, 115,  97, 103, 101, // ge, {message
- 125,  41,  41, 125,  10,  32,  32,  60,  47, 100, 105, 118, // }))}.  </div
-  62,  10,  32,  32,  60, 100, 105, 118,  32, 115, 116, 121, // >.  <div sty
- 108, 101,  61,  34, 109,  97, 114, 103, 105, 110,  58,  32, // le="margin: 
-  48,  46,  53, 101, 109,  32,  48,  59,  32, 100, 105, 115, // 0.5em 0; dis
- 112, 108,  97, 121,  58,  32, 102, 108, 101, 120,  34,  62, // play: flex">
+  97, 121,  58,  32, 102, 108, 101, 120,  59,  32,  34,  62, // ay: flex; ">
   10,  32,  32,  32,  32,  60, 115, 112,  97, 110,  32,  99, // .    <span c
  108,  97, 115, 115,  61,  34,  97, 100, 100, 111, 110,  32, // lass="addon 
- 110, 111, 119, 114,  97, 112,  34,  62,  80, 117,  98, 108, // nowrap">Publ
- 105, 115, 104,  32, 109, 101, 115, 115,  97, 103, 101,  58, // ish message:
+ 110, 111, 119, 114,  97, 112,  34,  62,  83, 117,  98, 115, // nowrap">Subs
+  99, 114, 105,  98, 101,  32, 116, 111, 112, 105,  99,  58, // cribe topic:
   60,  47, 115, 112,  97, 110,  62,  10,  32,  32,  32,  32, // </span>.    
-  60, 105, 110, 112, 117, 116,  32, 112, 108,  97,  99, 101, // <input place
- 104, 111, 108, 100, 101, 114,  61,  34, 116, 121, 112, 101, // holder="type
-  32,  97, 110, 100,  32, 112, 114, 101, 115, 115,  32, 101, //  and press e
- 110, 116, 101, 114,  46,  46,  46,  34,  32, 115, 116, 121, // nter..." sty
- 108, 101,  61,  34, 102, 108, 101, 120,  58,  32,  49,  32, // le="flex: 1 
-  49,  48,  48,  37,  59,  34,  10,  32,  32,  32,  32,  32, // 100%;".     
-  32, 118,  97, 108, 117, 101,  61,  36, 123, 116, 120, 116, //  value=${txt
+  60, 105, 110, 112, 117, 116,  32, 116, 121, 112, 101,  61, // <input type=
+  34, 116, 101, 120, 116,  34,  32, 115, 116, 121, 108, 101, // "text" style
+  61,  34, 102, 108, 101, 120,  58,  32,  49,  32,  49,  48, // ="flex: 1 10
+  48,  37,  59,  34,  10,  32,  32,  32,  32,  32,  32,  32, // 0%;".       
+  32, 118,  97, 108, 117, 101,  61,  36, 123, 115, 117,  98, //  value=${sub
  125,  32, 111, 110,  99, 104,  97, 110, 103, 101,  61,  36, // } onchange=$
- 123, 115, 101, 110, 100, 109, 101, 115, 115,  97, 103, 101, // {sendmessage
- 125,  10,  32,  32,  32,  32,  32,  32, 111, 110, 105, 110, // }.      onin
+ 123, 117, 112, 100,  97, 116, 101, 115, 117,  98, 125,  10, // {updatesub}.
+  32,  32,  32,  32,  32,  32,  32,  32, 111, 110, 105, 110, //         onin
  112, 117, 116,  61,  36, 123, 101, 118,  32,  61,  62,  32, // put=${ev => 
- 115, 101, 116,  84, 120, 116,  40, 101, 118,  46, 116,  97, // setTxt(ev.ta
+ 115, 101, 116,  83, 117,  98,  40, 101, 118,  46, 116,  97, // setSub(ev.ta
  114, 103, 101, 116,  46, 118,  97, 108, 117, 101,  41, 125, // rget.value)}
-  32,  47,  62,  10,  32,  32,  60,  47, 100, 105, 118,  62, //  />.  </div>
-  10,  32,  32,  60, 100, 105, 118,  32,  99, 108,  97, 115, // .  <div clas
- 115,  61,  34, 109, 115, 103,  34,  62,  10,  32,  32,  32, // s="msg">.   
-  32,  84, 104, 101,  32, 109, 101, 115, 115,  97, 103, 101, //  The message
-  32, 103, 101, 116, 115,  32, 112,  97, 115, 115, 101, 100, //  gets passed
-  32, 116, 111,  32, 116, 104, 101,  32, 100, 101, 118, 105, //  to the devi
-  99, 101,  32, 118, 105,  97,  32,  82,  69,  83,  84,  46, // ce via REST.
-  32,  84, 104, 101, 110,  32, 116, 104, 101,  32, 100, 101, //  Then the de
- 118, 105,  99, 101,  32, 115, 101, 110, 100, 115,  32, 105, // vice sends i
- 116,  32, 116, 111,  10,  32,  32,  32,  32, 116, 104, 101, // t to.    the
-  32,  77,  81,  84,  84,  32, 115, 101, 114, 118, 101, 114, //  MQTT server
-  32, 111, 118, 101, 114,  32,  77,  81,  84,  84,  46,  32, //  over MQTT. 
-  65, 108, 108,  32,  77,  81,  84,  84,  32, 109, 101, 115, // All MQTT mes
- 115,  97, 103, 101, 115,  32, 111, 110,  32,  97,  32, 115, // sages on a s
- 117,  98, 115,  99, 114, 105,  98, 101, 100,  32, 116, 111, // ubscribed to
- 112, 105,  99,  10,  32,  32,  32,  32, 114, 101,  99, 101, // pic.    rece
- 105, 118, 101, 100,  32,  98, 121,  32, 116, 104, 101,  32, // ived by the 
- 100, 101, 118, 105,  99, 101,  44,  32,  97, 114, 101,  32, // device, are 
- 112, 114, 111, 112,  97, 103,  97, 116, 101, 100,  32, 116, // propagated t
- 111,  32, 116, 104, 105, 115,  32, 100,  97, 115, 104,  98, // o this dashb
- 111,  97, 114, 100,  32, 118, 105,  97,  32,  47,  97, 112, // oard via /ap
- 105,  47, 119,  97, 116,  99, 104,  46,  10,  32,  32,  60, // i/watch..  <
-  47, 100, 105, 118,  62,  10,  60,  47, 100, 105, 118,  62, // /div>.</div>
-  96,  59,  10, 125,  59,  10,  10,  47,  47,  32,  69, 120, // `;.};..// Ex
- 112, 101,  99, 116, 101, 100,  32,  97, 114, 103, 117, 109, // pected argum
- 101, 110, 116, 115,  58,  10,  47,  47,  32, 100,  97, 116, // ents:.// dat
-  97,  58,  32, 116, 105, 109, 101, 115, 101, 114, 105, 101, // a: timeserie
- 115,  44,  32, 101,  46, 103,  46,  32,  91,  32,  91,  49, // s, e.g. [ [1
-  54,  53,  52,  51,  54,  49,  51,  53,  50,  44,  32,  49, // 654361352, 1
-  57,  93,  44,  32,  91,  49,  54,  53,  52,  51,  54,  49, // 9], [1654361
-  51,  53,  51,  44,  32,  49,  56,  93,  44,  32,  46,  46, // 353, 18], ..
-  46,  32,  93,  10,  47,  47,  32, 119, 105, 100, 116, 104, // . ].// width
-  44,  32, 104, 101, 105, 103, 104, 116,  44,  32, 121, 116, // , height, yt
- 105,  99, 107, 115,  44,  32, 120, 116, 105,  99, 107, 115, // icks, xticks
-  44,  32, 121, 109, 105, 110,  44,  32, 121, 109,  97, 120, // , ymin, ymax
-  44,  32, 120, 109, 105, 110,  44,  32, 120, 109,  97, 120, // , xmin, xmax
-  10,  99, 111, 110, 115, 116,  32,  83,  86,  71,  32,  61, // .const SVG =
-  32, 102, 117, 110,  99, 116, 105, 111, 110,  40, 112, 114, //  function(pr
- 111, 112, 115,  41,  32, 123,  10,  32,  32,  47,  47,  32, // ops) {.  // 
-  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, 119, //            w
-  10,  32,  32,  47,  47,  32,  32,  32,  43,  45,  45,  45, // .  //   +---
-  45,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45, // ------------
-  45,  45,  45,  45,  45,  45,  43,  10,  32,  32,  47,  47, // ------+.  //
-  32,  32,  32, 124,  32,  32,  32,  32,  32,  32,  32,  32, //    |        
- 104,  49,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, // h1          
-  32, 124,  10,  32,  32,  47,  47,  32,  32,  32, 124,  32, //  |.  //   | 
-  32,  32,  32,  43,  45,  45,  45,  45,  45,  45,  45,  45, //    +--------
-  45,  45,  45,  43,  32,  32,  32,  32, 124,  10,  32,  32, // ---+    |.  
-  47,  47,  32,  32,  32, 124,  32,  32,  32,  32, 124,  32, // //   |    | 
-  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, 124,  32, //           | 
-  32,  32,  32, 124,  32,  32, 104,  10,  32,  32,  47,  47, //    |  h.  //
-  32,  32,  32, 124,  32, 119,  49,  32, 124,  32,  32,  32, //    | w1 |   
-  32,  32,  32,  32,  32,  32,  32,  32, 124,  32, 119,  50, //         | w2
-  32, 124,  10,  32,  32,  47,  47,  32,  32,  32, 124,  32, //  |.  //   | 
-  32,  32,  32,  43,  45,  45,  45,  45,  45,  45,  45,  45, //    +--------
-  45,  45,  45,  43,  32,  32,  32,  32, 124,  10,  32,  32, // ---+    |.  
-  47,  47,  32,  32,  32, 124,  32,  32,  32,  32,  32,  32, // //   |      
-  32,  32,  32, 104,  50,  32,  32,  32,  32,  32,  32,  32, //    h2       
-  32,  32,  32, 124,  10,  32,  32,  47,  47,  32,  32,  32, //    |.  //   
-  43,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45, // +-----------
-  45,  45,  45,  45,  45,  45,  45,  45,  45,  45,  43,  10, // ----------+.
-  32,  32,  47,  47,  10,  32,  32, 108, 101, 116,  32, 119, //   //.  let w
-  32,  61,  32, 112, 114, 111, 112, 115,  46, 119, 105, 100, //  = props.wid
- 116, 104,  44,  32, 104,  32,  61,  32, 112, 114, 111, 112, // th, h = prop
- 115,  46, 104, 101, 105, 103, 104, 116,  44,  32, 119,  49, // s.height, w1
-  32,  61,  32,  51,  48,  44,  32, 119,  50,  32,  61,  32, //  = 30, w2 = 
-  48,  44,  32, 104,  49,  32,  61,  32,  56,  44,  32, 104, // 0, h1 = 8, h
-  50,  32,  61,  32,  49,  56,  59,  10,  32,  32, 108, 101, // 2 = 18;.  le
- 116,  32, 121, 116, 105,  99, 107, 115,  32,  61,  32, 112, // t yticks = p
- 114, 111, 112, 115,  46, 121, 116, 105,  99, 107, 115,  32, // rops.yticks 
- 124, 124,  32,  52,  44,  32, 120, 116, 105,  99, 107, 115, // || 4, xticks
-  32,  61,  32, 112, 114, 111, 112, 115,  46, 120, 116, 105, //  = props.xti
-  99, 107, 115,  32, 124, 124,  32,  53,  59,  10,  32,  32, // cks || 5;.  
- 108, 101, 116,  32, 100,  97, 116,  97,  32,  61,  32, 112, // let data = p
- 114, 111, 112, 115,  46, 100,  97, 116,  97,  32, 124, 124, // rops.data ||
-  32,  91,  93,  59,  10,  32,  32, 108, 101, 116,  32, 121, //  [];.  let y
- 109, 105, 110,  32,  61,  32, 112, 114, 111, 112, 115,  46, // min = props.
- 121, 109, 105, 110,  32, 124, 124,  32,  48,  59,  10,  32, // ymin || 0;. 
-  32, 108, 101, 116,  32, 121, 109,  97, 120,  32,  61,  32, //  let ymax = 
- 112, 114, 111, 112, 115,  46, 121, 109,  97, 120,  32, 124, // props.ymax |
- 124,  32,  77,  97, 116, 104,  46, 109,  97, 120,  46,  97, // | Math.max.a
- 112, 112, 108, 121,  40, 110, 117, 108, 108,  44,  32, 100, // pply(null, d
-  97, 116,  97,  46, 109,  97, 112,  40, 112,  32,  61,  62, // ata.map(p =>
-  32, 112,  91,  49,  93,  41,  41,  59,  10,  32,  32, 108, //  p[1]));.  l
- 101, 116,  32, 120, 109, 105, 110,  32,  61,  32, 112, 114, // et xmin = pr
- 111, 112, 115,  46, 120, 109, 105, 110,  32, 124, 124,  32, // ops.xmin || 
-  77,  97, 116, 104,  46, 109, 105, 110,  46,  97, 112, 112, // Math.min.app
- 108, 121,  40, 110, 117, 108, 108,  44,  32, 100,  97, 116, // ly(null, dat
-  97,  46, 109,  97, 112,  40, 112,  32,  61,  62,  32, 112, // a.map(p => p
-  91,  48,  93,  41,  41,  59,  10,  32,  32, 108, 101, 116, // [0]));.  let
-  32, 120, 109,  97, 120,  32,  61,  32, 112, 114, 111, 112, //  xmax = prop
- 115,  46, 120, 109,  97, 120,  32, 124, 124,  32,  77,  97, // s.xmax || Ma
- 116, 104,  46, 109,  97, 120,  46,  97, 112, 112, 108, 121, // th.max.apply
-  40, 110, 117, 108, 108,  44,  32, 100,  97, 116,  97,  46, // (null, data.
- 109,  97, 112,  40, 112,  32,  61,  62,  32, 112,  91,  48, // map(p => p[0
-  93,  41,  41,  59,  10,  10,  32,  32,  47,  47,  32,  89, // ]));..  // Y
-  45,  97, 120, 105, 115,  32, 116, 105,  99, 107,  32, 108, // -axis tick l
- 105, 110, 101, 115,  32,  97, 110, 100,  32, 108,  97,  98, // ines and lab
- 101, 108, 115,  10,  32,  32, 108, 101, 116,  32, 121, 116, // els.  let yt
-  97,  32,  61,  32,  40, 110, 101, 119,  32,  65, 114, 114, // a = (new Arr
-  97, 121,  40, 121, 116, 105,  99, 107, 115,  32,  43,  32, // ay(yticks + 
-  49,  41,  41,  46, 102, 105, 108, 108,  40,  48,  41,  46, // 1)).fill(0).
- 109,  97, 112,  40,  40,  95,  44,  32, 105,  41,  32,  61, // map((_, i) =
-  62,  32, 105,  41,  59,  32,  32,  47,  47,  32, 105, 110, // > i);  // in
- 100, 105,  99, 101, 115,  10,  32,  32, 108, 101, 116,  32, // dices.  let 
- 121, 116, 105,  32,  61,  32, 105,  32,  61,  62,  32, 104, // yti = i => h
-  32,  45,  32, 104,  50,  32,  45,  32,  40, 104,  32,  45, //  - h2 - (h -
-  32, 104,  49,  32,  45,  32, 104,  50,  41,  32,  42,  32, //  h1 - h2) * 
- 105,  32,  47,  32, 121, 116, 105,  99, 107, 115,  59,  32, // i / yticks; 
-  32,  32,  32,  32,  32,  32,  32,  32,  32,  47,  47,  32, //          // 
- 105, 110, 100, 101, 120,  39, 115,  32,  89,  10,  32,  32, // index's Y.  
- 108, 101, 116,  32, 121, 116, 118,  32,  61,  32, 105,  32, // let ytv = i 
-  61,  62,  32,  40, 121, 109,  97, 120,  32,  45,  32, 121, // => (ymax - y
- 109, 105, 110,  41,  32,  42,  32, 105,  32,  47,  32, 121, // min) * i / y
- 116, 105,  99, 107, 115,  59,  10,  32,  32, 108, 101, 116, // ticks;.  let
-  32, 121, 116, 108,  32,  61,  32, 121,  32,  61,  62,  32, //  ytl = y => 
- 104, 116, 109, 108,  96,  60, 108, 105, 110, 101,  32, 120, // html`<line x
-  49,  61,  36, 123, 119,  49, 125,  32, 121,  49,  61,  36, // 1=${w1} y1=$
- 123, 121, 125,  32, 120,  50,  61,  36, 123, 119, 125,  32, // {y} x2=${w} 
- 121,  50,  61,  36, 123, 121, 125,  32,  99, 108,  97, 115, // y2=${y} clas
- 115,  61,  34, 116, 105,  99, 107,  34,  47,  62,  96,  59, // s="tick"/>`;
-  10,  32,  32, 108, 101, 116,  32, 121, 116, 116,  32,  61, // .  let ytt =
-  32,  40, 121,  44,  32, 118,  41,  32,  61,  62,  32, 104, //  (y, v) => h
- 116, 109, 108,  96,  60, 116, 101, 120, 116,  32, 120,  61, // tml`<text x=
-  48,  32, 121,  61,  36, 123, 121,  32,  43,  32,  53, 125, // 0 y=${y + 5}
-  32,  99, 108,  97, 115, 115,  61,  34, 108,  97,  98, 101, //  class="labe
- 108,  34,  62,  36, 123, 118, 125,  60,  47, 116, 101, 120, // l">${v}</tex
- 116,  62,  96,  59,  10,  10,  32,  32,  47,  47,  32,  88, // t>`;..  // X
-  45,  97, 120, 105, 115,  32, 116, 105,  99, 107,  32, 108, // -axis tick l
- 105, 110, 101, 115,  32,  97, 110, 100,  32, 108,  97,  98, // ines and lab
- 101, 108, 115,  10,  32,  32, 108, 101, 116,  32, 100,  97, // els.  let da
- 116, 101, 102, 109, 116,  32,  61,  32, 117, 110, 105, 120, // tefmt = unix
-  32,  61,  62,  32,  40, 110, 101, 119,  32,  68,  97, 116, //  => (new Dat
- 101,  40, 117, 110, 105, 120,  32,  42,  32,  49,  48,  48, // e(unix * 100
-  48,  41,  41,  46, 116, 111,  73,  83,  79,  83, 116, 114, // 0)).toISOStr
- 105, 110, 103,  40,  41,  46, 115, 117,  98, 115, 116, 114, // ing().substr
-  40,  49,  52,  44,  32,  53,  41,  59,  10,  32,  32, 108, // (14, 5);.  l
- 101, 116,  32, 120, 116,  97,  32,  61,  32,  40, 110, 101, // et xta = (ne
- 119,  32,  65, 114, 114,  97, 121,  40, 120, 116, 105,  99, // w Array(xtic
- 107, 115,  32,  43,  32,  49,  41,  41,  46, 102, 105, 108, // ks + 1)).fil
- 108,  40,  48,  41,  46, 109,  97, 112,  40,  40,  95,  44, // l(0).map((_,
-  32, 105,  41,  32,  61,  62,  32, 105,  41,  59,  32,  32, //  i) => i);  
-  47,  47,  32, 105, 110, 100, 105,  99, 101, 115,  10,  32, // // indices. 
-  32, 108, 101, 116,  32, 120, 116, 105,  32,  61,  32, 105, //  let xti = i
-  32,  61,  62,  32, 119,  49,  32,  43,  32,  40, 119,  32, //  => w1 + (w 
-  45,  32, 119,  49,  32,  45,  32, 119,  50,  41,  32,  42, // - w1 - w2) *
-  32, 105,  32,  47,  32, 120, 116, 105,  99, 107, 115,  59, //  i / xticks;
-  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
-  32,  32,  47,  47,  32, 105, 110, 100, 101, 120,  39, 115, //   // index's
-  32,  88,  10,  32,  32, 108, 101, 116,  32, 120, 116, 118, //  X.  let xtv
-  32,  61,  32, 105,  32,  61,  62,  32, 100,  97, 116, 101, //  = i => date
- 102, 109, 116,  40, 120, 109, 105, 110,  32,  43,  32,  40, // fmt(xmin + (
- 120, 109,  97, 120,  32,  45,  32, 120, 109, 105, 110,  41, // xmax - xmin)
-  32,  42,  32, 105,  32,  47,  32, 120, 116, 105,  99, 107, //  * i / xtick
- 115,  41,  59,  10,  32,  32, 108, 101, 116,  32, 120, 116, // s);.  let xt
- 108,  32,  61,  32, 120,  32,  61,  62,  32, 104, 116, 109, // l = x => htm
- 108,  96,  60, 112,  97, 116, 104,  32, 100,  61,  34,  77, // l`<path d="M
-  32,  36, 123, 120, 125,  44,  36, 123, 104,  49, 125,  32, //  ${x},${h1} 
-  76,  32,  36, 123, 120, 125,  44,  36, 123, 104,  32,  45, // L ${x},${h -
-  32, 104,  50, 125,  34,  32,  99, 108,  97, 115, 115,  61, //  h2}" class=
-  34, 116, 105,  99, 107,  34,  47,  62,  96,  59,  10,  32, // "tick"/>`;. 
-  32, 108, 101, 116,  32, 120, 116, 116,  32,  61,  32,  40, //  let xtt = (
- 120,  44,  32, 118,  41,  32,  61,  62,  10,  32,  32,  32, // x, v) =>.   
-  32,  32,  32, 104, 116, 109, 108,  96,  60, 116, 101, 120, //    html`<tex
- 116,  32, 120,  61,  36, 123, 120,  32,  45,  32,  49,  53, // t x=${x - 15
- 125,  32, 121,  61,  36, 123, 104,  32,  45,  32,  50, 125, // } y=${h - 2}
-  32,  99, 108,  97, 115, 115,  61,  34, 108,  97,  98, 101, //  class="labe
- 108,  34,  62,  36, 123, 118, 125,  60,  47, 116, 101, 120, // l">${v}</tex
- 116,  62,  96,  59,  10,  10,  32,  32,  47,  47,  32,  84, // t>`;..  // T
- 114,  97, 110, 115, 102, 111, 114, 109,  32, 100,  97, 116, // ransform dat
-  97,  32, 112, 111, 105, 110, 116, 115,  32,  97, 114, 114, // a points arr
-  97, 121,  32, 105, 110, 116, 111,  32,  99, 111, 111, 114, // ay into coor
- 100, 105, 110,  97, 116, 101,  10,  32,  32, 108, 101, 116, // dinate.  let
-  32, 100, 120,  32,  61,  32, 118,  32,  61,  62,  32, 119, //  dx = v => w
-  49,  32,  43,  32,  40, 118,  32,  45,  32, 120, 109, 105, // 1 + (v - xmi
- 110,  41,  32,  47,  32,  40,  40, 120, 109,  97, 120,  32, // n) / ((xmax 
-  45,  32, 120, 109, 105, 110,  41,  32, 124, 124,  32,  49, // - xmin) || 1
-  41,  32,  42,  32,  40, 119,  32,  45,  32, 119,  49,  32, // ) * (w - w1 
-  45,  32, 119,  50,  41,  59,  10,  32,  32, 108, 101, 116, // - w2);.  let
-  32, 100, 121,  32,  61,  32, 118,  32,  61,  62,  32, 104, //  dy = v => h
-  32,  45,  32, 104,  50,  32,  45,  32,  40, 118,  32,  45, //  - h2 - (v -
-  32, 121, 109, 105, 110,  41,  32,  47,  32,  40,  40, 121, //  ymin) / ((y
- 109,  97, 120,  32,  45,  32, 121, 109, 105, 110,  41,  32, // max - ymin) 
- 124, 124,  32,  49,  41,  32,  42,  32,  40, 104,  32,  45, // || 1) * (h -
-  32, 104,  49,  32,  45,  32, 104,  50,  41,  59,  10,  32, //  h1 - h2);. 
-  32, 108, 101, 116,  32, 100, 100,  32,  61,  32, 100,  97, //  let dd = da
- 116,  97,  46, 109,  97, 112,  40, 112,  32,  61,  62,  32, // ta.map(p => 
-  91,  77,  97, 116, 104,  46, 114, 111, 117, 110, 100,  40, // [Math.round(
- 100, 120,  40, 112,  91,  48,  93,  41,  41,  44,  32,  77, // dx(p[0])), M
-  97, 116, 104,  46, 114, 111, 117, 110, 100,  40, 100, 121, // ath.round(dy
-  40, 112,  91,  49,  93,  41,  41,  93,  41,  59,  10,  32, // (p[1]))]);. 
-  32, 108, 101, 116,  32, 100, 100, 108,  32,  61,  32, 100, //  let ddl = d
- 100,  46, 108, 101, 110, 103, 116, 104,  59,  10,  32,  32, // d.length;.  
-  47,  47,  32,  65, 110, 100,  32, 112, 108, 111, 116,  32, // // And plot 
- 116, 104, 101,  32, 100,  97, 116,  97,  32,  97, 115,  32, // the data as 
-  60, 112,  97, 116, 104,  62,  32, 101, 108, 101, 109, 101, // <path> eleme
- 110, 116,  10,  32,  32, 108, 101, 116,  32,  98, 101, 103, // nt.  let beg
- 105, 110,  48,  32,  61,  32, 100, 100, 108,  32,  63,  32, // in0 = ddl ? 
-  96,  77,  32,  36, 123, 100, 100,  91,  48,  93,  91,  48, // `M ${dd[0][0
-  93, 125,  44,  36, 123, 100, 100,  91,  48,  93,  91,  49, // ]},${dd[0][1
-  93, 125,  96,  32,  58,  32,  96,  77,  32,  48,  44,  48, // ]}` : `M 0,0
-  96,  59,  10,  32,  32, 108, 101, 116,  32,  98, 101, 103, // `;.  let beg
- 105, 110,  32,  61,  32,  96,  77,  32,  36, 123, 119,  49, // in = `M ${w1
- 125,  44,  36, 123, 104,  32,  45,  32, 104,  50, 125,  96, // },${h - h2}`
-  59,  32,  32,  47,  47,  32,  73, 110, 105, 116, 105,  97, // ;  // Initia
- 108,  32, 112, 111, 105, 110, 116,  10,  32,  32, 108, 101, // l point.  le
- 116,  32, 101, 110, 100,  32,  61,  32, 100, 100, 108,  32, // t end = ddl 
-  63,  32,  96,  76,  32,  36, 123, 100, 100,  91, 100, 100, // ? `L ${dd[dd
- 108,  32,  45,  32,  49,  93,  91,  48,  93, 125,  44,  36, // l - 1][0]},$
- 123, 104,  32,  45,  32, 104,  50, 125,  96,  32,  58,  32, // {h - h2}` : 
-  96,  76,  32,  36, 123, 119,  49, 125,  44,  36, 123, 104, // `L ${w1},${h
-  32,  45,  32, 104,  50, 125,  96,  59,  10,  32,  32, 108, //  - h2}`;.  l
- 101, 116,  32, 115, 101, 114, 105, 101, 115,  32,  61,  32, // et series = 
- 100, 100, 108,  32,  63,  32, 100, 100,  46, 109,  97, 112, // ddl ? dd.map
-  40, 112,  32,  61,  62,  32,  96,  76,  32,  36, 123, 112, // (p => `L ${p
-  91,  48,  93, 125,  32,  36, 123, 112,  91,  49,  93, 125, // [0]} ${p[1]}
-  96,  41,  32,  58,  32,  91,  93,  59,  10,  10,  32,  32, // `) : [];..  
- 114, 101, 116, 117, 114, 110,  32, 104, 116, 109, 108,  96, // return html`
-  10,  60, 115, 118, 103,  32, 118, 105, 101, 119,  66, 111, // .<svg viewBo
- 120,  61,  34,  48,  32,  48,  32,  36, 123, 119, 125,  32, // x="0 0 ${w} 
-  36, 123, 104, 125,  34,  62,  10,  32,  32,  60, 115, 116, // ${h}">.  <st
- 121, 108, 101,  62,  10,  32,  32,  32,  32,  46,  97, 120, // yle>.    .ax
- 105, 115,  32, 123,  32, 115, 116, 114, 111, 107, 101,  58, // is { stroke:
-  32,  35,  97,  97,  97,  59,  32, 102, 105, 108, 108,  58, //  #aaa; fill:
-  32, 110, 111, 110, 101,  59,  32, 125,  10,  32,  32,  32, //  none; }.   
-  32,  46, 108,  97,  98, 101, 108,  32, 123,  32, 115, 116, //  .label { st
- 114, 111, 107, 101,  58,  32,  35,  97,  97,  97,  59,  32, // roke: #aaa; 
- 102, 111, 110, 116,  45, 115, 105, 122, 101,  58,  32,  49, // font-size: 1
-  51, 112, 120,  59,  32, 125,  10,  32,  32,  32,  32,  46, // 3px; }.    .
- 116, 105,  99, 107,  32, 123,  32, 115, 116, 114, 111, 107, // tick { strok
- 101,  58,  32,  35,  99,  99,  99,  59,  32, 102, 105, 108, // e: #ccc; fil
- 108,  58,  32, 110, 111, 110, 101,  59,  32, 115, 116, 114, // l: none; str
- 111, 107, 101,  45, 100,  97, 115, 104,  97, 114, 114,  97, // oke-dasharra
- 121,  58,  32,  53,  59,  32, 125,  10,  32,  32,  32,  32, // y: 5; }.    
-  46, 115, 101, 114, 105, 101, 115,  98, 103,  32, 123,  32, // .seriesbg { 
- 115, 116, 114, 111, 107, 101,  58,  32, 110, 111, 110, 101, // stroke: none
-  59,  32, 102, 105, 108, 108,  58,  32, 114, 103,  98,  97, // ; fill: rgba
-  40,  50,  48,  48,  44,  50,  50,  53,  44,  50,  53,  53, // (200,225,255
-  44,  32,  48,  46,  50,  53,  41, 125,  10,  32,  32,  32, // , 0.25)}.   
-  32,  46, 115, 101, 114, 105, 101, 115,  32, 123,  32, 115, //  .series { s
- 116, 114, 111, 107, 101,  58,  32,  35,  50,  53,  97,  59, // troke: #25a;
-  32, 102, 105, 108, 108,  58,  32, 110, 111, 110, 101,  59, //  fill: none;
-  32, 125,  10,  32,  32,  60,  47, 115, 116, 121, 108, 101, //  }.  </style
-  62,  10,  32,  32,  36, 123, 121, 116,  97,  46, 109,  97, // >.  ${yta.ma
- 112,  40, 105,  32,  61,  62,  32, 121, 116, 108,  40, 121, // p(i => ytl(y
- 116, 105,  40, 105,  41,  41,  41, 125,  10,  32,  32,  36, // ti(i)))}.  $
- 123, 121, 116,  97,  46, 109,  97, 112,  40, 105,  32,  61, // {yta.map(i =
-  62,  32, 121, 116, 116,  40, 121, 116, 105,  40, 105,  41, // > ytt(yti(i)
-  44,  32, 121, 116, 118,  40, 105,  41,  41,  41, 125,  10, // , ytv(i)))}.
-  32,  32,  36, 123, 120, 116,  97,  46, 109,  97, 112,  40, //   ${xta.map(
- 105,  32,  61,  62,  32, 120, 116, 108,  40, 120, 116, 105, // i => xtl(xti
-  40, 105,  41,  41,  41, 125,  10,  32,  32,  36, 123, 100, // (i)))}.  ${d
-  97, 116,  97,  46, 108, 101, 110, 103, 116, 104,  32,  63, // ata.length ?
-  32, 120, 116,  97,  46, 109,  97, 112,  40, 105,  32,  61, //  xta.map(i =
-  62,  32, 120, 116, 116,  40, 120, 116, 105,  40, 105,  41, // > xtt(xti(i)
-  44,  32, 120, 116, 118,  40, 105,  41,  41,  41,  32,  58, // , xtv(i))) :
-  32,  39,  39, 125,  10,  32,  32,  60, 112,  97, 116, 104, //  ''}.  <path
-  32, 100,  61,  34,  36, 123,  98, 101, 103, 105, 110, 125, //  d="${begin}
-  32,  36, 123, 115, 101, 114, 105, 101, 115,  46, 106, 111, //  ${series.jo
- 105, 110,  40,  39,  32,  39,  41, 125,  32,  36, 123, 101, // in(' ')} ${e
- 110, 100, 125,  34,  32,  99, 108,  97, 115, 115,  61,  34, // nd}" class="
- 115, 101, 114, 105, 101, 115,  98, 103,  34,  32,  47,  62, // seriesbg" />
-  10,  32,  32,  60, 112,  97, 116, 104,  32, 100,  61,  34, // .  <path d="
-  36, 123,  98, 101, 103, 105, 110,  48, 125,  32,  36, 123, // ${begin0} ${
- 115, 101, 114, 105, 101, 115,  46, 106, 111, 105, 110,  40, // series.join(
-  39,  32,  39,  41, 125,  34,  32,  99, 108,  97, 115, 115, // ' ')}" class
-  61,  34, 115, 101, 114, 105, 101, 115,  34,  32,  47,  62, // ="series" />
-  10,  60,  47, 115, 118, 103,  62,  96,  59,  10, 125,  59, // .</svg>`;.};
-  10,  10,  10,  99, 111, 110, 115, 116,  32,  67, 104,  97, // ...const Cha
- 114, 116,  32,  61,  32, 102, 117, 110,  99, 116, 105, 111, // rt = functio
- 110,  40, 112, 114, 111, 112, 115,  41,  32, 123,  10,  32, // n(props) {. 
-  32,  99, 111, 110, 115, 116,  32,  91, 100,  97, 116,  97, //  const [data
-  44,  32, 115, 101, 116,  68,  97, 116,  97,  93,  32,  61, // , setData] =
-  32, 117, 115, 101,  83, 116,  97, 116, 101,  40,  91,  93, //  useState([]
-  41,  59,  10,  32,  32, 117, 115, 101,  69, 102, 102, 101, // );.  useEffe
+  32,  47,  62,  10,  32,  32,  32,  32,  60,  98, 117, 116, //  />.    <but
+ 116, 111, 110,  32,  99, 108,  97, 115, 115,  61,  34,  98, // ton class="b
+ 116, 110,  34,  32, 100, 105, 115,  97,  98, 108, 101, 100, // tn" disabled
+  61,  36, 123,  33, 115, 117,  98, 125,  32, 111, 110,  99, // =${!sub} onc
+ 108, 105,  99, 107,  61,  36, 123, 117, 112, 100,  97, 116, // lick=${updat
+ 101, 115, 117,  98, 125,  10,  32,  32,  32,  32,  32,  32, // esub}.      
+ 115, 116, 121, 108, 101,  61,  34, 109,  97, 114, 103, 105, // style="margi
+ 110,  45, 108, 101, 102, 116,  58,  32,  49, 101, 109,  59, // n-left: 1em;
+  32,  98,  97,  99, 107, 103, 114, 111, 117, 110, 100,  58, //  background:
+  32,  35,  56,  97,  97,  59,  34,  62,  85, 112, 100,  97, //  #8aa;">Upda
+ 116, 101,  60,  47,  98, 117, 116, 116, 111, 110,  62,  10, // te</button>.
+  32,  32,  60,  47, 100, 105, 118,  62,  10,  32,  32,  60, //   </div>.  <
+ 100, 105, 118,  32, 115, 116, 121, 108, 101,  61,  34, 109, // div style="m
+  97, 114, 103, 105, 110,  58,  32,  48,  46,  53, 101, 109, // argin: 0.5em
+  32,  48,  59,  32, 100, 105, 115, 112, 108,  97, 121,  58, //  0; display:
+  32, 102, 108, 101, 120,  59,  34,  62,  10,  32,  32,  32, //  flex;">.   
+  32,  60, 115, 112,  97, 110,  32,  99, 108,  97, 115, 115, //  <span class
+  61,  34,  97, 100, 100, 111, 110,  32, 110, 111, 119, 114, // ="addon nowr
+  97, 112,  34,  62,  80, 117,  98, 108, 105, 115, 104,  32, // ap">Publish 
+ 116, 111, 112, 105,  99,  58,  60,  47, 115, 112,  97, 110, // topic:</span
+  62,  10,  32,  32,  32,  32,  60, 105, 110, 112, 117, 116, // >.    <input
+  32, 116, 121, 112, 101,  61,  34, 116, 101, 120, 116,  34, //  type="text"
+  32, 115, 116, 121, 108, 101,  61,  34, 102, 108, 101, 120, //  style="flex
+  58,  32,  49,  32,  49,  48,  48,  37,  59,  34,  10,  32, // : 1 100%;". 
+  32,  32,  32,  32,  32,  32,  32,  32,  32, 118,  97, 108, //          val
+ 117, 101,  61,  36, 123, 112, 117,  98, 125,  32, 111, 110, // ue=${pub} on
+  99, 104,  97, 110, 103, 101,  61,  36, 123, 117, 112, 100, // change=${upd
+  97, 116, 101, 112, 117,  98, 125,  10,  32,  32,  32,  32, // atepub}.    
+  32,  32,  32,  32,  32,  32, 111, 110, 105, 110, 112, 117, //       oninpu
+ 116,  61,  36, 123, 101, 118,  32,  61,  62,  32, 115, 101, // t=${ev => se
+ 116,  80, 117,  98,  40, 101, 118,  46, 116,  97, 114, 103, // tPub(ev.targ
+ 101, 116,  46, 118,  97, 108, 117, 101,  41, 125,  32,  47, // et.value)} /
+  62,  10,  32,  32,  32,  32,  60,  98, 117, 116, 116, 111, // >.    <butto
+ 110,  32,  99, 108,  97, 115, 115,  61,  34,  98, 116, 110, // n class="btn
+  34,  32, 100, 105, 115,  97,  98, 108, 101, 100,  61,  36, // " disabled=$
+ 123,  33, 112, 117,  98, 125,  32, 111, 110,  99, 108, 105, // {!pub} oncli
+  99, 107,  61,  36, 123, 117, 112, 100,  97, 116, 101, 112, // ck=${updatep
+ 117,  98, 125,  10,  32,  32,  32,  32,  32,  32, 115, 116, // ub}.      st
+ 121, 108, 101,  61,  34, 109,  97, 114, 103, 105, 110,  45, // yle="margin-
+ 108, 101, 102, 116,  58,  32,  49, 101, 109,  59,  32,  98, // left: 1em; b
+  97,  99, 107, 103, 114, 111, 117, 110, 100,  58,  32,  35, // ackground: #
+  56,  97,  97,  59,  34,  62,  85, 112, 100,  97, 116, 101, // 8aa;">Update
+  60,  47,  98, 117, 116, 116, 111, 110,  62,  10,  32,  32, // </button>.  
+  60,  47, 100, 105, 118,  62,  10,  32,  32,  60, 100, 105, // </div>.  <di
+ 118,  62,  10,  32,  32,  32,  32,  89, 111, 117,  32,  99, // v>.    You c
+  97, 110,  32, 117, 115, 101,  32,  60,  97,  32, 104, 114, // an use <a hr
+ 101, 102,  61,  34, 104, 116, 116, 112,  58,  47,  47, 119, // ef="http://w
+ 119, 119,  46, 104, 105, 118, 101, 109, 113,  46,  99, 111, // ww.hivemq.co
+ 109,  47, 100, 101, 109, 111, 115,  47, 119, 101,  98, 115, // m/demos/webs
+ 111,  99, 107, 101, 116,  45,  99, 108, 105, 101, 110, 116, // ocket-client
+  47,  34,  62,  10,  32,  32,  32,  32,  72, 105, 118, 101, // /">.    Hive
+  77,  81,  32,  87, 101,  98, 115, 111,  99, 107, 101, 116, // MQ Websocket
+  32, 119, 101,  98,  32,  99, 108, 105, 101, 110, 116,  60, //  web client<
+  47,  97,  62,  32, 116, 111,  32, 115, 101, 110, 100,  32, // /a> to send 
+ 109, 101, 115, 115,  97, 103, 101, 115,  32, 116, 111,  32, // messages to 
+ 116, 104, 105, 115,  32,  99, 111, 110, 115, 111, 108, 101, // this console
+  46,  10,  32,  32,  60,  47, 100, 105, 118,  62,  10,  32, // ..  </div>. 
+  32,  60, 100, 105, 118,  32,  99, 108,  97, 115, 115,  61, //  <div class=
+  34, 109, 115, 103,  34,  62,  10,  32,  32,  32,  32,  84, // "msg">.    T
+ 104, 101,  32, 100, 101, 118, 105,  99, 101,  32, 107, 101, // he device ke
+ 101, 112, 115,  32,  97,  32, 112, 101, 114, 115, 105, 115, // eps a persis
+ 116, 101, 110, 116,  32,  99, 111, 110, 110, 101,  99, 116, // tent connect
+ 105, 111, 110,  32, 116, 111,  32, 116, 104, 101,  32,  99, // ion to the c
+ 111, 110, 102, 105, 103, 117, 114, 101, 100,  32,  77,  81, // onfigured MQ
+  84,  84,  32, 115, 101, 114, 118, 101, 114,  46,  10,  32, // TT server.. 
+  32,  32,  32,  67, 104,  97, 110, 103, 101, 115,  32, 116, //    Changes t
+ 111,  32, 116, 104, 105, 115,  32,  99, 111, 110, 102, 105, // o this confi
+ 103, 117, 114,  97, 116, 105, 111, 110,  32,  97, 114, 101, // guration are
+  32, 112, 114, 111, 112,  97, 103,  97, 116, 101, 100,  32, //  propagated 
+ 116, 111,  32,  97, 108, 108,  32, 100,  97, 115, 104,  98, // to all dashb
+ 111,  97, 114, 100, 115,  58,  32, 116, 114, 121,  10,  32, // oards: try. 
+  32,  32,  32,  99, 104,  97, 110, 103, 105, 110, 103,  32, //    changing 
+ 116, 104, 101, 109,  32, 105, 110,  32, 116, 104, 105, 115, // them in this
+  32, 100,  97, 115, 104,  98, 111,  97, 114, 100,  32,  97, //  dashboard a
+ 110, 100,  32, 111,  98, 115, 101, 114, 118, 101,  32,  99, // nd observe c
+ 104,  97, 110, 103, 101, 115,  32, 105, 110,  32, 111, 116, // hanges in ot
+ 104, 101, 114,  32, 111, 112, 101, 110, 101, 100,  10,  32, // her opened. 
+  32,  32,  32, 100,  97, 115, 104,  98, 111,  97, 114, 100, //    dashboard
+ 115,  46,  10,  32,  32,  60,  47, 100, 105, 118,  62,  60, // s..  </div><
+ 100, 105, 118,  32,  99, 108,  97, 115, 115,  61,  34, 109, // div class="m
+ 115, 103,  34,  62,  10,  32,  32,  32,  32,  78, 111, 116, // sg">.    Not
+ 101,  58,  32,  97, 100, 109, 105, 110, 105, 115, 116, 114, // e: administr
+  97, 116, 111, 114, 115,  32,  99,  97, 110,  32, 115, 101, // ators can se
+ 101,  32, 116, 104, 105, 115,  32, 115, 101,  99, 116, 105, // e this secti
+ 111, 110,  32,  97, 110, 100,  32,  99,  97, 110,  32,  99, // on and can c
+ 104,  97, 110, 103, 101,  32, 100, 101, 118, 105,  99, 101, // hange device
+  10,  32,  32,  32,  32,  99, 111, 110, 102, 105, 103, 117, // .    configu
+ 114,  97, 116, 105, 111, 110,  44,  32, 119, 104, 105, 108, // ration, whil
+ 115, 116,  32, 117, 115, 101, 114, 115,  32,  99,  97, 110, // st users can
+ 110, 111, 116,  46,  10,  32,  32,  60,  47, 100, 105, 118, // not..  </div
+  62,  10,  60,  47, 100, 105, 118,  62,  96,  59,  10, 125, // >.</div>`;.}
+  59,  10,  10,  10,  99, 111, 110, 115, 116,  32,  77, 101, // ;...const Me
+ 115, 115,  97, 103, 101,  32,  61,  32, 109,  32,  61,  62, // ssage = m =>
+  32, 104, 116, 109, 108,  96,  60, 100, 105, 118,  32, 115, //  html`<div s
+ 116, 121, 108, 101,  61,  34, 109,  97, 114, 103, 105, 110, // tyle="margin
+  58,  32,  48,  46,  53, 101, 109,  32,  48,  59,  34,  62, // : 0.5em 0;">
+  10,  32,  32,  60, 115, 112,  97, 110,  32,  99, 108,  97, // .  <span cla
+ 115, 115,  61,  34, 113, 111, 115,  34,  62, 113, 111, 115, // ss="qos">qos
+  58,  32,  36, 123, 109,  46, 109, 101, 115, 115,  97, 103, // : ${m.messag
+ 101,  46, 113, 111, 115, 125,  32,  60,  47, 115, 112,  97, // e.qos} </spa
+ 110,  62,  10,  32,  32,  60, 115, 112,  97, 110,  32,  99, // n>.  <span c
+ 108,  97, 115, 115,  61,  34, 116, 111, 112, 105,  99,  34, // lass="topic"
+  62, 116, 111, 112, 105,  99,  58,  32,  36, 123, 109,  46, // >topic: ${m.
+ 109, 101, 115, 115,  97, 103, 101,  46, 116, 111, 112, 105, // message.topi
+  99, 125,  32,  60,  47, 115, 112,  97, 110,  62,  10,  32, // c} </span>. 
+  32,  60, 115, 112,  97, 110,  32,  99, 108,  97, 115, 115, //  <span class
+  61,  34, 100,  97, 116,  97,  34,  62, 100,  97, 116,  97, // ="data">data
+  58,  32,  36, 123, 109,  46, 109, 101, 115, 115,  97, 103, // : ${m.messag
+ 101,  46, 100,  97, 116,  97, 125,  60,  47, 115, 112,  97, // e.data}</spa
+ 110,  62,  10,  60,  47, 100, 105, 118,  62,  96,  59,  10, // n>.</div>`;.
+  10,  99, 111, 110, 115, 116,  32,  77, 101, 115, 115,  97, // .const Messa
+ 103, 101, 115,  32,  61,  32, 102, 117, 110,  99, 116, 105, // ges = functi
+ 111, 110,  40, 112, 114, 111, 112, 115,  41,  32, 123,  10, // on(props) {.
+  32,  32,  99, 111, 110, 115, 116,  32,  91, 109, 101, 115, //   const [mes
+ 115,  97, 103, 101, 115,  44,  32, 115, 101, 116,  77, 101, // sages, setMe
+ 115, 115,  97, 103, 101, 115,  93,  32,  61,  32, 117, 115, // ssages] = us
+ 101,  83, 116,  97, 116, 101,  40,  91,  93,  41,  59,  10, // eState([]);.
+  32,  32,  99, 111, 110, 115, 116,  32,  91, 116, 120, 116, //   const [txt
+  44,  32, 115, 101, 116,  84, 120, 116,  93,  32,  61,  32, // , setTxt] = 
+ 117, 115, 101,  83, 116,  97, 116, 101,  40,  39,  39,  41, // useState('')
+  59,  10,  10,  32,  32, 117, 115, 101,  69, 102, 102, 101, // ;..  useEffe
   99, 116,  40,  40,  41,  32,  61,  62,  32, 123,  10,  32, // ct(() => {. 
   32,  32,  32,  99, 111, 110, 115, 116,  32, 105, 100,  32, //    const id 
   61,  32,  80, 117,  98,  83, 117,  98,  46, 115, 117,  98, // = PubSub.sub
  115,  99, 114, 105,  98, 101,  40, 102, 117, 110,  99, 116, // scribe(funct
  105, 111, 110,  40, 109, 115, 103,  41,  32, 123,  10,  32, // ion(msg) {. 
   32,  32,  32,  32,  32, 105, 102,  32,  40, 109, 115, 103, //      if (msg
-  46, 110,  97, 109, 101,  32,  33,  61,  32,  39, 109, 101, // .name != 'me
- 116, 114, 105,  99, 115,  39,  41,  32, 114, 101, 116, 117, // trics') retu
- 114, 110,  59,  10,  32,  32,  32,  32,  32,  32, 115, 101, // rn;.      se
- 116,  68,  97, 116,  97,  40, 120,  32,  61,  62,  32, 120, // tData(x => x
-  46,  99, 111, 110,  99,  97, 116,  40,  91, 109, 115, 103, // .concat([msg
-  46, 100,  97, 116,  97,  93,  41,  46, 115, 112, 108, 105, // .data]).spli
-  99, 101,  40,  45,  77,  97, 120,  77, 101, 116, 114, 105, // ce(-MaxMetri
-  99, 115,  68,  97, 116,  97,  80, 111, 105, 110, 116, 115, // csDataPoints
-  41,  41,  59,  10,  32,  32,  32,  32, 125,  41,  59,  10, // ));.    });.
-  32,  32,  32,  32, 114, 101, 116, 117, 114, 110,  32,  80, //     return P
- 117,  98,  83, 117,  98,  46, 117, 110, 115, 117,  98, 115, // ubSub.unsubs
-  99, 114, 105,  98, 101,  40, 105, 100,  41,  59,  10,  32, // cribe(id);. 
-  32, 125,  44,  32,  91,  93,  41,  59,  10,  10,  32,  32, //  }, []);..  
- 108, 101, 116,  32, 120, 109,  97, 120,  32,  61,  32,  48, // let xmax = 0
-  44,  32, 109, 105, 115, 115, 105, 110, 103,  32,  61,  32, // , missing = 
-  77,  97, 120,  77, 101, 116, 114, 105,  99, 115,  68,  97, // MaxMetricsDa
- 116,  97,  80, 111, 105, 110, 116, 115,  32,  45,  32, 100, // taPoints - d
-  97, 116,  97,  46, 108, 101, 110, 103, 116, 104,  59,  10, // ata.length;.
-  32,  32, 105, 102,  32,  40, 109, 105, 115, 115, 105, 110, //   if (missin
- 103,  32,  62,  32,  48,  41,  32, 120, 109,  97, 120,  32, // g > 0) xmax 
-  61,  32,  77,  97, 116, 104,  46, 114, 111, 117, 110, 100, // = Math.round
-  40,  68,  97, 116, 101,  46, 110, 111, 119,  40,  41,  32, // (Date.now() 
-  47,  32,  49,  48,  48,  48,  41,  32,  43,  32, 109, 105, // / 1000) + mi
- 115, 115, 105, 110, 103,  59,  10,  32,  32, 114, 101, 116, // ssing;.  ret
- 117, 114, 110,  32, 104, 116, 109, 108,  96,  10,  60, 100, // urn html`.<d
- 105, 118,  32,  99, 108,  97, 115, 115,  61,  34, 115, 101, // iv class="se
-  99, 116, 105, 111, 110,  34,  62,  10,  32,  32,  60, 104, // ction">.  <h
-  51,  32, 115, 116, 121, 108, 101,  61,  34,  98,  97,  99, // 3 style="bac
- 107, 103, 114, 111, 117, 110, 100,  58,  32,  35, 101,  99, // kground: #ec
-  51,  59,  32,  99, 111, 108, 111, 114,  58,  32,  35, 102, // 3; color: #f
- 102, 102,  59,  32, 112,  97, 100, 100, 105, 110, 103,  58, // ff; padding:
-  32,  48,  46,  52, 101, 109,  59,  34,  62,  68,  97, 116, //  0.4em;">Dat
-  97,  32,  67, 104,  97, 114, 116,  60,  47, 104,  51,  62, // a Chart</h3>
-  10,  32,  32,  60, 100, 105, 118,  32, 115, 116, 121, 108, // .  <div styl
- 101,  61,  34, 111, 118, 101, 114, 102, 108, 111, 119,  58, // e="overflow:
-  32,  97, 117, 116, 111,  59,  32, 112,  97, 100, 100, 105, //  auto; paddi
- 110, 103,  58,  32,  48,  46,  53, 101, 109,  59,  34,  32, // ng: 0.5em;" 
-  99, 108,  97, 115, 115,  61,  34,  34,  62,  10,  32,  32, // class="">.  
-  32,  32,  60,  36, 123,  83,  86,  71, 125,  32, 104, 101, //   <${SVG} he
- 105, 103, 104, 116,  61,  50,  52,  48,  32, 119, 105, 100, // ight=240 wid
- 116, 104,  61,  54,  48,  48,  32, 121, 109, 105, 110,  61, // th=600 ymin=
-  48,  32, 121, 109,  97, 120,  61,  50,  48,  32, 120, 109, // 0 ymax=20 xm
-  97, 120,  61,  36, 123, 120, 109,  97, 120, 125,  32, 100, // ax=${xmax} d
-  97, 116,  97,  61,  36, 123, 100,  97, 116,  97, 125,  32, // ata=${data} 
-  47,  62,  10,  32,  32,  60,  47, 100, 105, 118,  62,  10, // />.  </div>.
-  32,  32,  60, 100, 105, 118,  32,  99, 108,  97, 115, 115, //   <div class
-  61,  34, 109, 115, 103,  34,  62,  10,  32,  32,  32,  32, // ="msg">.    
-  84, 104, 105, 115,  32,  99, 104,  97, 114, 116,  32, 112, // This chart p
- 108, 111, 116, 115,  32, 108, 105, 118, 101,  32, 115, 101, // lots live se
- 110, 115, 111, 114,  32, 100,  97, 116,  97,  44,  32, 115, // nsor data, s
- 101, 110, 116,  32,  98, 121,  32, 116, 104, 101,  32, 100, // ent by the d
- 101, 118, 105,  99, 101,  32, 118, 105,  97,  32,  47,  97, // evice via /a
- 112, 105,  47, 119,  97, 116,  99, 104,  46,  10,  32,  32, // pi/watch..  
-  60,  47, 100, 105, 118,  62,  10,  60,  47, 100, 105, 118, // </div>.</div
-  62,  96,  59,  10, 125,  59,  10,  10,  99, 111, 110, 115, // >`;.};..cons
- 116,  32,  65, 112, 112,  32,  61,  32, 102, 117, 110,  99, // t App = func
- 116, 105, 111, 110,  40, 112, 114, 111, 112, 115,  41,  32, // tion(props) 
- 123,  10,  32,  32,  99, 111, 110, 115, 116,  32,  91, 117, // {.  const [u
- 115, 101, 114,  44,  32, 115, 101, 116,  85, 115, 101, 114, // ser, setUser
-  93,  32,  61,  32, 117, 115, 101,  83, 116,  97, 116, 101, // ] = useState
-  40,  39,  39,  41,  59,  10,  32,  32,  99, 111, 110, 115, // ('');.  cons
- 116,  32,  91,  99, 111, 110, 102, 105, 103,  44,  32, 115, // t [config, s
- 101, 116,  67, 111, 110, 102, 105, 103,  93,  32,  61,  32, // etConfig] = 
- 117, 115, 101,  83, 116,  97, 116, 101,  40, 123, 125,  41, // useState({})
-  59,  10,  10,  32,  32,  99, 111, 110, 115, 116,  32, 103, // ;..  const g
- 101, 116,  99, 111, 110, 102, 105, 103,  32,  61,  32,  40, // etconfig = (
-  41,  32,  61,  62,  10,  32,  32,  32,  32,  32,  32, 102, // ) =>.      f
- 101, 116,  99, 104,  40,  39,  47,  97, 112, 105,  47,  99, // etch('/api/c
- 111, 110, 102, 105, 103,  47, 103, 101, 116,  39,  44,  32, // onfig/get', 
- 123, 104, 101,  97, 100, 101, 114, 115,  58,  32, 123,  65, // {headers: {A
- 117, 116, 104, 111, 114, 105, 122,  97, 116, 105, 111, 110, // uthorization
-  58,  32,  39,  39, 125, 125,  41,  10,  32,  32,  32,  32, // : ''}}).    
-  32,  32,  32,  32,  32,  32,  46, 116, 104, 101, 110,  40, //       .then(
- 114,  32,  61,  62,  32, 114,  46, 106, 115, 111, 110,  40, // r => r.json(
-  41,  41,  10,  32,  32,  32,  32,  32,  32,  32,  32,  32, // )).         
-  32,  46, 116, 104, 101, 110,  40, 114,  32,  61,  62,  32, //  .then(r => 
- 115, 101, 116,  67, 111, 110, 102, 105, 103,  40, 114,  41, // setConfig(r)
-  41,  10,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, // ).          
-  46,  99,  97, 116,  99, 104,  40, 101, 114, 114,  32,  61, // .catch(err =
-  62,  32,  99, 111, 110, 115, 111, 108, 101,  46, 108, 111, // > console.lo
- 103,  40, 101, 114, 114,  41,  41,  59,  10,  10,  32,  32, // g(err));..  
-  47,  47,  32,  87,  97, 116,  99, 104,  32, 102, 111, 114, // // Watch for
-  32, 110, 111, 116, 105, 102, 105,  99,  97, 116, 105, 111, //  notificatio
- 110, 115,  46,  32,  65, 115,  32, 115, 111, 111, 110,  32, // ns. As soon 
-  97, 115,  32,  97,  32, 110, 111, 116, 105, 102, 105,  99, // as a notific
-  97, 116, 105, 111, 110,  32,  97, 114, 114, 105, 118, 101, // ation arrive
- 115,  44,  32, 112,  97, 115, 115,  32, 105, 116,  32, 111, // s, pass it o
- 110,  10,  32,  32,  47,  47,  32, 116, 111,  32,  97, 108, // n.  // to al
- 108,  32, 115, 117,  98, 115,  99, 114, 105,  98, 101, 100, // l subscribed
-  32,  99, 111, 109, 112, 111, 110, 101, 110, 116, 115,  10, //  components.
-  32,  32,  99, 111, 110, 115, 116,  32, 119,  97, 116,  99, //   const watc
- 104,  32,  61,  32, 102, 117, 110,  99, 116, 105, 111, 110, // h = function
-  40,  41,  32, 123,  10,  32,  32,  32,  32, 118,  97, 114, // () {.    var
-  32, 108,  32,  61,  32, 119, 105, 110, 100, 111, 119,  46, //  l = window.
- 108, 111,  99,  97, 116, 105, 111, 110,  44,  32, 112, 114, // location, pr
- 111, 116, 111,  32,  61,  32, 108,  46, 112, 114, 111, 116, // oto = l.prot
- 111,  99, 111, 108,  46, 114, 101, 112, 108,  97,  99, 101, // ocol.replace
-  40,  39, 104, 116, 116, 112,  39,  44,  32,  39, 119, 115, // ('http', 'ws
-  39,  41,  59,  10,  32,  32,  32,  32, 118,  97, 114,  32, // ');.    var 
- 116, 105, 100,  44,  32, 119, 115,  85,  82,  73,  32,  61, // tid, wsURI =
-  32, 112, 114, 111, 116, 111,  32,  43,  32,  39,  47,  47, //  proto + '//
-  39,  32,  43,  32, 108,  46, 104, 111, 115, 116,  32,  43, // ' + l.host +
-  32,  39,  47,  97, 112, 105,  47, 119,  97, 116,  99, 104, //  '/api/watch
-  39,  10,  32,  32,  32,  32, 118,  97, 114,  32, 114, 101, // '.    var re
-  99, 111, 110, 110, 101,  99, 116,  32,  61,  32, 102, 117, // connect = fu
- 110,  99, 116, 105, 111, 110,  40,  41,  32, 123,  10,  32, // nction() {. 
-  32,  32,  32,  32,  32, 118,  97, 114,  32, 119, 115,  32, //      var ws 
-  61,  32, 110, 101, 119,  32,  87, 101,  98,  83, 111,  99, // = new WebSoc
- 107, 101, 116,  40, 119, 115,  85,  82,  73,  41,  59,  10, // ket(wsURI);.
-  32,  32,  32,  32,  32,  32,  47,  47,  32, 119, 115,  46, //       // ws.
- 111, 110, 111, 112, 101, 110,  32,  61,  32,  40,  41,  32, // onopen = () 
-  61,  62,  32,  99, 111, 110, 115, 111, 108, 101,  46, 108, // => console.l
- 111, 103,  40,  39, 119, 115,  32,  99, 111, 110, 110, 101, // og('ws conne
-  99, 116, 101, 100,  39,  41,  59,  10,  32,  32,  32,  32, // cted');.    
-  32,  32, 119, 115,  46, 111, 110, 109, 101, 115, 115,  97, //   ws.onmessa
- 103, 101,  32,  61,  32, 102, 117, 110,  99, 116, 105, 111, // ge = functio
- 110,  40, 101, 118,  41,  32, 123,  10,  32,  32,  32,  32, // n(ev) {.    
-  32,  32,  32,  32, 116, 114, 121,  32, 123,  10,  32,  32, //     try {.  
-  32,  32,  32,  32,  32,  32,  32,  32, 118,  97, 114,  32, //         var 
- 109, 115, 103,  32,  61,  32,  74,  83,  79,  78,  46, 112, // msg = JSON.p
-  97, 114, 115, 101,  40, 101, 118,  46, 100,  97, 116,  97, // arse(ev.data
-  41,  59,  10,  32,  32,  32,  32,  32,  32,  32,  32,  32, // );.         
-  32,  80, 117,  98,  83, 117,  98,  46, 112, 117,  98, 108, //  PubSub.publ
- 105, 115, 104,  40, 109, 115, 103,  41,  59,  10,  32,  32, // ish(msg);.  
-  32,  32,  32,  32,  32,  32,  32,  32,  47,  47,  32, 105, //         // i
- 102,  32,  40, 109, 115, 103,  46, 110,  97, 109, 101,  32, // f (msg.name 
-  33,  61,  32,  39, 109, 101, 116, 114, 105,  99, 115,  39, // != 'metrics'
-  41,  32,  99, 111, 110, 115, 111, 108, 101,  46, 108, 111, // ) console.lo
- 103,  40,  39, 119, 115,  45,  62,  39,  44,  32, 109, 115, // g('ws->', ms
- 103,  41,  59,  10,  32,  32,  32,  32,  32,  32,  32,  32, // g);.        
- 125,  32,  99,  97, 116,  99, 104,  32,  40, 101,  41,  32, // } catch (e) 
- 123,  10,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, // {.          
-  99, 111, 110, 115, 111, 108, 101,  46, 108, 111, 103,  40, // console.log(
-  39,  73, 110, 118,  97, 108, 105, 100,  32, 119, 115,  32, // 'Invalid ws 
- 102, 114,  97, 109, 101,  58,  39,  44,  32, 101, 118,  46, // frame:', ev.
- 100,  97, 116,  97,  41,  59,  32,  32,  47,  47,  32, 101, // data);  // e
- 115, 108, 105, 110, 116,  45, 100, 105, 115,  97,  98, 108, // slint-disabl
- 101,  45, 108, 105, 110, 101,  10,  32,  32,  32,  32,  32, // e-line.     
-  32,  32,  32, 125,  10,  32,  32,  32,  32,  32,  32, 125, //    }.      }
-  59,  10,  32,  32,  32,  32,  32,  32, 119, 115,  46, 111, // ;.      ws.o
- 110,  99, 108, 111, 115, 101,  32,  61,  32, 102, 117, 110, // nclose = fun
+  46, 110,  97, 109, 101,  32,  61,  61,  32,  39, 109, 101, // .name == 'me
+ 115, 115,  97, 103, 101,  39,  41,  32, 115, 101, 116,  77, // ssage') setM
+ 101, 115, 115,  97, 103, 101, 115,  40, 120,  32,  61,  62, // essages(x =>
+  32, 120,  46,  99, 111, 110,  99,  97, 116,  40,  91, 109, //  x.concat([m
+ 115, 103,  46, 100,  97, 116,  97,  93,  41,  41,  59,  10, // sg.data]));.
+  32,  32,  32,  32, 125,  41,  59,  10,  32,  32,  32,  32, //     });.    
+ 114, 101, 116, 117, 114, 110,  32,  80, 117,  98,  83, 117, // return PubSu
+  98,  46, 117, 110, 115, 117,  98, 115,  99, 114, 105,  98, // b.unsubscrib
+ 101,  40, 105, 100,  41,  59,  10,  32,  32, 125,  44,  32, // e(id);.  }, 
+  91,  93,  41,  59,  10,  10,  32,  32,  99, 111, 110, 115, // []);..  cons
+ 116,  32, 115, 101, 110, 100, 109, 101, 115, 115,  97, 103, // t sendmessag
+ 101,  32,  61,  32, 101, 118,  32,  61,  62,  32, 102, 101, // e = ev => fe
+ 116,  99, 104,  40,  39,  47,  97, 112, 105,  47, 109, 101, // tch('/api/me
+ 115, 115,  97, 103, 101,  47, 115, 101, 110, 100,  39,  44, // ssage/send',
+  32, 123,  10,  32,  32,  32,  32,  32,  32,  32,  32,  32, //  {.         
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
+  32,  32,  32,  32,  32,  32,  32,  32,  32, 109, 101, 116, //          met
+ 104, 111, 100,  58,  32,  39, 112, 111, 115, 116,  39,  44, // hod: 'post',
+  10,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, // .           
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
+  32,  32,  32,  32,  32,  32,  32,  98, 111, 100, 121,  58, //        body:
+  32,  96, 109, 101, 115, 115,  97, 103, 101,  61,  36, 123, //  `message=${
+ 101, 110,  99, 111, 100, 101,  85,  82,  73,  67, 111, 109, // encodeURICom
+ 112, 111, 110, 101, 110, 116,  40, 116, 120, 116,  41, 125, // ponent(txt)}
+  96,  10,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, // `.          
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
+  32,  32,  32,  32,  32,  32, 125,  41,  46, 116, 104, 101, //       }).the
+ 110,  40, 114,  32,  61,  62,  32, 115, 101, 116,  84, 120, // n(r => setTx
+ 116,  40,  39,  39,  41,  41,  59,  10,  32,  32,  99, 111, // t(''));.  co
+ 110, 115, 116,  32,  99, 111, 110, 110, 115, 116,  97, 116, // nst connstat
+ 117, 115,  32,  61,  32, 112, 114, 111, 112, 115,  46,  99, // us = props.c
+ 111, 110, 102, 105, 103,  46,  99, 111, 110, 110, 101,  99, // onfig.connec
+ 116, 101, 100,  32,  63,  32,  39,  99, 111, 110, 110, 101, // ted ? 'conne
+  99, 116, 101, 100,  39,  32,  58,  32,  39, 100, 105, 115, // cted' : 'dis
+  99, 111, 110, 110, 101,  99, 116, 101, 100,  39,  59,  10, // connected';.
+  32,  32, 114, 101, 116, 117, 114, 110,  32, 104, 116, 109, //   return htm
+ 108,  96,  10,  60, 100, 105, 118,  32,  99, 108,  97, 115, // l`.<div clas
+ 115,  61,  34, 115, 101,  99, 116, 105, 111, 110,  34,  62, // s="section">
+  10,  32,  32,  60, 104,  51,  32, 115, 116, 121, 108, 101, // .  <h3 style
+  61,  34,  98,  97,  99, 107, 103, 114, 111, 117, 110, 100, // ="background
+  58,  32,  35,  51,  48,  99,  48,  52,  48,  59,  32,  99, // : #30c040; c
+ 111, 108, 111, 114,  58,  32,  35, 102, 102, 102,  59,  32, // olor: #fff; 
+ 112,  97, 100, 100, 105, 110, 103,  58,  32,  48,  46,  52, // padding: 0.4
+ 101, 109,  59,  34,  62,  77,  81,  84,  84,  32, 109, 101, // em;">MQTT me
+ 115, 115,  97, 103, 101, 115,  60,  47, 104,  51,  62,  10, // ssages</h3>.
+  32,  32,  60, 100, 105, 118,  62,  10,  32,  32,  32,  32, //   <div>.    
+  77,  81,  84,  84,  32, 115, 101, 114, 118, 101, 114,  32, // MQTT server 
+ 115, 116,  97, 116, 117, 115,  58,  32,  60,  98,  62,  36, // status: <b>$
+ 123,  99, 111, 110, 110, 115, 116,  97, 116, 117, 115, 125, // {connstatus}
+  60,  47,  98,  62,  10,  32,  32,  60,  47, 100, 105, 118, // </b>.  </div
+  62,  10,  32,  32,  60, 100, 105, 118,  32, 115, 116, 121, // >.  <div sty
+ 108, 101,  61,  34, 104, 101, 105, 103, 104, 116,  58,  32, // le="height: 
+  49,  48, 101, 109,  59,  32, 111, 118, 101, 114, 102, 108, // 10em; overfl
+ 111, 119,  58,  32,  97, 117, 116, 111,  59,  32, 112,  97, // ow: auto; pa
+ 100, 100, 105, 110, 103,  58,  32,  48,  46,  53, 101, 109, // dding: 0.5em
+  59,  32,  34,  32,  99, 108,  97, 115, 115,  61,  34,  98, // ; " class="b
+ 111, 114, 100, 101, 114,  34,  62,  10,  32,  32,  32,  32, // order">.    
+  36, 123, 109, 101, 115, 115,  97, 103, 101, 115,  46, 109, // ${messages.m
+  97, 112,  40, 109, 101, 115, 115,  97, 103, 101,  32,  61, // ap(message =
+  62,  32, 104,  40,  77, 101, 115, 115,  97, 103, 101,  44, // > h(Message,
+  32, 123, 109, 101, 115, 115,  97, 103, 101, 125,  41,  41, //  {message}))
+ 125,  10,  32,  32,  60,  47, 100, 105, 118,  62,  10,  32, // }.  </div>. 
+  32,  60, 100, 105, 118,  32, 115, 116, 121, 108, 101,  61, //  <div style=
+  34, 109,  97, 114, 103, 105, 110,  58,  32,  48,  46,  53, // "margin: 0.5
+ 101, 109,  32,  48,  59,  32, 100, 105, 115, 112, 108,  97, // em 0; displa
+ 121,  58,  32, 102, 108, 101, 120,  34,  62,  10,  32,  32, // y: flex">.  
+  32,  32,  60, 115, 112,  97, 110,  32,  99, 108,  97, 115, //   <span clas
+ 115,  61,  34,  97, 100, 100, 111, 110,  32, 110, 111, 119, // s="addon now
+ 114,  97, 112,  34,  62,  80, 117,  98, 108, 105, 115, 104, // rap">Publish
+  32, 109, 101, 115, 115,  97, 103, 101,  58,  60,  47, 115, //  message:</s
+ 112,  97, 110,  62,  10,  32,  32,  32,  32,  60, 105, 110, // pan>.    <in
+ 112, 117, 116,  32, 112, 108,  97,  99, 101, 104, 111, 108, // put placehol
+ 100, 101, 114,  61,  34, 116, 121, 112, 101,  32,  97, 110, // der="type an
+ 100,  32, 112, 114, 101, 115, 115,  32, 101, 110, 116, 101, // d press ente
+ 114,  46,  46,  46,  34,  32, 115, 116, 121, 108, 101,  61, // r..." style=
+  34, 102, 108, 101, 120,  58,  32,  49,  32,  49,  48,  48, // "flex: 1 100
+  37,  59,  34,  10,  32,  32,  32,  32,  32,  32, 118,  97, // %;".      va
+ 108, 117, 101,  61,  36, 123, 116, 120, 116, 125,  32, 111, // lue=${txt} o
+ 110,  99, 104,  97, 110, 103, 101,  61,  36, 123, 115, 101, // nchange=${se
+ 110, 100, 109, 101, 115, 115,  97, 103, 101, 125,  10,  32, // ndmessage}. 
+  32,  32,  32,  32,  32, 111, 110, 105, 110, 112, 117, 116, //      oninput
+  61,  36, 123, 101, 118,  32,  61,  62,  32, 115, 101, 116, // =${ev => set
+  84, 120, 116,  40, 101, 118,  46, 116,  97, 114, 103, 101, // Txt(ev.targe
+ 116,  46, 118,  97, 108, 117, 101,  41, 125,  32,  47,  62, // t.value)} />
+  10,  32,  32,  60,  47, 100, 105, 118,  62,  10,  32,  32, // .  </div>.  
+  60, 100, 105, 118,  32,  99, 108,  97, 115, 115,  61,  34, // <div class="
+ 109, 115, 103,  34,  62,  10,  32,  32,  32,  32,  84, 104, // msg">.    Th
+ 101,  32, 109, 101, 115, 115,  97, 103, 101,  32, 103, 101, // e message ge
+ 116, 115,  32, 112,  97, 115, 115, 101, 100,  32, 116, 111, // ts passed to
+  32, 116, 104, 101,  32, 100, 101, 118, 105,  99, 101,  32, //  the device 
+ 118, 105,  97,  32,  82,  69,  83,  84,  46,  32,  84, 104, // via REST. Th
+ 101, 110,  32, 116, 104, 101,  32, 100, 101, 118, 105,  99, // en the devic
+ 101,  32, 115, 101, 110, 100, 115,  32, 105, 116,  32, 116, // e sends it t
+ 111,  10,  32,  32,  32,  32, 116, 104, 101,  32,  77,  81, // o.    the MQ
+  84,  84,  32, 115, 101, 114, 118, 101, 114,  32, 111, 118, // TT server ov
+ 101, 114,  32,  77,  81,  84,  84,  46,  32,  65, 108, 108, // er MQTT. All
+  32,  77,  81,  84,  84,  32, 109, 101, 115, 115,  97, 103, //  MQTT messag
+ 101, 115,  32, 111, 110,  32,  97,  32, 115, 117,  98, 115, // es on a subs
+  99, 114, 105,  98, 101, 100,  32, 116, 111, 112, 105,  99, // cribed topic
+  10,  32,  32,  32,  32, 114, 101,  99, 101, 105, 118, 101, // .    receive
+ 100,  32,  98, 121,  32, 116, 104, 101,  32, 100, 101, 118, // d by the dev
+ 105,  99, 101,  44,  32,  97, 114, 101,  32, 112, 114, 111, // ice, are pro
+ 112,  97, 103,  97, 116, 101, 100,  32, 116, 111,  32, 116, // pagated to t
+ 104, 105, 115,  32, 100,  97, 115, 104,  98, 111,  97, 114, // his dashboar
+ 100,  32, 118, 105,  97,  32,  47,  97, 112, 105,  47, 119, // d via /api/w
+  97, 116,  99, 104,  46,  10,  32,  32,  60,  47, 100, 105, // atch..  </di
+ 118,  62,  10,  60,  47, 100, 105, 118,  62,  96,  59,  10, // v>.</div>`;.
+ 125,  59,  10,  10,  47,  47,  32,  69, 120, 112, 101,  99, // };..// Expec
+ 116, 101, 100,  32,  97, 114, 103, 117, 109, 101, 110, 116, // ted argument
+ 115,  58,  10,  47,  47,  32, 100,  97, 116,  97,  58,  32, // s:.// data: 
+ 116, 105, 109, 101, 115, 101, 114, 105, 101, 115,  44,  32, // timeseries, 
+ 101,  46, 103,  46,  32,  91,  32,  91,  49,  54,  53,  52, // e.g. [ [1654
+  51,  54,  49,  51,  53,  50,  44,  32,  49,  57,  93,  44, // 361352, 19],
+  32,  91,  49,  54,  53,  52,  51,  54,  49,  51,  53,  51, //  [1654361353
+  44,  32,  49,  56,  93,  44,  32,  46,  46,  46,  32,  93, // , 18], ... ]
+  10,  47,  47,  32, 119, 105, 100, 116, 104,  44,  32, 104, // .// width, h
+ 101, 105, 103, 104, 116,  44,  32, 121, 116, 105,  99, 107, // eight, ytick
+ 115,  44,  32, 120, 116, 105,  99, 107, 115,  44,  32, 121, // s, xticks, y
+ 109, 105, 110,  44,  32, 121, 109,  97, 120,  44,  32, 120, // min, ymax, x
+ 109, 105, 110,  44,  32, 120, 109,  97, 120,  10,  99, 111, // min, xmax.co
+ 110, 115, 116,  32,  83,  86,  71,  32,  61,  32, 102, 117, // nst SVG = fu
+ 110,  99, 116, 105, 111, 110,  40, 112, 114, 111, 112, 115, // nction(props
+  41,  32, 123,  10,  32,  32,  47,  47,  32,  32,  32,  32, // ) {.  //    
+  32,  32,  32,  32,  32,  32,  32,  32, 119,  10,  32,  32, //         w.  
+  47,  47,  32,  32,  32,  43,  45,  45,  45,  45,  45,  45, // //   +------
+  45,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45, // ------------
+  45,  45,  45,  43,  10,  32,  32,  47,  47,  32,  32,  32, // ---+.  //   
+ 124,  32,  32,  32,  32,  32,  32,  32,  32, 104,  49,  32, // |        h1 
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, 124,  10, //           |.
+  32,  32,  47,  47,  32,  32,  32, 124,  32,  32,  32,  32, //   //   |    
+  43,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45, // +-----------
+  43,  32,  32,  32,  32, 124,  10,  32,  32,  47,  47,  32, // +    |.  // 
+  32,  32, 124,  32,  32,  32,  32, 124,  32,  32,  32,  32, //   |    |    
+  32,  32,  32,  32,  32,  32,  32, 124,  32,  32,  32,  32, //        |    
+ 124,  32,  32, 104,  10,  32,  32,  47,  47,  32,  32,  32, // |  h.  //   
+ 124,  32, 119,  49,  32, 124,  32,  32,  32,  32,  32,  32, // | w1 |      
+  32,  32,  32,  32,  32, 124,  32, 119,  50,  32, 124,  10, //      | w2 |.
+  32,  32,  47,  47,  32,  32,  32, 124,  32,  32,  32,  32, //   //   |    
+  43,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45, // +-----------
+  43,  32,  32,  32,  32, 124,  10,  32,  32,  47,  47,  32, // +    |.  // 
+  32,  32, 124,  32,  32,  32,  32,  32,  32,  32,  32,  32, //   |         
+ 104,  50,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, // h2          
+ 124,  10,  32,  32,  47,  47,  32,  32,  32,  43,  45,  45, // |.  //   +--
+  45,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45, // ------------
+  45,  45,  45,  45,  45,  45,  45,  43,  10,  32,  32,  47, // -------+.  /
+  47,  10,  32,  32, 108, 101, 116,  32, 119,  32,  61,  32, // /.  let w = 
+ 112, 114, 111, 112, 115,  46, 119, 105, 100, 116, 104,  44, // props.width,
+  32, 104,  32,  61,  32, 112, 114, 111, 112, 115,  46, 104, //  h = props.h
+ 101, 105, 103, 104, 116,  44,  32, 119,  49,  32,  61,  32, // eight, w1 = 
+  51,  48,  44,  32, 119,  50,  32,  61,  32,  48,  44,  32, // 30, w2 = 0, 
+ 104,  49,  32,  61,  32,  56,  44,  32, 104,  50,  32,  61, // h1 = 8, h2 =
+  32,  49,  56,  59,  10,  32,  32, 108, 101, 116,  32, 121, //  18;.  let y
+ 116, 105,  99, 107, 115,  32,  61,  32, 112, 114, 111, 112, // ticks = prop
+ 115,  46, 121, 116, 105,  99, 107, 115,  32, 124, 124,  32, // s.yticks || 
+  52,  44,  32, 120, 116, 105,  99, 107, 115,  32,  61,  32, // 4, xticks = 
+ 112, 114, 111, 112, 115,  46, 120, 116, 105,  99, 107, 115, // props.xticks
+  32, 124, 124,  32,  53,  59,  10,  32,  32, 108, 101, 116, //  || 5;.  let
+  32, 100,  97, 116,  97,  32,  61,  32, 112, 114, 111, 112, //  data = prop
+ 115,  46, 100,  97, 116,  97,  32, 124, 124,  32,  91,  93, // s.data || []
+  59,  10,  32,  32, 108, 101, 116,  32, 121, 109, 105, 110, // ;.  let ymin
+  32,  61,  32, 112, 114, 111, 112, 115,  46, 121, 109, 105, //  = props.ymi
+ 110,  32, 124, 124,  32,  48,  59,  10,  32,  32, 108, 101, // n || 0;.  le
+ 116,  32, 121, 109,  97, 120,  32,  61,  32, 112, 114, 111, // t ymax = pro
+ 112, 115,  46, 121, 109,  97, 120,  32, 124, 124,  32,  77, // ps.ymax || M
+  97, 116, 104,  46, 109,  97, 120,  46,  97, 112, 112, 108, // ath.max.appl
+ 121,  40, 110, 117, 108, 108,  44,  32, 100,  97, 116,  97, // y(null, data
+  46, 109,  97, 112,  40, 112,  32,  61,  62,  32, 112,  91, // .map(p => p[
+  49,  93,  41,  41,  59,  10,  32,  32, 108, 101, 116,  32, // 1]));.  let 
+ 120, 109, 105, 110,  32,  61,  32, 112, 114, 111, 112, 115, // xmin = props
+  46, 120, 109, 105, 110,  32, 124, 124,  32,  77,  97, 116, // .xmin || Mat
+ 104,  46, 109, 105, 110,  46,  97, 112, 112, 108, 121,  40, // h.min.apply(
+ 110, 117, 108, 108,  44,  32, 100,  97, 116,  97,  46, 109, // null, data.m
+  97, 112,  40, 112,  32,  61,  62,  32, 112,  91,  48,  93, // ap(p => p[0]
+  41,  41,  59,  10,  32,  32, 108, 101, 116,  32, 120, 109, // ));.  let xm
+  97, 120,  32,  61,  32, 112, 114, 111, 112, 115,  46, 120, // ax = props.x
+ 109,  97, 120,  32, 124, 124,  32,  77,  97, 116, 104,  46, // max || Math.
+ 109,  97, 120,  46,  97, 112, 112, 108, 121,  40, 110, 117, // max.apply(nu
+ 108, 108,  44,  32, 100,  97, 116,  97,  46, 109,  97, 112, // ll, data.map
+  40, 112,  32,  61,  62,  32, 112,  91,  48,  93,  41,  41, // (p => p[0]))
+  59,  10,  10,  32,  32,  47,  47,  32,  89,  45,  97, 120, // ;..  // Y-ax
+ 105, 115,  32, 116, 105,  99, 107,  32, 108, 105, 110, 101, // is tick line
+ 115,  32,  97, 110, 100,  32, 108,  97,  98, 101, 108, 115, // s and labels
+  10,  32,  32, 108, 101, 116,  32, 121, 116,  97,  32,  61, // .  let yta =
+  32,  40, 110, 101, 119,  32,  65, 114, 114,  97, 121,  40, //  (new Array(
+ 121, 116, 105,  99, 107, 115,  32,  43,  32,  49,  41,  41, // yticks + 1))
+  46, 102, 105, 108, 108,  40,  48,  41,  46, 109,  97, 112, // .fill(0).map
+  40,  40,  95,  44,  32, 105,  41,  32,  61,  62,  32, 105, // ((_, i) => i
+  41,  59,  32,  32,  47,  47,  32, 105, 110, 100, 105,  99, // );  // indic
+ 101, 115,  10,  32,  32, 108, 101, 116,  32, 121, 116, 105, // es.  let yti
+  32,  61,  32, 105,  32,  61,  62,  32, 104,  32,  45,  32, //  = i => h - 
+ 104,  50,  32,  45,  32,  40, 104,  32,  45,  32, 104,  49, // h2 - (h - h1
+  32,  45,  32, 104,  50,  41,  32,  42,  32, 105,  32,  47, //  - h2) * i /
+  32, 121, 116, 105,  99, 107, 115,  59,  32,  32,  32,  32, //  yticks;    
+  32,  32,  32,  32,  32,  32,  47,  47,  32, 105, 110, 100, //       // ind
+ 101, 120,  39, 115,  32,  89,  10,  32,  32, 108, 101, 116, // ex's Y.  let
+  32, 121, 116, 118,  32,  61,  32, 105,  32,  61,  62,  32, //  ytv = i => 
+  40, 121, 109,  97, 120,  32,  45,  32, 121, 109, 105, 110, // (ymax - ymin
+  41,  32,  42,  32, 105,  32,  47,  32, 121, 116, 105,  99, // ) * i / ytic
+ 107, 115,  59,  10,  32,  32, 108, 101, 116,  32, 121, 116, // ks;.  let yt
+ 108,  32,  61,  32, 121,  32,  61,  62,  32, 104, 116, 109, // l = y => htm
+ 108,  96,  60, 108, 105, 110, 101,  32, 120,  49,  61,  36, // l`<line x1=$
+ 123, 119,  49, 125,  32, 121,  49,  61,  36, 123, 121, 125, // {w1} y1=${y}
+  32, 120,  50,  61,  36, 123, 119, 125,  32, 121,  50,  61, //  x2=${w} y2=
+  36, 123, 121, 125,  32,  99, 108,  97, 115, 115,  61,  34, // ${y} class="
+ 116, 105,  99, 107,  34,  47,  62,  96,  59,  10,  32,  32, // tick"/>`;.  
+ 108, 101, 116,  32, 121, 116, 116,  32,  61,  32,  40, 121, // let ytt = (y
+  44,  32, 118,  41,  32,  61,  62,  32, 104, 116, 109, 108, // , v) => html
+  96,  60, 116, 101, 120, 116,  32, 120,  61,  48,  32, 121, // `<text x=0 y
+  61,  36, 123, 121,  32,  43,  32,  53, 125,  32,  99, 108, // =${y + 5} cl
+  97, 115, 115,  61,  34, 108,  97,  98, 101, 108,  34,  62, // ass="label">
+  36, 123, 118, 125,  60,  47, 116, 101, 120, 116,  62,  96, // ${v}</text>`
+  59,  10,  10,  32,  32,  47,  47,  32,  88,  45,  97, 120, // ;..  // X-ax
+ 105, 115,  32, 116, 105,  99, 107,  32, 108, 105, 110, 101, // is tick line
+ 115,  32,  97, 110, 100,  32, 108,  97,  98, 101, 108, 115, // s and labels
+  10,  32,  32, 108, 101, 116,  32, 100,  97, 116, 101, 102, // .  let datef
+ 109, 116,  32,  61,  32, 117, 110, 105, 120,  32,  61,  62, // mt = unix =>
+  32,  40, 110, 101, 119,  32,  68,  97, 116, 101,  40, 117, //  (new Date(u
+ 110, 105, 120,  32,  42,  32,  49,  48,  48,  48,  41,  41, // nix * 1000))
+  46, 116, 111,  73,  83,  79,  83, 116, 114, 105, 110, 103, // .toISOString
+  40,  41,  46, 115, 117,  98, 115, 116, 114,  40,  49,  52, // ().substr(14
+  44,  32,  53,  41,  59,  10,  32,  32, 108, 101, 116,  32, // , 5);.  let 
+ 120, 116,  97,  32,  61,  32,  40, 110, 101, 119,  32,  65, // xta = (new A
+ 114, 114,  97, 121,  40, 120, 116, 105,  99, 107, 115,  32, // rray(xticks 
+  43,  32,  49,  41,  41,  46, 102, 105, 108, 108,  40,  48, // + 1)).fill(0
+  41,  46, 109,  97, 112,  40,  40,  95,  44,  32, 105,  41, // ).map((_, i)
+  32,  61,  62,  32, 105,  41,  59,  32,  32,  47,  47,  32, //  => i);  // 
+ 105, 110, 100, 105,  99, 101, 115,  10,  32,  32, 108, 101, // indices.  le
+ 116,  32, 120, 116, 105,  32,  61,  32, 105,  32,  61,  62, // t xti = i =>
+  32, 119,  49,  32,  43,  32,  40, 119,  32,  45,  32, 119, //  w1 + (w - w
+  49,  32,  45,  32, 119,  50,  41,  32,  42,  32, 105,  32, // 1 - w2) * i 
+  47,  32, 120, 116, 105,  99, 107, 115,  59,  32,  32,  32, // / xticks;   
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  47, //            /
+  47,  32, 105, 110, 100, 101, 120,  39, 115,  32,  88,  10, // / index's X.
+  32,  32, 108, 101, 116,  32, 120, 116, 118,  32,  61,  32, //   let xtv = 
+ 105,  32,  61,  62,  32, 100,  97, 116, 101, 102, 109, 116, // i => datefmt
+  40, 120, 109, 105, 110,  32,  43,  32,  40, 120, 109,  97, // (xmin + (xma
+ 120,  32,  45,  32, 120, 109, 105, 110,  41,  32,  42,  32, // x - xmin) * 
+ 105,  32,  47,  32, 120, 116, 105,  99, 107, 115,  41,  59, // i / xticks);
+  10,  32,  32, 108, 101, 116,  32, 120, 116, 108,  32,  61, // .  let xtl =
+  32, 120,  32,  61,  62,  32, 104, 116, 109, 108,  96,  60, //  x => html`<
+ 112,  97, 116, 104,  32, 100,  61,  34,  77,  32,  36, 123, // path d="M ${
+ 120, 125,  44,  36, 123, 104,  49, 125,  32,  76,  32,  36, // x},${h1} L $
+ 123, 120, 125,  44,  36, 123, 104,  32,  45,  32, 104,  50, // {x},${h - h2
+ 125,  34,  32,  99, 108,  97, 115, 115,  61,  34, 116, 105, // }" class="ti
+  99, 107,  34,  47,  62,  96,  59,  10,  32,  32, 108, 101, // ck"/>`;.  le
+ 116,  32, 120, 116, 116,  32,  61,  32,  40, 120,  44,  32, // t xtt = (x, 
+ 118,  41,  32,  61,  62,  10,  32,  32,  32,  32,  32,  32, // v) =>.      
+ 104, 116, 109, 108,  96,  60, 116, 101, 120, 116,  32, 120, // html`<text x
+  61,  36, 123, 120,  32,  45,  32,  49,  53, 125,  32, 121, // =${x - 15} y
+  61,  36, 123, 104,  32,  45,  32,  50, 125,  32,  99, 108, // =${h - 2} cl
+  97, 115, 115,  61,  34, 108,  97,  98, 101, 108,  34,  62, // ass="label">
+  36, 123, 118, 125,  60,  47, 116, 101, 120, 116,  62,  96, // ${v}</text>`
+  59,  10,  10,  32,  32,  47,  47,  32,  84, 114,  97, 110, // ;..  // Tran
+ 115, 102, 111, 114, 109,  32, 100,  97, 116,  97,  32, 112, // sform data p
+ 111, 105, 110, 116, 115,  32,  97, 114, 114,  97, 121,  32, // oints array 
+ 105, 110, 116, 111,  32,  99, 111, 111, 114, 100, 105, 110, // into coordin
+  97, 116, 101,  10,  32,  32, 108, 101, 116,  32, 100, 120, // ate.  let dx
+  32,  61,  32, 118,  32,  61,  62,  32, 119,  49,  32,  43, //  = v => w1 +
+  32,  40, 118,  32,  45,  32, 120, 109, 105, 110,  41,  32, //  (v - xmin) 
+  47,  32,  40,  40, 120, 109,  97, 120,  32,  45,  32, 120, // / ((xmax - x
+ 109, 105, 110,  41,  32, 124, 124,  32,  49,  41,  32,  42, // min) || 1) *
+  32,  40, 119,  32,  45,  32, 119,  49,  32,  45,  32, 119, //  (w - w1 - w
+  50,  41,  59,  10,  32,  32, 108, 101, 116,  32, 100, 121, // 2);.  let dy
+  32,  61,  32, 118,  32,  61,  62,  32, 104,  32,  45,  32, //  = v => h - 
+ 104,  50,  32,  45,  32,  40, 118,  32,  45,  32, 121, 109, // h2 - (v - ym
+ 105, 110,  41,  32,  47,  32,  40,  40, 121, 109,  97, 120, // in) / ((ymax
+  32,  45,  32, 121, 109, 105, 110,  41,  32, 124, 124,  32, //  - ymin) || 
+  49,  41,  32,  42,  32,  40, 104,  32,  45,  32, 104,  49, // 1) * (h - h1
+  32,  45,  32, 104,  50,  41,  59,  10,  32,  32, 108, 101, //  - h2);.  le
+ 116,  32, 100, 100,  32,  61,  32, 100,  97, 116,  97,  46, // t dd = data.
+ 109,  97, 112,  40, 112,  32,  61,  62,  32,  91,  77,  97, // map(p => [Ma
+ 116, 104,  46, 114, 111, 117, 110, 100,  40, 100, 120,  40, // th.round(dx(
+ 112,  91,  48,  93,  41,  41,  44,  32,  77,  97, 116, 104, // p[0])), Math
+  46, 114, 111, 117, 110, 100,  40, 100, 121,  40, 112,  91, // .round(dy(p[
+  49,  93,  41,  41,  93,  41,  59,  10,  32,  32, 108, 101, // 1]))]);.  le
+ 116,  32, 100, 100, 108,  32,  61,  32, 100, 100,  46, 108, // t ddl = dd.l
+ 101, 110, 103, 116, 104,  59,  10,  32,  32,  47,  47,  32, // ength;.  // 
+  65, 110, 100,  32, 112, 108, 111, 116,  32, 116, 104, 101, // And plot the
+  32, 100,  97, 116,  97,  32,  97, 115,  32,  60, 112,  97, //  data as <pa
+ 116, 104,  62,  32, 101, 108, 101, 109, 101, 110, 116,  10, // th> element.
+  32,  32, 108, 101, 116,  32,  98, 101, 103, 105, 110,  48, //   let begin0
+  32,  61,  32, 100, 100, 108,  32,  63,  32,  96,  77,  32, //  = ddl ? `M 
+  36, 123, 100, 100,  91,  48,  93,  91,  48,  93, 125,  44, // ${dd[0][0]},
+  36, 123, 100, 100,  91,  48,  93,  91,  49,  93, 125,  96, // ${dd[0][1]}`
+  32,  58,  32,  96,  77,  32,  48,  44,  48,  96,  59,  10, //  : `M 0,0`;.
+  32,  32, 108, 101, 116,  32,  98, 101, 103, 105, 110,  32, //   let begin 
+  61,  32,  96,  77,  32,  36, 123, 119,  49, 125,  44,  36, // = `M ${w1},$
+ 123, 104,  32,  45,  32, 104,  50, 125,  96,  59,  32,  32, // {h - h2}`;  
+  47,  47,  32,  73, 110, 105, 116, 105,  97, 108,  32, 112, // // Initial p
+ 111, 105, 110, 116,  10,  32,  32, 108, 101, 116,  32, 101, // oint.  let e
+ 110, 100,  32,  61,  32, 100, 100, 108,  32,  63,  32,  96, // nd = ddl ? `
+  76,  32,  36, 123, 100, 100,  91, 100, 100, 108,  32,  45, // L ${dd[ddl -
+  32,  49,  93,  91,  48,  93, 125,  44,  36, 123, 104,  32, //  1][0]},${h 
+  45,  32, 104,  50, 125,  96,  32,  58,  32,  96,  76,  32, // - h2}` : `L 
+  36, 123, 119,  49, 125,  44,  36, 123, 104,  32,  45,  32, // ${w1},${h - 
+ 104,  50, 125,  96,  59,  10,  32,  32, 108, 101, 116,  32, // h2}`;.  let 
+ 115, 101, 114, 105, 101, 115,  32,  61,  32, 100, 100, 108, // series = ddl
+  32,  63,  32, 100, 100,  46, 109,  97, 112,  40, 112,  32, //  ? dd.map(p 
+  61,  62,  32,  96,  76,  32,  36, 123, 112,  91,  48,  93, // => `L ${p[0]
+ 125,  32,  36, 123, 112,  91,  49,  93, 125,  96,  41,  32, // } ${p[1]}`) 
+  58,  32,  91,  93,  59,  10,  10,  32,  32, 114, 101, 116, // : [];..  ret
+ 117, 114, 110,  32, 104, 116, 109, 108,  96,  10,  60, 115, // urn html`.<s
+ 118, 103,  32, 118, 105, 101, 119,  66, 111, 120,  61,  34, // vg viewBox="
+  48,  32,  48,  32,  36, 123, 119, 125,  32,  36, 123, 104, // 0 0 ${w} ${h
+ 125,  34,  62,  10,  32,  32,  60, 115, 116, 121, 108, 101, // }">.  <style
+  62,  10,  32,  32,  32,  32,  46,  97, 120, 105, 115,  32, // >.    .axis 
+ 123,  32, 115, 116, 114, 111, 107, 101,  58,  32,  35,  97, // { stroke: #a
+  97,  97,  59,  32, 102, 105, 108, 108,  58,  32, 110, 111, // aa; fill: no
+ 110, 101,  59,  32, 125,  10,  32,  32,  32,  32,  46, 108, // ne; }.    .l
+  97,  98, 101, 108,  32, 123,  32, 115, 116, 114, 111, 107, // abel { strok
+ 101,  58,  32,  35,  97,  97,  97,  59,  32, 102, 111, 110, // e: #aaa; fon
+ 116,  45, 115, 105, 122, 101,  58,  32,  49,  51, 112, 120, // t-size: 13px
+  59,  32, 125,  10,  32,  32,  32,  32,  46, 116, 105,  99, // ; }.    .tic
+ 107,  32, 123,  32, 115, 116, 114, 111, 107, 101,  58,  32, // k { stroke: 
+  35,  99,  99,  99,  59,  32, 102, 105, 108, 108,  58,  32, // #ccc; fill: 
+ 110, 111, 110, 101,  59,  32, 115, 116, 114, 111, 107, 101, // none; stroke
+  45, 100,  97, 115, 104,  97, 114, 114,  97, 121,  58,  32, // -dasharray: 
+  53,  59,  32, 125,  10,  32,  32,  32,  32,  46, 115, 101, // 5; }.    .se
+ 114, 105, 101, 115,  98, 103,  32, 123,  32, 115, 116, 114, // riesbg { str
+ 111, 107, 101,  58,  32, 110, 111, 110, 101,  59,  32, 102, // oke: none; f
+ 105, 108, 108,  58,  32, 114, 103,  98,  97,  40,  50,  48, // ill: rgba(20
+  48,  44,  50,  50,  53,  44,  50,  53,  53,  44,  32,  48, // 0,225,255, 0
+  46,  50,  53,  41, 125,  10,  32,  32,  32,  32,  46, 115, // .25)}.    .s
+ 101, 114, 105, 101, 115,  32, 123,  32, 115, 116, 114, 111, // eries { stro
+ 107, 101,  58,  32,  35,  50,  53,  97,  59,  32, 102, 105, // ke: #25a; fi
+ 108, 108,  58,  32, 110, 111, 110, 101,  59,  32, 125,  10, // ll: none; }.
+  32,  32,  60,  47, 115, 116, 121, 108, 101,  62,  10,  32, //   </style>. 
+  32,  36, 123, 121, 116,  97,  46, 109,  97, 112,  40, 105, //  ${yta.map(i
+  32,  61,  62,  32, 121, 116, 108,  40, 121, 116, 105,  40, //  => ytl(yti(
+ 105,  41,  41,  41, 125,  10,  32,  32,  36, 123, 121, 116, // i)))}.  ${yt
+  97,  46, 109,  97, 112,  40, 105,  32,  61,  62,  32, 121, // a.map(i => y
+ 116, 116,  40, 121, 116, 105,  40, 105,  41,  44,  32, 121, // tt(yti(i), y
+ 116, 118,  40, 105,  41,  41,  41, 125,  10,  32,  32,  36, // tv(i)))}.  $
+ 123, 120, 116,  97,  46, 109,  97, 112,  40, 105,  32,  61, // {xta.map(i =
+  62,  32, 120, 116, 108,  40, 120, 116, 105,  40, 105,  41, // > xtl(xti(i)
+  41,  41, 125,  10,  32,  32,  36, 123, 100,  97, 116,  97, // ))}.  ${data
+  46, 108, 101, 110, 103, 116, 104,  32,  63,  32, 120, 116, // .length ? xt
+  97,  46, 109,  97, 112,  40, 105,  32,  61,  62,  32, 120, // a.map(i => x
+ 116, 116,  40, 120, 116, 105,  40, 105,  41,  44,  32, 120, // tt(xti(i), x
+ 116, 118,  40, 105,  41,  41,  41,  32,  58,  32,  39,  39, // tv(i))) : ''
+ 125,  10,  32,  32,  60, 112,  97, 116, 104,  32, 100,  61, // }.  <path d=
+  34,  36, 123,  98, 101, 103, 105, 110, 125,  32,  36, 123, // "${begin} ${
+ 115, 101, 114, 105, 101, 115,  46, 106, 111, 105, 110,  40, // series.join(
+  39,  32,  39,  41, 125,  32,  36, 123, 101, 110, 100, 125, // ' ')} ${end}
+  34,  32,  99, 108,  97, 115, 115,  61,  34, 115, 101, 114, // " class="ser
+ 105, 101, 115,  98, 103,  34,  32,  47,  62,  10,  32,  32, // iesbg" />.  
+  60, 112,  97, 116, 104,  32, 100,  61,  34,  36, 123,  98, // <path d="${b
+ 101, 103, 105, 110,  48, 125,  32,  36, 123, 115, 101, 114, // egin0} ${ser
+ 105, 101, 115,  46, 106, 111, 105, 110,  40,  39,  32,  39, // ies.join(' '
+  41, 125,  34,  32,  99, 108,  97, 115, 115,  61,  34, 115, // )}" class="s
+ 101, 114, 105, 101, 115,  34,  32,  47,  62,  10,  60,  47, // eries" />.</
+ 115, 118, 103,  62,  96,  59,  10, 125,  59,  10,  10,  10, // svg>`;.};...
+  99, 111, 110, 115, 116,  32,  67, 104,  97, 114, 116,  32, // const Chart 
+  61,  32, 102, 117, 110,  99, 116, 105, 111, 110,  40, 112, // = function(p
+ 114, 111, 112, 115,  41,  32, 123,  10,  32,  32,  99, 111, // rops) {.  co
+ 110, 115, 116,  32,  91, 100,  97, 116,  97,  44,  32, 115, // nst [data, s
+ 101, 116,  68,  97, 116,  97,  93,  32,  61,  32, 117, 115, // etData] = us
+ 101,  83, 116,  97, 116, 101,  40,  91,  93,  41,  59,  10, // eState([]);.
+  32,  32, 117, 115, 101,  69, 102, 102, 101,  99, 116,  40, //   useEffect(
+  40,  41,  32,  61,  62,  32, 123,  10,  32,  32,  32,  32, // () => {.    
+  99, 111, 110, 115, 116,  32, 105, 100,  32,  61,  32,  80, // const id = P
+ 117,  98,  83, 117,  98,  46, 115, 117,  98, 115,  99, 114, // ubSub.subscr
+ 105,  98, 101,  40, 102, 117, 110,  99, 116, 105, 111, 110, // ibe(function
+  40, 109, 115, 103,  41,  32, 123,  10,  32,  32,  32,  32, // (msg) {.    
+  32,  32, 105, 102,  32,  40, 109, 115, 103,  46, 110,  97, //   if (msg.na
+ 109, 101,  32,  33,  61,  32,  39, 109, 101, 116, 114, 105, // me != 'metri
+  99, 115,  39,  41,  32, 114, 101, 116, 117, 114, 110,  59, // cs') return;
+  10,  32,  32,  32,  32,  32,  32, 115, 101, 116,  68,  97, // .      setDa
+ 116,  97,  40, 120,  32,  61,  62,  32, 120,  46,  99, 111, // ta(x => x.co
+ 110,  99,  97, 116,  40,  91, 109, 115, 103,  46, 100,  97, // ncat([msg.da
+ 116,  97,  93,  41,  46, 115, 112, 108, 105,  99, 101,  40, // ta]).splice(
+  45,  77,  97, 120,  77, 101, 116, 114, 105,  99, 115,  68, // -MaxMetricsD
+  97, 116,  97,  80, 111, 105, 110, 116, 115,  41,  41,  59, // ataPoints));
+  10,  32,  32,  32,  32, 125,  41,  59,  10,  32,  32,  32, // .    });.   
+  32, 114, 101, 116, 117, 114, 110,  32,  80, 117,  98,  83, //  return PubS
+ 117,  98,  46, 117, 110, 115, 117,  98, 115,  99, 114, 105, // ub.unsubscri
+  98, 101,  40, 105, 100,  41,  59,  10,  32,  32, 125,  44, // be(id);.  },
+  32,  91,  93,  41,  59,  10,  10,  32,  32, 108, 101, 116, //  []);..  let
+  32, 120, 109,  97, 120,  32,  61,  32,  48,  44,  32, 109, //  xmax = 0, m
+ 105, 115, 115, 105, 110, 103,  32,  61,  32,  77,  97, 120, // issing = Max
+  77, 101, 116, 114, 105,  99, 115,  68,  97, 116,  97,  80, // MetricsDataP
+ 111, 105, 110, 116, 115,  32,  45,  32, 100,  97, 116,  97, // oints - data
+  46, 108, 101, 110, 103, 116, 104,  59,  10,  32,  32, 105, // .length;.  i
+ 102,  32,  40, 109, 105, 115, 115, 105, 110, 103,  32,  62, // f (missing >
+  32,  48,  41,  32, 120, 109,  97, 120,  32,  61,  32,  77, //  0) xmax = M
+  97, 116, 104,  46, 114, 111, 117, 110, 100,  40,  68,  97, // ath.round(Da
+ 116, 101,  46, 110, 111, 119,  40,  41,  32,  47,  32,  49, // te.now() / 1
+  48,  48,  48,  41,  32,  43,  32, 109, 105, 115, 115, 105, // 000) + missi
+ 110, 103,  59,  10,  32,  32, 114, 101, 116, 117, 114, 110, // ng;.  return
+  32, 104, 116, 109, 108,  96,  10,  60, 100, 105, 118,  32, //  html`.<div 
+  99, 108,  97, 115, 115,  61,  34, 115, 101,  99, 116, 105, // class="secti
+ 111, 110,  34,  62,  10,  32,  32,  60, 104,  51,  32, 115, // on">.  <h3 s
+ 116, 121, 108, 101,  61,  34,  98,  97,  99, 107, 103, 114, // tyle="backgr
+ 111, 117, 110, 100,  58,  32,  35, 101,  99,  51,  59,  32, // ound: #ec3; 
+  99, 111, 108, 111, 114,  58,  32,  35, 102, 102, 102,  59, // color: #fff;
+  32, 112,  97, 100, 100, 105, 110, 103,  58,  32,  48,  46, //  padding: 0.
+  52, 101, 109,  59,  34,  62,  68,  97, 116,  97,  32,  67, // 4em;">Data C
+ 104,  97, 114, 116,  60,  47, 104,  51,  62,  10,  32,  32, // hart</h3>.  
+  60, 100, 105, 118,  32, 115, 116, 121, 108, 101,  61,  34, // <div style="
+ 111, 118, 101, 114, 102, 108, 111, 119,  58,  32,  97, 117, // overflow: au
+ 116, 111,  59,  32, 112,  97, 100, 100, 105, 110, 103,  58, // to; padding:
+  32,  48,  46,  53, 101, 109,  59,  34,  32,  99, 108,  97, //  0.5em;" cla
+ 115, 115,  61,  34,  34,  62,  10,  32,  32,  32,  32,  60, // ss="">.    <
+  36, 123,  83,  86,  71, 125,  32, 104, 101, 105, 103, 104, // ${SVG} heigh
+ 116,  61,  50,  52,  48,  32, 119, 105, 100, 116, 104,  61, // t=240 width=
+  54,  48,  48,  32, 121, 109, 105, 110,  61,  48,  32, 121, // 600 ymin=0 y
+ 109,  97, 120,  61,  50,  48,  32, 120, 109,  97, 120,  61, // max=20 xmax=
+  36, 123, 120, 109,  97, 120, 125,  32, 100,  97, 116,  97, // ${xmax} data
+  61,  36, 123, 100,  97, 116,  97, 125,  32,  47,  62,  10, // =${data} />.
+  32,  32,  60,  47, 100, 105, 118,  62,  10,  32,  32,  60, //   </div>.  <
+ 100, 105, 118,  32,  99, 108,  97, 115, 115,  61,  34, 109, // div class="m
+ 115, 103,  34,  62,  10,  32,  32,  32,  32,  84, 104, 105, // sg">.    Thi
+ 115,  32,  99, 104,  97, 114, 116,  32, 112, 108, 111, 116, // s chart plot
+ 115,  32, 108, 105, 118, 101,  32, 115, 101, 110, 115, 111, // s live senso
+ 114,  32, 100,  97, 116,  97,  44,  32, 115, 101, 110, 116, // r data, sent
+  32,  98, 121,  32, 116, 104, 101,  32, 100, 101, 118, 105, //  by the devi
+  99, 101,  32, 118, 105,  97,  32,  47,  97, 112, 105,  47, // ce via /api/
+ 119,  97, 116,  99, 104,  46,  10,  32,  32,  60,  47, 100, // watch..  </d
+ 105, 118,  62,  10,  60,  47, 100, 105, 118,  62,  96,  59, // iv>.</div>`;
+  10, 125,  59,  10,  10,  99, 111, 110, 115, 116,  32,  65, // .};..const A
+ 112, 112,  32,  61,  32, 102, 117, 110,  99, 116, 105, 111, // pp = functio
+ 110,  40, 112, 114, 111, 112, 115,  41,  32, 123,  10,  32, // n(props) {. 
+  32,  99, 111, 110, 115, 116,  32,  91, 117, 115, 101, 114, //  const [user
+  44,  32, 115, 101, 116,  85, 115, 101, 114,  93,  32,  61, // , setUser] =
+  32, 117, 115, 101,  83, 116,  97, 116, 101,  40,  39,  39, //  useState(''
+  41,  59,  10,  32,  32,  99, 111, 110, 115, 116,  32,  91, // );.  const [
+  99, 111, 110, 102, 105, 103,  44,  32, 115, 101, 116,  67, // config, setC
+ 111, 110, 102, 105, 103,  93,  32,  61,  32, 117, 115, 101, // onfig] = use
+  83, 116,  97, 116, 101,  40, 123, 125,  41,  59,  10,  10, // State({});..
+  32,  32,  99, 111, 110, 115, 116,  32, 103, 101, 116,  99, //   const getc
+ 111, 110, 102, 105, 103,  32,  61,  32,  40,  41,  32,  61, // onfig = () =
+  62,  10,  32,  32,  32,  32,  32,  32, 102, 101, 116,  99, // >.      fetc
+ 104,  40,  39,  47,  97, 112, 105,  47,  99, 111, 110, 102, // h('/api/conf
+ 105, 103,  47, 103, 101, 116,  39,  44,  32, 123, 104, 101, // ig/get', {he
+  97, 100, 101, 114, 115,  58,  32, 123,  65, 117, 116, 104, // aders: {Auth
+ 111, 114, 105, 122,  97, 116, 105, 111, 110,  58,  32,  39, // orization: '
+  39, 125, 125,  41,  10,  32,  32,  32,  32,  32,  32,  32, // '}}).       
+  32,  32,  32,  46, 116, 104, 101, 110,  40, 114,  32,  61, //    .then(r =
+  62,  32, 114,  46, 106, 115, 111, 110,  40,  41,  41,  10, // > r.json()).
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  46, 116, //           .t
+ 104, 101, 110,  40, 114,  32,  61,  62,  32, 115, 101, 116, // hen(r => set
+  67, 111, 110, 102, 105, 103,  40, 114,  41,  41,  10,  32, // Config(r)). 
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  46,  99,  97, //          .ca
+ 116,  99, 104,  40, 101, 114, 114,  32,  61,  62,  32,  99, // tch(err => c
+ 111, 110, 115, 111, 108, 101,  46, 108, 111, 103,  40, 101, // onsole.log(e
+ 114, 114,  41,  41,  59,  10,  10,  32,  32,  99, 111, 110, // rr));..  con
+ 115, 116,  32, 108, 111, 103, 105, 110,  32,  61,  32, 102, // st login = f
+ 117, 110,  99, 116, 105, 111, 110,  40, 117,  41,  32, 123, // unction(u) {
+  10,  32,  32,  32,  32, 100, 111,  99, 117, 109, 101, 110, // .    documen
+ 116,  46,  99, 111, 111, 107, 105, 101,  32,  61,  32,  96, // t.cookie = `
+  97,  99,  99, 101, 115, 115,  95, 116, 111, 107, 101, 110, // access_token
+  61,  36, 123, 117,  46, 116, 111, 107, 101, 110, 125,  59, // =${u.token};
+ 112,  97, 116, 104,  61,  47,  59, 109,  97, 120,  45,  97, // path=/;max-a
+ 103, 101,  61,  51,  54,  48,  48,  96,  59,  10,  32,  32, // ge=3600`;.  
+  32,  32, 115, 101, 116,  85, 115, 101, 114,  40, 117,  46, //   setUser(u.
+ 117, 115, 101, 114,  41,  59,  10,  32,  32,  32,  32, 114, // user);.    r
+ 101, 116, 117, 114, 110,  32, 103, 101, 116,  99, 111, 110, // eturn getcon
+ 102, 105, 103,  40,  41,  59,  10,  32,  32, 125,  59,  10, // fig();.  };.
+  10,  32,  32,  99, 111, 110, 115, 116,  32, 108, 111, 103, // .  const log
+ 111, 117, 116,  32,  61,  32, 101, 118,  32,  61,  62,  32, // out = ev => 
+ 123,  10,  32,  32,  32,  32, 100, 111,  99, 117, 109, 101, // {.    docume
+ 110, 116,  46,  99, 111, 111, 107, 105, 101,  32,  61,  32, // nt.cookie = 
+  96,  97,  99,  99, 101, 115, 115,  95, 116, 111, 107, 101, // `access_toke
+ 110,  61,  59, 112,  97, 116, 104,  61,  47,  59, 109,  97, // n=;path=/;ma
+ 120,  45,  97, 103, 101,  61,  48,  96,  59,  10,  32,  32, // x-age=0`;.  
+  32,  32, 115, 101, 116,  85, 115, 101, 114,  40,  39,  39, //   setUser(''
+  41,  59,  10,  32,  32, 125,  59,  10,  10,  32,  32,  47, // );.  };..  /
+  47,  32,  87,  97, 116,  99, 104,  32, 102, 111, 114,  32, // / Watch for 
+ 110, 111, 116, 105, 102, 105,  99,  97, 116, 105, 111, 110, // notification
+ 115,  46,  32,  65, 115,  32, 115, 111, 111, 110,  32,  97, // s. As soon a
+ 115,  32,  97,  32, 110, 111, 116, 105, 102, 105,  99,  97, // s a notifica
+ 116, 105, 111, 110,  32,  97, 114, 114, 105, 118, 101, 115, // tion arrives
+  44,  32, 112,  97, 115, 115,  32, 105, 116,  32, 111, 110, // , pass it on
+  10,  32,  32,  47,  47,  32, 116, 111,  32,  97, 108, 108, // .  // to all
+  32, 115, 117,  98, 115,  99, 114, 105,  98, 101, 100,  32, //  subscribed 
+  99, 111, 109, 112, 111, 110, 101, 110, 116, 115,  10,  32, // components. 
+  32,  99, 111, 110, 115, 116,  32, 119,  97, 116,  99, 104, //  const watch
+  32,  61,  32, 102, 117, 110,  99, 116, 105, 111, 110,  40, //  = function(
+  41,  32, 123,  10,  32,  32,  32,  32, 118,  97, 114,  32, // ) {.    var 
+ 108,  32,  61,  32, 119, 105, 110, 100, 111, 119,  46, 108, // l = window.l
+ 111,  99,  97, 116, 105, 111, 110,  44,  32, 112, 114, 111, // ocation, pro
+ 116, 111,  32,  61,  32, 108,  46, 112, 114, 111, 116, 111, // to = l.proto
+  99, 111, 108,  46, 114, 101, 112, 108,  97,  99, 101,  40, // col.replace(
+  39, 104, 116, 116, 112,  39,  44,  32,  39, 119, 115,  39, // 'http', 'ws'
+  41,  59,  10,  32,  32,  32,  32, 118,  97, 114,  32, 116, // );.    var t
+ 105, 100,  44,  32, 119, 115,  85,  82,  73,  32,  61,  32, // id, wsURI = 
+ 112, 114, 111, 116, 111,  32,  43,  32,  39,  47,  47,  39, // proto + '//'
+  32,  43,  32, 108,  46, 104, 111, 115, 116,  32,  43,  32, //  + l.host + 
+  39,  47,  97, 112, 105,  47, 119,  97, 116,  99, 104,  39, // '/api/watch'
+  10,  32,  32,  32,  32, 118,  97, 114,  32, 114, 101,  99, // .    var rec
+ 111, 110, 110, 101,  99, 116,  32,  61,  32, 102, 117, 110, // onnect = fun
   99, 116, 105, 111, 110,  40,  41,  32, 123,  10,  32,  32, // ction() {.  
-  32,  32,  32,  32,  32,  32,  99, 108, 101,  97, 114,  84, //       clearT
- 105, 109, 101, 111, 117, 116,  40, 116, 105, 100,  41,  59, // imeout(tid);
-  10,  32,  32,  32,  32,  32,  32,  32,  32, 116, 105, 100, // .        tid
-  32,  61,  32, 115, 101, 116,  84, 105, 109, 101, 111, 117, //  = setTimeou
- 116,  40, 114, 101,  99, 111, 110, 110, 101,  99, 116,  44, // t(reconnect,
-  32,  49,  48,  48,  48,  41,  59,  10,  32,  32,  32,  32, //  1000);.    
-  32,  32,  32,  32,  99, 111, 110, 115, 111, 108, 101,  46, //     console.
- 108, 111, 103,  40,  39, 119, 115,  32, 100, 105, 115,  99, // log('ws disc
- 111, 110, 110, 101,  99, 116, 101, 100,  39,  41,  59,  10, // onnected');.
-  32,  32,  32,  32,  32,  32, 125,  59,  10,  32,  32,  32, //       };.   
-  32, 125,  59,  10,  32,  32,  32,  32, 114, 101,  99, 111, //  };.    reco
- 110, 110, 101,  99, 116,  40,  41,  59,  10,  32,  32, 125, // nnect();.  }
-  59,  10,  10,  32,  32,  99, 111, 110, 115, 116,  32, 108, // ;..  const l
- 111, 103, 105, 110,  32,  61,  32, 102, 117, 110,  99, 116, // ogin = funct
- 105, 111, 110,  40, 117,  41,  32, 123,  10,  32,  32,  32, // ion(u) {.   
-  32, 100, 111,  99, 117, 109, 101, 110, 116,  46,  99, 111, //  document.co
- 111, 107, 105, 101,  32,  61,  32,  96,  97,  99,  99, 101, // okie = `acce
- 115, 115,  95, 116, 111, 107, 101, 110,  61,  36, 123, 117, // ss_token=${u
-  46, 116, 111, 107, 101, 110, 125,  59,  32,  83, 101,  99, // .token}; Sec
- 117, 114, 101,  44,  32,  72, 116, 116, 112,  79, 110, 108, // ure, HttpOnl
- 121,  59,  32,  83,  97, 109, 101,  83, 105, 116, 101,  61, // y; SameSite=
-  76,  97, 120,  59,  32, 112,  97, 116, 104,  61,  47,  59, // Lax; path=/;
-  32, 109,  97, 120,  45,  97, 103, 101,  61,  51,  54,  48, //  max-age=360
-  48,  96,  59,  10,  32,  32,  32,  32, 115, 101, 116,  85, // 0`;.    setU
- 115, 101, 114,  40, 117,  46, 117, 115, 101, 114,  41,  59, // ser(u.user);
-  10,  32,  32,  32,  32, 105, 102,  32,  40, 108, 111,  99, // .    if (loc
-  97, 116, 105, 111, 110,  46, 115, 101,  97, 114,  99, 104, // ation.search
-  46, 115, 117,  98, 115, 116, 114, 105, 110, 103,  40,  49, // .substring(1
-  41,  32,  61,  61,  32,  39, 110, 111, 119, 115,  39,  41, // ) == 'nows')
-  32, 123,  10,  32,  32,  32,  32,  32,  32,  47,  47,  32, //  {.      // 
-  73, 102,  32, 113, 117, 101, 114, 121,  32, 115, 116, 114, // If query str
- 105, 110, 103,  32, 105, 115,  32,  63, 110, 111, 119, 115, // ing is ?nows
-  44,  32, 116, 104, 101, 110,  32, 100, 111,  32, 110, 111, // , then do no
- 116,  32,  99, 111, 110, 110, 101,  99, 116,  32, 116, 111, // t connect to
-  32, 119, 101,  98, 115, 111,  99, 107, 101, 116,  46,  32, //  websocket. 
-  70, 111, 114,  32, 100, 101,  98, 117, 103,  46,  10,  32, // For debug.. 
-  32,  32,  32, 125,  32, 101, 108, 115, 101,  32, 123,  10, //    } else {.
-  32,  32,  32,  32,  32,  32, 119,  97, 116,  99, 104,  40, //       watch(
-  41,  59,  32,  47,  47,  32,  67, 111, 110, 110, 101,  99, // ); // Connec
- 116,  32, 116, 111,  32, 119, 101,  98, 115, 111,  99, 107, // t to websock
- 101, 116,  44,  32, 114, 101,  99, 101, 105, 118, 101,  32, // et, receive 
-  99, 111, 110, 115, 116,  97, 110, 116,  32, 103, 114,  97, // constant gra
- 112, 104,  32, 117, 112, 100,  97, 116, 101, 115,  10,  32, // ph updates. 
-  32,  32,  32, 125,  10,  32,  32,  32,  32, 114, 101, 116, //    }.    ret
- 117, 114, 110,  32, 103, 101, 116,  99, 111, 110, 102, 105, // urn getconfi
- 103,  40,  41,  59,  10,  32,  32, 125,  59,  10,  10,  32, // g();.  };.. 
-  32,  99, 111, 110, 115, 116,  32, 108, 111, 103, 111, 117, //  const logou
- 116,  32,  61,  32, 101, 118,  32,  61,  62,  32, 123,  10, // t = ev => {.
-  32,  32,  32,  32, 100, 111,  99, 117, 109, 101, 110, 116, //     document
-  46,  99, 111, 111, 107, 105, 101,  32,  61,  32,  96,  97, // .cookie = `a
-  99,  99, 101, 115, 115,  95, 116, 111, 107, 101, 110,  61, // ccess_token=
-  59,  32,  83, 101,  99, 117, 114, 101,  44,  32,  72, 116, // ; Secure, Ht
- 116, 112,  79, 110, 108, 121,  59,  32,  83,  97, 109, 101, // tpOnly; Same
-  83, 105, 116, 101,  61,  76,  97, 120,  59,  32, 112,  97, // Site=Lax; pa
- 116, 104,  61,  47,  59,  32, 109,  97, 120,  45,  97, 103, // th=/; max-ag
- 101,  61,  48,  96,  59,  10,  32,  32,  32,  32, 115, 101, // e=0`;.    se
- 116,  85, 115, 101, 114,  40,  39,  39,  41,  59,  10,  32, // tUser('');. 
-  32, 125,  59,  10,  10,  32,  32, 117, 115, 101,  69, 102, //  };..  useEf
- 102, 101,  99, 116,  40,  40,  41,  32,  61,  62,  32, 123, // fect(() => {
-  10,  32,  32,  32,  32,  47,  47,  32,  67,  97, 108, 108, // .    // Call
- 101, 100,  32, 111, 110,  99, 101,  32,  97, 116,  32, 105, // ed once at i
- 110, 105, 116,  32, 116, 105, 109, 101,  10,  32,  32,  32, // nit time.   
-  32,  80, 117,  98,  83, 117,  98,  46, 115, 117,  98, 115, //  PubSub.subs
-  99, 114, 105,  98, 101,  40, 109, 115, 103,  32,  61,  62, // cribe(msg =>
-  32, 109, 115, 103,  46, 110,  97, 109, 101,  32,  61,  61, //  msg.name ==
-  32,  39,  99, 111, 110, 102, 105, 103,  39,  32,  38,  38, //  'config' &&
-  32, 103, 101, 116,  99, 111, 110, 102, 105, 103,  40,  41, //  getconfig()
-  41,  59,  10,  32,  32,  32,  32, 102, 101, 116,  99, 104, // );.    fetch
-  40,  39,  47,  97, 112, 105,  47, 108, 111, 103, 105, 110, // ('/api/login
-  39,  44,  32, 123, 104, 101,  97, 100, 101, 114, 115,  58, // ', {headers:
-  32, 123,  65, 117, 116, 104, 111, 114, 105, 122,  97, 116, //  {Authorizat
- 105, 111, 110,  58,  32,  39,  39, 125, 125,  41,  10,  32, // ion: ''}}). 
-  32,  32,  32,  32,  32,  32,  32,  46, 116, 104, 101, 110, //        .then
-  40, 114,  32,  61,  62,  32, 114,  46, 106, 115, 111, 110, // (r => r.json
-  40,  41,  41,  10,  32,  32,  32,  32,  32,  32,  32,  32, // ()).        
-  46, 116, 104, 101, 110,  40, 114,  32,  61,  62,  32, 108, // .then(r => l
- 111, 103, 105, 110,  40, 114,  41,  41,  10,  32,  32,  32, // ogin(r)).   
+  32,  32,  32,  32, 118,  97, 114,  32, 119, 115,  32,  61, //     var ws =
+  32, 110, 101, 119,  32,  87, 101,  98,  83, 111,  99, 107, //  new WebSock
+ 101, 116,  40, 119, 115,  85,  82,  73,  41,  59,  10,  32, // et(wsURI);. 
+  32,  32,  32,  32,  32, 119, 115,  46, 111, 110, 111, 112, //      ws.onop
+ 101, 110,  32,  61,  32,  40,  41,  32,  61,  62,  32,  99, // en = () => c
+ 111, 110, 115, 111, 108, 101,  46, 108, 111, 103,  40,  39, // onsole.log('
+ 119, 115,  32,  99, 111, 110, 110, 101,  99, 116, 101, 100, // ws connected
+  39,  41,  59,  10,  32,  32,  32,  32,  32,  32, 119, 115, // ');.      ws
+  46, 111, 110, 109, 101, 115, 115,  97, 103, 101,  32,  61, // .onmessage =
+  32, 102, 117, 110,  99, 116, 105, 111, 110,  40, 101, 118, //  function(ev
+  41,  32, 123,  10,  32,  32,  32,  32,  32,  32,  32,  32, // ) {.        
+ 116, 114, 121,  32, 123,  10,  32,  32,  32,  32,  32,  32, // try {.      
+  32,  32,  32,  32, 118,  97, 114,  32, 109, 115, 103,  32, //     var msg 
+  61,  32,  74,  83,  79,  78,  46, 112,  97, 114, 115, 101, // = JSON.parse
+  40, 101, 118,  46, 100,  97, 116,  97,  41,  59,  10,  32, // (ev.data);. 
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  80, 117,  98, //          Pub
+  83, 117,  98,  46, 112, 117,  98, 108, 105, 115, 104,  40, // Sub.publish(
+ 109, 115, 103,  41,  59,  10,  32,  32,  32,  32,  32,  32, // msg);.      
+  32,  32,  32,  32, 105, 102,  32,  40, 109, 115, 103,  46, //     if (msg.
+ 110,  97, 109, 101,  32,  33,  61,  32,  39, 109, 101, 116, // name != 'met
+ 114, 105,  99, 115,  39,  41,  32,  99, 111, 110, 115, 111, // rics') conso
+ 108, 101,  46, 108, 111, 103,  40,  39, 119, 115,  45,  62, // le.log('ws->
+  39,  44,  32, 109, 115, 103,  41,  59,  10,  32,  32,  32, // ', msg);.   
+  32,  32,  32,  32,  32, 125,  32,  99,  97, 116,  99, 104, //      } catch
+  32,  40, 101,  41,  32, 123,  10,  32,  32,  32,  32,  32, //  (e) {.     
+  32,  32,  32,  32,  32,  99, 111, 110, 115, 111, 108, 101, //      console
+  46, 108, 111, 103,  40,  39,  73, 110, 118,  97, 108, 105, // .log('Invali
+ 100,  32, 119, 115,  32, 102, 114,  97, 109, 101,  58,  39, // d ws frame:'
+  44,  32, 101, 118,  46, 100,  97, 116,  97,  41,  59,  32, // , ev.data); 
+  32,  47,  47,  32, 101, 115, 108, 105, 110, 116,  45, 100, //  // eslint-d
+ 105, 115,  97,  98, 108, 101,  45, 108, 105, 110, 101,  10, // isable-line.
+  32,  32,  32,  32,  32,  32,  32,  32, 125,  10,  32,  32, //         }.  
+  32,  32,  32,  32, 125,  59,  10,  32,  32,  32,  32,  32, //     };.     
+  32, 119, 115,  46, 111, 110,  99, 108, 111, 115, 101,  32, //  ws.onclose 
+  61,  32, 102, 117, 110,  99, 116, 105, 111, 110,  40,  41, // = function()
+  32, 123,  10,  32,  32,  32,  32,  32,  32,  32,  32,  99, //  {.        c
+ 108, 101,  97, 114,  84, 105, 109, 101, 111, 117, 116,  40, // learTimeout(
+ 116, 105, 100,  41,  59,  10,  32,  32,  32,  32,  32,  32, // tid);.      
+  32,  32, 116, 105, 100,  32,  61,  32, 115, 101, 116,  84, //   tid = setT
+ 105, 109, 101, 111, 117, 116,  40, 114, 101,  99, 111, 110, // imeout(recon
+ 110, 101,  99, 116,  44,  32,  49,  48,  48,  48,  41,  59, // nect, 1000);
+  10,  32,  32,  32,  32,  32,  32,  32,  32,  99, 111, 110, // .        con
+ 115, 111, 108, 101,  46, 108, 111, 103,  40,  39, 119, 115, // sole.log('ws
+  32, 100, 105, 115,  99, 111, 110, 110, 101,  99, 116, 101, //  disconnecte
+ 100,  39,  41,  59,  10,  32,  32,  32,  32,  32,  32, 125, // d');.      }
+  59,  10,  32,  32,  32,  32, 125,  59,  10,  32,  32,  32, // ;.    };.   
+  32, 114, 101,  99, 111, 110, 110, 101,  99, 116,  40,  41, //  reconnect()
+  59,  10,  32,  32, 125,  59,  10,  10,  32,  32, 117, 115, // ;.  };..  us
+ 101,  69, 102, 102, 101,  99, 116,  40,  40,  41,  32,  61, // eEffect(() =
+  62,  32, 123,  10,  32,  32,  32,  32,  47,  47,  32,  67, // > {.    // C
+  97, 108, 108, 101, 100,  32, 111, 110,  99, 101,  32,  97, // alled once a
+ 116,  32, 105, 110, 105, 116,  32, 116, 105, 109, 101,  10, // t init time.
+  32,  32,  32,  32,  80, 117,  98,  83, 117,  98,  46, 115, //     PubSub.s
+ 117,  98, 115,  99, 114, 105,  98, 101,  40, 109, 115, 103, // ubscribe(msg
+  32,  61,  62,  32, 109, 115, 103,  46, 110,  97, 109, 101, //  => msg.name
+  32,  61,  61,  32,  39,  99, 111, 110, 102, 105, 103,  39, //  == 'config'
+  32,  38,  38,  32, 103, 101, 116,  99, 111, 110, 102, 105, //  && getconfi
+ 103,  40,  41,  41,  59,  10,  32,  32,  32,  32, 102, 101, // g());.    fe
+ 116,  99, 104,  40,  39,  47,  97, 112, 105,  47, 108, 111, // tch('/api/lo
+ 103, 105, 110,  39,  44,  32, 123, 104, 101,  97, 100, 101, // gin', {heade
+ 114, 115,  58,  32, 123,  65, 117, 116, 104, 111, 114, 105, // rs: {Authori
+ 122,  97, 116, 105, 111, 110,  58,  32,  39,  39, 125, 125, // zation: ''}}
+  41,  10,  32,  32,  32,  32,  32,  32,  32,  32,  46, 116, // ).        .t
+ 104, 101, 110,  40, 114,  32,  61,  62,  32, 114,  46, 106, // hen(r => r.j
+ 115, 111, 110,  40,  41,  41,  10,  32,  32,  32,  32,  32, // son()).     
+  32,  32,  32,  46, 116, 104, 101, 110,  40, 114,  32,  61, //    .then(r =
+  62,  32, 108, 111, 103, 105, 110,  40, 114,  41,  41,  10, // > login(r)).
+  32,  32,  32,  32,  32,  32,  32,  32,  46, 116, 104, 101, //         .the
+ 110,  40, 119,  97, 116,  99, 104,  41,  10,  32,  32,  32, // n(watch).   
   32,  32,  32,  32,  32,  46,  99,  97, 116,  99, 104,  40, //      .catch(
  101, 114, 114,  32,  61,  62,  32, 115, 101, 116,  85, 115, // err => setUs
  101, 114,  40,  39,  39,  41,  41,  59,  10,  32,  32, 125, // er(''));.  }
@@ -1230,7 +1173,7 @@ static const unsigned char v2[] = {
   65, 112, 112,  41,  44,  32, 100, 111,  99, 117, 109, 101, // App), docume
  110, 116,  46,  98, 111, 100, 121,  41,  59,  10, 0 // nt.body);.
 };
-static const unsigned char v3[] = {
+static const unsigned char v2[] = {
  118,  97, 114,  32, 101,  44, 110,  44,  95,  44, 116,  44, // var e,n,_,t,
  111,  44, 114,  44, 117,  44, 108,  61, 123, 125,  44, 105, // o,r,u,l={},i
   61,  91,  93,  44,  99,  61,  47,  97,  99, 105, 116, 124, // =[],c=/acit|
@@ -2332,162 +2275,1213 @@ static const unsigned char v3[] = {
  115, 101,  69, 114, 114, 111, 114,  66, 111, 117, 110, 100, // seErrorBound
   97, 114, 121, 125,  59,  10, 0 // ary};.
 };
-static const unsigned char v4[] = {
-  42,  32, 123,  32,  98, 111, 120,  45, 115, 105, 122, 105, // * { box-sizi
- 110, 103,  58,  32,  98, 111, 114, 100, 101, 114,  45,  98, // ng: border-b
- 111, 120,  59,  32, 125,  10, 104, 116, 109, 108,  44,  32, // ox; }.html, 
-  98, 111, 100, 121,  32, 123,  32, 109,  97, 114, 103, 105, // body { margi
- 110,  58,  32,  48,  59,  32, 112,  97, 100, 100, 105, 110, // n: 0; paddin
- 103,  58,  32,  48,  59,  32, 104, 101, 105, 103, 104, 116, // g: 0; height
-  58,  32,  49,  48,  48,  37,  59,  32, 102, 111, 110, 116, // : 100%; font
-  58,  32,  49,  54, 112, 120,  32, 115,  97, 110, 115,  45, // : 16px sans-
- 115, 101, 114, 105, 102,  59,  32, 125,  10, 115, 101, 108, // serif; }.sel
- 101,  99, 116,  44,  32, 105, 110, 112, 117, 116,  44,  32, // ect, input, 
- 108,  97,  98, 101, 108,  58,  58,  98, 101, 102, 111, 114, // label::befor
- 101,  44,  32, 116, 101, 120, 116,  97, 114, 101,  97,  32, // e, textarea 
- 123,  32, 111, 117, 116, 108, 105, 110, 101,  58,  32, 110, // { outline: n
- 111, 110, 101,  59,  32,  98, 111, 120,  45, 115, 104,  97, // one; box-sha
- 100, 111, 119,  58, 110, 111, 110, 101,  32,  33, 105, 109, // dow:none !im
- 112, 111, 114, 116,  97, 110, 116,  59,  32,  98, 111, 114, // portant; bor
- 100, 101, 114,  58,  32,  49, 112, 120,  32, 115, 111, 108, // der: 1px sol
- 105, 100,  32,  35,  99,  99,  99,  32,  33, 105, 109, 112, // id #ccc !imp
- 111, 114, 116,  97, 110, 116,  59,  32, 125,  10,  99, 111, // ortant; }.co
- 100, 101,  44,  32, 112, 114, 101,  32, 123,  32,  99, 111, // de, pre { co
- 108, 111, 114,  58,  32,  35,  51,  55,  51,  59,  32, 102, // lor: #373; f
- 111, 110, 116,  45, 102,  97, 109, 105, 108, 121,  58,  32, // ont-family: 
- 109, 111, 110, 111, 115, 112,  97,  99, 101,  59,  32, 102, // monospace; f
- 111, 110, 116,  45, 119, 101, 105, 103, 104, 116,  58,  32, // ont-weight: 
-  98, 111, 108, 100, 101, 114,  59,  32, 102, 111, 110, 116, // bolder; font
-  45, 115, 105, 122, 101,  58,  32, 115, 109,  97, 108, 108, // -size: small
- 101, 114,  59,  32,  98,  97,  99, 107, 103, 114, 111, 117, // er; backgrou
- 110, 100,  58,  32,  35, 100, 100, 100,  59,  32, 112,  97, // nd: #ddd; pa
- 100, 100, 105, 110, 103,  58,  32,  48,  46,  49, 101, 109, // dding: 0.1em
-  32,  48,  46,  51, 101, 109,  59,  32,  98, 111, 114, 100, //  0.3em; bord
- 101, 114,  45, 114,  97, 100, 105, 117, 115,  58,  32,  48, // er-radius: 0
-  46,  50, 101, 109,  59,  32, 125,  10, 116, 101, 120, 116, // .2em; }.text
-  97, 114, 101,  97,  44,  32, 105, 110, 112, 117, 116,  44, // area, input,
-  32,  46,  97, 100, 100, 111, 110,  32, 123,  32, 102, 111, //  .addon { fo
- 110, 116,  45, 115, 105, 122, 101,  58,  32,  49,  53, 112, // nt-size: 15p
- 120,  59,  32,  98, 111, 114, 100, 101, 114,  58,  32,  49, // x; border: 1
- 112, 120,  32, 115, 111, 108, 105, 100,  32,  35,  99,  99, // px solid #cc
-  99,  59,  32, 112,  97, 100, 100, 105, 110, 103,  58,  32, // c; padding: 
-  48,  46,  53, 101, 109,  59,  32, 125,  10,  97,  44,  32, // 0.5em; }.a, 
-  97,  58, 118, 105, 115, 105, 116, 101, 100,  44,  32,  97, // a:visited, a
-  58,  97,  99, 116, 105, 118, 101,  32, 123,  32,  99, 111, // :active { co
- 108, 111, 114,  58,  32,  35,  53,  53, 102,  59,  32, 125, // lor: #55f; }
-  10,  46,  97, 100, 100, 111, 110,  32, 123,  32,  98,  97, // ..addon { ba
+static const unsigned char v3[] = {
+  39, 117, 115, 101,  32, 115, 116, 114, 105,  99, 116,  39, // 'use strict'
+  59,  10, 105, 109, 112, 111, 114, 116,  32, 123,  67, 111, // ;.import {Co
+ 109, 112, 111, 110, 101, 110, 116,  44,  32, 104,  44,  32, // mponent, h, 
+ 104, 116, 109, 108,  44,  32, 114, 101, 110, 100, 101, 114, // html, render
+  44,  32, 117, 115, 101,  69, 102, 102, 101,  99, 116,  44, // , useEffect,
+  32, 117, 115, 101,  83, 116,  97, 116, 101,  44,  32, 117, //  useState, u
+ 115, 101,  82, 101, 102, 125,  32, 102, 114, 111, 109,  32, // seRef} from 
+  39,  46,  47, 112, 114, 101,  97,  99, 116,  46, 109, 105, // './preact.mi
+ 110,  46, 106, 115,  39,  59,  10,  10, 118,  97, 114,  32, // n.js';..var 
+ 100, 101, 118,  97, 100, 100, 114,  32,  61,  32,  34,  97, // devaddr = "a
+ 100, 100, 114, 101, 115, 115,  58, 112, 111, 114, 116,  34, // ddress:port"
+  59,  10,  10,  99, 111, 110, 115, 116,  32,  77,  97, 120, // ;..const Max
+  77, 101, 116, 114, 105,  99, 115,  68,  97, 116,  97,  80, // MetricsDataP
+ 111, 105, 110, 116, 115,  32,  61,  32,  53,  48,  59,  10, // oints = 50;.
+  10,  47,  47,  32,  84, 104, 105, 115,  32, 115, 105, 109, // .// This sim
+ 112, 108, 101,  32, 112, 117,  98, 108, 105, 115, 104,  47, // ple publish/
+ 115, 117,  98, 115,  99, 114, 105,  98, 101,  32, 105, 115, // subscribe is
+  32, 117, 115, 101, 100,  32, 116, 111,  32, 112,  97, 115, //  used to pas
+ 115,  32, 110, 111, 116, 105, 102, 105,  99,  97, 116, 105, // s notificati
+ 111, 110, 115,  32, 116, 104,  97, 116,  32, 119, 101, 114, // ons that wer
+ 101,  10,  47,  47,  32, 114, 101,  99, 101, 105, 118, 101, // e.// receive
+ 100,  32, 102, 114, 111, 109,  32, 116, 104, 101,  32, 115, // d from the s
+ 101, 114, 118, 101, 114,  44,  32, 116, 111,  32,  97, 108, // erver, to al
+ 108,  32,  99, 104, 105, 108, 100,  32,  99, 111, 109, 112, // l child comp
+ 111, 110, 101, 110, 116, 115,  32, 111, 102,  32, 116, 104, // onents of th
+ 101,  32,  97, 112, 112,  46,  10, 118,  97, 114,  32,  80, // e app..var P
+ 117,  98,  83, 117,  98,  32,  61,  32,  40, 102, 117, 110, // ubSub = (fun
+  99, 116, 105, 111, 110,  40,  41,  32, 123,  10,  32,  32, // ction() {.  
+ 118,  97, 114,  32, 104,  97, 110, 100, 108, 101, 114, 115, // var handlers
+  32,  61,  32, 123, 125,  44,  32, 105, 100,  32,  61,  32, //  = {}, id = 
+  48,  59,  10,  32,  32, 114, 101, 116, 117, 114, 110,  32, // 0;.  return 
+ 123,  10,  32,  32,  32,  32, 115, 117,  98, 115,  99, 114, // {.    subscr
+ 105,  98, 101,  58,  32, 102, 117, 110,  99, 116, 105, 111, // ibe: functio
+ 110,  40, 102, 110,  41,  32, 123,  10,  32,  32,  32,  32, // n(fn) {.    
+  32,  32, 104,  97, 110, 100, 108, 101, 114, 115,  91, 105, //   handlers[i
+ 100,  43,  43,  93,  32,  61,  32, 102, 110,  59,  10,  32, // d++] = fn;. 
+  32,  32,  32, 125,  44,  10,  32,  32,  32,  32, 117, 110, //    },.    un
+ 115, 117,  98, 115,  99, 114, 105,  98, 101,  58,  32, 102, // subscribe: f
+ 117, 110,  99, 116, 105, 111, 110,  40, 105, 100,  41,  32, // unction(id) 
+ 123,  10,  32,  32,  32,  32,  32,  32, 100, 101, 108, 101, // {.      dele
+ 116, 101,  32, 104,  97, 110, 100, 108, 101, 114, 115,  91, // te handlers[
+ 105, 100,  93,  59,  10,  32,  32,  32,  32, 125,  44,  10, // id];.    },.
+  32,  32,  32,  32, 112, 117,  98, 108, 105, 115, 104,  58, //     publish:
+  32, 102, 117, 110,  99, 116, 105, 111, 110,  40, 100,  97, //  function(da
+ 116,  97,  41,  32, 123,  10,  32,  32,  32,  32,  32,  32, // ta) {.      
+ 102, 111, 114,  32,  40, 118,  97, 114,  32, 107,  32, 105, // for (var k i
+ 110,  32, 104,  97, 110, 100, 108, 101, 114, 115,  41,  32, // n handlers) 
+ 104,  97, 110, 100, 108, 101, 114, 115,  91, 107,  93,  40, // handlers[k](
+ 100,  97, 116,  97,  41,  59,  10,  32,  32,  32,  32, 125, // data);.    }
+  10,  32,  32, 125,  59,  10, 125,  41,  40,  41,  59,  10, // .  };.})();.
+  10,  99, 111, 110, 115, 116,  32,  78,  97, 118,  32,  61, // .const Nav =
+  32, 112, 114, 111, 112, 115,  32,  61,  62,  32, 104, 116, //  props => ht
+ 109, 108,  96,  10,  60, 100, 105, 118,  32, 115, 116, 121, // ml`.<div sty
+ 108, 101,  61,  34,  98,  97,  99, 107, 103, 114, 111, 117, // le="backgrou
+ 110, 100,  58,  32,  35,  51,  51,  51,  59,  32, 112,  97, // nd: #333; pa
+ 100, 100, 105, 110, 103,  58,  32,  48,  46,  53, 101, 109, // dding: 0.5em
+  59,  32,  99, 111, 108, 111, 114,  58,  32,  35, 102, 102, // ; color: #ff
+ 102,  59,  34,  62,  10,  32,  32,  60, 100, 105, 118,  32, // f;">.  <div 
+  99, 108,  97, 115, 115,  61,  34,  99, 111, 110, 116,  97, // class="conta
+ 105, 110, 101, 114,  32, 100,  45, 102, 108, 101, 120,  34, // iner d-flex"
+  62,  10,  32,  32,  32,  32,  60, 100, 105, 118,  32, 115, // >.    <div s
+ 116, 121, 108, 101,  61,  34, 102, 108, 101, 120,  58,  32, // tyle="flex: 
+  49,  32,  49,  32,  97, 117, 116, 111,  59,  32, 100, 105, // 1 1 auto; di
+ 115, 112, 108,  97, 121,  58,  32, 102, 108, 101, 120,  59, // splay: flex;
+  32,  97, 108, 105, 103, 110,  45, 105, 116, 101, 109, 115, //  align-items
+  58,  32,  99, 101, 110, 116, 101, 114,  59,  34,  62,  10, // : center;">.
+  32,  32,  32,  32,  32,  32,  60,  98,  62,  89, 111, 117, //       <b>You
+ 114,  32,  80, 114, 111, 100, 117,  99, 116,  60,  47,  98, // r Product</b
+  62,  10,  32,  32,  32,  32,  60,  47, 100, 105, 118,  62, // >.    </div>
+  10,  32,  32,  32,  32,  60, 100, 105, 118,  32, 115, 116, // .    <div st
+ 121, 108, 101,  61,  34, 100, 105, 115, 112, 108,  97, 121, // yle="display
+  58,  32, 102, 108, 101, 120,  59,  32,  97, 108, 105, 103, // : flex; alig
+ 110,  45, 105, 116, 101, 109, 115,  58,  32,  99, 101, 110, // n-items: cen
+ 116, 101, 114,  59,  32, 102, 108, 101, 120,  58,  32,  48, // ter; flex: 0
+  32,  48,  32,  97, 117, 116, 111,  59,  32,  34,  62,  10, //  0 auto; ">.
+  32,  32,  32,  32,  32,  32,  60, 115, 112,  97, 110,  62, //       <span>
+  76, 111, 103, 103, 101, 100,  32, 105, 110,  32,  97, 115, // Logged in as
+  58,  60,  47, 115, 112,  97, 110,  62,  10,  32,  32,  32, // :</span>.   
+  32,  32,  32,  60, 115, 112,  97, 110,  32, 115, 116, 121, //    <span sty
+ 108, 101,  61,  34, 112,  97, 100, 100, 105, 110, 103,  58, // le="padding:
+  32,  48,  32,  48,  46,  53, 101, 109,  59,  34,  62,  60, //  0 0.5em;"><
+ 105, 109, 103,  32, 115, 114,  99,  61,  34, 117, 115, 101, // img src="use
+ 114,  46, 112, 110, 103,  34,  32, 104, 101, 105, 103, 104, // r.png" heigh
+ 116,  61,  34,  50,  50,  34,  32,  47,  62,  60,  47, 115, // t="22" /></s
+ 112,  97, 110,  62,  10,  32,  32,  32,  32,  32,  32,  60, // pan>.      <
+ 115, 112,  97, 110,  62,  36, 123, 112, 114, 111, 112, 115, // span>${props
+  46, 117, 115, 101, 114, 125,  60,  47, 115, 112,  97, 110, // .user}</span
+  62,  10,  32,  32,  32,  32,  32,  32,  60,  97,  32,  99, // >.      <a c
+ 108,  97, 115, 115,  61,  34,  98, 116, 110,  34,  32, 111, // lass="btn" o
+ 110,  99, 108, 105,  99, 107,  61,  36, 123, 112, 114, 111, // nclick=${pro
+ 112, 115,  46, 108, 111, 103, 111, 117, 116, 125,  10,  32, // ps.logout}. 
+  32,  32,  32,  32,  32,  32,  32, 115, 116, 121, 108, 101, //        style
+  61,  34, 109,  97, 114, 103, 105, 110,  45, 108, 101, 102, // ="margin-lef
+ 116,  58,  32,  49, 101, 109,  59,  32, 102, 111, 110, 116, // t: 1em; font
+  45, 115, 105, 122, 101,  58,  32,  48,  46,  56, 101, 109, // -size: 0.8em
+  59,  32,  98,  97,  99, 107, 103, 114, 111, 117, 110, 100, // ; background
+  58,  32,  35,  56,  97,  97,  59,  34,  62, 108, 111, 103, // : #8aa;">log
+ 111, 117, 116,  60,  47,  97,  62,  10,  32,  32,  32,  32, // out</a>.    
+  60,  47, 100, 105, 118,  62,  10,  32,  32,  60,  47, 100, // </div>.  </d
+ 105, 118,  62,  10,  60,  47, 100, 105, 118,  62,  96,  59, // iv>.</div>`;
+  10,  10,  10,  99, 111, 110, 115, 116,  32,  72, 101, 114, // ...const Her
+ 111,  32,  61,  32, 112, 114, 111, 112, 115,  32,  61,  62, // o = props =>
+  32, 104, 116, 109, 108,  96,  10,  60, 100, 105, 118,  32, //  html`.<div 
+  99, 108,  97, 115, 115,  61,  34, 115, 101,  99, 116, 105, // class="secti
+ 111, 110,  34,  62,  10,  60, 100, 105, 118,  32, 115, 116, // on">.<div st
+ 121, 108, 101,  61,  34, 109,  97, 114, 103, 105, 110,  45, // yle="margin-
+ 116, 111, 112,  58,  32,  49, 101, 109,  59,  32,  98,  97, // top: 1em; ba
   99, 107, 103, 114, 111, 117, 110, 100,  58,  32,  35, 101, // ckground: #e
- 101, 101,  59,  32,  32, 109, 105, 110,  45, 119, 105, 100, // ee;  min-wid
- 116, 104,  58,  32,  57, 101, 109,  59, 125,  10,  46,  98, // th: 9em;}..b
- 116, 110,  32, 123,  10,  32,  32,  98,  97,  99, 107, 103, // tn {.  backg
- 114, 111, 117, 110, 100,  58,  32,  35,  99,  99,  99,  59, // round: #ccc;
-  32,  98, 111, 114, 100, 101, 114,  45, 114,  97, 100, 105, //  border-radi
- 117, 115,  58,  32,  48,  46,  51, 101, 109,  59,  32,  98, // us: 0.3em; b
- 111, 114, 100, 101, 114,  58,  32,  48,  59,  32,  99, 111, // order: 0; co
- 108, 111, 114,  58,  32,  35, 102, 102, 102,  59,  32,  99, // lor: #fff; c
- 117, 114, 115, 111, 114,  58,  32, 112, 111, 105, 110, 116, // ursor: point
- 101, 114,  59,  10,  32,  32, 100, 105, 115, 112, 108,  97, // er;.  displa
- 121,  58,  32, 105, 110, 108, 105, 110, 101,  45,  98, 108, // y: inline-bl
- 111,  99, 107,  59,  32, 112,  97, 100, 100, 105, 110, 103, // ock; padding
-  58,  32,  48,  46,  54, 101, 109,  32,  50, 101, 109,  59, // : 0.6em 2em;
-  32, 102, 111, 110, 116,  45, 119, 101, 105, 103, 104, 116, //  font-weight
-  58,  32,  98, 111, 108, 100, 101, 114,  59,  10, 125,  10, // : bolder;.}.
-  46,  98, 116, 110,  91, 100, 105, 115,  97,  98, 108, 101, // .btn[disable
- 100,  93,  32, 123,  32, 111, 112,  97,  99, 105, 116, 121, // d] { opacity
-  58,  32,  48,  46,  53,  59,  32,  99, 117, 114, 115, 111, // : 0.5; curso
- 114,  58,  32,  97, 117, 116, 111,  59, 125,  10,  46, 115, // r: auto;}..s
- 109, 111, 111, 116, 104,  32, 123,  32, 116, 114,  97, 110, // mooth { tran
- 115, 105, 116, 105, 111, 110,  58,  32,  97, 108, 108,  32, // sition: all 
-  46,  50, 115,  59,  32, 125,  10,  46,  99, 111, 110, 116, // .2s; }..cont
-  97, 105, 110, 101, 114,  32, 123,  32, 109,  97, 114, 103, // ainer { marg
- 105, 110,  58,  32,  48,  32,  50,  48, 112, 120,  59,  32, // in: 0 20px; 
- 119, 105, 100, 116, 104,  58,  32,  97, 117, 116, 111,  59, // width: auto;
-  32, 125,  10,  46, 100,  45, 102, 108, 101, 120,  32, 123, //  }..d-flex {
-  32, 100, 105, 115, 112, 108,  97, 121,  58,  32, 102, 108, //  display: fl
- 101, 120,  59,  32, 125,  10,  46, 100,  45, 110, 111, 110, // ex; }..d-non
- 101,  32, 123,  32, 100, 105, 115, 112, 108,  97, 121,  58, // e { display:
-  32, 110, 111, 110, 101,  59,  32, 125,  10,  46,  98, 111, //  none; }..bo
- 114, 100, 101, 114,  32, 123,  32,  98, 111, 114, 100, 101, // rder { borde
- 114,  58,  32,  49, 112, 120,  32, 115, 111, 108, 105, 100, // r: 1px solid
-  32,  35, 100, 100, 100,  59,  32, 125,  10,  46, 114, 111, //  #ddd; }..ro
- 117, 110, 100, 101, 100,  32, 123,  32,  98, 111, 114, 100, // unded { bord
- 101, 114,  45, 114,  97, 100, 105, 117, 115,  58,  32,  48, // er-radius: 0
-  46,  53, 101, 109,  59,  32, 125,  10,  46, 110, 111, 119, // .5em; }..now
- 114,  97, 112,  32, 123,  32, 119, 104, 105, 116, 101,  45, // rap { white-
- 115, 112,  97,  99, 101,  58,  32, 110, 111, 119, 114,  97, // space: nowra
- 112,  59,  32, 125,  10,  46, 109, 115, 103,  32, 123,  32, // p; }..msg { 
+ 101, 101,  59,  32, 112,  97, 100, 100, 105, 110, 103,  58, // ee; padding:
+  32,  49, 101, 109,  59,  32,  98, 111, 114, 100, 101, 114, //  1em; border
+  45, 114,  97, 100, 105, 117, 115,  58,  32,  48,  46,  53, // -radius: 0.5
+ 101, 109,  59,  32,  99, 111, 108, 111, 114,  58,  32,  35, // em; color: #
+  55,  55,  55,  59,  32,  34,  62,  10,  32,  32,  60, 104, // 777; ">.  <h
+  49,  32, 115, 116, 121, 108, 101,  61,  34, 109,  97, 114, // 1 style="mar
+ 103, 105, 110,  58,  32,  48,  46,  50, 101, 109,  32,  48, // gin: 0.2em 0
+  59,  34,  62,  73, 110, 116, 101, 114,  97,  99, 116, 105, // ;">Interacti
+ 118, 101,  32,  68, 101, 118, 105,  99, 101,  32,  68,  97, // ve Device Da
+ 115, 104,  98, 111,  97, 114, 100,  60,  47, 104,  49,  62, // shboard</h1>
+  10,  10,  32,  32,  60, 112,  62,  10,  32,  32,  84, 104, // ..  <p>.  Th
+ 105, 115,  32, 100, 101, 118, 105,  99, 101,  32, 100,  97, // is device da
+ 115, 104,  98, 111,  97, 114, 100,  32, 105, 115,  32, 100, // shboard is d
+ 101, 118, 101, 108, 111, 112, 101, 100,  32, 117, 115, 105, // eveloped usi
+ 110, 103,  32, 116, 104, 101,  32, 109, 111, 100, 101, 114, // ng the moder
+ 110,  32,  97, 110, 100,  32,  99, 111, 109, 112,  97,  99, // n and compac
+ 116,  32,  80, 114, 101,  97,  99, 116,  32, 102, 114,  97, // t Preact fra
+ 109, 101, 119, 111, 114, 107,  44,  10,  32,  32, 105, 110, // mework,.  in
+  32, 111, 114, 100, 101, 114,  32, 116, 111,  32, 102, 105, //  order to fi
+ 116,  32, 111, 110,  32, 118, 101, 114, 121,  32, 115, 109, // t on very sm
+  97, 108, 108,  32, 100, 101, 118, 105,  99, 101, 115,  46, // all devices.
+  32,  84, 104, 105, 115,  32, 105, 115,  10,  32,  32,  97, //  This is.  a
+  32,  60,  97,  32, 104, 114, 101, 102,  61,  34, 104, 116, //  <a href="ht
+ 116, 112, 115,  58,  47,  47, 109, 111, 110, 103, 111, 111, // tps://mongoo
+ 115, 101,  46, 119, 115,  47, 116, 117, 116, 111, 114, 105, // se.ws/tutori
+  97, 108, 115,  47, 104, 116, 116, 112,  45, 115, 101, 114, // als/http-ser
+ 118, 101, 114,  47,  34,  62, 104, 121,  98, 114, 105, 100, // ver/">hybrid
+  32, 115, 101, 114, 118, 101, 114,  60,  47,  97,  62,  32, //  server</a> 
+ 119, 104, 105,  99, 104,  10,  32,  32, 112, 114, 111, 118, // which.  prov
+ 105, 100, 101, 115,  32,  98, 111, 116, 104,  32, 115, 116, // ides both st
+  97, 116, 105,  99,  32,  97, 110, 100,  32, 100, 121, 110, // atic and dyn
+  97, 109, 105,  99,  32,  99, 111, 110, 116, 101, 110, 116, // amic content
+  46,  32,  32,  83, 116,  97, 116, 105,  99,  32, 102, 105, // .  Static fi
+ 108, 101, 115,  44,  32, 108, 105, 107, 101,  32,  67,  83, // les, like CS
+  83,  47,  74,  83,  47,  72,  84,  77,  76,  10,  32,  32, // S/JS/HTML.  
+ 111, 114,  32, 105, 109,  97, 103, 101, 115,  44,  32,  97, // or images, a
+ 114, 101,  32,  99, 111, 109, 112, 105, 108, 101, 100,  32, // re compiled 
+ 105, 110, 116, 111,  32, 116, 104, 101,  32, 115, 101, 114, // into the ser
+ 118, 101, 114,  32,  98, 105, 110,  97, 114, 121,  46,  10, // ver binary..
+  10,  32,  32,  84, 104, 105, 115,  32,  85,  73,  32, 117, // .  This UI u
+ 115, 101, 115,  32, 116, 104, 101,  32,  82,  69,  83,  84, // ses the REST
+  32,  65,  80,  73,  32, 105, 109, 112, 108, 101, 109, 101, //  API impleme
+ 110, 116, 101, 100,  32,  98, 121,  32, 116, 104, 101,  32, // nted by the 
+ 100, 101, 118, 105,  99, 101,  44,  32, 119, 104, 105,  99, // device, whic
+ 104,  32, 121, 111, 117,  32,  99,  97, 110,  32, 101, 120, // h you can ex
+  97, 109, 105, 110, 101,  10,  32,  32, 117, 115, 105, 110, // amine.  usin
+ 103,  32,  32,  60,  99, 111, 100, 101,  62,  99, 117, 114, // g  <code>cur
+ 108,  60,  47,  99, 111, 100, 101,  62,  32,  99, 111, 109, // l</code> com
+ 109,  97, 110, 100,  45, 108, 105, 110, 101,  32, 117, 116, // mand-line ut
+ 105, 108, 105, 116, 121,  58,  10,  32,  32,  60,  47, 112, // ility:.  </p
+  62,  10,  10,  32,  32,  60, 100, 105, 118,  62,  60,  99, // >..  <div><c
+ 111, 100, 101,  62,  99, 117, 114, 108,  32,  45, 117,  32, // ode>curl -u 
+  97, 100, 109, 105, 110,  58, 112,  97, 115, 115,  48,  32, // admin:pass0 
+  36, 123, 100, 101, 118,  97, 100, 100, 114, 125,  47,  97, // ${devaddr}/a
+ 112, 105,  47,  99, 111, 110, 102, 105, 103,  47, 103, 101, // pi/config/ge
+ 116,  60,  47,  99, 111, 100, 101,  62,  32,  60,  47, 100, // t</code> </d
+ 105, 118,  62,  10,  32,  32,  60, 100, 105, 118,  62,  60, // iv>.  <div><
+  99, 111, 100, 101,  62,  99, 117, 114, 108,  32,  45, 117, // code>curl -u
+  32,  97, 100, 109, 105, 110,  58, 112,  97, 115, 115,  48, //  admin:pass0
+  32,  36, 123, 100, 101, 118,  97, 100, 100, 114, 125,  47, //  ${devaddr}/
+  97, 112, 105,  47,  99, 111, 110, 102, 105, 103,  47, 115, // api/config/s
+ 101, 116,  32,  45, 100,  32,  39, 112, 117,  98,  61, 109, // et -d 'pub=m
+ 103,  47, 116, 111, 112, 105,  99,  39,  60,  47,  99, 111, // g/topic'</co
+ 100, 101,  62,  32,  60,  47, 100, 105, 118,  62,  10,  32, // de> </div>. 
+  32,  60, 100, 105, 118,  62,  60,  99, 111, 100, 101,  62, //  <div><code>
+  99, 117, 114, 108,  32,  45, 117,  32,  97, 100, 109, 105, // curl -u admi
+ 110,  58, 112,  97, 115, 115,  48,  32,  36, 123, 100, 101, // n:pass0 ${de
+ 118,  97, 100, 100, 114, 125,  47,  97, 112, 105,  47, 109, // vaddr}/api/m
+ 101, 115, 115,  97, 103, 101,  47, 115, 101, 110, 100,  32, // essage/send 
+  45, 100,  32,  39, 109, 101, 115, 115,  97, 103, 101,  61, // -d 'message=
+ 104, 101, 108, 108, 111,  39,  60,  47,  99, 111, 100, 101, // hello'</code
+  62,  32,  60,  47, 100, 105, 118,  62,  10,  10,  32,  32, // > </div>..  
+  60, 112,  62,  10,  32,  32,  84, 104, 101,  32, 100, 101, // <p>.  The de
+ 118, 105,  99, 101,  32,  99,  97, 110,  32, 115, 101, 110, // vice can sen
+ 100,  32, 110, 111, 116, 105, 102, 105,  99,  97, 116, 105, // d notificati
+ 111, 110, 115,  32, 116, 111,  32, 116, 104, 105, 115,  32, // ons to this 
+ 100,  97, 115, 104,  98, 111,  97, 114, 100,  32,  97, 116, // dashboard at
+  32,  97, 110, 121, 116, 105, 109, 101,  46,  32,  78, 111, //  anytime. No
+ 116, 105, 102, 105,  99,  97, 116, 105, 111, 110, 115,  10, // tifications.
+  32,  32,  97, 114, 101,  32, 115, 101, 110, 116,  32, 111, //   are sent o
+ 118, 101, 114,  32,  87, 101,  98,  83, 111,  99, 107, 101, // ver WebSocke
+ 116,  32,  97, 116,  32,  85,  82,  73,  32,  60,  99, 111, // t at URI <co
+ 100, 101,  62,  47,  97, 112, 105,  47, 119,  97, 116,  99, // de>/api/watc
+ 104,  60,  47,  99, 111, 100, 101,  62,  32,  97, 115,  32, // h</code> as 
+  74,  83,  79,  78,  32, 115, 116, 114, 105, 110, 103, 115, // JSON strings
+  58,  32,  60,  99, 111, 100, 101,  62, 123,  34, 110,  97, // : <code>{"na
+ 109, 101,  34,  58,  32,  34,  46,  46,  34,  44,  32,  34, // me": "..", "
+ 100,  97, 116,  97,  34,  58,  32,  46,  46,  46, 125,  60, // data": ...}<
+  47,  99, 111, 100, 101,  62,  10,  32,  32,  60, 100, 105, // /code>.  <di
+ 118,  62,  84, 114, 121,  32,  60,  99, 111, 100, 101,  62, // v>Try <code>
+ 119, 115,  99,  97, 116,  32,  45,  45,  97, 117, 116, 104, // wscat --auth
+  32, 117, 115, 101, 114,  49,  58, 112,  97, 115, 115,  49, //  user1:pass1
+  32,  45,  45,  99, 111, 110, 110, 101,  99, 116,  32, 119, //  --connect w
+ 115,  58,  47,  47,  36, 123, 100, 101, 118,  97, 100, 100, // s://${devadd
+ 114, 125,  47,  97, 112, 105,  47, 119,  97, 116,  99, 104, // r}/api/watch
+  60,  47,  99, 111, 100, 101,  62,  60,  47, 100, 105, 118, // </code></div
+  62,  10,  32,  32,  60,  47, 112,  62,  10,  60,  47, 100, // >.  </p>.</d
+ 105, 118,  62,  10,  60,  47, 100, 105, 118,  62,  96,  59, // iv>.</div>`;
+  10,  10,  99, 111, 110, 115, 116,  32,  76, 111, 103, 105, // ..const Logi
+ 110,  32,  61,  32, 102, 117, 110,  99, 116, 105, 111, 110, // n = function
+  40, 112, 114, 111, 112, 115,  41,  32, 123,  10,  32,  32, // (props) {.  
+  99, 111, 110, 115, 116,  32,  91, 117, 115, 101, 114,  44, // const [user,
+  32, 115, 101, 116,  85, 115, 101, 114,  93,  32,  61,  32, //  setUser] = 
+ 117, 115, 101,  83, 116,  97, 116, 101,  40,  39,  39,  41, // useState('')
+  59,  10,  32,  32,  99, 111, 110, 115, 116,  32,  91, 112, // ;.  const [p
+  97, 115, 115,  44,  32, 115, 101, 116,  80,  97, 115, 115, // ass, setPass
+  93,  32,  61,  32, 117, 115, 101,  83, 116,  97, 116, 101, // ] = useState
+  40,  39,  39,  41,  59,  10,  32,  32,  99, 111, 110, 115, // ('');.  cons
+ 116,  32, 108, 111, 103, 105, 110,  32,  61,  32, 101, 118, // t login = ev
+  32,  61,  62,  10,  32,  32,  32,  32,  32,  32, 102, 101, //  =>.      fe
+ 116,  99, 104,  40,  10,  32,  32,  32,  32,  32,  32,  32, // tch(.       
+  32,  32,  32,  39,  47,  97, 112, 105,  47, 108, 111, 103, //    '/api/log
+ 105, 110,  39,  44,  10,  32,  32,  32,  32,  32,  32,  32, // in',.       
+  32,  32,  32, 123, 104, 101,  97, 100, 101, 114, 115,  58, //    {headers:
+  32, 123,  65, 117, 116, 104, 111, 114, 105, 122,  97, 116, //  {Authorizat
+ 105, 111, 110,  58,  32,  39,  66,  97, 115, 105,  99,  32, // ion: 'Basic 
+  39,  32,  43,  32,  98, 116, 111,  97,  40, 117, 115, 101, // ' + btoa(use
+ 114,  32,  43,  32,  39,  58,  39,  32,  43,  32, 112,  97, // r + ':' + pa
+ 115, 115,  41, 125, 125,  41,  10,  32,  32,  32,  32,  32, // ss)}}).     
+  32,  32,  32,  32,  32,  46, 116, 104, 101, 110,  40, 114, //      .then(r
+  32,  61,  62,  32, 114,  46, 106, 115, 111, 110,  40,  41, //  => r.json()
+  41,  10,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, // ).          
+  46, 116, 104, 101, 110,  40, 114,  32,  61,  62,  32, 114, // .then(r => r
+  32,  38,  38,  32, 112, 114, 111, 112, 115,  46, 108, 111, //  && props.lo
+ 103, 105, 110,  40, 114,  41,  41,  10,  32,  32,  32,  32, // gin(r)).    
+  32,  32,  32,  32,  32,  32,  46,  99,  97, 116,  99, 104, //       .catch
+  40, 101, 114, 114,  32,  61,  62,  32, 101, 114, 114,  41, // (err => err)
+  59,  10,  32,  32, 114, 101, 116, 117, 114, 110,  32, 104, // ;.  return h
+ 116, 109, 108,  96,  10,  60, 100, 105, 118,  32,  99, 108, // tml`.<div cl
+  97, 115, 115,  61,  34, 114, 111, 117, 110, 100, 101, 100, // ass="rounded
+  32,  98, 111, 114, 100, 101, 114,  34,  32, 115, 116, 121, //  border" sty
+ 108, 101,  61,  34, 109,  97, 120,  45, 119, 105, 100, 116, // le="max-widt
+ 104,  58,  32,  52,  56,  48, 112, 120,  59,  32, 109,  97, // h: 480px; ma
+ 114, 103, 105, 110,  58,  32,  48,  32,  97, 117, 116, 111, // rgin: 0 auto
+  59,  32, 109,  97, 114, 103, 105, 110,  45, 116, 111, 112, // ; margin-top
+  58,  32,  53, 101, 109,  59,  32,  98,  97,  99, 107, 103, // : 5em; backg
+ 114, 111, 117, 110, 100,  58,  32,  35, 101, 101, 101,  59, // round: #eee;
+  32,  34,  62,  10,  32,  32,  60, 100, 105, 118,  32, 115, //  ">.  <div s
+ 116, 121, 108, 101,  61,  34, 112,  97, 100, 100, 105, 110, // tyle="paddin
+ 103,  58,  32,  50, 101, 109,  59,  32,  34,  62,  10,  32, // g: 2em; ">. 
+  32,  32,  32,  60, 104,  49,  32, 115, 116, 121, 108, 101, //    <h1 style
+  61,  34,  99, 111, 108, 111, 114,  58,  32,  35,  54,  54, // ="color: #66
+  54,  59,  34,  62,  68, 101, 118, 105,  99, 101,  32,  68, // 6;">Device D
+  97, 115, 104,  98, 111,  97, 114, 100,  32,  76, 111, 103, // ashboard Log
+ 105, 110,  32,  60,  47, 104,  49,  62,  10,  32,  32,  32, // in </h1>.   
+  32,  60, 100, 105, 118,  32, 115, 116, 121, 108, 101,  61, //  <div style=
+  34, 109,  97, 114, 103, 105, 110,  58,  32,  48,  46,  53, // "margin: 0.5
+ 101, 109,  32,  48,  59,  34,  62,  10,  32,  32,  32,  32, // em 0;">.    
+  32,  32,  60, 105, 110, 112, 117, 116,  32, 116, 121, 112, //   <input typ
+ 101,  61,  39, 116, 101, 120, 116,  39,  32, 112, 108,  97, // e='text' pla
+  99, 101, 104, 111, 108, 100, 101, 114,  61,  39,  78,  97, // ceholder='Na
+ 109, 101,  39,  32, 115, 116, 121, 108, 101,  61,  34, 119, // me' style="w
+ 105, 100, 116, 104,  58,  32,  49,  48,  48,  37,  59,  34, // idth: 100%;"
+  10,  32,  32,  32,  32,  32,  32,  32,  32, 111, 110, 105, // .        oni
+ 110, 112, 117, 116,  61,  36, 123, 101, 118,  32,  61,  62, // nput=${ev =>
+  32, 115, 101, 116,  85, 115, 101, 114,  40, 101, 118,  46, //  setUser(ev.
+ 116,  97, 114, 103, 101, 116,  46, 118,  97, 108, 117, 101, // target.value
+  41, 125,  32, 118,  97, 108, 117, 101,  61,  36, 123, 117, // )} value=${u
+ 115, 101, 114, 125,  32,  47,  62,  10,  32,  32,  32,  32, // ser} />.    
+  60,  47, 100, 105, 118,  62,  10,  32,  32,  32,  32,  60, // </div>.    <
+ 100, 105, 118,  32, 115, 116, 121, 108, 101,  61,  34, 109, // div style="m
+  97, 114, 103, 105, 110,  58,  32,  48,  46,  53, 101, 109, // argin: 0.5em
+  32,  48,  59,  34,  62,  10,  32,  32,  32,  32,  32,  32, //  0;">.      
+  60, 105, 110, 112, 117, 116,  32, 116, 121, 112, 101,  61, // <input type=
+  34, 112,  97, 115, 115, 119, 111, 114, 100,  34,  32, 112, // "password" p
+ 108,  97,  99, 101, 104, 111, 108, 100, 101, 114,  61,  34, // laceholder="
+  80,  97, 115, 115, 119, 111, 114, 100,  34,  32, 115, 116, // Password" st
+ 121, 108, 101,  61,  34, 119, 105, 100, 116, 104,  58,  32, // yle="width: 
+  49,  48,  48,  37,  59,  34,  10,  32,  32,  32,  32,  32, // 100%;".     
+  32,  32,  32, 111, 110, 105, 110, 112, 117, 116,  61,  36, //    oninput=$
+ 123, 101, 118,  32,  61,  62,  32, 115, 101, 116,  80,  97, // {ev => setPa
+ 115, 115,  40, 101, 118,  46, 116,  97, 114, 103, 101, 116, // ss(ev.target
+  46, 118,  97, 108, 117, 101,  41, 125,  32, 118,  97, 108, // .value)} val
+ 117, 101,  61,  36, 123, 112,  97, 115, 115, 125,  10,  32, // ue=${pass}. 
+  32,  32,  32,  32,  32,  32,  32, 111, 110,  99, 104,  97, //        oncha
+ 110, 103, 101,  61,  36, 123, 108, 111, 103, 105, 110, 125, // nge=${login}
+  32,  47,  62,  10,  32,  32,  32,  32,  60,  47, 100, 105, //  />.    </di
+ 118,  62,  10,  32,  32,  32,  32,  60, 100, 105, 118,  32, // v>.    <div 
+ 115, 116, 121, 108, 101,  61,  34, 109,  97, 114, 103, 105, // style="margi
+ 110,  58,  32,  49, 101, 109,  32,  48,  59,  34,  62,  10, // n: 1em 0;">.
+  32,  32,  32,  32,  32,  32,  60,  98, 117, 116, 116, 111, //       <butto
+ 110,  32,  99, 108,  97, 115, 115,  61,  34,  98, 116, 110, // n class="btn
+  34,  32, 115, 116, 121, 108, 101,  61,  34, 119, 105, 100, // " style="wid
+ 116, 104,  58,  32,  49,  48,  48,  37,  59,  32,  98,  97, // th: 100%; ba
+  99, 107, 103, 114, 111, 117, 110, 100,  58,  32,  35,  56, // ckground: #8
+  97,  97,  59,  34,  10,  32,  32,  32,  32,  32,  32,  32, // aa;".       
+  32, 100, 105, 115,  97,  98, 108, 101, 100,  61,  36, 123, //  disabled=${
+  33, 117, 115, 101, 114,  32, 124, 124,  32,  33, 112,  97, // !user || !pa
+ 115, 115, 125,  32, 111, 110,  99, 108, 105,  99, 107,  61, // ss} onclick=
+  36, 123, 108, 111, 103, 105, 110, 125,  62,  32,  76, 111, // ${login}> Lo
+ 103, 105, 110,  32,  60,  47,  98, 117, 116, 116, 111, 110, // gin </button
+  62,  10,  32,  32,  32,  32,  60,  47, 100, 105, 118,  62, // >.    </div>
+  10,  32,  32,  32,  32,  60, 100, 105, 118,  32, 115, 116, // .    <div st
+ 121, 108, 101,  61,  34,  99, 111, 108, 111, 114,  58,  32, // yle="color: 
+  35,  55,  55,  55,  59,  32, 109,  97, 114, 103, 105, 110, // #777; margin
+  45, 116, 111, 112,  58,  32,  50, 101, 109,  59,  34,  62, // -top: 2em;">
+  10,  32,  32,  32,  32,  32,  32,  86,  97, 108, 105, 100, // .      Valid
+  32, 108, 111, 103, 105, 110, 115,  58,  32,  97, 100, 109, //  logins: adm
+ 105, 110,  58, 112,  97, 115, 115,  48,  44,  32, 117, 115, // in:pass0, us
+ 101, 114,  49,  58, 112,  97, 115, 115,  49,  44,  32, 117, // er1:pass1, u
+ 115, 101, 114,  50,  58, 112,  97, 115, 115,  50,  10,  32, // ser2:pass2. 
+  32,  32,  32,  60,  47, 100, 105, 118,  62,  10,  32,  32, //    </div>.  
+  60,  47, 100, 105, 118,  62,  10,  60,  47, 100, 105, 118, // </div>.</div
+  62,  96,  59,  10, 125,  59,  10,  10,  10,  99, 111, 110, // >`;.};...con
+ 115, 116,  32,  67, 111, 110, 102, 105, 103, 117, 114,  97, // st Configura
+ 116, 105, 111, 110,  32,  61,  32, 102, 117, 110,  99, 116, // tion = funct
+ 105, 111, 110,  40, 112, 114, 111, 112, 115,  41,  32, 123, // ion(props) {
+  10,  32,  32,  99, 111, 110, 115, 116,  32,  91, 117, 114, // .  const [ur
+ 108,  44,  32, 115, 101, 116,  85, 114, 108,  93,  32,  61, // l, setUrl] =
+  32, 117, 115, 101,  83, 116,  97, 116, 101,  40, 112, 114, //  useState(pr
+ 111, 112, 115,  46,  99, 111, 110, 102, 105, 103,  46, 117, // ops.config.u
+ 114, 108,  32, 124, 124,  32,  39,  39,  41,  59,  10,  32, // rl || '');. 
+  32,  99, 111, 110, 115, 116,  32,  91, 112, 117,  98,  44, //  const [pub,
+  32, 115, 101, 116,  80, 117,  98,  93,  32,  61,  32, 117, //  setPub] = u
+ 115, 101,  83, 116,  97, 116, 101,  40, 112, 114, 111, 112, // seState(prop
+ 115,  46,  99, 111, 110, 102, 105, 103,  46, 112, 117,  98, // s.config.pub
+  32, 124, 124,  32,  39,  39,  41,  59,  10,  32,  32,  99, //  || '');.  c
+ 111, 110, 115, 116,  32,  91, 115, 117,  98,  44,  32, 115, // onst [sub, s
+ 101, 116,  83, 117,  98,  93,  32,  61,  32, 117, 115, 101, // etSub] = use
+  83, 116,  97, 116, 101,  40, 112, 114, 111, 112, 115,  46, // State(props.
+  99, 111, 110, 102, 105, 103,  46, 115, 117,  98,  32, 124, // config.sub |
+ 124,  32,  39,  39,  41,  59,  10,  10,  32,  32, 117, 115, // | '');..  us
+ 101,  69, 102, 102, 101,  99, 116,  40,  40,  41,  32,  61, // eEffect(() =
+  62,  32, 123,  10,  32,  32,  32,  32, 115, 101, 116,  85, // > {.    setU
+ 114, 108,  40, 112, 114, 111, 112, 115,  46,  99, 111, 110, // rl(props.con
+ 102, 105, 103,  46, 117, 114, 108,  41,  59,  10,  32,  32, // fig.url);.  
+  32,  32, 115, 101, 116,  80, 117,  98,  40, 112, 114, 111, //   setPub(pro
+ 112, 115,  46,  99, 111, 110, 102, 105, 103,  46, 112, 117, // ps.config.pu
+  98,  41,  59,  10,  32,  32,  32,  32, 115, 101, 116,  83, // b);.    setS
+ 117,  98,  40, 112, 114, 111, 112, 115,  46,  99, 111, 110, // ub(props.con
+ 102, 105, 103,  46, 115, 117,  98,  41,  59,  10,  32,  32, // fig.sub);.  
+ 125,  44,  32,  91, 112, 114, 111, 112, 115,  46,  99, 111, // }, [props.co
+ 110, 102, 105, 103,  93,  41,  59,  10,  10,  32,  32,  99, // nfig]);..  c
+ 111, 110, 115, 116,  32, 117, 112, 100,  97, 116, 101,  32, // onst update 
+  61,  32,  40, 110,  97, 109, 101,  44,  32, 118,  97, 108, // = (name, val
+  41,  32,  61,  62,  32, 102, 101, 116,  99, 104,  40,  39, // ) => fetch('
+  47,  97, 112, 105,  47,  99, 111, 110, 102, 105, 103,  47, // /api/config/
+ 115, 101, 116,  39,  44,  32, 123,  10,  32,  32,  32,  32, // set', {.    
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
+  32,  32,  32,  32,  32,  32, 109, 101, 116, 104, 111, 100, //       method
+  58,  32,  39, 112, 111, 115, 116,  39,  44,  10,  32,  32, // : 'post',.  
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
+  32,  32,  32,  32,  32,  32,  32,  32,  98, 111, 100, 121, //         body
+  58,  32,  96,  36, 123, 110,  97, 109, 101, 125,  61,  36, // : `${name}=$
+ 123, 101, 110,  99, 111, 100, 101,  85,  82,  73,  67, 111, // {encodeURICo
+ 109, 112, 111, 110, 101, 110, 116,  40, 118,  97, 108,  41, // mponent(val)
+ 125,  96,  10,  32,  32,  32,  32,  32,  32,  32,  32,  32, // }`.         
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, 125, //            }
+  41,  46,  99,  97, 116,  99, 104,  40, 101, 114, 114,  32, // ).catch(err 
+  61,  62,  32, 101, 114, 114,  41,  59,  10,  32,  32,  99, // => err);.  c
+ 111, 110, 115, 116,  32, 117, 112, 100,  97, 116, 101, 117, // onst updateu
+ 114, 108,  32,  61,  32, 101, 118,  32,  61,  62,  32, 117, // rl = ev => u
+ 112, 100,  97, 116, 101,  40,  39, 117, 114, 108,  39,  44, // pdate('url',
+  32, 117, 114, 108,  41,  59,  10,  32,  32,  99, 111, 110, //  url);.  con
+ 115, 116,  32, 117, 112, 100,  97, 116, 101, 112, 117,  98, // st updatepub
+  32,  61,  32, 101, 118,  32,  61,  62,  32, 117, 112, 100, //  = ev => upd
+  97, 116, 101,  40,  39, 112, 117,  98,  39,  44,  32, 112, // ate('pub', p
+ 117,  98,  41,  59,  10,  32,  32,  99, 111, 110, 115, 116, // ub);.  const
+  32, 117, 112, 100,  97, 116, 101, 115, 117,  98,  32,  61, //  updatesub =
+  32, 101, 118,  32,  61,  62,  32, 117, 112, 100,  97, 116, //  ev => updat
+ 101,  40,  39, 115, 117,  98,  39,  44,  32, 115, 117,  98, // e('sub', sub
+  41,  59,  10,  10,  32,  32,  47,  47,  32,  99, 111, 110, // );..  // con
+ 115, 111, 108, 101,  46, 108, 111, 103,  40, 112, 114, 111, // sole.log(pro
+ 112, 115,  44,  32,  91, 117, 114, 108,  44,  32, 112, 117, // ps, [url, pu
+  98,  44,  32, 115, 117,  98,  93,  41,  59,  10,  32,  32, // b, sub]);.  
+ 114, 101, 116, 117, 114, 110,  32, 104, 116, 109, 108,  96, // return html`
+  10,  60, 100, 105, 118,  32,  99, 108,  97, 115, 115,  61, // .<div class=
+  34, 115, 101,  99, 116, 105, 111, 110,  34,  62,  10,  32, // "section">. 
+  32,  60, 104,  51,  32, 115, 116, 121, 108, 101,  61,  34, //  <h3 style="
   98,  97,  99, 107, 103, 114, 111, 117, 110, 100,  58,  32, // background: 
-  35, 100, 101, 102,  59,  32,  98, 111, 114, 100, 101, 114, // #def; border
-  45, 108, 101, 102, 116,  58,  32,  53, 112, 120,  32, 115, // -left: 5px s
- 111, 108, 105, 100,  32,  35,  53,  57, 100,  59,  32, 112, // olid #59d; p
+  35,  99,  48,  51,  52,  51,  52,  59,  32,  99, 111, 108, // #c03434; col
+ 111, 114,  58,  32,  35, 102, 102, 102,  59,  32, 112,  97, // or: #fff; pa
+ 100, 100, 105, 110, 103,  58,  32,  48,  46,  52, 101, 109, // dding: 0.4em
+  59,  34,  62,  10,  32,  32,  32,  32,  68, 101, 118, 105, // ;">.    Devi
+  99, 101,  32,  67, 111, 110, 102, 105, 103, 117, 114,  97, // ce Configura
+ 116, 105, 111, 110,  60,  47, 104,  51,  62,  10,  32,  32, // tion</h3>.  
+  60, 100, 105, 118,  32, 115, 116, 121, 108, 101,  61,  34, // <div style="
+ 109,  97, 114, 103, 105, 110,  58,  32,  48,  46,  53, 101, // margin: 0.5e
+ 109,  32,  48,  59,  32, 100, 105, 115, 112, 108,  97, 121, // m 0; display
+  58,  32, 102, 108, 101, 120,  59,  34,  62,  10,  32,  32, // : flex;">.  
+  32,  32,  60, 115, 112,  97, 110,  32,  99, 108,  97, 115, //   <span clas
+ 115,  61,  34,  97, 100, 100, 111, 110,  32, 110, 111, 119, // s="addon now
+ 114,  97, 112,  34,  62,  77,  81,  84,  84,  32, 115, 101, // rap">MQTT se
+ 114, 118, 101, 114,  58,  60,  47, 115, 112,  97, 110,  62, // rver:</span>
+  10,  32,  32,  32,  32,  60, 105, 110, 112, 117, 116,  32, // .    <input 
+ 116, 121, 112, 101,  61,  34, 116, 101, 120, 116,  34,  32, // type="text" 
+ 115, 116, 121, 108, 101,  61,  34, 102, 108, 101, 120,  58, // style="flex:
+  32,  49,  32,  49,  48,  48,  37,  59,  34,  10,  32,  32, //  1 100%;".  
+  32,  32,  32,  32,  32,  32,  32,  32, 118,  97, 108, 117, //         valu
+ 101,  61,  36, 123, 117, 114, 108, 125,  32, 111, 110,  99, // e=${url} onc
+ 104,  97, 110, 103, 101,  61,  36, 123, 117, 112, 100,  97, // hange=${upda
+ 116, 101, 117, 114, 108, 125,  10,  32,  32,  32,  32,  32, // teurl}.     
+  32,  32,  32,  32,  32, 111, 110, 105, 110, 112, 117, 116, //      oninput
+  61,  36, 123, 101, 118,  32,  61,  62,  32, 115, 101, 116, // =${ev => set
+  85, 114, 108,  40, 101, 118,  46, 116,  97, 114, 103, 101, // Url(ev.targe
+ 116,  46, 118,  97, 108, 117, 101,  41, 125,  32,  47,  62, // t.value)} />
+  10,  32,  32,  32,  32,  60,  98, 117, 116, 116, 111, 110, // .    <button
+  32,  99, 108,  97, 115, 115,  61,  34,  98, 116, 110,  34, //  class="btn"
+  32, 100, 105, 115,  97,  98, 108, 101, 100,  61,  36, 123, //  disabled=${
+  33, 117, 114, 108, 125,  32, 111, 110,  99, 108, 105,  99, // !url} onclic
+ 107,  61,  36, 123, 117, 112, 100,  97, 116, 101, 117, 114, // k=${updateur
+ 108, 125,  10,  32,  32,  32,  32,  32,  32, 115, 116, 121, // l}.      sty
+ 108, 101,  61,  34, 109,  97, 114, 103, 105, 110,  45, 108, // le="margin-l
+ 101, 102, 116,  58,  32,  49, 101, 109,  59,  32,  98,  97, // eft: 1em; ba
+  99, 107, 103, 114, 111, 117, 110, 100,  58,  32,  35,  56, // ckground: #8
+  97,  97,  59,  34,  62,  85, 112, 100,  97, 116, 101,  60, // aa;">Update<
+  47,  98, 117, 116, 116, 111, 110,  62,  10,  32,  32,  60, // /button>.  <
+  47, 100, 105, 118,  62,  10,  32,  32,  60, 100, 105, 118, // /div>.  <div
+  32, 115, 116, 121, 108, 101,  61,  34, 109,  97, 114, 103, //  style="marg
+ 105, 110,  58,  32,  48,  46,  53, 101, 109,  32,  48,  59, // in: 0.5em 0;
+  32, 100, 105, 115, 112, 108,  97, 121,  58,  32, 102, 108, //  display: fl
+ 101, 120,  59,  32,  34,  62,  10,  32,  32,  32,  32,  60, // ex; ">.    <
+ 115, 112,  97, 110,  32,  99, 108,  97, 115, 115,  61,  34, // span class="
+  97, 100, 100, 111, 110,  32, 110, 111, 119, 114,  97, 112, // addon nowrap
+  34,  62,  83, 117,  98, 115,  99, 114, 105,  98, 101,  32, // ">Subscribe 
+ 116, 111, 112, 105,  99,  58,  60,  47, 115, 112,  97, 110, // topic:</span
+  62,  10,  32,  32,  32,  32,  60, 105, 110, 112, 117, 116, // >.    <input
+  32, 116, 121, 112, 101,  61,  34, 116, 101, 120, 116,  34, //  type="text"
+  32, 115, 116, 121, 108, 101,  61,  34, 102, 108, 101, 120, //  style="flex
+  58,  32,  49,  32,  49,  48,  48,  37,  59,  34,  10,  32, // : 1 100%;". 
+  32,  32,  32,  32,  32,  32,  32, 118,  97, 108, 117, 101, //        value
+  61,  36, 123, 115, 117,  98, 125,  32, 111, 110,  99, 104, // =${sub} onch
+  97, 110, 103, 101,  61,  36, 123, 117, 112, 100,  97, 116, // ange=${updat
+ 101, 115, 117,  98, 125,  10,  32,  32,  32,  32,  32,  32, // esub}.      
+  32,  32, 111, 110, 105, 110, 112, 117, 116,  61,  36, 123, //   oninput=${
+ 101, 118,  32,  61,  62,  32, 115, 101, 116,  83, 117,  98, // ev => setSub
+  40, 101, 118,  46, 116,  97, 114, 103, 101, 116,  46, 118, // (ev.target.v
+  97, 108, 117, 101,  41, 125,  32,  47,  62,  10,  32,  32, // alue)} />.  
+  32,  32,  60,  98, 117, 116, 116, 111, 110,  32,  99, 108, //   <button cl
+  97, 115, 115,  61,  34,  98, 116, 110,  34,  32, 100, 105, // ass="btn" di
+ 115,  97,  98, 108, 101, 100,  61,  36, 123,  33, 115, 117, // sabled=${!su
+  98, 125,  32, 111, 110,  99, 108, 105,  99, 107,  61,  36, // b} onclick=$
+ 123, 117, 112, 100,  97, 116, 101, 115, 117,  98, 125,  10, // {updatesub}.
+  32,  32,  32,  32,  32,  32, 115, 116, 121, 108, 101,  61, //       style=
+  34, 109,  97, 114, 103, 105, 110,  45, 108, 101, 102, 116, // "margin-left
+  58,  32,  49, 101, 109,  59,  32,  98,  97,  99, 107, 103, // : 1em; backg
+ 114, 111, 117, 110, 100,  58,  32,  35,  56,  97,  97,  59, // round: #8aa;
+  34,  62,  85, 112, 100,  97, 116, 101,  60,  47,  98, 117, // ">Update</bu
+ 116, 116, 111, 110,  62,  10,  32,  32,  60,  47, 100, 105, // tton>.  </di
+ 118,  62,  10,  32,  32,  60, 100, 105, 118,  32, 115, 116, // v>.  <div st
+ 121, 108, 101,  61,  34, 109,  97, 114, 103, 105, 110,  58, // yle="margin:
+  32,  48,  46,  53, 101, 109,  32,  48,  59,  32, 100, 105, //  0.5em 0; di
+ 115, 112, 108,  97, 121,  58,  32, 102, 108, 101, 120,  59, // splay: flex;
+  34,  62,  10,  32,  32,  32,  32,  60, 115, 112,  97, 110, // ">.    <span
+  32,  99, 108,  97, 115, 115,  61,  34,  97, 100, 100, 111, //  class="addo
+ 110,  32, 110, 111, 119, 114,  97, 112,  34,  62,  80, 117, // n nowrap">Pu
+  98, 108, 105, 115, 104,  32, 116, 111, 112, 105,  99,  58, // blish topic:
+  60,  47, 115, 112,  97, 110,  62,  10,  32,  32,  32,  32, // </span>.    
+  60, 105, 110, 112, 117, 116,  32, 116, 121, 112, 101,  61, // <input type=
+  34, 116, 101, 120, 116,  34,  32, 115, 116, 121, 108, 101, // "text" style
+  61,  34, 102, 108, 101, 120,  58,  32,  49,  32,  49,  48, // ="flex: 1 10
+  48,  37,  59,  34,  10,  32,  32,  32,  32,  32,  32,  32, // 0%;".       
+  32,  32,  32, 118,  97, 108, 117, 101,  61,  36, 123, 112, //    value=${p
+ 117,  98, 125,  32, 111, 110,  99, 104,  97, 110, 103, 101, // ub} onchange
+  61,  36, 123, 117, 112, 100,  97, 116, 101, 112, 117,  98, // =${updatepub
+ 125,  10,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, // }.          
+ 111, 110, 105, 110, 112, 117, 116,  61,  36, 123, 101, 118, // oninput=${ev
+  32,  61,  62,  32, 115, 101, 116,  80, 117,  98,  40, 101, //  => setPub(e
+ 118,  46, 116,  97, 114, 103, 101, 116,  46, 118,  97, 108, // v.target.val
+ 117, 101,  41, 125,  32,  47,  62,  10,  32,  32,  32,  32, // ue)} />.    
+  60,  98, 117, 116, 116, 111, 110,  32,  99, 108,  97, 115, // <button clas
+ 115,  61,  34,  98, 116, 110,  34,  32, 100, 105, 115,  97, // s="btn" disa
+  98, 108, 101, 100,  61,  36, 123,  33, 112, 117,  98, 125, // bled=${!pub}
+  32, 111, 110,  99, 108, 105,  99, 107,  61,  36, 123, 117, //  onclick=${u
+ 112, 100,  97, 116, 101, 112, 117,  98, 125,  10,  32,  32, // pdatepub}.  
+  32,  32,  32,  32, 115, 116, 121, 108, 101,  61,  34, 109, //     style="m
+  97, 114, 103, 105, 110,  45, 108, 101, 102, 116,  58,  32, // argin-left: 
+  49, 101, 109,  59,  32,  98,  97,  99, 107, 103, 114, 111, // 1em; backgro
+ 117, 110, 100,  58,  32,  35,  56,  97,  97,  59,  34,  62, // und: #8aa;">
+  85, 112, 100,  97, 116, 101,  60,  47,  98, 117, 116, 116, // Update</butt
+ 111, 110,  62,  10,  32,  32,  60,  47, 100, 105, 118,  62, // on>.  </div>
+  10,  32,  32,  60, 100, 105, 118,  62,  10,  32,  32,  32, // .  <div>.   
+  32,  89, 111, 117,  32,  99,  97, 110,  32, 117, 115, 101, //  You can use
+  32,  60,  97,  32, 104, 114, 101, 102,  61,  34, 104, 116, //  <a href="ht
+ 116, 112,  58,  47,  47, 119, 119, 119,  46, 104, 105, 118, // tp://www.hiv
+ 101, 109, 113,  46,  99, 111, 109,  47, 100, 101, 109, 111, // emq.com/demo
+ 115,  47, 119, 101,  98, 115, 111,  99, 107, 101, 116,  45, // s/websocket-
+  99, 108, 105, 101, 110, 116,  47,  34,  62,  10,  32,  32, // client/">.  
+  32,  32,  72, 105, 118, 101,  77,  81,  32,  87, 101,  98, //   HiveMQ Web
+ 115, 111,  99, 107, 101, 116,  32, 119, 101,  98,  32,  99, // socket web c
+ 108, 105, 101, 110, 116,  60,  47,  97,  62,  32, 116, 111, // lient</a> to
+  32, 115, 101, 110, 100,  32, 109, 101, 115, 115,  97, 103, //  send messag
+ 101, 115,  32, 116, 111,  32, 116, 104, 105, 115,  32,  99, // es to this c
+ 111, 110, 115, 111, 108, 101,  46,  10,  32,  32,  60,  47, // onsole..  </
+ 100, 105, 118,  62,  10,  32,  32,  60, 100, 105, 118,  32, // div>.  <div 
+  99, 108,  97, 115, 115,  61,  34, 109, 115, 103,  34,  62, // class="msg">
+  10,  32,  32,  32,  32,  84, 104, 101,  32, 100, 101, 118, // .    The dev
+ 105,  99, 101,  32, 107, 101, 101, 112, 115,  32,  97,  32, // ice keeps a 
+ 112, 101, 114, 115, 105, 115, 116, 101, 110, 116,  32,  99, // persistent c
+ 111, 110, 110, 101,  99, 116, 105, 111, 110,  32, 116, 111, // onnection to
+  32, 116, 104, 101,  32,  99, 111, 110, 102, 105, 103, 117, //  the configu
+ 114, 101, 100,  32,  77,  81,  84,  84,  32, 115, 101, 114, // red MQTT ser
+ 118, 101, 114,  46,  10,  32,  32,  32,  32,  67, 104,  97, // ver..    Cha
+ 110, 103, 101, 115,  32, 116, 111,  32, 116, 104, 105, 115, // nges to this
+  32,  99, 111, 110, 102, 105, 103, 117, 114,  97, 116, 105, //  configurati
+ 111, 110,  32,  97, 114, 101,  32, 112, 114, 111, 112,  97, // on are propa
+ 103,  97, 116, 101, 100,  32, 116, 111,  32,  97, 108, 108, // gated to all
+  32, 100,  97, 115, 104,  98, 111,  97, 114, 100, 115,  58, //  dashboards:
+  32, 116, 114, 121,  10,  32,  32,  32,  32,  99, 104,  97, //  try.    cha
+ 110, 103, 105, 110, 103,  32, 116, 104, 101, 109,  32, 105, // nging them i
+ 110,  32, 116, 104, 105, 115,  32, 100,  97, 115, 104,  98, // n this dashb
+ 111,  97, 114, 100,  32,  97, 110, 100,  32, 111,  98, 115, // oard and obs
+ 101, 114, 118, 101,  32,  99, 104,  97, 110, 103, 101, 115, // erve changes
+  32, 105, 110,  32, 111, 116, 104, 101, 114,  32, 111, 112, //  in other op
+ 101, 110, 101, 100,  10,  32,  32,  32,  32, 100,  97, 115, // ened.    das
+ 104,  98, 111,  97, 114, 100, 115,  46,  10,  32,  32,  60, // hboards..  <
+  47, 100, 105, 118,  62,  60, 100, 105, 118,  32,  99, 108, // /div><div cl
+  97, 115, 115,  61,  34, 109, 115, 103,  34,  62,  10,  32, // ass="msg">. 
+  32,  32,  32,  78, 111, 116, 101,  58,  32,  97, 100, 109, //    Note: adm
+ 105, 110, 105, 115, 116, 114,  97, 116, 111, 114, 115,  32, // inistrators 
+  99,  97, 110,  32, 115, 101, 101,  32, 116, 104, 105, 115, // can see this
+  32, 115, 101,  99, 116, 105, 111, 110,  32,  97, 110, 100, //  section and
+  32,  99,  97, 110,  32,  99, 104,  97, 110, 103, 101,  32, //  can change 
+ 100, 101, 118, 105,  99, 101,  10,  32,  32,  32,  32,  99, // device.    c
+ 111, 110, 102, 105, 103, 117, 114,  97, 116, 105, 111, 110, // onfiguration
+  44,  32, 119, 104, 105, 108, 115, 116,  32, 117, 115, 101, // , whilst use
+ 114, 115,  32,  99,  97, 110, 110, 111, 116,  46,  10,  32, // rs cannot.. 
+  32,  60,  47, 100, 105, 118,  62,  10,  60,  47, 100, 105, //  </div>.</di
+ 118,  62,  96,  59,  10, 125,  59,  10,  10,  10,  99, 111, // v>`;.};...co
+ 110, 115, 116,  32,  77, 101, 115, 115,  97, 103, 101,  32, // nst Message 
+  61,  32, 109,  32,  61,  62,  32, 104, 116, 109, 108,  96, // = m => html`
+  60, 100, 105, 118,  32, 115, 116, 121, 108, 101,  61,  34, // <div style="
+ 109,  97, 114, 103, 105, 110,  58,  32,  48,  46,  53, 101, // margin: 0.5e
+ 109,  32,  48,  59,  34,  62,  10,  32,  32,  60, 115, 112, // m 0;">.  <sp
+  97, 110,  32,  99, 108,  97, 115, 115,  61,  34, 113, 111, // an class="qo
+ 115,  34,  62, 113, 111, 115,  58,  32,  36, 123, 109,  46, // s">qos: ${m.
+ 109, 101, 115, 115,  97, 103, 101,  46, 113, 111, 115, 125, // message.qos}
+  32,  60,  47, 115, 112,  97, 110,  62,  10,  32,  32,  60, //  </span>.  <
+ 115, 112,  97, 110,  32,  99, 108,  97, 115, 115,  61,  34, // span class="
+ 116, 111, 112, 105,  99,  34,  62, 116, 111, 112, 105,  99, // topic">topic
+  58,  32,  36, 123, 109,  46, 109, 101, 115, 115,  97, 103, // : ${m.messag
+ 101,  46, 116, 111, 112, 105,  99, 125,  32,  60,  47, 115, // e.topic} </s
+ 112,  97, 110,  62,  10,  32,  32,  60, 115, 112,  97, 110, // pan>.  <span
+  32,  99, 108,  97, 115, 115,  61,  34, 100,  97, 116,  97, //  class="data
+  34,  62, 100,  97, 116,  97,  58,  32,  36, 123, 109,  46, // ">data: ${m.
+ 109, 101, 115, 115,  97, 103, 101,  46, 100,  97, 116,  97, // message.data
+ 125,  60,  47, 115, 112,  97, 110,  62,  10,  60,  47, 100, // }</span>.</d
+ 105, 118,  62,  96,  59,  10,  10,  99, 111, 110, 115, 116, // iv>`;..const
+  32,  77, 101, 115, 115,  97, 103, 101, 115,  32,  61,  32, //  Messages = 
+ 102, 117, 110,  99, 116, 105, 111, 110,  40, 112, 114, 111, // function(pro
+ 112, 115,  41,  32, 123,  10,  32,  32,  99, 111, 110, 115, // ps) {.  cons
+ 116,  32,  91, 109, 101, 115, 115,  97, 103, 101, 115,  44, // t [messages,
+  32, 115, 101, 116,  77, 101, 115, 115,  97, 103, 101, 115, //  setMessages
+  93,  32,  61,  32, 117, 115, 101,  83, 116,  97, 116, 101, // ] = useState
+  40,  91,  93,  41,  59,  10,  32,  32,  99, 111, 110, 115, // ([]);.  cons
+ 116,  32,  91, 116, 120, 116,  44,  32, 115, 101, 116,  84, // t [txt, setT
+ 120, 116,  93,  32,  61,  32, 117, 115, 101,  83, 116,  97, // xt] = useSta
+ 116, 101,  40,  39,  39,  41,  59,  10,  10,  32,  32, 117, // te('');..  u
+ 115, 101,  69, 102, 102, 101,  99, 116,  40,  40,  41,  32, // seEffect(() 
+  61,  62,  32, 123,  10,  32,  32,  32,  32,  99, 111, 110, // => {.    con
+ 115, 116,  32, 105, 100,  32,  61,  32,  80, 117,  98,  83, // st id = PubS
+ 117,  98,  46, 115, 117,  98, 115,  99, 114, 105,  98, 101, // ub.subscribe
+  40, 102, 117, 110,  99, 116, 105, 111, 110,  40, 109, 115, // (function(ms
+ 103,  41,  32, 123,  10,  32,  32,  32,  32,  32,  32, 105, // g) {.      i
+ 102,  32,  40, 109, 115, 103,  46, 110,  97, 109, 101,  32, // f (msg.name 
+  61,  61,  32,  39, 109, 101, 115, 115,  97, 103, 101,  39, // == 'message'
+  41,  32, 115, 101, 116,  77, 101, 115, 115,  97, 103, 101, // ) setMessage
+ 115,  40, 120,  32,  61,  62,  32, 120,  46,  99, 111, 110, // s(x => x.con
+  99,  97, 116,  40,  91, 109, 115, 103,  46, 100,  97, 116, // cat([msg.dat
+  97,  93,  41,  41,  59,  10,  32,  32,  32,  32, 125,  41, // a]));.    })
+  59,  10,  32,  32,  32,  32, 114, 101, 116, 117, 114, 110, // ;.    return
+  32,  80, 117,  98,  83, 117,  98,  46, 117, 110, 115, 117, //  PubSub.unsu
+  98, 115,  99, 114, 105,  98, 101,  40, 105, 100,  41,  59, // bscribe(id);
+  10,  32,  32, 125,  44,  32,  91,  93,  41,  59,  10,  10, // .  }, []);..
+  32,  32,  99, 111, 110, 115, 116,  32, 115, 101, 110, 100, //   const send
+ 109, 101, 115, 115,  97, 103, 101,  32,  61,  32, 101, 118, // message = ev
+  32,  61,  62,  32, 102, 101, 116,  99, 104,  40,  39,  47, //  => fetch('/
+  97, 112, 105,  47, 109, 101, 115, 115,  97, 103, 101,  47, // api/message/
+ 115, 101, 110, 100,  39,  44,  32, 123,  10,  32,  32,  32, // send', {.   
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
+  32,  32,  32, 109, 101, 116, 104, 111, 100,  58,  32,  39, //    method: '
+ 112, 111, 115, 116,  39,  44,  10,  32,  32,  32,  32,  32, // post',.     
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
+  32,  98, 111, 100, 121,  58,  32,  96, 109, 101, 115, 115, //  body: `mess
+  97, 103, 101,  61,  36, 123, 101, 110,  99, 111, 100, 101, // age=${encode
+  85,  82,  73,  67, 111, 109, 112, 111, 110, 101, 110, 116, // URIComponent
+  40, 116, 120, 116,  41, 125,  96,  10,  32,  32,  32,  32, // (txt)}`.    
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, //             
+ 125,  41,  46, 116, 104, 101, 110,  40, 114,  32,  61,  62, // }).then(r =>
+  32, 115, 101, 116,  84, 120, 116,  40,  39,  39,  41,  41, //  setTxt(''))
+  59,  10,  32,  32,  99, 111, 110, 115, 116,  32, 114, 111, // ;.  const ro
+ 117, 116, 105, 110, 103,  32,  61,  32,  34,  99, 111, 110, // uting = "con
+ 110, 101,  99, 116, 101, 100,  34,  32, 105, 110,  32, 112, // nected" in p
+ 114, 111, 112, 115,  46,  99, 111, 110, 102, 105, 103,  59, // rops.config;
+  10,  32,  32,  99, 111, 110, 115, 116,  32,  99, 111, 110, // .  const con
+ 110, 115, 116,  97, 116, 117, 115,  32,  61,  32,  33, 114, // nstatus = !r
+ 111, 117, 116, 105, 110, 103,  32,  63,  32,  39,  84, 104, // outing ? 'Th
+ 105, 115,  32, 100, 101, 118, 105,  99, 101,  32, 104,  97, // is device ha
+ 115,  32, 110, 111,  32,  77,  81,  84,  84,  32, 102, 117, // s no MQTT fu
+ 110,  99, 116, 105, 111, 110,  97, 108, 105, 116, 121,  39, // nctionality'
+  32,  58,  32, 112, 114, 111, 112, 115,  46,  99, 111, 110, //  : props.con
+ 102, 105, 103,  46,  99, 111, 110, 110, 101,  99, 116, 101, // fig.connecte
+ 100,  32,  63,  32,  39,  99, 111, 110, 110, 101,  99, 116, // d ? 'connect
+ 101, 100,  39,  32,  58,  32,  39, 100, 105, 115,  99, 111, // ed' : 'disco
+ 110, 110, 101,  99, 116, 101, 100,  39,  59,  10,  32,  32, // nnected';.  
+ 114, 101, 116, 117, 114, 110,  32, 104, 116, 109, 108,  96, // return html`
+  10,  60, 100, 105, 118,  32,  99, 108,  97, 115, 115,  61, // .<div class=
+  34, 115, 101,  99, 116, 105, 111, 110,  34,  62,  10,  32, // "section">. 
+  32,  60, 104,  51,  32, 115, 116, 121, 108, 101,  61,  34, //  <h3 style="
+  98,  97,  99, 107, 103, 114, 111, 117, 110, 100,  58,  32, // background: 
+  35,  51,  48,  99,  48,  52,  48,  59,  32,  99, 111, 108, // #30c040; col
+ 111, 114,  58,  32,  35, 102, 102, 102,  59,  32, 112,  97, // or: #fff; pa
+ 100, 100, 105, 110, 103,  58,  32,  48,  46,  52, 101, 109, // dding: 0.4em
+  59,  34,  62,  77,  81,  84,  84,  32, 109, 101, 115, 115, // ;">MQTT mess
+  97, 103, 101, 115,  60,  47, 104,  51,  62,  10,  32,  32, // ages</h3>.  
+  60, 100, 105, 118,  62,  10,  32,  32,  32,  32,  77,  81, // <div>.    MQ
+  84,  84,  32, 115, 101, 114, 118, 101, 114,  32, 115, 116, // TT server st
+  97, 116, 117, 115,  58,  32,  60,  98,  62,  36, 123,  99, // atus: <b>${c
+ 111, 110, 110, 115, 116,  97, 116, 117, 115, 125,  60,  47, // onnstatus}</
+  98,  62,  10,  32,  32,  60,  47, 100, 105, 118,  62,  10, // b>.  </div>.
+  32,  32,  60, 100, 105, 118,  32, 115, 116, 121, 108, 101, //   <div style
+  61,  34, 104, 101, 105, 103, 104, 116,  58,  32,  49,  48, // ="height: 10
+ 101, 109,  59,  32, 111, 118, 101, 114, 102, 108, 111, 119, // em; overflow
+  58,  32,  97, 117, 116, 111,  59,  32, 112,  97, 100, 100, // : auto; padd
+ 105, 110, 103,  58,  32,  48,  46,  53, 101, 109,  59,  32, // ing: 0.5em; 
+  34,  32,  99, 108,  97, 115, 115,  61,  34,  98, 111, 114, // " class="bor
+ 100, 101, 114,  34,  62,  10,  32,  32,  32,  32,  36, 123, // der">.    ${
+ 109, 101, 115, 115,  97, 103, 101, 115,  46, 109,  97, 112, // messages.map
+  40, 109, 101, 115, 115,  97, 103, 101,  32,  61,  62,  32, // (message => 
+ 104,  40,  77, 101, 115, 115,  97, 103, 101,  44,  32, 123, // h(Message, {
+ 109, 101, 115, 115,  97, 103, 101, 125,  41,  41, 125,  10, // message}))}.
+  32,  32,  60,  47, 100, 105, 118,  62,  10,  32,  32,  60, //   </div>.  <
+ 100, 105, 118,  32, 115, 116, 121, 108, 101,  61,  34, 109, // div style="m
+  97, 114, 103, 105, 110,  58,  32,  48,  46,  53, 101, 109, // argin: 0.5em
+  32,  48,  59,  32, 100, 105, 115, 112, 108,  97, 121,  58, //  0; display:
+  32, 102, 108, 101, 120,  34,  62,  10,  32,  32,  32,  32, //  flex">.    
+  60, 115, 112,  97, 110,  32,  99, 108,  97, 115, 115,  61, // <span class=
+  34,  97, 100, 100, 111, 110,  32, 110, 111, 119, 114,  97, // "addon nowra
+ 112,  34,  62,  80, 117,  98, 108, 105, 115, 104,  32, 109, // p">Publish m
+ 101, 115, 115,  97, 103, 101,  58,  60,  47, 115, 112,  97, // essage:</spa
+ 110,  62,  10,  32,  32,  32,  32,  60, 105, 110, 112, 117, // n>.    <inpu
+ 116,  32, 112, 108,  97,  99, 101, 104, 111, 108, 100, 101, // t placeholde
+ 114,  61,  34, 116, 121, 112, 101,  32,  97, 110, 100,  32, // r="type and 
+ 112, 114, 101, 115, 115,  32, 101, 110, 116, 101, 114,  46, // press enter.
+  46,  46,  34,  32, 115, 116, 121, 108, 101,  61,  34, 102, // .." style="f
+ 108, 101, 120,  58,  32,  49,  32,  49,  48,  48,  37,  59, // lex: 1 100%;
+  34,  10,  32,  32,  32,  32,  32,  32, 118,  97, 108, 117, // ".      valu
+ 101,  61,  36, 123, 116, 120, 116, 125,  32, 111, 110,  99, // e=${txt} onc
+ 104,  97, 110, 103, 101,  61,  36, 123, 115, 101, 110, 100, // hange=${send
+ 109, 101, 115, 115,  97, 103, 101, 125,  32, 100, 105, 115, // message} dis
+  97,  98, 108, 101, 100,  61,  36, 123,  33, 114, 111, 117, // abled=${!rou
+ 116, 105, 110, 103, 125,  10,  32,  32,  32,  32,  32,  32, // ting}.      
+ 111, 110, 105, 110, 112, 117, 116,  61,  36, 123, 101, 118, // oninput=${ev
+  32,  61,  62,  32, 115, 101, 116,  84, 120, 116,  40, 101, //  => setTxt(e
+ 118,  46, 116,  97, 114, 103, 101, 116,  46, 118,  97, 108, // v.target.val
+ 117, 101,  41, 125,  32,  47,  62,  10,  32,  32,  60,  47, // ue)} />.  </
+ 100, 105, 118,  62,  10,  32,  32,  60, 100, 105, 118,  32, // div>.  <div 
+  99, 108,  97, 115, 115,  61,  34, 109, 115, 103,  34,  62, // class="msg">
+  10,  32,  32,  32,  32,  84, 104, 101,  32, 109, 101, 115, // .    The mes
+ 115,  97, 103, 101,  32, 103, 101, 116, 115,  32, 112,  97, // sage gets pa
+ 115, 115, 101, 100,  32, 116, 111,  32, 116, 104, 101,  32, // ssed to the 
+ 100, 101, 118, 105,  99, 101,  32, 118, 105,  97,  32,  82, // device via R
+  69,  83,  84,  46,  32,  84, 104, 101, 110,  32, 116, 104, // EST. Then th
+ 101,  32, 100, 101, 118, 105,  99, 101,  32, 115, 101, 110, // e device sen
+ 100, 115,  32, 105, 116,  32, 116, 111,  10,  32,  32,  32, // ds it to.   
+  32, 116, 104, 101,  32,  77,  81,  84,  84,  32, 115, 101, //  the MQTT se
+ 114, 118, 101, 114,  32, 111, 118, 101, 114,  32,  77,  81, // rver over MQ
+  84,  84,  46,  32,  65, 108, 108,  32,  77,  81,  84,  84, // TT. All MQTT
+  32, 109, 101, 115, 115,  97, 103, 101, 115,  32, 111, 110, //  messages on
+  32,  97,  32, 115, 117,  98, 115,  99, 114, 105,  98, 101, //  a subscribe
+ 100,  32, 116, 111, 112, 105,  99,  10,  32,  32,  32,  32, // d topic.    
+ 114, 101,  99, 101, 105, 118, 101, 100,  32,  98, 121,  32, // received by 
+ 116, 104, 101,  32, 100, 101, 118, 105,  99, 101,  44,  32, // the device, 
+  97, 114, 101,  32, 112, 114, 111, 112,  97, 103,  97, 116, // are propagat
+ 101, 100,  32, 116, 111,  32, 116, 104, 105, 115,  32, 100, // ed to this d
+  97, 115, 104,  98, 111,  97, 114, 100,  32, 118, 105,  97, // ashboard via
+  32,  47,  97, 112, 105,  47, 119,  97, 116,  99, 104,  46, //  /api/watch.
+  10,  32,  32,  60,  47, 100, 105, 118,  62,  10,  60,  47, // .  </div>.</
+ 100, 105, 118,  62,  96,  59,  10, 125,  59,  10,  10,  47, // div>`;.};../
+  47,  32,  69, 120, 112, 101,  99, 116, 101, 100,  32,  97, // / Expected a
+ 114, 103, 117, 109, 101, 110, 116, 115,  58,  10,  47,  47, // rguments:.//
+  32, 100,  97, 116,  97,  58,  32, 116, 105, 109, 101, 115, //  data: times
+ 101, 114, 105, 101, 115,  44,  32, 101,  46, 103,  46,  32, // eries, e.g. 
+  91,  32,  91,  49,  54,  53,  52,  51,  54,  49,  51,  53, // [ [165436135
+  50,  44,  32,  49,  57,  93,  44,  32,  91,  49,  54,  53, // 2, 19], [165
+  52,  51,  54,  49,  51,  53,  51,  44,  32,  49,  56,  93, // 4361353, 18]
+  44,  32,  46,  46,  46,  32,  93,  10,  47,  47,  32, 119, // , ... ].// w
+ 105, 100, 116, 104,  44,  32, 104, 101, 105, 103, 104, 116, // idth, height
+  44,  32, 121, 116, 105,  99, 107, 115,  44,  32, 120, 116, // , yticks, xt
+ 105,  99, 107, 115,  44,  32, 121, 109, 105, 110,  44,  32, // icks, ymin, 
+ 121, 109,  97, 120,  44,  32, 120, 109, 105, 110,  44,  32, // ymax, xmin, 
+ 120, 109,  97, 120,  10,  99, 111, 110, 115, 116,  32,  83, // xmax.const S
+  86,  71,  32,  61,  32, 102, 117, 110,  99, 116, 105, 111, // VG = functio
+ 110,  40, 112, 114, 111, 112, 115,  41,  32, 123,  10,  32, // n(props) {. 
+  32,  47,  47,  32,  32,  32,  32,  32,  32,  32,  32,  32, //  //         
+  32,  32,  32, 119,  10,  32,  32,  47,  47,  32,  32,  32, //    w.  //   
+  43,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45, // +-----------
+  45,  45,  45,  45,  45,  45,  45,  45,  45,  45,  43,  10, // ----------+.
+  32,  32,  47,  47,  32,  32,  32, 124,  32,  32,  32,  32, //   //   |    
+  32,  32,  32,  32, 104,  49,  32,  32,  32,  32,  32,  32, //     h1      
+  32,  32,  32,  32,  32, 124,  10,  32,  32,  47,  47,  32, //      |.  // 
+  32,  32, 124,  32,  32,  32,  32,  43,  45,  45,  45,  45, //   |    +----
+  45,  45,  45,  45,  45,  45,  45,  43,  32,  32,  32,  32, // -------+    
+ 124,  10,  32,  32,  47,  47,  32,  32,  32, 124,  32,  32, // |.  //   |  
+  32,  32, 124,  32,  32,  32,  32,  32,  32,  32,  32,  32, //   |         
+  32,  32, 124,  32,  32,  32,  32, 124,  32,  32, 104,  10, //   |    |  h.
+  32,  32,  47,  47,  32,  32,  32, 124,  32, 119,  49,  32, //   //   | w1 
+ 124,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, // |           
+ 124,  32, 119,  50,  32, 124,  10,  32,  32,  47,  47,  32, // | w2 |.  // 
+  32,  32, 124,  32,  32,  32,  32,  43,  45,  45,  45,  45, //   |    +----
+  45,  45,  45,  45,  45,  45,  45,  43,  32,  32,  32,  32, // -------+    
+ 124,  10,  32,  32,  47,  47,  32,  32,  32, 124,  32,  32, // |.  //   |  
+  32,  32,  32,  32,  32,  32,  32, 104,  50,  32,  32,  32, //        h2   
+  32,  32,  32,  32,  32,  32,  32, 124,  10,  32,  32,  47, //        |.  /
+  47,  32,  32,  32,  43,  45,  45,  45,  45,  45,  45,  45, // /   +-------
+  45,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45,  45, // ------------
+  45,  45,  43,  10,  32,  32,  47,  47,  10,  32,  32, 108, // --+.  //.  l
+ 101, 116,  32, 119,  32,  61,  32, 112, 114, 111, 112, 115, // et w = props
+  46, 119, 105, 100, 116, 104,  44,  32, 104,  32,  61,  32, // .width, h = 
+ 112, 114, 111, 112, 115,  46, 104, 101, 105, 103, 104, 116, // props.height
+  44,  32, 119,  49,  32,  61,  32,  51,  48,  44,  32, 119, // , w1 = 30, w
+  50,  32,  61,  32,  48,  44,  32, 104,  49,  32,  61,  32, // 2 = 0, h1 = 
+  56,  44,  32, 104,  50,  32,  61,  32,  49,  56,  59,  10, // 8, h2 = 18;.
+  32,  32, 108, 101, 116,  32, 121, 116, 105,  99, 107, 115, //   let yticks
+  32,  61,  32, 112, 114, 111, 112, 115,  46, 121, 116, 105, //  = props.yti
+  99, 107, 115,  32, 124, 124,  32,  52,  44,  32, 120, 116, // cks || 4, xt
+ 105,  99, 107, 115,  32,  61,  32, 112, 114, 111, 112, 115, // icks = props
+  46, 120, 116, 105,  99, 107, 115,  32, 124, 124,  32,  53, // .xticks || 5
+  59,  10,  32,  32, 108, 101, 116,  32, 100,  97, 116,  97, // ;.  let data
+  32,  61,  32, 112, 114, 111, 112, 115,  46, 100,  97, 116, //  = props.dat
+  97,  32, 124, 124,  32,  91,  93,  59,  10,  32,  32, 108, // a || [];.  l
+ 101, 116,  32, 121, 109, 105, 110,  32,  61,  32, 112, 114, // et ymin = pr
+ 111, 112, 115,  46, 121, 109, 105, 110,  32, 124, 124,  32, // ops.ymin || 
+  48,  59,  10,  32,  32, 108, 101, 116,  32, 121, 109,  97, // 0;.  let yma
+ 120,  32,  61,  32, 112, 114, 111, 112, 115,  46, 121, 109, // x = props.ym
+  97, 120,  32, 124, 124,  32,  77,  97, 116, 104,  46, 109, // ax || Math.m
+  97, 120,  46,  97, 112, 112, 108, 121,  40, 110, 117, 108, // ax.apply(nul
+ 108,  44,  32, 100,  97, 116,  97,  46, 109,  97, 112,  40, // l, data.map(
+ 112,  32,  61,  62,  32, 112,  91,  49,  93,  41,  41,  59, // p => p[1]));
+  10,  32,  32, 108, 101, 116,  32, 120, 109, 105, 110,  32, // .  let xmin 
+  61,  32, 112, 114, 111, 112, 115,  46, 120, 109, 105, 110, // = props.xmin
+  32, 124, 124,  32,  77,  97, 116, 104,  46, 109, 105, 110, //  || Math.min
+  46,  97, 112, 112, 108, 121,  40, 110, 117, 108, 108,  44, // .apply(null,
+  32, 100,  97, 116,  97,  46, 109,  97, 112,  40, 112,  32, //  data.map(p 
+  61,  62,  32, 112,  91,  48,  93,  41,  41,  59,  10,  32, // => p[0]));. 
+  32, 108, 101, 116,  32, 120, 109,  97, 120,  32,  61,  32, //  let xmax = 
+ 112, 114, 111, 112, 115,  46, 120, 109,  97, 120,  32, 124, // props.xmax |
+ 124,  32,  77,  97, 116, 104,  46, 109,  97, 120,  46,  97, // | Math.max.a
+ 112, 112, 108, 121,  40, 110, 117, 108, 108,  44,  32, 100, // pply(null, d
+  97, 116,  97,  46, 109,  97, 112,  40, 112,  32,  61,  62, // ata.map(p =>
+  32, 112,  91,  48,  93,  41,  41,  59,  10,  10,  32,  32, //  p[0]));..  
+  47,  47,  32,  89,  45,  97, 120, 105, 115,  32, 116, 105, // // Y-axis ti
+  99, 107,  32, 108, 105, 110, 101, 115,  32,  97, 110, 100, // ck lines and
+  32, 108,  97,  98, 101, 108, 115,  10,  32,  32, 108, 101, //  labels.  le
+ 116,  32, 121, 116,  97,  32,  61,  32,  40, 110, 101, 119, // t yta = (new
+  32,  65, 114, 114,  97, 121,  40, 121, 116, 105,  99, 107, //  Array(ytick
+ 115,  32,  43,  32,  49,  41,  41,  46, 102, 105, 108, 108, // s + 1)).fill
+  40,  48,  41,  46, 109,  97, 112,  40,  40,  95,  44,  32, // (0).map((_, 
+ 105,  41,  32,  61,  62,  32, 105,  41,  59,  32,  32,  47, // i) => i);  /
+  47,  32, 105, 110, 100, 105,  99, 101, 115,  10,  32,  32, // / indices.  
+ 108, 101, 116,  32, 121, 116, 105,  32,  61,  32, 105,  32, // let yti = i 
+  61,  62,  32, 104,  32,  45,  32, 104,  50,  32,  45,  32, // => h - h2 - 
+  40, 104,  32,  45,  32, 104,  49,  32,  45,  32, 104,  50, // (h - h1 - h2
+  41,  32,  42,  32, 105,  32,  47,  32, 121, 116, 105,  99, // ) * i / ytic
+ 107, 115,  59,  32,  32,  32,  32,  32,  32,  32,  32,  32, // ks;         
+  32,  47,  47,  32, 105, 110, 100, 101, 120,  39, 115,  32, //  // index's 
+  89,  10,  32,  32, 108, 101, 116,  32, 121, 116, 118,  32, // Y.  let ytv 
+  61,  32, 105,  32,  61,  62,  32,  40, 121, 109,  97, 120, // = i => (ymax
+  32,  45,  32, 121, 109, 105, 110,  41,  32,  42,  32, 105, //  - ymin) * i
+  32,  47,  32, 121, 116, 105,  99, 107, 115,  59,  10,  32, //  / yticks;. 
+  32, 108, 101, 116,  32, 121, 116, 108,  32,  61,  32, 121, //  let ytl = y
+  32,  61,  62,  32, 104, 116, 109, 108,  96,  60, 108, 105, //  => html`<li
+ 110, 101,  32, 120,  49,  61,  36, 123, 119,  49, 125,  32, // ne x1=${w1} 
+ 121,  49,  61,  36, 123, 121, 125,  32, 120,  50,  61,  36, // y1=${y} x2=$
+ 123, 119, 125,  32, 121,  50,  61,  36, 123, 121, 125,  32, // {w} y2=${y} 
+  99, 108,  97, 115, 115,  61,  34, 116, 105,  99, 107,  34, // class="tick"
+  47,  62,  96,  59,  10,  32,  32, 108, 101, 116,  32, 121, // />`;.  let y
+ 116, 116,  32,  61,  32,  40, 121,  44,  32, 118,  41,  32, // tt = (y, v) 
+  61,  62,  32, 104, 116, 109, 108,  96,  60, 116, 101, 120, // => html`<tex
+ 116,  32, 120,  61,  48,  32, 121,  61,  36, 123, 121,  32, // t x=0 y=${y 
+  43,  32,  53, 125,  32,  99, 108,  97, 115, 115,  61,  34, // + 5} class="
+ 108,  97,  98, 101, 108,  34,  62,  36, 123, 118, 125,  60, // label">${v}<
+  47, 116, 101, 120, 116,  62,  96,  59,  10,  10,  32,  32, // /text>`;..  
+  47,  47,  32,  88,  45,  97, 120, 105, 115,  32, 116, 105, // // X-axis ti
+  99, 107,  32, 108, 105, 110, 101, 115,  32,  97, 110, 100, // ck lines and
+  32, 108,  97,  98, 101, 108, 115,  10,  32,  32, 108, 101, //  labels.  le
+ 116,  32, 100,  97, 116, 101, 102, 109, 116,  32,  61,  32, // t datefmt = 
+ 117, 110, 105, 120,  32,  61,  62,  32,  40, 110, 101, 119, // unix => (new
+  32,  68,  97, 116, 101,  40, 117, 110, 105, 120,  32,  42, //  Date(unix *
+  32,  49,  48,  48,  48,  41,  41,  46, 116, 111,  73,  83, //  1000)).toIS
+  79,  83, 116, 114, 105, 110, 103,  40,  41,  46, 115, 117, // OString().su
+  98, 115, 116, 114,  40,  49,  52,  44,  32,  53,  41,  59, // bstr(14, 5);
+  10,  32,  32, 108, 101, 116,  32, 120, 116,  97,  32,  61, // .  let xta =
+  32,  40, 110, 101, 119,  32,  65, 114, 114,  97, 121,  40, //  (new Array(
+ 120, 116, 105,  99, 107, 115,  32,  43,  32,  49,  41,  41, // xticks + 1))
+  46, 102, 105, 108, 108,  40,  48,  41,  46, 109,  97, 112, // .fill(0).map
+  40,  40,  95,  44,  32, 105,  41,  32,  61,  62,  32, 105, // ((_, i) => i
+  41,  59,  32,  32,  47,  47,  32, 105, 110, 100, 105,  99, // );  // indic
+ 101, 115,  10,  32,  32, 108, 101, 116,  32, 120, 116, 105, // es.  let xti
+  32,  61,  32, 105,  32,  61,  62,  32, 119,  49,  32,  43, //  = i => w1 +
+  32,  40, 119,  32,  45,  32, 119,  49,  32,  45,  32, 119, //  (w - w1 - w
+  50,  41,  32,  42,  32, 105,  32,  47,  32, 120, 116, 105, // 2) * i / xti
+  99, 107, 115,  59,  32,  32,  32,  32,  32,  32,  32,  32, // cks;        
+  32,  32,  32,  32,  32,  32,  47,  47,  32, 105, 110, 100, //       // ind
+ 101, 120,  39, 115,  32,  88,  10,  32,  32, 108, 101, 116, // ex's X.  let
+  32, 120, 116, 118,  32,  61,  32, 105,  32,  61,  62,  32, //  xtv = i => 
+ 100,  97, 116, 101, 102, 109, 116,  40, 120, 109, 105, 110, // datefmt(xmin
+  32,  43,  32,  40, 120, 109,  97, 120,  32,  45,  32, 120, //  + (xmax - x
+ 109, 105, 110,  41,  32,  42,  32, 105,  32,  47,  32, 120, // min) * i / x
+ 116, 105,  99, 107, 115,  41,  59,  10,  32,  32, 108, 101, // ticks);.  le
+ 116,  32, 120, 116, 108,  32,  61,  32, 120,  32,  61,  62, // t xtl = x =>
+  32, 104, 116, 109, 108,  96,  60, 112,  97, 116, 104,  32, //  html`<path 
+ 100,  61,  34,  77,  32,  36, 123, 120, 125,  44,  36, 123, // d="M ${x},${
+ 104,  49, 125,  32,  76,  32,  36, 123, 120, 125,  44,  36, // h1} L ${x},$
+ 123, 104,  32,  45,  32, 104,  50, 125,  34,  32,  99, 108, // {h - h2}" cl
+  97, 115, 115,  61,  34, 116, 105,  99, 107,  34,  47,  62, // ass="tick"/>
+  96,  59,  10,  32,  32, 108, 101, 116,  32, 120, 116, 116, // `;.  let xtt
+  32,  61,  32,  40, 120,  44,  32, 118,  41,  32,  61,  62, //  = (x, v) =>
+  10,  32,  32,  32,  32,  32,  32, 104, 116, 109, 108,  96, // .      html`
+  60, 116, 101, 120, 116,  32, 120,  61,  36, 123, 120,  32, // <text x=${x 
+  45,  32,  49,  53, 125,  32, 121,  61,  36, 123, 104,  32, // - 15} y=${h 
+  45,  32,  50, 125,  32,  99, 108,  97, 115, 115,  61,  34, // - 2} class="
+ 108,  97,  98, 101, 108,  34,  62,  36, 123, 118, 125,  60, // label">${v}<
+  47, 116, 101, 120, 116,  62,  96,  59,  10,  10,  32,  32, // /text>`;..  
+  47,  47,  32,  84, 114,  97, 110, 115, 102, 111, 114, 109, // // Transform
+  32, 100,  97, 116,  97,  32, 112, 111, 105, 110, 116, 115, //  data points
+  32,  97, 114, 114,  97, 121,  32, 105, 110, 116, 111,  32, //  array into 
+  99, 111, 111, 114, 100, 105, 110,  97, 116, 101,  10,  32, // coordinate. 
+  32, 108, 101, 116,  32, 100, 120,  32,  61,  32, 118,  32, //  let dx = v 
+  61,  62,  32, 119,  49,  32,  43,  32,  40, 118,  32,  45, // => w1 + (v -
+  32, 120, 109, 105, 110,  41,  32,  47,  32,  40,  40, 120, //  xmin) / ((x
+ 109,  97, 120,  32,  45,  32, 120, 109, 105, 110,  41,  32, // max - xmin) 
+ 124, 124,  32,  49,  41,  32,  42,  32,  40, 119,  32,  45, // || 1) * (w -
+  32, 119,  49,  32,  45,  32, 119,  50,  41,  59,  10,  32, //  w1 - w2);. 
+  32, 108, 101, 116,  32, 100, 121,  32,  61,  32, 118,  32, //  let dy = v 
+  61,  62,  32, 104,  32,  45,  32, 104,  50,  32,  45,  32, // => h - h2 - 
+  40, 118,  32,  45,  32, 121, 109, 105, 110,  41,  32,  47, // (v - ymin) /
+  32,  40,  40, 121, 109,  97, 120,  32,  45,  32, 121, 109, //  ((ymax - ym
+ 105, 110,  41,  32, 124, 124,  32,  49,  41,  32,  42,  32, // in) || 1) * 
+  40, 104,  32,  45,  32, 104,  49,  32,  45,  32, 104,  50, // (h - h1 - h2
+  41,  59,  10,  32,  32, 108, 101, 116,  32, 100, 100,  32, // );.  let dd 
+  61,  32, 100,  97, 116,  97,  46, 109,  97, 112,  40, 112, // = data.map(p
+  32,  61,  62,  32,  91,  77,  97, 116, 104,  46, 114, 111, //  => [Math.ro
+ 117, 110, 100,  40, 100, 120,  40, 112,  91,  48,  93,  41, // und(dx(p[0])
+  41,  44,  32,  77,  97, 116, 104,  46, 114, 111, 117, 110, // ), Math.roun
+ 100,  40, 100, 121,  40, 112,  91,  49,  93,  41,  41,  93, // d(dy(p[1]))]
+  41,  59,  10,  32,  32, 108, 101, 116,  32, 100, 100, 108, // );.  let ddl
+  32,  61,  32, 100, 100,  46, 108, 101, 110, 103, 116, 104, //  = dd.length
+  59,  10,  32,  32,  47,  47,  32,  65, 110, 100,  32, 112, // ;.  // And p
+ 108, 111, 116,  32, 116, 104, 101,  32, 100,  97, 116,  97, // lot the data
+  32,  97, 115,  32,  60, 112,  97, 116, 104,  62,  32, 101, //  as <path> e
+ 108, 101, 109, 101, 110, 116,  10,  32,  32, 108, 101, 116, // lement.  let
+  32,  98, 101, 103, 105, 110,  48,  32,  61,  32, 100, 100, //  begin0 = dd
+ 108,  32,  63,  32,  96,  77,  32,  36, 123, 100, 100,  91, // l ? `M ${dd[
+  48,  93,  91,  48,  93, 125,  44,  36, 123, 100, 100,  91, // 0][0]},${dd[
+  48,  93,  91,  49,  93, 125,  96,  32,  58,  32,  96,  77, // 0][1]}` : `M
+  32,  48,  44,  48,  96,  59,  10,  32,  32, 108, 101, 116, //  0,0`;.  let
+  32,  98, 101, 103, 105, 110,  32,  61,  32,  96,  77,  32, //  begin = `M 
+  36, 123, 119,  49, 125,  44,  36, 123, 104,  32,  45,  32, // ${w1},${h - 
+ 104,  50, 125,  96,  59,  32,  32,  47,  47,  32,  73, 110, // h2}`;  // In
+ 105, 116, 105,  97, 108,  32, 112, 111, 105, 110, 116,  10, // itial point.
+  32,  32, 108, 101, 116,  32, 101, 110, 100,  32,  61,  32, //   let end = 
+ 100, 100, 108,  32,  63,  32,  96,  76,  32,  36, 123, 100, // ddl ? `L ${d
+ 100,  91, 100, 100, 108,  32,  45,  32,  49,  93,  91,  48, // d[ddl - 1][0
+  93, 125,  44,  36, 123, 104,  32,  45,  32, 104,  50, 125, // ]},${h - h2}
+  96,  32,  58,  32,  96,  76,  32,  36, 123, 119,  49, 125, // ` : `L ${w1}
+  44,  36, 123, 104,  32,  45,  32, 104,  50, 125,  96,  59, // ,${h - h2}`;
+  10,  32,  32, 108, 101, 116,  32, 115, 101, 114, 105, 101, // .  let serie
+ 115,  32,  61,  32, 100, 100, 108,  32,  63,  32, 100, 100, // s = ddl ? dd
+  46, 109,  97, 112,  40, 112,  32,  61,  62,  32,  96,  76, // .map(p => `L
+  32,  36, 123, 112,  91,  48,  93, 125,  32,  36, 123, 112, //  ${p[0]} ${p
+  91,  49,  93, 125,  96,  41,  32,  58,  32,  91,  93,  59, // [1]}`) : [];
+  10,  10,  32,  32, 114, 101, 116, 117, 114, 110,  32, 104, // ..  return h
+ 116, 109, 108,  96,  10,  60, 115, 118, 103,  32, 118, 105, // tml`.<svg vi
+ 101, 119,  66, 111, 120,  61,  34,  48,  32,  48,  32,  36, // ewBox="0 0 $
+ 123, 119, 125,  32,  36, 123, 104, 125,  34,  62,  10,  32, // {w} ${h}">. 
+  32,  60, 115, 116, 121, 108, 101,  62,  10,  32,  32,  32, //  <style>.   
+  32,  46,  97, 120, 105, 115,  32, 123,  32, 115, 116, 114, //  .axis { str
+ 111, 107, 101,  58,  32,  35,  97,  97,  97,  59,  32, 102, // oke: #aaa; f
+ 105, 108, 108,  58,  32, 110, 111, 110, 101,  59,  32, 125, // ill: none; }
+  10,  32,  32,  32,  32,  46, 108,  97,  98, 101, 108,  32, // .    .label 
+ 123,  32, 115, 116, 114, 111, 107, 101,  58,  32,  35,  97, // { stroke: #a
+  97,  97,  59,  32, 102, 111, 110, 116,  45, 115, 105, 122, // aa; font-siz
+ 101,  58,  32,  49,  51, 112, 120,  59,  32, 125,  10,  32, // e: 13px; }. 
+  32,  32,  32,  46, 116, 105,  99, 107,  32, 123,  32, 115, //    .tick { s
+ 116, 114, 111, 107, 101,  58,  32,  35,  99,  99,  99,  59, // troke: #ccc;
+  32, 102, 105, 108, 108,  58,  32, 110, 111, 110, 101,  59, //  fill: none;
+  32, 115, 116, 114, 111, 107, 101,  45, 100,  97, 115, 104, //  stroke-dash
+  97, 114, 114,  97, 121,  58,  32,  53,  59,  32, 125,  10, // array: 5; }.
+  32,  32,  32,  32,  46, 115, 101, 114, 105, 101, 115,  98, //     .seriesb
+ 103,  32, 123,  32, 115, 116, 114, 111, 107, 101,  58,  32, // g { stroke: 
+ 110, 111, 110, 101,  59,  32, 102, 105, 108, 108,  58,  32, // none; fill: 
+ 114, 103,  98,  97,  40,  50,  48,  48,  44,  50,  50,  53, // rgba(200,225
+  44,  50,  53,  53,  44,  32,  48,  46,  50,  53,  41, 125, // ,255, 0.25)}
+  10,  32,  32,  32,  32,  46, 115, 101, 114, 105, 101, 115, // .    .series
+  32, 123,  32, 115, 116, 114, 111, 107, 101,  58,  32,  35, //  { stroke: #
+  50,  53,  97,  59,  32, 102, 105, 108, 108,  58,  32, 110, // 25a; fill: n
+ 111, 110, 101,  59,  32, 125,  10,  32,  32,  60,  47, 115, // one; }.  </s
+ 116, 121, 108, 101,  62,  10,  32,  32,  36, 123, 121, 116, // tyle>.  ${yt
+  97,  46, 109,  97, 112,  40, 105,  32,  61,  62,  32, 121, // a.map(i => y
+ 116, 108,  40, 121, 116, 105,  40, 105,  41,  41,  41, 125, // tl(yti(i)))}
+  10,  32,  32,  36, 123, 121, 116,  97,  46, 109,  97, 112, // .  ${yta.map
+  40, 105,  32,  61,  62,  32, 121, 116, 116,  40, 121, 116, // (i => ytt(yt
+ 105,  40, 105,  41,  44,  32, 121, 116, 118,  40, 105,  41, // i(i), ytv(i)
+  41,  41, 125,  10,  32,  32,  36, 123, 120, 116,  97,  46, // ))}.  ${xta.
+ 109,  97, 112,  40, 105,  32,  61,  62,  32, 120, 116, 108, // map(i => xtl
+  40, 120, 116, 105,  40, 105,  41,  41,  41, 125,  10,  32, // (xti(i)))}. 
+  32,  36, 123, 100,  97, 116,  97,  46, 108, 101, 110, 103, //  ${data.leng
+ 116, 104,  32,  63,  32, 120, 116,  97,  46, 109,  97, 112, // th ? xta.map
+  40, 105,  32,  61,  62,  32, 120, 116, 116,  40, 120, 116, // (i => xtt(xt
+ 105,  40, 105,  41,  44,  32, 120, 116, 118,  40, 105,  41, // i(i), xtv(i)
+  41,  41,  32,  58,  32,  39,  39, 125,  10,  32,  32,  60, // )) : ''}.  <
+ 112,  97, 116, 104,  32, 100,  61,  34,  36, 123,  98, 101, // path d="${be
+ 103, 105, 110, 125,  32,  36, 123, 115, 101, 114, 105, 101, // gin} ${serie
+ 115,  46, 106, 111, 105, 110,  40,  39,  32,  39,  41, 125, // s.join(' ')}
+  32,  36, 123, 101, 110, 100, 125,  34,  32,  99, 108,  97, //  ${end}" cla
+ 115, 115,  61,  34, 115, 101, 114, 105, 101, 115,  98, 103, // ss="seriesbg
+  34,  32,  47,  62,  10,  32,  32,  60, 112,  97, 116, 104, // " />.  <path
+  32, 100,  61,  34,  36, 123,  98, 101, 103, 105, 110,  48, //  d="${begin0
+ 125,  32,  36, 123, 115, 101, 114, 105, 101, 115,  46, 106, // } ${series.j
+ 111, 105, 110,  40,  39,  32,  39,  41, 125,  34,  32,  99, // oin(' ')}" c
+ 108,  97, 115, 115,  61,  34, 115, 101, 114, 105, 101, 115, // lass="series
+  34,  32,  47,  62,  10,  60,  47, 115, 118, 103,  62,  96, // " />.</svg>`
+  59,  10, 125,  59,  10,  10,  10,  99, 111, 110, 115, 116, // ;.};...const
+  32,  67, 104,  97, 114, 116,  32,  61,  32, 102, 117, 110, //  Chart = fun
+  99, 116, 105, 111, 110,  40, 112, 114, 111, 112, 115,  41, // ction(props)
+  32, 123,  10,  32,  32,  99, 111, 110, 115, 116,  32,  91, //  {.  const [
+ 100,  97, 116,  97,  44,  32, 115, 101, 116,  68,  97, 116, // data, setDat
+  97,  93,  32,  61,  32, 117, 115, 101,  83, 116,  97, 116, // a] = useStat
+ 101,  40,  91,  93,  41,  59,  10,  32,  32, 117, 115, 101, // e([]);.  use
+  69, 102, 102, 101,  99, 116,  40,  40,  41,  32,  61,  62, // Effect(() =>
+  32, 123,  10,  32,  32,  32,  32,  99, 111, 110, 115, 116, //  {.    const
+  32, 105, 100,  32,  61,  32,  80, 117,  98,  83, 117,  98, //  id = PubSub
+  46, 115, 117,  98, 115,  99, 114, 105,  98, 101,  40, 102, // .subscribe(f
+ 117, 110,  99, 116, 105, 111, 110,  40, 109, 115, 103,  41, // unction(msg)
+  32, 123,  10,  32,  32,  32,  32,  32,  32, 105, 102,  32, //  {.      if 
+  40, 109, 115, 103,  46, 110,  97, 109, 101,  32,  33,  61, // (msg.name !=
+  32,  39, 109, 101, 116, 114, 105,  99, 115,  39,  41,  32, //  'metrics') 
+ 114, 101, 116, 117, 114, 110,  59,  10,  32,  32,  32,  32, // return;.    
+  32,  32, 115, 101, 116,  68,  97, 116,  97,  40, 120,  32, //   setData(x 
+  61,  62,  32, 120,  46,  99, 111, 110,  99,  97, 116,  40, // => x.concat(
+  91, 109, 115, 103,  46, 100,  97, 116,  97,  93,  41,  46, // [msg.data]).
+ 115, 112, 108, 105,  99, 101,  40,  45,  77,  97, 120,  77, // splice(-MaxM
+ 101, 116, 114, 105,  99, 115,  68,  97, 116,  97,  80, 111, // etricsDataPo
+ 105, 110, 116, 115,  41,  41,  59,  10,  32,  32,  32,  32, // ints));.    
+ 125,  41,  59,  10,  32,  32,  32,  32, 114, 101, 116, 117, // });.    retu
+ 114, 110,  32,  80, 117,  98,  83, 117,  98,  46, 117, 110, // rn PubSub.un
+ 115, 117,  98, 115,  99, 114, 105,  98, 101,  40, 105, 100, // subscribe(id
+  41,  59,  10,  32,  32, 125,  44,  32,  91,  93,  41,  59, // );.  }, []);
+  10,  10,  32,  32, 108, 101, 116,  32, 120, 109,  97, 120, // ..  let xmax
+  32,  61,  32,  48,  44,  32, 109, 105, 115, 115, 105, 110, //  = 0, missin
+ 103,  32,  61,  32,  77,  97, 120,  77, 101, 116, 114, 105, // g = MaxMetri
+  99, 115,  68,  97, 116,  97,  80, 111, 105, 110, 116, 115, // csDataPoints
+  32,  45,  32, 100,  97, 116,  97,  46, 108, 101, 110, 103, //  - data.leng
+ 116, 104,  59,  10,  32,  32, 105, 102,  32,  40, 109, 105, // th;.  if (mi
+ 115, 115, 105, 110, 103,  32,  62,  32,  48,  41,  32, 120, // ssing > 0) x
+ 109,  97, 120,  32,  61,  32,  77,  97, 116, 104,  46, 114, // max = Math.r
+ 111, 117, 110, 100,  40,  68,  97, 116, 101,  46, 110, 111, // ound(Date.no
+ 119,  40,  41,  32,  47,  32,  49,  48,  48,  48,  41,  32, // w() / 1000) 
+  43,  32, 109, 105, 115, 115, 105, 110, 103,  59,  10,  32, // + missing;. 
+  32, 114, 101, 116, 117, 114, 110,  32, 104, 116, 109, 108, //  return html
+  96,  10,  60, 100, 105, 118,  32,  99, 108,  97, 115, 115, // `.<div class
+  61,  34, 115, 101,  99, 116, 105, 111, 110,  34,  62,  10, // ="section">.
+  32,  32,  60, 104,  51,  32, 115, 116, 121, 108, 101,  61, //   <h3 style=
+  34,  98,  97,  99, 107, 103, 114, 111, 117, 110, 100,  58, // "background:
+  32,  35, 101,  99,  51,  59,  32,  99, 111, 108, 111, 114, //  #ec3; color
+  58,  32,  35, 102, 102, 102,  59,  32, 112,  97, 100, 100, // : #fff; padd
+ 105, 110, 103,  58,  32,  48,  46,  52, 101, 109,  59,  34, // ing: 0.4em;"
+  62,  68,  97, 116,  97,  32,  67, 104,  97, 114, 116,  60, // >Data Chart<
+  47, 104,  51,  62,  10,  32,  32,  60, 100, 105, 118,  32, // /h3>.  <div 
+ 115, 116, 121, 108, 101,  61,  34, 111, 118, 101, 114, 102, // style="overf
+ 108, 111, 119,  58,  32,  97, 117, 116, 111,  59,  32, 112, // low: auto; p
   97, 100, 100, 105, 110, 103,  58,  32,  48,  46,  53, 101, // adding: 0.5e
- 109,  59,  32, 102, 111, 110, 116,  45, 115, 105, 122, 101, // m; font-size
-  58,  32,  57,  48,  37,  59,  32, 109,  97, 114, 103, 105, // : 90%; margi
- 110,  58,  32,  49, 101, 109,  32,  48,  59,  32, 125,  10, // n: 1em 0; }.
-  46, 115, 101,  99, 116, 105, 111, 110,  32, 123,  32, 109, // .section { m
-  97, 114, 103, 105, 110,  58,  32,  48,  32,  49, 101, 109, // argin: 0 1em
-  59,  32, 125,  10,  46, 116, 111, 112, 105,  99,  44,  32, // ; }..topic, 
-  46, 100,  97, 116,  97,  44,  32,  46, 113, 111, 115,  32, // .data, .qos 
- 123,  32,  32, 112,  97, 100, 100, 105, 110, 103,  58,  32, // {  padding: 
-  48,  46,  50, 101, 109,  32,  48,  46,  53, 101, 109,  59, // 0.2em 0.5em;
-  32,  98, 111, 114, 100, 101, 114,  45, 114,  97, 100, 105, //  border-radi
- 117, 115,  58,  32,  48,  46,  52, 101, 109,  59,  32, 109, // us: 0.4em; m
-  97, 114, 103, 105, 110,  45, 114, 105, 103, 104, 116,  58, // argin-right:
-  32,  48,  46,  53, 101, 109,  59,  32,  32, 125,  10,  46, //  0.5em;  }..
- 113, 111, 115,  32, 123,  32,  98,  97,  99, 107, 103, 114, // qos { backgr
- 111, 117, 110, 100,  58,  32,  35, 101, 102,  97,  59,  32, // ound: #efa; 
- 125,  10,  46, 116, 111, 112, 105,  99,  32, 123,  32,  98, // }..topic { b
-  97,  99, 107, 103, 114, 111, 117, 110, 100,  58,  32,  35, // ackground: #
- 102, 101,  97,  59,  32, 125,  10,  46, 100,  97, 116,  97, // fea; }..data
-  32, 123,  32,  98,  97,  99, 107, 103, 114, 111, 117, 110, //  { backgroun
- 100,  58,  32,  35,  97, 101, 102,  59,  32, 125,  10,  10, // d: #aef; }..
-  47,  42,  32,  71, 114, 105, 100,  32,  42,  47,  10,  46, // /* Grid */..
- 114, 111, 119,  32, 123,  32, 100, 105, 115, 112, 108,  97, // row { displa
- 121,  58,  32, 102, 108, 101, 120,  59,  32, 102, 108, 101, // y: flex; fle
- 120,  45, 119, 114,  97, 112,  58,  32, 119, 114,  97, 112, // x-wrap: wrap
-  59,  32, 125,  10,  46,  99, 111, 108,  32, 123,  32, 109, // ; }..col { m
-  97, 114, 103, 105, 110,  58,  32,  48,  59,  32, 112,  97, // argin: 0; pa
- 100, 100, 105, 110, 103,  58,  32,  48,  59,  32, 111, 118, // dding: 0; ov
- 101, 114, 102, 108, 111, 119,  58,  32,  97, 117, 116, 111, // erflow: auto
-  59,  32, 125,  10,  46,  99, 111, 108,  45,  49,  50,  32, // ; }..col-12 
- 123,  32, 119, 105, 100, 116, 104,  58,  32,  49,  48,  48, // { width: 100
-  37,  59,  32, 125,  10,  46,  99, 111, 108,  45,  49,  49, // %; }..col-11
-  32, 123,  32, 119, 105, 100, 116, 104,  58,  32,  57,  49, //  { width: 91
-  46,  54,  54,  37,  59,  32, 125,  10,  46,  99, 111, 108, // .66%; }..col
-  45,  49,  48,  32, 123,  32, 119, 105, 100, 116, 104,  58, // -10 { width:
-  32,  56,  51,  46,  51,  51,  37,  59,  32, 125,  10,  46, //  83.33%; }..
-  99, 111, 108,  45,  57,  32, 123,  32, 119, 105, 100, 116, // col-9 { widt
- 104,  58,  32,  55,  53,  37,  59,  32, 125,  10,  46,  99, // h: 75%; }..c
- 111, 108,  45,  56,  32, 123,  32, 119, 105, 100, 116, 104, // ol-8 { width
-  58,  32,  54,  54,  46,  54,  54,  37,  59,  32, 125,  10, // : 66.66%; }.
-  46,  99, 111, 108,  45,  55,  32, 123,  32, 119, 105, 100, // .col-7 { wid
- 116, 104,  58,  32,  53,  56,  46,  51,  51,  37,  59,  32, // th: 58.33%; 
- 125,  10,  46,  99, 111, 108,  45,  54,  32, 123,  32, 119, // }..col-6 { w
- 105, 100, 116, 104,  58,  32,  53,  48,  37,  59,  32, 125, // idth: 50%; }
-  10,  46,  99, 111, 108,  45,  53,  32, 123,  32, 119, 105, // ..col-5 { wi
- 100, 116, 104,  58,  32,  52,  49,  46,  54,  54,  37,  59, // dth: 41.66%;
-  32, 125,  10,  46,  99, 111, 108,  45,  52,  32, 123,  32, //  }..col-4 { 
- 119, 105, 100, 116, 104,  58,  32,  51,  51,  46,  51,  51, // width: 33.33
-  37,  59,  32, 125,  10,  46,  99, 111, 108,  45,  51,  32, // %; }..col-3 
- 123,  32, 119, 105, 100, 116, 104,  58,  32,  50,  53,  37, // { width: 25%
-  59,  32, 125,  10,  46,  99, 111, 108,  45,  50,  32, 123, // ; }..col-2 {
-  32, 119, 105, 100, 116, 104,  58,  32,  49,  54,  46,  54, //  width: 16.6
-  54,  37,  59,  32, 125,  10,  46,  99, 111, 108,  45,  49, // 6%; }..col-1
-  32, 123,  32, 119, 105, 100, 116, 104,  58,  32,  56,  46, //  { width: 8.
-  51,  51,  37,  59,  32, 125,  10,  64, 109, 101, 100, 105, // 33%; }.@medi
-  97,  32,  40, 109, 105, 110,  45, 119, 105, 100, 116, 104, // a (min-width
-  58,  32,  49,  51,  49,  48, 112, 120,  41,  32, 123,  32, // : 1310px) { 
-  46,  99, 111, 110, 116,  97, 105, 110, 101, 114,  32, 123, // .container {
-  32, 109,  97, 114, 103, 105, 110,  58,  32,  97, 117, 116, //  margin: aut
- 111,  59,  32, 119, 105, 100, 116, 104,  58,  32,  49,  50, // o; width: 12
-  55,  48, 112, 120,  59,  32, 125,  32, 125,  10,  64, 109, // 70px; } }.@m
- 101, 100, 105,  97,  32,  40, 109,  97, 120,  45, 119, 105, // edia (max-wi
- 100, 116, 104,  58,  32,  57,  50,  48, 112, 120,  41,  32, // dth: 920px) 
- 123,  32,  46, 114, 111, 119,  32,  46,  99, 111, 108,  32, // { .row .col 
- 123,  32, 119, 105, 100, 116, 104,  58,  32,  49,  48,  48, // { width: 100
-  37,  59,  32, 125,  32, 125,  10, 0 // %; } }.
+ 109,  59,  34,  32,  99, 108,  97, 115, 115,  61,  34,  34, // m;" class=""
+  62,  10,  32,  32,  32,  32,  60,  36, 123,  83,  86,  71, // >.    <${SVG
+ 125,  32, 104, 101, 105, 103, 104, 116,  61,  50,  52,  48, // } height=240
+  32, 119, 105, 100, 116, 104,  61,  54,  48,  48,  32, 121, //  width=600 y
+ 109, 105, 110,  61,  48,  32, 121, 109,  97, 120,  61,  50, // min=0 ymax=2
+  48,  32, 120, 109,  97, 120,  61,  36, 123, 120, 109,  97, // 0 xmax=${xma
+ 120, 125,  32, 100,  97, 116,  97,  61,  36, 123, 100,  97, // x} data=${da
+ 116,  97, 125,  32,  47,  62,  10,  32,  32,  60,  47, 100, // ta} />.  </d
+ 105, 118,  62,  10,  32,  32,  60, 100, 105, 118,  32,  99, // iv>.  <div c
+ 108,  97, 115, 115,  61,  34, 109, 115, 103,  34,  62,  10, // lass="msg">.
+  32,  32,  32,  32,  84, 104, 105, 115,  32,  99, 104,  97, //     This cha
+ 114, 116,  32, 112, 108, 111, 116, 115,  32, 108, 105, 118, // rt plots liv
+ 101,  32, 115, 101, 110, 115, 111, 114,  32, 100,  97, 116, // e sensor dat
+  97,  44,  32, 115, 101, 110, 116,  32,  98, 121,  32, 116, // a, sent by t
+ 104, 101,  32, 100, 101, 118, 105,  99, 101,  32, 118, 105, // he device vi
+  97,  32,  47,  97, 112, 105,  47, 119,  97, 116,  99, 104, // a /api/watch
+  46,  10,  32,  32,  60,  47, 100, 105, 118,  62,  10,  60, // ..  </div>.<
+  47, 100, 105, 118,  62,  96,  59,  10, 125,  59,  10,  10, // /div>`;.};..
+  99, 111, 110, 115, 116,  32,  65, 112, 112,  32,  61,  32, // const App = 
+ 102, 117, 110,  99, 116, 105, 111, 110,  40, 112, 114, 111, // function(pro
+ 112, 115,  41,  32, 123,  10,  32,  32,  99, 111, 110, 115, // ps) {.  cons
+ 116,  32,  91, 117, 115, 101, 114,  44,  32, 115, 101, 116, // t [user, set
+  85, 115, 101, 114,  93,  32,  61,  32, 117, 115, 101,  83, // User] = useS
+ 116,  97, 116, 101,  40,  39,  39,  41,  59,  10,  32,  32, // tate('');.  
+  99, 111, 110, 115, 116,  32,  91,  99, 111, 110, 102, 105, // const [confi
+ 103,  44,  32, 115, 101, 116,  67, 111, 110, 102, 105, 103, // g, setConfig
+  93,  32,  61,  32, 117, 115, 101,  83, 116,  97, 116, 101, // ] = useState
+  40, 123, 125,  41,  59,  10,  10,  32,  32,  99, 111, 110, // ({});..  con
+ 115, 116,  32, 103, 101, 116,  99, 111, 110, 102, 105, 103, // st getconfig
+  32,  61,  32,  40,  41,  32,  61,  62,  10,  32,  32,  32, //  = () =>.   
+  32,  32,  32, 102, 101, 116,  99, 104,  40,  39,  47,  97, //    fetch('/a
+ 112, 105,  47,  99, 111, 110, 102, 105, 103,  47, 103, 101, // pi/config/ge
+ 116,  39,  44,  32, 123, 104, 101,  97, 100, 101, 114, 115, // t', {headers
+  58,  32, 123,  65, 117, 116, 104, 111, 114, 105, 122,  97, // : {Authoriza
+ 116, 105, 111, 110,  58,  32,  39,  39, 125, 125,  41,  10, // tion: ''}}).
+  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  46, 116, //           .t
+ 104, 101, 110,  40, 114,  32,  61,  62,  32, 114,  46, 106, // hen(r => r.j
+ 115, 111, 110,  40,  41,  41,  10,  32,  32,  32,  32,  32, // son()).     
+  32,  32,  32,  32,  32,  46, 116, 104, 101, 110,  40, 114, //      .then(r
+  32,  61,  62,  32, 115, 101, 116,  67, 111, 110, 102, 105, //  => setConfi
+ 103,  40, 114,  41,  41,  10,  32,  32,  32,  32,  32,  32, // g(r)).      
+  32,  32,  32,  32,  46,  99,  97, 116,  99, 104,  40, 101, //     .catch(e
+ 114, 114,  32,  61,  62,  32,  99, 111, 110, 115, 111, 108, // rr => consol
+ 101,  46, 108, 111, 103,  40, 101, 114, 114,  41,  41,  59, // e.log(err));
+  10,  10,  32,  32,  47,  47,  32,  87,  97, 116,  99, 104, // ..  // Watch
+  32, 102, 111, 114,  32, 110, 111, 116, 105, 102, 105,  99, //  for notific
+  97, 116, 105, 111, 110, 115,  46,  32,  65, 115,  32, 115, // ations. As s
+ 111, 111, 110,  32,  97, 115,  32,  97,  32, 110, 111, 116, // oon as a not
+ 105, 102, 105,  99,  97, 116, 105, 111, 110,  32,  97, 114, // ification ar
+ 114, 105, 118, 101, 115,  44,  32, 112,  97, 115, 115,  32, // rives, pass 
+ 105, 116,  32, 111, 110,  10,  32,  32,  47,  47,  32, 116, // it on.  // t
+ 111,  32,  97, 108, 108,  32, 115, 117,  98, 115,  99, 114, // o all subscr
+ 105,  98, 101, 100,  32,  99, 111, 109, 112, 111, 110, 101, // ibed compone
+ 110, 116, 115,  10,  32,  32,  99, 111, 110, 115, 116,  32, // nts.  const 
+ 119,  97, 116,  99, 104,  32,  61,  32, 102, 117, 110,  99, // watch = func
+ 116, 105, 111, 110,  40,  41,  32, 123,  10,  32,  32,  32, // tion() {.   
+  32, 118,  97, 114,  32, 108,  32,  61,  32, 119, 105, 110, //  var l = win
+ 100, 111, 119,  46, 108, 111,  99,  97, 116, 105, 111, 110, // dow.location
+  44,  32, 112, 114, 111, 116, 111,  32,  61,  32, 108,  46, // , proto = l.
+ 112, 114, 111, 116, 111,  99, 111, 108,  46, 114, 101, 112, // protocol.rep
+ 108,  97,  99, 101,  40,  39, 104, 116, 116, 112,  39,  44, // lace('http',
+  32,  39, 119, 115,  39,  41,  59,  10,  32,  32,  32,  32, //  'ws');.    
+ 118,  97, 114,  32, 116, 105, 100,  44,  32, 119, 115,  85, // var tid, wsU
+  82,  73,  32,  61,  32, 112, 114, 111, 116, 111,  32,  43, // RI = proto +
+  32,  39,  47,  47,  39,  32,  43,  32, 108,  46, 104, 111, //  '//' + l.ho
+ 115, 116,  32,  43,  32,  39,  47,  97, 112, 105,  47, 119, // st + '/api/w
+  97, 116,  99, 104,  39,  10,  32,  32,  32,  32, 118,  97, // atch'.    va
+ 114,  32, 114, 101,  99, 111, 110, 110, 101,  99, 116,  32, // r reconnect 
+  61,  32, 102, 117, 110,  99, 116, 105, 111, 110,  40,  41, // = function()
+  32, 123,  10,  32,  32,  32,  32,  32,  32, 118,  97, 114, //  {.      var
+  32, 119, 115,  32,  61,  32, 110, 101, 119,  32,  87, 101, //  ws = new We
+  98,  83, 111,  99, 107, 101, 116,  40, 119, 115,  85,  82, // bSocket(wsUR
+  73,  41,  59,  10,  32,  32,  32,  32,  32,  32,  47,  47, // I);.      //
+  32, 119, 115,  46, 111, 110, 111, 112, 101, 110,  32,  61, //  ws.onopen =
+  32,  40,  41,  32,  61,  62,  32,  99, 111, 110, 115, 111, //  () => conso
+ 108, 101,  46, 108, 111, 103,  40,  39, 119, 115,  32,  99, // le.log('ws c
+ 111, 110, 110, 101,  99, 116, 101, 100,  39,  41,  59,  10, // onnected');.
+  32,  32,  32,  32,  32,  32, 119, 115,  46, 111, 110, 109, //       ws.onm
+ 101, 115, 115,  97, 103, 101,  32,  61,  32, 102, 117, 110, // essage = fun
+  99, 116, 105, 111, 110,  40, 101, 118,  41,  32, 123,  10, // ction(ev) {.
+  32,  32,  32,  32,  32,  32,  32,  32, 116, 114, 121,  32, //         try 
+ 123,  10,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, // {.          
+ 118,  97, 114,  32, 109, 115, 103,  32,  61,  32,  74,  83, // var msg = JS
+  79,  78,  46, 112,  97, 114, 115, 101,  40, 101, 118,  46, // ON.parse(ev.
+ 100,  97, 116,  97,  41,  59,  10,  32,  32,  32,  32,  32, // data);.     
+  32,  32,  32,  32,  32,  80, 117,  98,  83, 117,  98,  46, //      PubSub.
+ 112, 117,  98, 108, 105, 115, 104,  40, 109, 115, 103,  41, // publish(msg)
+  59,  10,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32, // ;.          
+  47,  47,  32, 105, 102,  32,  40, 109, 115, 103,  46, 110, // // if (msg.n
+  97, 109, 101,  32,  33,  61,  32,  39, 109, 101, 116, 114, // ame != 'metr
+ 105,  99, 115,  39,  41,  32,  99, 111, 110, 115, 111, 108, // ics') consol
+ 101,  46, 108, 111, 103,  40,  39, 119, 115,  45,  62,  39, // e.log('ws->'
+  44,  32, 109, 115, 103,  41,  59,  10,  32,  32,  32,  32, // , msg);.    
+  32,  32,  32,  32, 125,  32,  99,  97, 116,  99, 104,  32, //     } catch 
+  40, 101,  41,  32, 123,  10,  32,  32,  32,  32,  32,  32, // (e) {.      
+  32,  32,  32,  32,  99, 111, 110, 115, 111, 108, 101,  46, //     console.
+ 108, 111, 103,  40,  39,  73, 110, 118,  97, 108, 105, 100, // log('Invalid
+  32, 119, 115,  32, 102, 114,  97, 109, 101,  58,  39,  44, //  ws frame:',
+  32, 101, 118,  46, 100,  97, 116,  97,  41,  59,  32,  32, //  ev.data);  
+  47,  47,  32, 101, 115, 108, 105, 110, 116,  45, 100, 105, // // eslint-di
+ 115,  97,  98, 108, 101,  45, 108, 105, 110, 101,  10,  32, // sable-line. 
+  32,  32,  32,  32,  32,  32,  32, 125,  10,  32,  32,  32, //        }.   
+  32,  32,  32, 125,  59,  10,  32,  32,  32,  32,  32,  32, //    };.      
+ 119, 115,  46, 111, 110,  99, 108, 111, 115, 101,  32,  61, // ws.onclose =
+  32, 102, 117, 110,  99, 116, 105, 111, 110,  40,  41,  32, //  function() 
+ 123,  10,  32,  32,  32,  32,  32,  32,  32,  32,  99, 108, // {.        cl
+ 101,  97, 114,  84, 105, 109, 101, 111, 117, 116,  40, 116, // earTimeout(t
+ 105, 100,  41,  59,  10,  32,  32,  32,  32,  32,  32,  32, // id);.       
+  32, 116, 105, 100,  32,  61,  32, 115, 101, 116,  84, 105, //  tid = setTi
+ 109, 101, 111, 117, 116,  40, 114, 101,  99, 111, 110, 110, // meout(reconn
+ 101,  99, 116,  44,  32,  49,  48,  48,  48,  41,  59,  10, // ect, 1000);.
+  32,  32,  32,  32,  32,  32,  32,  32,  99, 111, 110, 115, //         cons
+ 111, 108, 101,  46, 108, 111, 103,  40,  39, 119, 115,  32, // ole.log('ws 
+ 100, 105, 115,  99, 111, 110, 110, 101,  99, 116, 101, 100, // disconnected
+  39,  41,  59,  10,  32,  32,  32,  32,  32,  32, 125,  59, // ');.      };
+  10,  32,  32,  32,  32, 125,  59,  10,  32,  32,  32,  32, // .    };.    
+ 114, 101,  99, 111, 110, 110, 101,  99, 116,  40,  41,  59, // reconnect();
+  10,  32,  32, 125,  59,  10,  10,  32,  32,  99, 111, 110, // .  };..  con
+ 115, 116,  32, 108, 111, 103, 105, 110,  32,  61,  32, 102, // st login = f
+ 117, 110,  99, 116, 105, 111, 110,  40, 117,  41,  32, 123, // unction(u) {
+  10,  32,  32,  32,  32, 100, 111,  99, 117, 109, 101, 110, // .    documen
+ 116,  46,  99, 111, 111, 107, 105, 101,  32,  61,  32,  96, // t.cookie = `
+  97,  99,  99, 101, 115, 115,  95, 116, 111, 107, 101, 110, // access_token
+  61,  36, 123, 117,  46, 116, 111, 107, 101, 110, 125,  59, // =${u.token};
+  32,  83, 101,  99, 117, 114, 101,  44,  32,  72, 116, 116, //  Secure, Htt
+ 112,  79, 110, 108, 121,  59,  32,  83,  97, 109, 101,  83, // pOnly; SameS
+ 105, 116, 101,  61,  76,  97, 120,  59,  32, 112,  97, 116, // ite=Lax; pat
+ 104,  61,  47,  59,  32, 109,  97, 120,  45,  97, 103, 101, // h=/; max-age
+  61,  51,  54,  48,  48,  96,  59,  10,  32,  32,  32,  32, // =3600`;.    
+ 115, 101, 116,  85, 115, 101, 114,  40, 117,  46, 117, 115, // setUser(u.us
+ 101, 114,  41,  59,  10,  32,  32,  32,  32, 105, 102,  32, // er);.    if 
+  40, 108, 111,  99,  97, 116, 105, 111, 110,  46, 115, 101, // (location.se
+  97, 114,  99, 104,  46, 115, 117,  98, 115, 116, 114, 105, // arch.substri
+ 110, 103,  40,  49,  41,  32,  61,  61,  32,  39, 110, 111, // ng(1) == 'no
+ 119, 115,  39,  41,  32, 123,  10,  32,  32,  32,  32,  32, // ws') {.     
+  32,  47,  47,  32,  73, 102,  32, 113, 117, 101, 114, 121, //  // If query
+  32, 115, 116, 114, 105, 110, 103,  32, 105, 115,  32,  63, //  string is ?
+ 110, 111, 119, 115,  44,  32, 116, 104, 101, 110,  32, 100, // nows, then d
+ 111,  32, 110, 111, 116,  32,  99, 111, 110, 110, 101,  99, // o not connec
+ 116,  32, 116, 111,  32, 119, 101,  98, 115, 111,  99, 107, // t to websock
+ 101, 116,  46,  32,  70, 111, 114,  32, 100, 101,  98, 117, // et. For debu
+ 103,  46,  10,  32,  32,  32,  32, 125,  32, 101, 108, 115, // g..    } els
+ 101,  32, 123,  10,  32,  32,  32,  32,  32,  32, 119,  97, // e {.      wa
+ 116,  99, 104,  40,  41,  59,  32,  47,  47,  32,  67, 111, // tch(); // Co
+ 110, 110, 101,  99, 116,  32, 116, 111,  32, 119, 101,  98, // nnect to web
+ 115, 111,  99, 107, 101, 116,  44,  32, 114, 101,  99, 101, // socket, rece
+ 105, 118, 101,  32,  99, 111, 110, 115, 116,  97, 110, 116, // ive constant
+  32, 103, 114,  97, 112, 104,  32, 117, 112, 100,  97, 116, //  graph updat
+ 101, 115,  10,  32,  32,  32,  32, 125,  10,  32,  32,  32, // es.    }.   
+  32, 114, 101, 116, 117, 114, 110,  32, 103, 101, 116,  99, //  return getc
+ 111, 110, 102, 105, 103,  40,  41,  59,  10,  32,  32, 125, // onfig();.  }
+  59,  10,  10,  32,  32,  99, 111, 110, 115, 116,  32, 108, // ;..  const l
+ 111, 103, 111, 117, 116,  32,  61,  32, 101, 118,  32,  61, // ogout = ev =
+  62,  32, 123,  10,  32,  32,  32,  32, 100, 111,  99, 117, // > {.    docu
+ 109, 101, 110, 116,  46,  99, 111, 111, 107, 105, 101,  32, // ment.cookie 
+  61,  32,  96,  97,  99,  99, 101, 115, 115,  95, 116, 111, // = `access_to
+ 107, 101, 110,  61,  59,  32,  83, 101,  99, 117, 114, 101, // ken=; Secure
+  44,  32,  72, 116, 116, 112,  79, 110, 108, 121,  59,  32, // , HttpOnly; 
+  83,  97, 109, 101,  83, 105, 116, 101,  61,  76,  97, 120, // SameSite=Lax
+  59,  32, 112,  97, 116, 104,  61,  47,  59,  32, 109,  97, // ; path=/; ma
+ 120,  45,  97, 103, 101,  61,  48,  96,  59,  10,  32,  32, // x-age=0`;.  
+  32,  32, 115, 101, 116,  85, 115, 101, 114,  40,  39,  39, //   setUser(''
+  41,  59,  10,  32,  32, 125,  59,  10,  10,  32,  32, 117, // );.  };..  u
+ 115, 101,  69, 102, 102, 101,  99, 116,  40,  40,  41,  32, // seEffect(() 
+  61,  62,  32, 123,  10,  32,  32,  32,  32,  47,  47,  32, // => {.    // 
+  67,  97, 108, 108, 101, 100,  32, 111, 110,  99, 101,  32, // Called once 
+  97, 116,  32, 105, 110, 105, 116,  32, 116, 105, 109, 101, // at init time
+  10,  32,  32,  32,  32,  80, 117,  98,  83, 117,  98,  46, // .    PubSub.
+ 115, 117,  98, 115,  99, 114, 105,  98, 101,  40, 109, 115, // subscribe(ms
+ 103,  32,  61,  62,  32, 109, 115, 103,  46, 110,  97, 109, // g => msg.nam
+ 101,  32,  61,  61,  32,  39,  99, 111, 110, 102, 105, 103, // e == 'config
+  39,  32,  38,  38,  32, 103, 101, 116,  99, 111, 110, 102, // ' && getconf
+ 105, 103,  40,  41,  41,  59,  10,  32,  32,  32,  32, 102, // ig());.    f
+ 101, 116,  99, 104,  40,  39,  47,  97, 112, 105,  47, 108, // etch('/api/l
+ 111, 103, 105, 110,  39,  44,  32, 123, 104, 101,  97, 100, // ogin', {head
+ 101, 114, 115,  58,  32, 123,  65, 117, 116, 104, 111, 114, // ers: {Author
+ 105, 122,  97, 116, 105, 111, 110,  58,  32,  39,  39, 125, // ization: ''}
+ 125,  41,  10,  32,  32,  32,  32,  32,  32,  32,  32,  46, // }).        .
+ 116, 104, 101, 110,  40, 114,  32,  61,  62,  32, 114,  46, // then(r => r.
+ 106, 115, 111, 110,  40,  41,  41,  10,  32,  32,  32,  32, // json()).    
+  32,  32,  32,  32,  46, 116, 104, 101, 110,  40, 114,  32, //     .then(r 
+  61,  62,  32, 108, 111, 103, 105, 110,  40, 114,  41,  41, // => login(r))
+  10,  32,  32,  32,  32,  32,  32,  32,  32,  46,  99,  97, // .        .ca
+ 116,  99, 104,  40, 101, 114, 114,  32,  61,  62,  32, 115, // tch(err => s
+ 101, 116,  85, 115, 101, 114,  40,  39,  39,  41,  41,  59, // etUser(''));
+  10,  32,  32, 125,  44,  32,  91,  93,  41,  59,  10,  10, // .  }, []);..
+  32,  32, 105, 102,  32,  40,  33, 117, 115, 101, 114,  41, //   if (!user)
+  32, 114, 101, 116, 117, 114, 110,  32, 104, 116, 109, 108, //  return html
+  96,  60,  36, 123,  76, 111, 103, 105, 110, 125,  32, 108, // `<${Login} l
+ 111, 103, 105, 110,  61,  36, 123, 108, 111, 103, 105, 110, // ogin=${login
+ 125,  32,  47,  62,  96,  59,  10,  10,  32,  32, 114, 101, // } />`;..  re
+ 116, 117, 114, 110,  32, 104, 116, 109, 108,  96,  10,  60, // turn html`.<
+  36, 123,  78,  97, 118, 125,  32, 117, 115, 101, 114,  61, // ${Nav} user=
+  36, 123, 117, 115, 101, 114, 125,  32, 108, 111, 103, 111, // ${user} logo
+ 117, 116,  61,  36, 123, 108, 111, 103, 111, 117, 116, 125, // ut=${logout}
+  32,  47,  62,  10,  60, 100, 105, 118,  32,  99, 108,  97, //  />.<div cla
+ 115, 115,  61,  34,  99, 111, 110, 116,  97, 105, 110, 101, // ss="containe
+ 114,  34,  62,  10,  32,  32,  60, 100, 105, 118,  32,  99, // r">.  <div c
+ 108,  97, 115, 115,  61,  34, 114, 111, 119,  34,  62,  10, // lass="row">.
+  32,  32,  32,  32,  60, 100, 105, 118,  32,  99, 108,  97, //     <div cla
+ 115, 115,  61,  34,  99, 111, 108,  32,  99, 111, 108,  45, // ss="col col-
+  54,  34,  62,  60,  36, 123,  72, 101, 114, 111, 125,  32, // 6"><${Hero} 
+  47,  62,  60,  47, 100, 105, 118,  62,  10,  32,  32,  32, // /></div>.   
+  32,  60, 100, 105, 118,  32,  99, 108,  97, 115, 115,  61, //  <div class=
+  34,  99, 111, 108,  32,  99, 111, 108,  45,  54,  34,  62, // "col col-6">
+  60,  36, 123,  67, 104,  97, 114, 116, 125,  32,  47,  62, // <${Chart} />
+  60,  47, 100, 105, 118,  62,  10,  32,  32,  32,  32,  60, // </div>.    <
+ 100, 105, 118,  32,  99, 108,  97, 115, 115,  61,  34,  99, // div class="c
+ 111, 108,  32,  99, 111, 108,  45,  54,  34,  62,  10,  32, // ol col-6">. 
+  32,  32,  32,  32,  32,  36, 123, 117, 115, 101, 114,  32, //      ${user 
+  61,  61,  32,  39,  97, 100, 109, 105, 110,  39,  32,  38, // == 'admin' &
+  38,  32, 104,  40,  67, 111, 110, 102, 105, 103, 117, 114, // & h(Configur
+  97, 116, 105, 111, 110,  44,  32, 123,  99, 111, 110, 102, // ation, {conf
+ 105, 103, 125,  41, 125,  10,  32,  32,  32,  32,  60,  47, // ig})}.    </
+ 100, 105, 118,  62,  10,  32,  32,  32,  32,  60, 100, 105, // div>.    <di
+ 118,  32,  99, 108,  97, 115, 115,  61,  34,  99, 111, 108, // v class="col
+  32,  99, 111, 108,  45,  54,  34,  62,  60,  36, 123,  77, //  col-6"><${M
+ 101, 115, 115,  97, 103, 101, 115, 125,  32,  99, 111, 110, // essages} con
+ 102, 105, 103,  61,  36, 123,  99, 111, 110, 102, 105, 103, // fig=${config
+ 125,  32,  47,  62,  60,  47, 100, 105, 118,  62,  10,  32, // } /></div>. 
+  32,  60,  47, 100, 105, 118,  62,  10,  60,  47, 100, 105, //  </div>.</di
+ 118,  62,  96,  59,  10, 125,  59,  10,  10, 119, 105, 110, // v>`;.};..win
+ 100, 111, 119,  46, 111, 110, 108, 111,  97, 100,  32,  61, // dow.onload =
+  32,  40,  41,  32,  61,  62,  32, 114, 101, 110, 100, 101, //  () => rende
+ 114,  40, 104,  40,  65, 112, 112,  41,  44,  32, 100, 111, // r(h(App), do
+  99, 117, 109, 101, 110, 116,  46,  98, 111, 100, 121,  41, // cument.body)
+  59,  10, 0 // ;.
 };
-static const unsigned char v5[] = {
+static const unsigned char v4[] = {
  137,  80,  78,  71,  13,  10,  26,  10,   0,   0,   0,  13, // .PNG........
   73,  72,  68,  82,   0,   0,   0, 128,   0,   0,   0, 128, // IHDR........
    8,   6,   0,   0,   0, 195,  62,  97, 203,   0,   0,   0, // ......>a....
@@ -2811,6 +3805,195 @@ static const unsigned char v5[] = {
  126, 121,  49, 188,   0,   0,   0,   0,  73,  69,  78,  68, // ~y1.....IEND
  174,  66,  96, 130, 0 // .B`.
 };
+static const unsigned char v5[] = {
+  42,  32, 123,  32,  98, 111, 120,  45, 115, 105, 122, 105, // * { box-sizi
+ 110, 103,  58,  32,  98, 111, 114, 100, 101, 114,  45,  98, // ng: border-b
+ 111, 120,  59,  32, 125,  10, 104, 116, 109, 108,  44,  32, // ox; }.html, 
+  98, 111, 100, 121,  32, 123,  32, 109,  97, 114, 103, 105, // body { margi
+ 110,  58,  32,  48,  59,  32, 112,  97, 100, 100, 105, 110, // n: 0; paddin
+ 103,  58,  32,  48,  59,  32, 104, 101, 105, 103, 104, 116, // g: 0; height
+  58,  32,  49,  48,  48,  37,  59,  32, 102, 111, 110, 116, // : 100%; font
+  58,  32,  49,  54, 112, 120,  32, 115,  97, 110, 115,  45, // : 16px sans-
+ 115, 101, 114, 105, 102,  59,  32, 125,  10, 115, 101, 108, // serif; }.sel
+ 101,  99, 116,  44,  32, 105, 110, 112, 117, 116,  44,  32, // ect, input, 
+ 108,  97,  98, 101, 108,  58,  58,  98, 101, 102, 111, 114, // label::befor
+ 101,  44,  32, 116, 101, 120, 116,  97, 114, 101,  97,  32, // e, textarea 
+ 123,  32, 111, 117, 116, 108, 105, 110, 101,  58,  32, 110, // { outline: n
+ 111, 110, 101,  59,  32,  98, 111, 120,  45, 115, 104,  97, // one; box-sha
+ 100, 111, 119,  58, 110, 111, 110, 101,  32,  33, 105, 109, // dow:none !im
+ 112, 111, 114, 116,  97, 110, 116,  59,  32,  98, 111, 114, // portant; bor
+ 100, 101, 114,  58,  32,  49, 112, 120,  32, 115, 111, 108, // der: 1px sol
+ 105, 100,  32,  35,  99,  99,  99,  32,  33, 105, 109, 112, // id #ccc !imp
+ 111, 114, 116,  97, 110, 116,  59,  32, 125,  10,  99, 111, // ortant; }.co
+ 100, 101,  44,  32, 112, 114, 101,  32, 123,  32,  99, 111, // de, pre { co
+ 108, 111, 114,  58,  32,  35,  51,  55,  51,  59,  32, 102, // lor: #373; f
+ 111, 110, 116,  45, 102,  97, 109, 105, 108, 121,  58,  32, // ont-family: 
+ 109, 111, 110, 111, 115, 112,  97,  99, 101,  59,  32, 102, // monospace; f
+ 111, 110, 116,  45, 119, 101, 105, 103, 104, 116,  58,  32, // ont-weight: 
+  98, 111, 108, 100, 101, 114,  59,  32, 102, 111, 110, 116, // bolder; font
+  45, 115, 105, 122, 101,  58,  32, 115, 109,  97, 108, 108, // -size: small
+ 101, 114,  59,  32,  98,  97,  99, 107, 103, 114, 111, 117, // er; backgrou
+ 110, 100,  58,  32,  35, 100, 100, 100,  59,  32, 112,  97, // nd: #ddd; pa
+ 100, 100, 105, 110, 103,  58,  32,  48,  46,  49, 101, 109, // dding: 0.1em
+  32,  48,  46,  51, 101, 109,  59,  32,  98, 111, 114, 100, //  0.3em; bord
+ 101, 114,  45, 114,  97, 100, 105, 117, 115,  58,  32,  48, // er-radius: 0
+  46,  50, 101, 109,  59,  32, 125,  10, 116, 101, 120, 116, // .2em; }.text
+  97, 114, 101,  97,  44,  32, 105, 110, 112, 117, 116,  44, // area, input,
+  32,  46,  97, 100, 100, 111, 110,  32, 123,  32, 102, 111, //  .addon { fo
+ 110, 116,  45, 115, 105, 122, 101,  58,  32,  49,  53, 112, // nt-size: 15p
+ 120,  59,  32,  98, 111, 114, 100, 101, 114,  58,  32,  49, // x; border: 1
+ 112, 120,  32, 115, 111, 108, 105, 100,  32,  35,  99,  99, // px solid #cc
+  99,  59,  32, 112,  97, 100, 100, 105, 110, 103,  58,  32, // c; padding: 
+  48,  46,  53, 101, 109,  59,  32, 125,  10,  97,  44,  32, // 0.5em; }.a, 
+  97,  58, 118, 105, 115, 105, 116, 101, 100,  44,  32,  97, // a:visited, a
+  58,  97,  99, 116, 105, 118, 101,  32, 123,  32,  99, 111, // :active { co
+ 108, 111, 114,  58,  32,  35,  53,  53, 102,  59,  32, 125, // lor: #55f; }
+  10,  46,  97, 100, 100, 111, 110,  32, 123,  32,  98,  97, // ..addon { ba
+  99, 107, 103, 114, 111, 117, 110, 100,  58,  32,  35, 101, // ckground: #e
+ 101, 101,  59,  32,  32, 109, 105, 110,  45, 119, 105, 100, // ee;  min-wid
+ 116, 104,  58,  32,  57, 101, 109,  59, 125,  10,  46,  98, // th: 9em;}..b
+ 116, 110,  32, 123,  10,  32,  32,  98,  97,  99, 107, 103, // tn {.  backg
+ 114, 111, 117, 110, 100,  58,  32,  35,  99,  99,  99,  59, // round: #ccc;
+  32,  98, 111, 114, 100, 101, 114,  45, 114,  97, 100, 105, //  border-radi
+ 117, 115,  58,  32,  48,  46,  51, 101, 109,  59,  32,  98, // us: 0.3em; b
+ 111, 114, 100, 101, 114,  58,  32,  48,  59,  32,  99, 111, // order: 0; co
+ 108, 111, 114,  58,  32,  35, 102, 102, 102,  59,  32,  99, // lor: #fff; c
+ 117, 114, 115, 111, 114,  58,  32, 112, 111, 105, 110, 116, // ursor: point
+ 101, 114,  59,  10,  32,  32, 100, 105, 115, 112, 108,  97, // er;.  displa
+ 121,  58,  32, 105, 110, 108, 105, 110, 101,  45,  98, 108, // y: inline-bl
+ 111,  99, 107,  59,  32, 112,  97, 100, 100, 105, 110, 103, // ock; padding
+  58,  32,  48,  46,  54, 101, 109,  32,  50, 101, 109,  59, // : 0.6em 2em;
+  32, 102, 111, 110, 116,  45, 119, 101, 105, 103, 104, 116, //  font-weight
+  58,  32,  98, 111, 108, 100, 101, 114,  59,  10, 125,  10, // : bolder;.}.
+  46,  98, 116, 110,  91, 100, 105, 115,  97,  98, 108, 101, // .btn[disable
+ 100,  93,  32, 123,  32, 111, 112,  97,  99, 105, 116, 121, // d] { opacity
+  58,  32,  48,  46,  53,  59,  32,  99, 117, 114, 115, 111, // : 0.5; curso
+ 114,  58,  32,  97, 117, 116, 111,  59, 125,  10,  46, 115, // r: auto;}..s
+ 109, 111, 111, 116, 104,  32, 123,  32, 116, 114,  97, 110, // mooth { tran
+ 115, 105, 116, 105, 111, 110,  58,  32,  97, 108, 108,  32, // sition: all 
+  46,  50, 115,  59,  32, 125,  10,  46,  99, 111, 110, 116, // .2s; }..cont
+  97, 105, 110, 101, 114,  32, 123,  32, 109,  97, 114, 103, // ainer { marg
+ 105, 110,  58,  32,  48,  32,  50,  48, 112, 120,  59,  32, // in: 0 20px; 
+ 119, 105, 100, 116, 104,  58,  32,  97, 117, 116, 111,  59, // width: auto;
+  32, 125,  10,  46, 100,  45, 102, 108, 101, 120,  32, 123, //  }..d-flex {
+  32, 100, 105, 115, 112, 108,  97, 121,  58,  32, 102, 108, //  display: fl
+ 101, 120,  59,  32, 125,  10,  46, 100,  45, 110, 111, 110, // ex; }..d-non
+ 101,  32, 123,  32, 100, 105, 115, 112, 108,  97, 121,  58, // e { display:
+  32, 110, 111, 110, 101,  59,  32, 125,  10,  46,  98, 111, //  none; }..bo
+ 114, 100, 101, 114,  32, 123,  32,  98, 111, 114, 100, 101, // rder { borde
+ 114,  58,  32,  49, 112, 120,  32, 115, 111, 108, 105, 100, // r: 1px solid
+  32,  35, 100, 100, 100,  59,  32, 125,  10,  46, 114, 111, //  #ddd; }..ro
+ 117, 110, 100, 101, 100,  32, 123,  32,  98, 111, 114, 100, // unded { bord
+ 101, 114,  45, 114,  97, 100, 105, 117, 115,  58,  32,  48, // er-radius: 0
+  46,  53, 101, 109,  59,  32, 125,  10,  46, 110, 111, 119, // .5em; }..now
+ 114,  97, 112,  32, 123,  32, 119, 104, 105, 116, 101,  45, // rap { white-
+ 115, 112,  97,  99, 101,  58,  32, 110, 111, 119, 114,  97, // space: nowra
+ 112,  59,  32, 125,  10,  46, 109, 115, 103,  32, 123,  32, // p; }..msg { 
+  98,  97,  99, 107, 103, 114, 111, 117, 110, 100,  58,  32, // background: 
+  35, 100, 101, 102,  59,  32,  98, 111, 114, 100, 101, 114, // #def; border
+  45, 108, 101, 102, 116,  58,  32,  53, 112, 120,  32, 115, // -left: 5px s
+ 111, 108, 105, 100,  32,  35,  53,  57, 100,  59,  32, 112, // olid #59d; p
+  97, 100, 100, 105, 110, 103,  58,  32,  48,  46,  53, 101, // adding: 0.5e
+ 109,  59,  32, 102, 111, 110, 116,  45, 115, 105, 122, 101, // m; font-size
+  58,  32,  57,  48,  37,  59,  32, 109,  97, 114, 103, 105, // : 90%; margi
+ 110,  58,  32,  49, 101, 109,  32,  48,  59,  32, 125,  10, // n: 1em 0; }.
+  46, 115, 101,  99, 116, 105, 111, 110,  32, 123,  32, 109, // .section { m
+  97, 114, 103, 105, 110,  58,  32,  48,  32,  49, 101, 109, // argin: 0 1em
+  59,  32, 125,  10,  46, 116, 111, 112, 105,  99,  44,  32, // ; }..topic, 
+  46, 100,  97, 116,  97,  44,  32,  46, 113, 111, 115,  32, // .data, .qos 
+ 123,  32,  32, 112,  97, 100, 100, 105, 110, 103,  58,  32, // {  padding: 
+  48,  46,  50, 101, 109,  32,  48,  46,  53, 101, 109,  59, // 0.2em 0.5em;
+  32,  98, 111, 114, 100, 101, 114,  45, 114,  97, 100, 105, //  border-radi
+ 117, 115,  58,  32,  48,  46,  52, 101, 109,  59,  32, 109, // us: 0.4em; m
+  97, 114, 103, 105, 110,  45, 114, 105, 103, 104, 116,  58, // argin-right:
+  32,  48,  46,  53, 101, 109,  59,  32,  32, 125,  10,  46, //  0.5em;  }..
+ 113, 111, 115,  32, 123,  32,  98,  97,  99, 107, 103, 114, // qos { backgr
+ 111, 117, 110, 100,  58,  32,  35, 101, 102,  97,  59,  32, // ound: #efa; 
+ 125,  10,  46, 116, 111, 112, 105,  99,  32, 123,  32,  98, // }..topic { b
+  97,  99, 107, 103, 114, 111, 117, 110, 100,  58,  32,  35, // ackground: #
+ 102, 101,  97,  59,  32, 125,  10,  46, 100,  97, 116,  97, // fea; }..data
+  32, 123,  32,  98,  97,  99, 107, 103, 114, 111, 117, 110, //  { backgroun
+ 100,  58,  32,  35,  97, 101, 102,  59,  32, 125,  10,  10, // d: #aef; }..
+  47,  42,  32,  71, 114, 105, 100,  32,  42,  47,  10,  46, // /* Grid */..
+ 114, 111, 119,  32, 123,  32, 100, 105, 115, 112, 108,  97, // row { displa
+ 121,  58,  32, 102, 108, 101, 120,  59,  32, 102, 108, 101, // y: flex; fle
+ 120,  45, 119, 114,  97, 112,  58,  32, 119, 114,  97, 112, // x-wrap: wrap
+  59,  32, 125,  10,  46,  99, 111, 108,  32, 123,  32, 109, // ; }..col { m
+  97, 114, 103, 105, 110,  58,  32,  48,  59,  32, 112,  97, // argin: 0; pa
+ 100, 100, 105, 110, 103,  58,  32,  48,  59,  32, 111, 118, // dding: 0; ov
+ 101, 114, 102, 108, 111, 119,  58,  32,  97, 117, 116, 111, // erflow: auto
+  59,  32, 125,  10,  46,  99, 111, 108,  45,  49,  50,  32, // ; }..col-12 
+ 123,  32, 119, 105, 100, 116, 104,  58,  32,  49,  48,  48, // { width: 100
+  37,  59,  32, 125,  10,  46,  99, 111, 108,  45,  49,  49, // %; }..col-11
+  32, 123,  32, 119, 105, 100, 116, 104,  58,  32,  57,  49, //  { width: 91
+  46,  54,  54,  37,  59,  32, 125,  10,  46,  99, 111, 108, // .66%; }..col
+  45,  49,  48,  32, 123,  32, 119, 105, 100, 116, 104,  58, // -10 { width:
+  32,  56,  51,  46,  51,  51,  37,  59,  32, 125,  10,  46, //  83.33%; }..
+  99, 111, 108,  45,  57,  32, 123,  32, 119, 105, 100, 116, // col-9 { widt
+ 104,  58,  32,  55,  53,  37,  59,  32, 125,  10,  46,  99, // h: 75%; }..c
+ 111, 108,  45,  56,  32, 123,  32, 119, 105, 100, 116, 104, // ol-8 { width
+  58,  32,  54,  54,  46,  54,  54,  37,  59,  32, 125,  10, // : 66.66%; }.
+  46,  99, 111, 108,  45,  55,  32, 123,  32, 119, 105, 100, // .col-7 { wid
+ 116, 104,  58,  32,  53,  56,  46,  51,  51,  37,  59,  32, // th: 58.33%; 
+ 125,  10,  46,  99, 111, 108,  45,  54,  32, 123,  32, 119, // }..col-6 { w
+ 105, 100, 116, 104,  58,  32,  53,  48,  37,  59,  32, 125, // idth: 50%; }
+  10,  46,  99, 111, 108,  45,  53,  32, 123,  32, 119, 105, // ..col-5 { wi
+ 100, 116, 104,  58,  32,  52,  49,  46,  54,  54,  37,  59, // dth: 41.66%;
+  32, 125,  10,  46,  99, 111, 108,  45,  52,  32, 123,  32, //  }..col-4 { 
+ 119, 105, 100, 116, 104,  58,  32,  51,  51,  46,  51,  51, // width: 33.33
+  37,  59,  32, 125,  10,  46,  99, 111, 108,  45,  51,  32, // %; }..col-3 
+ 123,  32, 119, 105, 100, 116, 104,  58,  32,  50,  53,  37, // { width: 25%
+  59,  32, 125,  10,  46,  99, 111, 108,  45,  50,  32, 123, // ; }..col-2 {
+  32, 119, 105, 100, 116, 104,  58,  32,  49,  54,  46,  54, //  width: 16.6
+  54,  37,  59,  32, 125,  10,  46,  99, 111, 108,  45,  49, // 6%; }..col-1
+  32, 123,  32, 119, 105, 100, 116, 104,  58,  32,  56,  46, //  { width: 8.
+  51,  51,  37,  59,  32, 125,  10,  64, 109, 101, 100, 105, // 33%; }.@medi
+  97,  32,  40, 109, 105, 110,  45, 119, 105, 100, 116, 104, // a (min-width
+  58,  32,  49,  51,  49,  48, 112, 120,  41,  32, 123,  32, // : 1310px) { 
+  46,  99, 111, 110, 116,  97, 105, 110, 101, 114,  32, 123, // .container {
+  32, 109,  97, 114, 103, 105, 110,  58,  32,  97, 117, 116, //  margin: aut
+ 111,  59,  32, 119, 105, 100, 116, 104,  58,  32,  49,  50, // o; width: 12
+  55,  48, 112, 120,  59,  32, 125,  32, 125,  10,  64, 109, // 70px; } }.@m
+ 101, 100, 105,  97,  32,  40, 109,  97, 120,  45, 119, 105, // edia (max-wi
+ 100, 116, 104,  58,  32,  57,  50,  48, 112, 120,  41,  32, // dth: 920px) 
+ 123,  32,  46, 114, 111, 119,  32,  46,  99, 111, 108,  32, // { .row .col 
+ 123,  32, 119, 105, 100, 116, 104,  58,  32,  49,  48,  48, // { width: 100
+  37,  59,  32, 125,  32, 125,  10, 0 // %; } }.
+};
+static const unsigned char v6[] = {
+  60,  33,  68,  79,  67,  84,  89,  80,  69,  32, 104, 116, // <!DOCTYPE ht
+ 109, 108,  62,  10,  60, 104, 116, 109, 108,  32, 108,  97, // ml>.<html la
+ 110, 103,  61,  34, 101, 110,  34,  62,  10,  32,  32,  60, // ng="en">.  <
+ 104, 101,  97, 100,  62,  10,  32,  32,  32,  32,  60, 116, // head>.    <t
+ 105, 116, 108, 101,  62,  68, 101, 118, 105,  99, 101,  32, // itle>Device 
+  68,  97, 115, 104,  98, 111,  97, 114, 100,  60,  47, 116, // Dashboard</t
+ 105, 116, 108, 101,  62,  10,  32,  32,  32,  32,  60, 109, // itle>.    <m
+ 101, 116,  97,  32,  99, 104,  97, 114, 115, 101, 116,  61, // eta charset=
+  34, 117, 116, 102,  45,  56,  34,  32,  47,  62,  10,  32, // "utf-8" />. 
+  32,  32,  32,  60, 109, 101, 116,  97,  32, 104, 116, 116, //    <meta htt
+ 112,  45, 101, 113, 117, 105, 118,  61,  34,  88,  45,  85, // p-equiv="X-U
+  65,  45,  67, 111, 109, 112,  97, 116, 105,  98, 108, 101, // A-Compatible
+  34,  32,  99, 111, 110, 116, 101, 110, 116,  61,  34,  73, // " content="I
+  69,  61, 101, 100, 103, 101,  34,  32,  47,  62,  10,  32, // E=edge" />. 
+  32,  32,  32,  60, 109, 101, 116,  97,  32, 110,  97, 109, //    <meta nam
+ 101,  61,  34, 118, 105, 101, 119, 112, 111, 114, 116,  34, // e="viewport"
+  32,  99, 111, 110, 116, 101, 110, 116,  61,  34, 119, 105, //  content="wi
+ 100, 116, 104,  61, 100, 101, 118, 105,  99, 101,  45, 119, // dth=device-w
+ 105, 100, 116, 104,  44,  32, 105, 110, 105, 116, 105,  97, // idth, initia
+ 108,  45, 115,  99,  97, 108, 101,  61,  49,  46,  48,  34, // l-scale=1.0"
+  32,  47,  62,  10,  32,  32,  32,  32,  60, 108, 105, 110, //  />.    <lin
+ 107,  32, 114, 101, 108,  61,  34, 115, 116, 121, 108, 101, // k rel="style
+ 115, 104, 101, 101, 116,  34,  32, 104, 114, 101, 102,  61, // sheet" href=
+  34, 115, 116, 121, 108, 101,  46,  99, 115, 115,  34,  32, // "style.css" 
+  47,  62,  10,  32,  32,  60,  47, 104, 101,  97, 100,  62, // />.  </head>
+  10,  32,  32,  60,  98, 111, 100, 121,  62,  60,  47,  98, // .  <body></b
+ 111, 100, 121,  62,  10,  32,  32,  60, 115,  99, 114, 105, // ody>.  <scri
+ 112, 116,  32, 116, 121, 112, 101,  61,  34, 109, 111, 100, // pt type="mod
+ 117, 108, 101,  34,  32, 115, 114,  99,  61,  34, 109,  97, // ule" src="ma
+ 105, 110,  46, 106, 115,  34,  62,  60,  47, 115,  99, 114, // in.js"></scr
+ 105, 112, 116,  62,  10,  60,  47, 104, 116, 109, 108,  62, // ipt>.</html>
+  10, 0 // .
+};
 
 static const struct packed_file {
   const char *name;
@@ -2818,11 +4001,12 @@ static const struct packed_file {
   size_t size;
   time_t mtime;
 } packed_files[] = {
-  {"/web_root/index.html", v1, sizeof(v1), 1659483223},
-  {"/web_root/main.js", v2, sizeof(v2), 1662621376},
-  {"/web_root/preact.min.js", v3, sizeof(v3), 1659483223},
-  {"/web_root/style.css", v4, sizeof(v4), 1659483223},
-  {"/web_root/user.png", v5, sizeof(v5), 1659483223},
+  {"/web_root/main.js.orig", v1, sizeof(v1), 1656079031},
+  {"/web_root/preact.min.js", v2, sizeof(v2), 1655487950},
+  {"/web_root/main.js", v3, sizeof(v3), 1672175471},
+  {"/web_root/user.png", v4, sizeof(v4), 1655487950},
+  {"/web_root/style.css", v5, sizeof(v5), 1655487950},
+  {"/web_root/index.html", v6, sizeof(v6), 1655487950},
   {NULL, NULL, 0, 0}
 };
 
diff --git a/examples/device-dashboard/web_root/main.js b/examples/device-dashboard/web_root/main.js
index b0968b3e..e1d31db4 100644
--- a/examples/device-dashboard/web_root/main.js
+++ b/examples/device-dashboard/web_root/main.js
@@ -1,6 +1,8 @@
 'use strict';
 import {Component, h, html, render, useEffect, useState, useRef} from './preact.min.js';
 
+var devaddr = "address:port";
+
 const MaxMetricsDataPoints = 50;
 
 // This simple publish/subscribe is used to pass notifications that were
@@ -53,14 +55,14 @@ const Hero = props => html`
   using  <code>curl</code> command-line utility:
   </p>
 
-  <div><code>curl -u admin:pass0 localhost:8000/api/config/get</code> </div>
-  <div><code>curl -u admin:pass0 localhost:8000/api/config/set -d 'pub=mg/topic'</code> </div>
-  <div><code>curl -u admin:pass0 localhost:8000/api/message/send -d 'message=hello'</code> </div>
+  <div><code>curl -u admin:pass0 ${devaddr}/api/config/get</code> </div>
+  <div><code>curl -u admin:pass0 ${devaddr}/api/config/set -d 'pub=mg/topic'</code> </div>
+  <div><code>curl -u admin:pass0 ${devaddr}/api/message/send -d 'message=hello'</code> </div>
 
   <p>
   The device can send notifications to this dashboard at anytime. Notifications
   are sent over WebSocket at URI <code>/api/watch</code> as JSON strings: <code>{"name": "..", "data": ...}</code>
-  <div>Try <code>wscat --auth user1:pass1 --connect ws://localhost:8000/api/watch</code></div>
+  <div>Try <code>wscat --auth user1:pass1 --connect ws://${devaddr}/api/watch</code></div>
   </p>
 </div>
 </div>`;
@@ -186,7 +188,8 @@ const Messages = function(props) {
                               method: 'post',
                               body: `message=${encodeURIComponent(txt)}`
                             }).then(r => setTxt(''));
-  const connstatus = props.config.connected ? 'connected' : 'disconnected';
+  const routing = "connected" in props.config;
+  const connstatus = !routing ? 'This device has no MQTT functionality' : props.config.connected ? 'connected' : 'disconnected';
   return html`
 <div class="section">
   <h3 style="background: #30c040; color: #fff; padding: 0.4em;">MQTT messages</h3>
@@ -199,7 +202,7 @@ const Messages = function(props) {
   <div style="margin: 0.5em 0; display: flex">
     <span class="addon nowrap">Publish message:</span>
     <input placeholder="type and press enter..." style="flex: 1 100%;"
-      value=${txt} onchange=${sendmessage}
+      value=${txt} onchange=${sendmessage} disabled=${!routing}
       oninput=${ev => setTxt(ev.target.value)} />
   </div>
   <div class="msg">