diff --git a/programs/server/play.html b/programs/server/play.html
index 4165a2829bd..7a60503464f 100644
--- a/programs/server/play.html
+++ b/programs/server/play.html
@@ -1,4 +1,5 @@
-<html> <!-- TODO If I write DOCTYPE HTML something changes but I don't know what. -->
+<!DOCTYPE html>
+<html>
 <head>
     <meta charset="UTF-8">
     <link rel="icon" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDkgOCI+PHN0eWxlPi5ve2ZpbGw6I2ZjMH0ucntmaWxsOnJlZH08L3N0eWxlPjxwYXRoIGQ9Ik0wLDcgaDEgdjEgaC0xIHoiIGNsYXNzPSJyIi8+PHBhdGggZD0iTTAsMCBoMSB2NyBoLTEgeiIgY2xhc3M9Im8iLz48cGF0aCBkPSJNMiwwIGgxIHY4IGgtMSB6IiBjbGFzcz0ibyIvPjxwYXRoIGQ9Ik00LDAgaDEgdjggaC0xIHoiIGNsYXNzPSJvIi8+PHBhdGggZD0iTTYsMCBoMSB2OCBoLTEgeiIgY2xhc3M9Im8iLz48cGF0aCBkPSJNOCwzLjI1IGgxIHYxLjUgaC0xIHoiIGNsYXNzPSJvIi8+PC9zdmc+">
@@ -9,7 +10,7 @@
     Do not use any JavaScript or CSS frameworks or preprocessors.
     This HTML page should not require any build systems (node.js, npm, gulp, etc.)
     This HTML page should not be minified, instead it should be reasonably minimalistic by itself.
-    This HTML page should not load any external resources
+    This HTML page should not load any external resources on load.
     (CSS and JavaScript must be embedded directly to the page. No external fonts or images should be loaded).
     This UI should look as lightweight, clean and fast as possible.
     All UI elements must be aligned in pixel-perfect way.
@@ -29,10 +30,11 @@
 
     -->
 
-    <style type="text/css">
+    <style>
         :root {
             --background-color: #DDF8FF; /* Or #FFFBEF; actually many pastel colors look great for light theme. */
             --element-background-color: #FFF;
+            --bar-color: #F8F4F0; /* Light bar in background of table cells. */
             --border-color: #EEE;
             --shadow-color: rgba(0, 0, 0, 0.1);
             --button-color: #FFAA00; /* Orange on light-cyan is especially good. */
@@ -45,11 +47,14 @@
             --table-hover-color: #FFF8EF;
             --null-color: #A88;
             --link-color: #06D;
+            --logo-color: #CEE;
+            --logo-color-active: #BDD;
         }
 
         [data-theme="dark"] {
             --background-color: #000;
             --element-background-color: #102030;
+            --bar-color: #182838;
             --border-color: #111;
             --shadow-color: rgba(255, 255, 255, 0.1);
             --text-color: #CCC;
@@ -63,16 +68,48 @@
             --table-hover-color: #003333;
             --null-color: #A88;
             --link-color: #4BDAF7;
+            --logo-color: #222;
+            --logo-color-active: #333;
+        }
+
+        *
+        {
+            box-sizing: border-box;
+            /* For iPad */
+            margin: 0;
+            border-radius: 0;
+            tab-size: 4;
         }
 
         html, body
         {
-            /* Personal choice. */
-            font-family: Sans-Serif;
+            height: 100%;
+            margin: 0;
+            /* This enables position: sticky on controls */
+            overflow: auto;
+        }
+
+        html
+        {
+            /* The fonts that have full support for hinting. */
+            font-family: Liberation Sans, DejaVu Sans, sans-serif, Noto Color Emoji, Apple Color Emoji, Segoe UI Emoji;
             background: var(--background-color);
             color: var(--text-color);
         }
 
+        body
+        {
+            /* This element will show scroll-bar on overflow, and the scroll-bar will be outside of the padding. */
+            padding: 0.5rem;
+        }
+
+        #controls
+        {
+            /* When a page will be scrolled horizontally due to large table size, keep controls in place. */
+            position: sticky;
+            left: 0;
+        }
+
         /* Otherwise Webkit based browsers will display ugly border on focus. */
         textarea, input, button
         {
@@ -81,24 +118,17 @@
             color: var(--text-color);
         }
 
-        /* Otherwise scrollbar may appear dynamically and it will alter viewport height,
-           then relative heights of elements will change suddenly, and it will break overall impression. */
-        /* html
-        {
-            overflow-x: scroll;
-        }*/
-
-        div
+        .monospace
         {
-            width: 100%;
+            /* Prefer fonts that have full hinting info. This is important for non-retina displays.
+               Also I personally dislike "Ubuntu" font due to the similarity of 'r' and 'г' (it looks very ignorant). */
+            font-family: Liberation Mono, DejaVu Sans Mono, MonoLisa, Consolas, monospace;
         }
 
-        .monospace
+        .monospace-table
         {
-            /* Prefer fonts that have full hinting info. This is important for non-retina displays.
-               Also I personally dislike "Ubuntu" font due to the similarity of 'r' and 'г' (it looks very ignorant).
-            */
-            font-family: Liberation Mono, DejaVu Sans Mono, MonoLisa, Consolas, Monospace;
+            /* Liberation is worse than DejaVu for block drawing characters. */
+            font-family: DejaVu Sans Mono, Liberation Mono, MonoLisa, Consolas, monospace;
         }
 
         .shadow
