From 2c982b4ccf71823b82a3924234a4687543234b75 Mon Sep 17 00:00:00 2001
From: Alexey Milovidov <milovidov@yandex-team.ru>
Date: Mon, 23 Nov 2020 09:35:08 +0300
Subject: [PATCH 1/5] Fix race condition; history and sharing capabilities

---
 programs/server/play.html | 92 ++++++++++++++++++++++++++++-----------
 1 file changed, 66 insertions(+), 26 deletions(-)

diff --git a/programs/server/play.html b/programs/server/play.html
index 22eea0002ca..eabeb6b71ad 100644
--- a/programs/server/play.html
+++ b/programs/server/play.html
@@ -30,17 +30,6 @@
     It can be done in background, e.g. wait 100 ms after address/credentials change and do the check.
     Also it can provide visual indication that credentials are correct.
 
-    3. Add history in localstorage. Integrate with history API.
-    There can be a counter in localstorage, that will be appended to location #fragment.
-    The 'back', 'forward' buttons in browser should work.
-    Also there should be UI element to list all the queries from history and select from the list.
-
-    4. Trivial sharing capabilities.
-    Sharing is only possible when system.query_log is accessible. Read the X-ClickHouse-QueryId from the response.
-    Share button will: - emit SYSTEM FLUSH LOGS if not readonly; - find the query in the query_log;
-    - generate an URL with the query id and: server address if not equal to the URL's host; user name if not default;
-    indication that password should be entered in case of non-empty password.
-
     -->
 
     <style type="text/css">
@@ -299,14 +288,21 @@
 
 <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.
+    /// This is to avoid race conditions.
+    var request_num = 0;
+
+    /// Save query in history only if it is different.
+    var previous_query = '';
+
     /// Substitute the address of the server where the page is served.
     if (location.protocol != 'file:') {
         document.getElementById('url').value = location.origin;
     }
 