@@ -117,15 +147,15 @@
 
         #query
         {
-            /* Make enough space for even huge queries. */
-            height: 20%;
-            width: 100%;
+            /* Make enough space for even big queries. */
+            height: 20vh;
+            /* Keeps query text-area's width full screen even when user adjusting the width of the query box. */
+            min-width: 100%;
         }
 
         #inputs
         {
             white-space: nowrap;
-            width: 100%;
         }
 
         #url
@@ -189,10 +219,9 @@
 
         #data-table
         {
+            width: 100%;
             border-collapse: collapse;
             border-spacing: 0;
-            /* I need pixel-perfect alignment but not sure the following is correct, please help */
-            min-width: calc(100vw - 2rem);
         }
 
         /* Will be displayed when user specified custom format. */
@@ -207,17 +236,18 @@
         td
         {
             background-color: var(--element-background-color);
-            white-space: nowrap;
             /* For wide tables any individual column will be no more than 50% of page width. */
             max-width: 50vw;
             /* The content is cut unless you hover. */
             overflow: hidden;
+            text-overflow: ellipsis;
             padding: 0.25rem 0.5rem;
             border: 1px solid var(--border-color);
             white-space: pre;
+            vertical-align: top;
         }
 
-        td.right
+        .right
         {
             text-align: right;
         }
@@ -225,7 +255,7 @@
         th
         {
             padding: 0.25rem 0.5rem;
-            text-align: middle;
+            text-align: center;
             background-color: var(--table-header-color);
             border: 1px solid var(--border-color);
         }
@@ -250,10 +280,48 @@
         }
 
         /* When mouse pointer is over table cell, will display full text (with wrap) instead of cut.
-           TODO Find a way to make it work on touch devices. */
-        td.left:hover
+         * We also keep it for some time on mouseout for "hysteresis" effect.
+         */
+        td.left:hover, .td-hover-hysteresis
+        {
+            white-space: pre-wrap;
+            max-width: none;
+        }
+
+        .td-selected
         {
             white-space: pre-wrap;
+            max-width: none;
+            background-color: var(--table-hover-color);
+            border: 2px solid var(--border-color);
+        }
+
+        td.transposed
+        {
+            max-width: none;
+            overflow: auto;
+            white-space: pre-wrap;
+        }
+
+        td.empty-result
+        {
+            text-align: center;
+            vertical-align: middle;
+        }
+
+        .row-number
+        {
+            width: 1%;
+            text-align: right;
+            background-color: var(--table-header-color);
+            color: var(--misc-text-color);
+        }
+
+        div.empty-result
+        {
+            opacity: 10%;
+            font-size: 7vw;
+            font-family: Liberation Sans, DejaVu Sans, sans-serif;
         }
 
         /* The style for SQL NULL */
@@ -262,12 +330,25 @@
             color: var(--null-color);
         }
 
+        @keyframes hourglass-animation {
+            0% {
+                transform: rotate(-180deg);
+            }
+            50% {
+                transform: rotate(-180deg);
+            }
+            100% {
+                transform: none;
+            }
+        }
+
         #hourglass
         {
             display: none;
-            padding-left: 1rem;
+            margin-left: 1rem;
             font-size: 110%;
             color: #888;
+            animation: hourglass-animation 1s linear infinite;
         }
 
         #check-mark
@@ -284,6 +365,11 @@
             text-decoration: none;
         }
 