-    function post()
+    function postImpl(posted_request_num, query)
     {
-        /// TODO: Avoid race condition on subsequent requests when responses may come out of order.
         /// TODO: Check if URL already contains query string (append parameters).
 
         var url = document.getElementById('url').value +
@@ -318,7 +314,6 @@
             /// Safety settings to prevent results that browser cannot display.
             '&max_result_rows=1000&max_result_bytes=10000000&result_overflow_mode=break';
 
-        var query = document.getElementById('query').value;
         var xhr = new XMLHttpRequest;
 
         xhr.open('POST', url, true);
@@ -326,18 +321,25 @@
 
         xhr.onreadystatechange = function()
         {
-            if (this.readyState === XMLHttpRequest.DONE) {
-                if (this.status === 200) {
-                    var json;
-                    try { json = JSON.parse(this.response); } catch (e) {}
-                    if (json !== undefined && json.statistics !== undefined) {
-                        renderResult(json);
-                    } else {
-                        renderUnparsedResult(this.response);
-                    }
-                } else {
-                    /// TODO: Proper rendering of network errors.
-                    renderError(this.response);
+            if (posted_request_num != request_num) {
+                return;
+            } else if (this.readyState === XMLHttpRequest.DONE) {
+                renderResponse(this.status, this.response);
+
+                /// The query is saved in browser history (in state JSON object)
+                /// as well as in URL fragment identifier.
+                if (query != previous_query) {
+                    previous_query = query;
+                    var title = "ClickHouse Query: " + query;
+                    history.pushState(
+                        {
+                            query: query,
+                            status: this.status,
+                            response: this.response.length > 100000 ? null : this.response  /// Lower than the browser's limit.
+                        },
+                        title,
+                        window.location.pathname + '#' + window.btoa(query));
+                    document.title = title;
                 }
             } else {
                 //console.log(this);
@@ -345,6 +347,44 @@
         }
     }
 
+    function renderResponse(status, response) {
+        if (status === 200) {
+            var json;
+            try { json = JSON.parse(response); } catch (e) {}
+            if (json !== undefined && json.statistics !== undefined) {
+                renderResult(json);
+            } else {
+                renderUnparsedResult(response);
+            }
+        } else {
+            /// TODO: Proper rendering of network errors.
+            renderError(response);
+        }
+    }
+
+    window.onpopstate = function(event) {
+        if (!event.state) {
+            return;
+        }
+        document.getElementById('query').value = event.state.query;
+        if (!event.state.response) {
+            clear();
+            return;
+        }
+        renderResponse(event.state.status, event.state.response);
+    };
+
+    if (window.location.hash) {
+        document.getElementById('query').value = window.atob(window.location.hash.substr(1));
+    }
+
+    function post()
+    {
+        ++request_num;
+        var query = document.getElementById('query').value;
+        postImpl(request_num, query);
+    }
+
     document.getElementById('run').onclick = function()
     {
         post();

From 5058c56ecf40c4ad60833b9d638ee5e94f32e13d Mon Sep 17 00:00:00 2001
From: Alexey Milovidov <milovidov@yandex-team.ru>
Date: Mon, 23 Nov 2020 10:15:33 +0300
Subject: [PATCH 2/5] Add favicon; add loading indicator

---
 programs/server/play.html | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/programs/server/play.html b/programs/server/play.html
index eabeb6b71ad..f7f9190884c 100644
--- a/programs/server/play.html
+++ b/programs/server/play.html
@@ -1,6 +1,7 @@
 <html> <!-- TODO If I write DOCTYPE HTML something changes but I don't know what. -->
 <head>
     <meta charset="UTF-8">
+    <link rel="icon" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDkgOCI+PHN0eWxlPi5ve2ZpbGw6I2ZjMH0ucntmaWxsOnJlZH08L3N0eWxlPjxwYXRoIGQ9Ik0wLDcgaDEgdjEgaC0xIHoiIGNsYXNzPSJyIi8+PHBhdGggZD0iTTAsMCBoMSB2NyBoLTEgeiIgY2xhc3M9Im8iLz48cGF0aCBkPSJNMiwwIGgxIHY4IGgtMSB6IiBjbGFzcz0ibyIvPjxwYXRoIGQ9Ik00LDAgaDEgdjggaC0xIHoiIGNsYXNzPSJvIi8+PHBhdGggZD0iTTYsMCBoMSB2OCBoLTEgeiIgY2xhc3M9Im8iLz48cGF0aCBkPSJNOCwzLjI1IGgxIHYxLjUgaC0xIHoiIGNsYXNzPSJvIi8+PC9zdmc+">
     <title>ClickHouse Query</title>
 
     <!-- Code Style:
@@ -262,6 +263,22 @@
         {
             color: var(--null-color);
         }
+
+        #hourglass
+        {
+            display: none;
+            padding-left: 1rem;
+            font-size: 110%;
+            color: #888;
+        }
+
+        #check-mark
+        {
+            display: none;
+            padding-left: 1rem;
+            font-size: 110%;
+            color: #080;
+        }
     </style>
 </head>
 
@@ -275,6 +292,8 @@
     <div id="run_div">
         <button class="shadow" id="run">Run</button>
         <span class="hint">&nbsp;(Ctrl+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>
@@ -319,6 +338,9 @@
         xhr.open('POST', url, true);
         xhr.send(query);
 
+        document.getElementById('check-mark').style.display = 'none';
+        document.getElementById('hourglass').style.display = 'inline';
+
         xhr.onreadystatechange = function()
         {
             if (posted_request_num != request_num) {
@@ -348,6 +370,8 @@
     }
 
     function renderResponse(status, response) {
+        document.getElementById('hourglass').style.display = 'none';
+
         if (status === 200) {
             var json;
             try { json = JSON.parse(response); } catch (e) {}
@@ -356,6 +380,7 @@
             } else {
                 renderUnparsedResult(response);
             }
+            document.getElementById('check-mark').style.display = 'inline';
         } else {
             /// TODO: Proper rendering of network errors.
             renderError(response);
@@ -390,7 +415,7 @@
         post();
     }
 
-    document.getElementById('query').onkeypress = function(event)
+    document.onkeypress = function(event)
     {
         /// Firefox has code 13 for Enter and Chromium has code 10.
         if (event.ctrlKey && (event.charCode == 13 || event.charCode == 10)) {
@@ -412,6 +437,9 @@
         document.getElementById('error').style.display = 'none';
 
         document.getElementById('stats').innerText = '';
+
+        document.getElementById('hourglass').style.display = 'none';
+        document.getElementById('check-mark').style.display = 'none';
     }
 
     function renderResult(response)

From f3e567b4b4d6602949e1969c8c65eb25a5e90c7f Mon Sep 17 00:00:00 2001
From: Alexey Milovidov <milovidov@yandex-team.ru>
Date: Mon, 23 Nov 2020 10:15:52 +0300
Subject: [PATCH 3/5] Update roadmap

---
 programs/server/play.html | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/programs/server/play.html b/programs/server/play.html
index f7f9190884c..d78a60ff83b 100644
--- a/programs/server/play.html
+++ b/programs/server/play.html
@@ -22,11 +22,7 @@
 
     <!-- Development Roadmap:
 
-    1. Add indication that the query was sent and when the query has been finished.
-    Do not use any animated spinners. Just a text or check mark.
-    Eliminate race conditions (results from the previous query should be ignored on arrival, the previous request should be cancelled).
-
-    2. Support readonly servers.
+    1. Support readonly servers.
     Check if readonly = 1 (with SELECT FROM system.settings) to avoid sending settings. It can be done once on address/credentials change.
     It can be done in background, e.g. wait 100 ms after address/credentials change and do the check.
     Also it can provide visual indication that credentials are correct.

From 56651a94c4e6b5d6e56774927fc016843f20a635 Mon Sep 17 00:00:00 2001
From: Alexey Milovidov <milovidov@yandex-team.ru>
Date: Mon, 23 Nov 2020 10:52:33 +0300
Subject: [PATCH 4/5] Slightly more correct

---
 programs/server/play.html | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/programs/server/play.html b/programs/server/play.html
index d78a60ff83b..6fcf5e76c11 100644
--- a/programs/server/play.html
+++ b/programs/server/play.html
@@ -332,10 +332,6 @@
         var xhr = new XMLHttpRequest;
 
         xhr.open('POST', url, true);
-        xhr.send(query);
-
-        document.getElementById('check-mark').style.display = 'none';
-        document.getElementById('hourglass').style.display = 'inline';
 
         xhr.onreadystatechange = function()
         {
@@ -363,6 +359,11 @@
                 //console.log(this);
             }
         }
+
+        document.getElementById('check-mark').style.display = 'none';
+        document.getElementById('hourglass').style.display = 'inline';
+
+        xhr.send(query);
     }
 
     function renderResponse(status, response) {
@@ -507,7 +508,7 @@
     function renderError(response)
     {
         clear();
-        document.getElementById('error').innerText = response;
+        document.getElementById('error').innerText = response ? response : "No response.";
         document.getElementById('error').style.display = 'block';
     }
 

From fdc11cb739f2ebcaf89db21bde57b9ecbb407388 Mon Sep 17 00:00:00 2001
From: Alexey Milovidov <milovidov@yandex-team.ru>
Date: Mon, 23 Nov 2020 11:05:13 +0300
Subject: [PATCH 5/5] Minor improvements

---
 programs/server/play.html | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/programs/server/play.html b/programs/server/play.html
index 6fcf5e76c11..37869228c04 100644
--- a/programs/server/play.html
+++ b/programs/server/play.html
@@ -316,15 +316,24 @@
         document.getElementById('url').value = location.origin;
     }
 
+    /// Substitute user name if it's specified in the query string
+    var user_from_url = (new URL(window.location)).searchParams.get('user');
+    if (user_from_url) {
+        document.getElementById('user').value = user_from_url;
+    }
+
     function postImpl(posted_request_num, query)
     {
         /// TODO: Check if URL already contains query string (append parameters).
 
+        var user = document.getElementById('user').value;
+        var password = document.getElementById('password').value;
+
         var url = document.getElementById('url').value +
             /// Ask server to allow cross-domain requests.
             '?add_http_cors_header=1' +
-            '&user=' + encodeURIComponent(document.getElementById('user').value) +
-            '&password=' + encodeURIComponent(document.getElementById('password').value) +
+            '&user=' + encodeURIComponent(user) +
+            '&password=' + encodeURIComponent(password) +
             '&default_format=JSONCompact' +
             /// Safety settings to prevent results that browser cannot display.
             '&max_result_rows=1000&max_result_bytes=10000000&result_overflow_mode=break';
@@ -352,7 +361,7 @@
                             response: this.response.length > 100000 ? null : this.response  /// Lower than the browser's limit.
                         },
                         title,
-                        window.location.pathname + '#' + window.btoa(query));
+                        window.location.pathname + '?user=' + encodeURIComponent(user) + '#' + window.btoa(query));
                     document.title = title;
                 }
             } else {