+        #graph
+        {
+            display: none;
+        }
+
         /* This is for graph in svg */
         text
         {
@@ -306,28 +392,95 @@
         {
             fill: var(--text-color);
         }
+
+        #logo
+        {
+            fill: var(--logo-color);
+        }
+
+        #cloud-logo
+        {
+            color: var(--background-color);
+            text-shadow: 0rem 0rem 2rem var(--logo-color);
+            font-size: 10vw;
+            display: block;
+        }
+
+        #logo:hover
+        {
+            fill: var(--logo-color-active);
+            color: var(--logo-color-active);
+        }
+
+        #cloud-logo:hover
+        {
+            filter: brightness(150%);
+        }
+
+        #logo-container
+        {
+            text-align: center;
+            margin-top: 5em;
+            line-height: 0.75;
+        }
+
+        #chart
+        {
+            background-color: var(--element-background-color);
+            filter: drop-shadow(.2rem .2rem .2rem var(--shadow-color));
+            display: none;
+            height: 70vh;
+        }
+
+        /* This is for charts (uPlot), Copyright (c) 2022 Leon Sorokin, MIT License, https://github.com/leeoniya/uPlot/ */
+        .u-wrap {position: relative;user-select: none;}
+        .u-over, .u-under, .u-axis {position: absolute;}
+        .u-under {overflow: hidden;}
+        .uplot canvas {display: block;position: relative;width: 100%;height: 100%;}
+        .u-legend {margin: auto;text-align: center; margin-top: 1em; font-family: Liberation Mono, DejaVu Sans Mono, MonoLisa, Consolas, monospace;}
+        .u-inline {display: block;}
+        .u-inline * {display: inline-block;}
+        .u-inline tr {margin-right: 16px;}
+        .u-legend th {font-weight: 600;}
+        .u-legend th > * {vertical-align: middle;display: inline-block;}
+        .u-legend td { min-width: 13em; }
+        .u-legend .u-marker {width: 1em;height: 1em;margin-right: 4px;background-clip: padding-box !important;}
+        .u-inline.u-live th::after {content: ":";vertical-align: middle;}
+        .u-inline:not(.u-live) .u-value {display: none;}
+        .u-series > * {padding: 4px;}
+        .u-series th {cursor: pointer;}
+        .u-legend .u-off > * {opacity: 0.3;}
+        .u-select {background: rgba(0,0,0,0.07);position: absolute;pointer-events: none;}
+        .u-cursor-x, .u-cursor-y {position: absolute;left: 0;top: 0;pointer-events: none;will-change: transform;z-index: 100;}
+        .u-hz .u-cursor-x, .u-vt .u-cursor-y {height: 100%;border-right: 1px dashed #607D8B;}
+        .u-hz .u-cursor-y, .u-vt .u-cursor-x {width: 100%;border-bottom: 1px dashed #607D8B;}
+        .u-cursor-pt {position: absolute;top: 0;left: 0;border-radius: 50%;border: 0 solid;pointer-events: none;will-change: transform;z-index: 100;/*this has to be !important since we set inline "background" shorthand */background-clip: padding-box !important;}
+        .u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off {display: none;}
     </style>
 </head>
 
 <body>
-    <div id="inputs">
-        <input class="monospace shadow" id="url" type="text" value="http://localhost:8123/" /><input class="monospace shadow" id="user" type="text" value="default" /><input class="monospace shadow" id="password" type="password" />
-    </div>
-    <div>
-        <textarea autofocus spellcheck="false" class="monospace shadow" id="query"></textarea>
-    </div>
-    <div id="run_div">
-        <button class="shadow" id="run">Run</button>
-        <span class="hint">&nbsp;(Ctrl/Cmd+Enter)</span>
-        <span id="hourglass">⧗</span>
-        <span id="check-mark">✔</span>
-        <span id="stats"></span>
-        <span id="toggle-dark">🌑</span><span id="toggle-light">🌞</span>
+    <div id="controls">
+        <div id="inputs">
+            <input class="monospace shadow" id="url" type="text" value="http://localhost:8123/" placeholder="url" /><input class="monospace shadow" id="user" type="text" value="default" placeholder="user" /><input class="monospace shadow" id="password" type="password" placeholder="password" />
+        </div>
+        <div id="query_div">
+            <textarea autofocus spellcheck="false" data-gramm="false" class="monospace shadow" id="query"></textarea>
+        </div>
+        <div id="run_div">
+            <button class="shadow" id="run">Run</button>
+            <span class="hint">&nbsp;(Ctrl/Cmd+Enter)</span>
+            <span id="hourglass">⧗</span>
+            <span id="check-mark">✔</span>
+            <span id="stats"></span>
+            <span id="toggle-dark">🌑</span><span id="toggle-light">🌞</span>
+        </div>
     </div>
     <div id="data_div">
-        <table class="monospace shadow" id="data-table"></table>
-        <pre class="monospace shadow" id="data-unparsed"></pre>
+        <table class="monospace-table shadow" id="data-table"></table>
+        <pre class="monospace-table shadow" id="data-unparsed"></pre>
     </div>
+    <div id="chart"></div>
     <svg id="graph" fill="none"></svg>
     <p id="error" class="monospace shadow">
     </p>
@@ -336,65 +489,112 @@
 <script type="text/javascript">
 
     /// Incremental request number. When response is received,
-    /// if it's request number does not equal to the current request number, response will be ignored.
+    /// if its request number does not equal to the current request number, response will be ignored.
     /// This is to avoid race conditions.
     let request_num = 0;
 
     /// Save query in history only if it is different.
     let previous_query = '';
 
-    /// Substitute the address of the server where the page is served.
-    if (location.protocol != 'file:') {
+    /// Start of the last query
+    let last_query_start = 0;
+
+    const current_url = new URL(window.location);
+    const opened_locally = location.protocol == 'file:';
+
+    /// Run query instantly after page is loaded if the run parameter is present.
+    const run_immediately = current_url.searchParams.has("run");
+
+    const server_address = current_url.searchParams.get('url');
+    if (server_address) {
+        document.getElementById('url').value = server_address;
+    } else if (!opened_locally) {
+        /// Substitute the address of the server where the page is served.
         document.getElementById('url').value = location.origin;
     }
 
     /// Substitute user name if it's specified in the query string
-    let user_from_url = (new URL(window.location)).searchParams.get('user');
+    const user_from_url = current_url.searchParams.get('user');
     if (user_from_url) {
         document.getElementById('user').value = user_from_url;
     }
 
+    const pass_from_url = current_url.searchParams.get('password');
+    if (pass_from_url) {
+        document.getElementById('password').value = pass_from_url;
+	/// Browsers don't allow manipulating history for the 'file:' protocol.
+        if (!opened_locally) {
+            let replaced_pass = current_url.searchParams;
+            replaced_pass.delete('password');
+            window.history.replaceState(null, '',
+                window.location.origin + window.location.pathname + '?'
+                + replaced_pass.toString() + window.location.hash);
+        }
+    }
+
     function postImpl(posted_request_num, query)
     {
-        /// TODO: Check if URL already contains query string (append parameters).
+        const user = document.getElementById('user').value;
+        const password = document.getElementById('password').value;
 
-        let user = document.getElementById('user').value;
-        let password = document.getElementById('password').value;
+        const server_address = document.getElementById('url').value;
 
-        let url = document.getElementById('url').value +
+        var url = server_address +
+            (server_address.indexOf('?') >= 0 ? '&' : '?') +
             /// Ask server to allow cross-domain requests.
-            '?add_http_cors_header=1' +
-            '&user=' + encodeURIComponent(user) +
-            '&password=' + encodeURIComponent(password) +
+            'add_http_cors_header=1' +
             '&default_format=JSONCompact' +
             /// Safety settings to prevent results that browser cannot display.
             '&max_result_rows=1000&max_result_bytes=10000000&result_overflow_mode=break';
 
-        let xhr = new XMLHttpRequest;
+        // If play.html is opened locally, append username and password to the URL parameter to avoid CORS issue.
+        if (opened_locally) {
+            url += '&user=' + encodeURIComponent(user) +
+            '&password=' + encodeURIComponent(password)
+        }
 
-        xhr.open('POST', url, true);
+        last_query_start = performance.now();
+
+        const xhr = new XMLHttpRequest;
 
+        xhr.open('POST', url, true);
+        // If play.html is open normally, use Basic auth to prevent username and password being exposed in URL parameters
+        if (!opened_locally) {
+            xhr.setRequestHeader("Authorization", "Basic " + btoa(user+":"+password));
+        }
         xhr.onreadystatechange = function()
         {
             if (posted_request_num != request_num) {
                 return;
             } else if (this.readyState === XMLHttpRequest.DONE) {
-                renderResponse(this.status, this.response);
+                const elapsed_msec = performance.now() - last_query_start;
+                renderResponse(this.status, this.response, elapsed_msec);
 
                 /// The query is saved in browser history (in state JSON object)
                 /// as well as in URL fragment identifier.
                 if (query != previous_query) {
-                    let state = {
+                    const state = {
                         query: query,
                         status: this.status,
-                        response: this.response.length > 100000 ? null : this.response  /// Lower than the browser's limit.
+                        response: this.response.length > 100000 ? null : this.response, /// Lower than the browser's limit.
+                        elapsed_msec: elapsed_msec,
                     };
-                    let title = "ClickHouse Query: " + query;
-                    let url = window.location.pathname + '?user=' + encodeURIComponent(user) + '#' + window.btoa(query);
+                    const title = "ClickHouse Query: " + query;
+
+                    let history_url = window.location.pathname + '?user=' + encodeURIComponent(user);
+                    if (run_immediately) {
+                        history_url += "&run=1";
+                    }
+                    if (server_address != location.origin) {
+                        /// Save server's address in URL if it's not identical to the address of the play UI.
+                        history_url += '&url=' + encodeURIComponent(server_address);
+                    }
+                    history_url += '#' + window.btoa(query);
+
                     if (previous_query == '') {
-                        history.replaceState(state, title, url);
+                        history.replaceState(state, title, history_url);
                     } else {
-                        history.pushState(state, title, url);
+                        history.pushState(state, title, history_url);
                     }
                     document.title = title;
                     previous_query = query;
@@ -405,21 +605,27 @@
         }
 
         document.getElementById('check-mark').style.display = 'none';
-        document.getElementById('hourglass').style.display = 'inline';
+        document.getElementById('hourglass').style.display = 'inline-block';
 
         xhr.send(query);
     }
 
-    function renderResponse(status, response) {
+    function renderResponse(status, response, elapsed_msec) {
         document.getElementById('hourglass').style.display = 'none';
 
         if (status === 200) {
             let json;
             try { json = JSON.parse(response); } catch (e) {}
+
             if (json !== undefined && json.statistics !== undefined) {
                 renderResult(json);
+            } else if (Array.isArray(json) && json.length == 2 &&
+                Array.isArray(json[0]) && Array.isArray(json[1]) && json[0].length > 1 && json[0].length == json[1].length) {
+                /// If user requested FORMAT JSONCompactColumns, we will render it as a chart.
+                renderChart(json);
             } else {
                 renderUnparsedResult(response);
+                stats.innerText = `Elapsed (client-side): ${(elapsed_msec / 1000).toFixed(3)} sec.`;
             }
             document.getElementById('check-mark').style.display = 'inline';
         } else {
@@ -428,26 +634,28 @@
         }
     }
 
+    let query_area = document.getElementById('query');
+
     window.onpopstate = function(event) {
         if (!event.state) {
             return;
         }
-        document.getElementById('query').value = event.state.query;
+        query_area.value = event.state.query;
         if (!event.state.response) {
             clear();
             return;
         }
-        renderResponse(event.state.status, event.state.response);
+        renderResponse(event.state.status, event.state.response, event.state.elapsed_msec);
     };
 
     if (window.location.hash) {
-        document.getElementById('query').value = window.atob(window.location.hash.substr(1));
+        query_area.value = window.atob(window.location.hash.substr(1));
     }
 
     function post()
     {
         ++request_num;
-        let query = document.getElementById('query').value;
+        let query = query_area.value;
         postImpl(request_num, query);
     }
 
@@ -464,29 +672,100 @@
         }
     }
 
-    function clear()
-    {
-        let table = document.getElementById('data-table');
-        while (table.firstChild) {
-            table.removeChild(table.lastChild);
+    /// Pressing Tab in textarea will increase indentation.
+    /// But for accessibility reasons, we will fall back to tab navigation if the user already used Tab for that.
+
+    let user_prefers_tab_navigation = false;
+
+    [...document.querySelectorAll('input')].map(elem => {
+        elem.onkeydown = (e) => {
+            if (e.key == 'Tab') { user_prefers_tab_navigation = true; }
+        };
+    });
+
+    query_area.onkeydown = (e) => {
+        if (e.key == 'Tab' && !event.shiftKey && !user_prefers_tab_navigation) {
+            let elem = e.target;
+            let selection_start = elem.selectionStart;
+            let selection_end = elem.selectionEnd;
+
+            elem.value = elem.value.substring(0, elem.selectionStart) + '    ' + elem.value.substring(elem.selectionEnd);
+            elem.selectionStart = selection_start + 4;
+            elem.selectionEnd = selection_start + 4;
+
+            e.preventDefault();
+            return false;
+        } else if (e.key === 'Enter' && !(event.metaKey || event.ctrlKey)) {
+            // If the user presses Enter, and the previous line starts with spaces,
+            // then we will insert the same number of spaces.
+            const elem = e.target;
+            if (elem.selectionStart !== elem.selectionEnd) {
+                // If there is a selection, then we will not insert spaces.
+                return;
+            }
+            const cursor_pos = elem.selectionStart;
+
+            const elem_value = elem.value;
+            const text_before_cursor = elem_value.substring(0, cursor_pos);
+            const text_after_cursor = elem_value.substring(cursor_pos);
+            const prev_lines = text_before_cursor.split('\n');
+            const prev_line = prev_lines.pop();
+            const lead_spaces = prev_line.match(/^\s*/)[0];
+            if (!lead_spaces) {
+                return;
+            }
+
+            // Add leading spaces to the current line.
+            elem.value = text_before_cursor + '\n' + lead_spaces + text_after_cursor;
+            elem.selectionStart = cursor_pos + lead_spaces.length + 1;
+            elem.selectionEnd = elem.selectionStart;
+
+            e.preventDefault();
+            return false;
         }
+    };
 
-        let graph = document.getElementById('graph');
-        while (graph.firstChild) {
-            graph.removeChild(graph.lastChild);
+    function clearElement(id)
+    {
+        let elem = document.getElementById(id);
+        while (elem.firstChild) {
+            elem.removeChild(elem.lastChild);
         }
-        graph.style.display = 'none';
+        elem.style.display = 'none';
+    }
 
-        document.getElementById('data-unparsed').innerText = '';
-        document.getElementById('data-unparsed').style.display = 'none';
+    function clear()
+    {
+        clearElement('data-table');
+        clearElement('graph');
+        clearElement('chart');
+        clearElement('data-unparsed');
+        clearElement('error');
+
+        document.getElementById('check-mark').display = 'none';
+        document.getElementById('hourglass').display = 'none';
+        document.getElementById('stats').innerText = '';
+        document.getElementById('logo-container').style.display = 'block';
+    }
 
-        document.getElementById('error').innerText = '';
-        document.getElementById('error').style.display = 'none';
+    function formatReadable(number = 0, decimals = 2, units = []) {
+        const k = 1000;
+        const i = number ? Math.floor(Math.log(number) / Math.log(k)) : 0;
+        const unit = units[i];
+        const dm = unit ? decimals : 0;
+        return Number(number / Math.pow(k, i)).toFixed(dm) + unit;
+    }
 
-        document.getElementById('stats').innerText = '';
+    function formatReadableBytes(bytes) {
+        const units = [' B', ' KB', ' MB', ' GB', ' TB', ' PB', ' EB', ' ZB', ' YB'];
 
-        document.getElementById('hourglass').style.display = 'none';
-        document.getElementById('check-mark').style.display = 'none';
+        return formatReadable(bytes, 2, units);
+    }
+
+    function formatReadableRows(rows) {
+        const units = ['', ' thousand', ' million', ' billion', ' trillion', ' quadrillion'];
+
+        return formatReadable(rows, 2, units);
     }
 
     function renderResult(response)
@@ -494,78 +773,191 @@
         clear();
 
         let stats = document.getElementById('stats');
-        stats.innerText = 'Elapsed: ' + response.statistics.elapsed.toFixed(3) + " sec, read " + response.statistics.rows_read + " rows.";
-
-        /// We can also render graphs if user performed EXPLAIN PIPELINE graph=1.
-        if (response.data.length > 3 && response.data[0][0] === "digraph" && document.getElementById('query').value.match(/^\s*EXPLAIN/i)) {
+        const seconds = response.statistics.elapsed.toFixed(3);
+        const rows = response.statistics.rows_read;
+        const bytes = response.statistics.bytes_read;
+        const formatted_bytes = formatReadableBytes(bytes);
+        const formatted_rows = formatReadableRows(rows);
+        stats.innerText = `Elapsed: ${seconds} sec, read ${formatted_rows} rows, ${formatted_bytes}.`;
+
+        /// We can also render graphs if user performed EXPLAIN PIPELINE graph=1 or EXPLAIN AST graph = 1
+        if (response.data.length > 3 && query_area.value.match(/^\s*EXPLAIN/i) && typeof(response.data[0][0]) === "string" && response.data[0][0].startsWith("digraph")) {
             renderGraph(response);
         } else {
             renderTable(response);
         }
     }
 
+    function renderCell(cell, col_idx, settings)
+    {
+        let td = document.createElement('td');
+
+        let is_null = (cell === null);
+        let is_link = false;
+
+        /// Test: SELECT number, toString(number) AS str, number % 2 ? number : NULL AS nullable, range(number) AS arr, CAST((['hello', 'world'], [number, number % 2]) AS Map(String, UInt64)) AS map FROM numbers(10)
+        let text;
+        if (is_null) {
+            text = 'ᴺᵁᴸᴸ';
+        } else if (typeof(cell) === 'object') {
+            text = JSON.stringify(cell);
+        } else {
+            text = cell;
+
+            /// If it looks like URL, create a link. This is for convenience.
+            if (typeof(cell) == 'string' && cell.match(/^https?:\/\/\S+$/)) {
+                is_link = true;
+            }
+        }
+
+        let node = document.createTextNode(text);
+        if (is_link) {
+            let link = document.createElement('a');
+            link.appendChild(node);
+            link.href = text;
+            link.setAttribute('target', '_blank');
+            node = link;
+        }
+
+        if (settings.is_transposed) {
+            td.className = 'left transposed';
+        } else {
+            td.className = settings.column_is_number[col_idx] ? 'right' : 'left';
+        }
+        if (is_null) {
+            td.className += ' null';
+        }
+
+        /// If it's a number, render bar in background.
+        if (!settings.is_transposed && settings.column_need_render_bars[col_idx] && text > 0) {
+            const ratio = 100 * text / settings.column_maximums[col_idx];
+
+            let div = document.createElement('div');
+
+            div.style.width = '100%';
+            div.style.background = `linear-gradient(to right,
+                var(--bar-color) 0%, var(--bar-color) ${ratio}%,
+                transparent ${ratio}%, transparent 100%)`;
+
+            div.appendChild(node);
+            node = div;
+        }
+
+        td.appendChild(node);
+        return td;
+    }
+
+    function renderTableTransposed(response)
+    {
+        let tbody = document.createElement('tbody');
+        for (let col_idx in response.meta) {
+            let tr = document.createElement('tr');
+            {
+                let th = document.createElement('th');
+                th.className = 'right';
+                th.style.width = '0';
+                th.appendChild(document.createTextNode(response.meta[col_idx].name));
+                tr.appendChild(th);
+            }
+            for (let row_idx in response.data)
+            {
+                let cell = response.data[row_idx][col_idx];
+                const td = renderCell(cell, col_idx, {is_transposed: true});
+                tr.appendChild(td);
+            }
+            if (response.data.length == 0 && col_idx == 0)
+            {
+                /// If result is empty, show this fact with a style.
+                let td = document.createElement('td');
+                td.rowSpan = response.meta.length;
+                td.className = 'empty-result';
+                let div = document.createElement('div');
+                div.appendChild(document.createTextNode("empty result"));
+                div.className = 'empty-result';
+                td.appendChild(div);
+                tr.appendChild(td);
+            }
+            tbody.appendChild(tr);
+        }
+        let table = document.getElementById('data-table');
+        table.appendChild(tbody);
+        table.style.display = 'table';
+    }
+
     function renderTable(response)
     {
+        if (response.data.length <= 1 && response.meta.length >= 5) {
+            renderTableTransposed(response)
+            return;
+        }
+
+        const should_display_row_numbers = response.data.length > 3;
+
         let thead = document.createElement('thead');
+
+        if (should_display_row_numbers) {
+            let th = document.createElement('th');
+            th.className = 'row-number';
+            th.appendChild(document.createTextNode('№'));
+            thead.appendChild(th);
+        }
+
         for (let idx in response.meta) {
             let th = document.createElement('th');
-            let name = document.createTextNode(response.meta[idx].name);
+            const name = document.createTextNode(response.meta[idx].name);
             th.appendChild(name);
             thead.appendChild(th);
         }
 
         /// To prevent hanging the browser, limit the number of cells in a table.
         /// It's important to have the limit on number of cells, not just rows, because tables may be wide or narrow.
-        let max_rows = 10000 / response.meta.length;
+        /// Also we permit rendering of more records but only if elapsed time is not large.
+        const max_rows = 10000 / response.meta.length;
+        const max_render_ms = 200;
         let row_num = 0;
 
-        let column_classes = response.meta.map(elem => elem.type.match(/^(U?Int|Decimal|Float)/) ? 'right' : 'left');
+        const column_is_number = response.meta.map(elem => !!elem.type.match(/^(Nullable\()?(U?Int|Decimal|Float)/));
+        const column_maximums = column_is_number.map((elem, idx) => elem ? Math.max(...response.data.map(row => row[idx])) : 0);
+        const column_minimums = column_is_number.map((elem, idx) => elem ? Math.min(...response.data.map(row => Math.max(0, row[idx]))) : 0);
+        const column_need_render_bars = column_is_number.map((elem, idx) => column_maximums[idx] > 0 && column_maximums[idx] > column_minimums[idx]);
+
+        const settings = {
+            is_transposed: false,
+            column_is_number: column_is_number,
+            column_maximums: column_maximums,
+            column_minimums: column_minimums,
+            column_need_render_bars: column_need_render_bars,
+        };
+
+        const start_time = performance.now();
 
         let tbody = document.createElement('tbody');
         for (let row_idx in response.data) {
             let tr = document.createElement('tr');
-            for (let col_idx in response.data[row_idx]) {
+            if (should_display_row_numbers) {
                 let td = document.createElement('td');
+                td.className = 'row-number';
+                td.appendChild(document.createTextNode(1 + +row_idx));
+                tr.appendChild(td);
+            }
+            for (let col_idx in response.data[row_idx]) {
                 let cell = response.data[row_idx][col_idx];
+                const td = renderCell(cell, col_idx, settings);
 
-                let is_null = (cell === null);
-                let is_link = false;
-
-                /// Test: SELECT number, toString(number) AS str, number % 2 ? number : NULL AS nullable, range(number) AS arr, CAST((['hello', 'world'], [number, number % 2]) AS Map(String, UInt64)) AS map FROM numbers(10)
-                let text;
-                if (is_null) {
-                    text = 'ᴺᵁᴸᴸ';
-                } else if (typeof(cell) === 'object') {
-                    text = JSON.stringify(cell);
-                } else {
-                    text = cell;
-
-                    /// If it looks like URL, create a link. This is for convenience.
-                    if (typeof(cell) == 'string' && cell.match(/^https?:\/\/\S+$/)) {
-                        is_link = true;
-                    }
-                }
-
-                let node = document.createTextNode(text);
-                if (is_link) {
-                    let link = document.createElement('a');
-                    link.appendChild(node);
-                    link.href = text;
-                    link.setAttribute('target', '_blank');
-                    node = link;
-                }
+                td.onclick = () => { td.classList.add('td-selected') };
+                td.onmouseenter = () => {
+                    td.classList.add('td-hover-hysteresis');
+                    td.onmouseleave = () => {
+                        setTimeout(() => { td && td.classList.remove('td-hover-hysteresis') }, 1000);
+                    };
+                };
 
-                td.appendChild(node);
-                td.className = column_classes[col_idx];
-                if (is_null) {
-                    td.className += ' null';
-                }
                 tr.appendChild(td);
             }
             tbody.appendChild(tr);
 
             ++row_num;
-            if (row_num >= max_rows) {
+            if (row_num >= max_rows && performance.now() - start_time >= max_render_ms) {
                 break;
             }
         }
@@ -573,6 +965,7 @@
         let table = document.getElementById('data-table');
         table.appendChild(thead);
         table.appendChild(tbody);
+        table.style.display = 'table';
     }
 
     /// A function to render raw data when non-default format is specified.
@@ -594,15 +987,31 @@
     function renderError(response)
     {
         clear();
-        document.getElementById('error').innerText = response ? response : "No response.";
+
+        let message = response;
+        try {
+            let json = JSON.parse(response);
+            if (json.exception) {
+                message = json.exception;
+            }
+        } catch (e) {}
+
+        document.getElementById('error').innerText = message ? message : "No response.";
         document.getElementById('error').style.display = 'block';
+        document.getElementById('logo-container').style.display = 'none';
     }
 
     /// Huge JS libraries should be loaded only if needed.
-    function loadJS(src) {
+    function loadJS(src, integrity) {
         return new Promise((resolve, reject) => {
             const script = document.createElement('script');
             script.src = src;
+            if (integrity) {
+                script.crossOrigin = 'anonymous';
+                script.integrity = integrity;
+            } else {
+                console.warn('no integrity for', src)
+            }
             script.addEventListener('load', function() { resolve(true); });
             document.head.appendChild(script);
         });
@@ -613,10 +1022,14 @@
         if (load_dagre_promise) { return load_dagre_promise; }
 
         load_dagre_promise = Promise.all([
-            loadJS('https://dagrejs.github.io/project/dagre/v0.8.5/dagre.min.js'),
-            loadJS('https://dagrejs.github.io/project/graphlib-dot/v0.6.4/graphlib-dot.min.js'),
-            loadJS('https://dagrejs.github.io/project/dagre-d3/v0.6.4/dagre-d3.min.js'),
-            loadJS('https://cdn.jsdelivr.net/npm/d3@7.0.0'),
+            loadJS('https://dagrejs.github.io/project/dagre/v0.8.5/dagre.min.js',
+                   'sha384-2IH3T69EIKYC4c+RXZifZRvaH5SRUdacJW7j6HtE5rQbvLhKKdawxq6vpIzJ7j9M'),
+            loadJS('https://dagrejs.github.io/project/graphlib-dot/v0.6.4/graphlib-dot.min.js',
+                   'sha384-Q7oatU+b+y0oTkSoiRH9wTLH6sROySROCILZso/AbMMm9uKeq++r8ujD4l4f+CWj'),
+            loadJS('https://dagrejs.github.io/project/dagre-d3/v0.6.4/dagre-d3.min.js',
+                   'sha384-9N1ty7Yz7VKL3aJbOk+8ParYNW8G5W+MvxEfFL9G7CRYPmkHI9gJqyAfSI/8190W'),
+            loadJS('https://cdn.jsdelivr.net/npm/d3@7.0.0',
+                   'sha384-S+Kf0r6YzKIhKA8d1k2/xtYv+j0xYUU3E7+5YLrcPVab6hBh/r1J6cq90OXhw80u'),
         ]);
 
         return load_dagre_promise;
@@ -643,43 +1056,106 @@
         svg.style.height = graph.graph().height;
     }
 
-    function setColorTheme(theme)
+    let load_uplot_promise;
+    function loadUplot() {
+        if (load_uplot_promise) { return load_uplot_promise; }
+        load_uplot_promise = loadJS('https://cdn.jsdelivr.net/npm/uplot@1.6.21/dist/uPlot.iife.min.js',
+            'sha384-TwdJPnTsKP6pnvFZZKda0WJCXpjcHCa7MYHmjrYDu6rsEsb/UnFdoL0phS5ODqTA');
+        return load_uplot_promise;
+    }
+
+    let uplot;
+    async function renderChart(json)
     {
-        window.localStorage.setItem('theme', theme);
+        await loadUplot();
+        clear();
+
+        let chart = document.getElementById('chart');
+        chart.style.display = 'block';
+
+        let paths = uPlot.paths.stepped({align:  1});
+
+        const [line_color, fill_color, grid_color, axes_color] = theme == 'light'
+            ? ["#F80", "#FED", "#c7d0d9", "#2c3235"]
+            : ["#888", "#045", "#2c3235", "#c7d0d9"];
+
+        const opts = {
+            width: chart.clientWidth,
+            height: chart.clientHeight,
+            scales: { x: { time: json[0][0] > 1000000000 && json[0][0] < 2000000000 } },
+            axes: [ { stroke: axes_color,
+                      grid: { width: 1 / devicePixelRatio, stroke: grid_color },
+					  ticks: { width: 1 / devicePixelRatio, stroke: grid_color } },
+					{ stroke: axes_color,
+					  grid: { width: 1 / devicePixelRatio, stroke: grid_color },
+					  ticks: { width: 1 / devicePixelRatio, stroke: grid_color } } ],
+            series: [ { label: "x" },
+                      { label: "y", stroke: line_color, fill: fill_color,
+                        drawStyle: 0, lineInterpolation: 1, paths } ],
+            padding: [ null, null, null, (Math.ceil(Math.log10(Math.max(...json[1]))) + Math.floor(Math.log10(Math.max(...json[1])) / 3)) * 6 ],
+        };
+
+        uplot = new uPlot(opts, json, chart);
+    }
+
+    function resizeChart() {
+        if (uplot) {
+            let chart = document.getElementById('chart');
+            uplot.setSize({ width: chart.clientWidth, height: chart.clientHeight });
+        }
+    }
+
+    function redrawChart() {
+        if (uplot && document.getElementById('chart').style.display == 'block') {
+            renderChart(uplot.data);
+        }
+    }
+
+    new ResizeObserver(resizeChart).observe(document.getElementById('chart'));
+
+    /// First we check if theme is set via the 'theme' GET parameter, if not, we check localStorage, otherwise we check OS preference.
+    let theme = current_url.searchParams.get('theme');
+    if (['dark', 'light'].indexOf(theme) === -1) {
+        theme = window.localStorage.getItem('theme');
+    }
+    if (!theme) {
+        theme = 'light';
+    }
+
+    function setColorTheme(new_theme, update_preference) {
+        theme = new_theme;
+        if (update_preference) {
+            window.localStorage.setItem('theme', theme);
+        }
         document.documentElement.setAttribute('data-theme', theme);
+        redrawChart();
     }
 
-    /// The choice of color theme is saved in browser.
-    let theme = window.localStorage.getItem('theme');
     if (theme) {
-        setColorTheme(theme);
+        document.documentElement.setAttribute('data-theme', theme);
     } else {
         /// Obtain system-level user preference
-        let media_query_list = window.matchMedia('prefers-color-scheme: dark')
-
+        const media_query_list = window.matchMedia('(prefers-color-scheme: dark)');
         if (media_query_list.matches) {
-            /// Set without saving to localstorage
-            document.documentElement.setAttribute('data-theme', 'dark');
+            setColorTheme('dark');
         }
 
         /// There is a rumor that on some computers, the theme is changing automatically on day/night.
         media_query_list.addEventListener('change', function(e) {
-            if (e.matches) {
-                document.documentElement.setAttribute('data-theme', 'dark');
-            } else {
-                document.documentElement.setAttribute('data-theme', 'light');
-            }
+            setColorTheme(e.matches ? 'dark' : 'light');
         });
     }
 
-    document.getElementById('toggle-light').onclick = function()
-    {
-        setColorTheme('light');
+    if (run_immediately) {
+        post();
     }
 
-    document.getElementById('toggle-dark').onclick = function()
-    {
-        setColorTheme('dark');
+    document.getElementById('toggle-light').onclick = function() {
+        setColorTheme('light', true);
+    }
+
+    document.getElementById('toggle-dark').onclick = function() {
+        setColorTheme('dark', true);
     }
 </script>
 </html>
