sqlui 0.1.59 → 0.1.60

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b06af3454b65600eacd42b1008e186c473736411fedaed471162af97d98f39f
-  data.tar.gz: 38c46eb311a518ea328acd959ca34c8e5d850c83fa9c1b98c663daef2356c334
+  metadata.gz: 45285cfe6706fdfa5bae7abf73f1a287e0238709f2f83a18eda8386c71f4de63
+  data.tar.gz: 9d3eacf4a4306697c4c34d91b51303dd88b376bec29526124d18ec5c4fbe43d7
 SHA512:
-  metadata.gz: 320e438a5101b83a59691168f2673f82ffb35559b547a9e75e6278b9735c4880a3906b298ae576d89346218f3ff3543e7cd57e034dbbfa2c525b4a069ad337ab
-  data.tar.gz: 03d5d65cad39f143c56f205c1f55280d2ab269390191b0ea026300e1c422b896876c2e5cf0c9f0764ca712a50c9702fb222f93a584960bfe11762fbc4663a78f
+  metadata.gz: f94e45bf232683013994f63a46eb18257aeaf9d81dd906ccffdbdced023be1743ebca28ff87f34a3b45932757b80516fae979d74a9ab1002affa78a7adb412dc
+  data.tar.gz: 4151e2f3f7d795931abfee848f040e9b6066c4ef4ec9503d0f3cdb586e82d3ced59f50c3eb8744c2adc2847324d275d642e313c0ba825768e452e7a0f8af7b75

data/.release-version

@@ -1 +1 @@
-0.1.59
+0.1.60

data/app/server.rb

@@ -143,31 +143,60 @@ class Server < Sinatra::Base
         status 200
         headers 'Content-Type' => 'application/json; charset=utf-8'
 
-        database.with_client do |client|
-          query_result = execute_query(client, variables, queries)
-          stream do |out|
+        stream do |out|
+          database.with_client do |client|
+            begin
+              query_result = execute_query(client, variables, queries)
+            rescue Mysql2::Error => e
+              stacktrace = e.full_message(highlight: false)
+              message = "ERROR #{e.error_number} (#{e.sql_state}): #{e.message.lines.first&.strip || 'unknown error'}"
+              out << { error: message, stacktrace: stacktrace }.compact.to_json
+              break
+            rescue StandardError => e
+              stacktrace = e.full_message(highlight: false)
+              message = e.message.lines.first&.strip || 'unknown error'
+              out << { error: message, stacktrace: stacktrace }.compact.to_json
+              break
+            end
+
             if query_result
               json = <<~RES.chomp
                 {
                   "columns": #{query_result.fields.to_json},
                   "column_types": #{MysqlTypes.map_to_google_charts_types(query_result.field_types).to_json},
-                  "total_rows": #{query_result.size.to_json},
                   "selection": #{params[:selection].to_json},
                   "query": #{params[:sql].to_json},
                   "rows": [
               RES
               out << json
-              bytes = json.bytesize
+              bytes_written = json.bytesize
+              max_rows_written = false
+              rows_written = 0
+              total_rows = 0
               query_result.each_with_index do |row, i|
+                total_rows += 1
+                next if max_rows_written
+
                 json = "#{i.zero? ? '' : ','}\n    #{row.map { |v| big_decimal_to_float(v) }.to_json}"
-                bytes += json.bytesize
-                break if i == Sqlui::MAX_ROWS || bytes > Sqlui::MAX_BYTES
+                bytesize = json.bytesize
+                if bytes_written + bytesize > Sqlui::MAX_BYTES
+                  max_rows_written = true
+                  next
+                end
 
                 out << json
+                bytes_written += bytesize
+                rows_written += 1
+
+                if rows_written == Sqlui::MAX_ROWS
+                  max_rows_written = true
+                  next
+                end
               end
               out << <<~RES
 
-                  ]
+                  ],
+                  "total_rows": #{total_rows}
                 }
               RES
             else
@@ -198,9 +227,21 @@ class Server < Sinatra::Base
         attachment 'result.csv'
         status 200
 
-        database.with_client do |client|
-          query_result = execute_query(client, variables, queries)
-          stream do |out|
+        stream do |out|
+          database.with_client do |client|
+            begin
+              query_result = execute_query(client, variables, queries)
+            rescue Mysql2::Error => e
+              stacktrace = e.full_message(highlight: false)
+              message = "ERROR #{e.error_number} (#{e.sql_state}): #{e.message.lines.first&.strip || 'unknown error'}"
+              out << { error: message, stacktrace: stacktrace }.compact.to_json
+              break
+            rescue StandardError => e
+              stacktrace = e.full_message(highlight: false)
+              message = e.message.lines.first&.strip || 'unknown error'
+              out << { error: message, stacktrace: stacktrace }.compact.to_json
+              break
+            end
             out << CSV::Row.new(query_result.fields, query_result.fields, header_row: true).to_s.strip
             query_result.each do |row|
               out << "\n#{CSV::Row.new(query_result.fields, row.map { |v| big_decimal_to_float(v) }).to_s.strip}"
@@ -230,7 +271,7 @@ class Server < Sinatra::Base
       stacktrace = exception&.full_message(highlight: false)
       if request.env['HTTP_ACCEPT'] == 'application/json'
         headers 'Content-Type' => 'application/json; charset=utf-8'
-        message = exception&.message&.lines&.first&.strip || 'unexpected error'
+        message = "error: #{exception&.message&.lines&.first&.strip || 'unexpected error'}"
         json = { error: message, stacktrace: stacktrace }.compact.to_json
         body json
       else
@@ -274,7 +315,10 @@ class Server < Sinatra::Base
     variables.each do |name, value|
       client.query("SET @#{name} = #{value};")
     end
-    queries.map { |current| client.query(current) }.last
+    queries[0..-2].map do |current|
+      client.query(current, stream: true)&.free
+    end
+    client.query(queries[-1], stream: true)
   end
 
   def big_decimal_to_float(maybe_big_decimal)

data/client/resources/sqlui.css

@@ -233,16 +233,15 @@ p {
 }
 
 #status-message {
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    flex-direction: row;
+    min-width: 0;
+    justify-content: left;
     font-family: Helvetica, sans-serif;
     white-space: nowrap;
     overflow: hidden;
     font-size: 16px;
     color: #333;
-    margin-left: 5px;
+    margin: 0 5px;
+    text-overflow: ellipsis;
 }
 
 #result-box, #fetch-sql-box, #saved-box, #graph-box, #structure-box {
@@ -255,6 +254,10 @@ table tbody tr td {
   height: 21px;
 }
 
+#result-table td, #result-table th {
+    cursor: default;
+}
+
 #result-table tbody tr td abbr a {
     color: #555;
     cursor: pointer;
@@ -264,6 +267,7 @@ table tbody tr td {
     border: 1px dotted #555;
     font-size: 12px;
     display: inline-block;
+    user-select: none;
 }
 
 #result-table tbody tr td abbr {
@@ -358,7 +362,8 @@ thead {
 }
 
 #status-box {
-    padding: 5px;
+    width: 100%;
+    padding: 5px 0;
     display: flex;
     flex-direction: row;
     border-top: 1px solid #ddd;
@@ -485,11 +490,13 @@ select {
 #pagination-box {
     display: flex;
     flex-direction: row;
+    margin: 0 5px;
 }
 
 #page-count-box {
     align-self: center;
     font-size: 16px;
+    white-space: nowrap;
 }
 
 .pagination-button {

data/client/resources/sqlui.js

@@ -1514,10 +1514,11 @@
        /**
        Create a selection range.
        */
-       static range(anchor, head, goalColumn) {
-           let goal = (goalColumn !== null && goalColumn !== void 0 ? goalColumn : 33554431 /* RangeFlag.NoGoalColumn */) << 5 /* RangeFlag.GoalColumnOffset */;
-           return head < anchor ? SelectionRange.create(head, anchor, 16 /* RangeFlag.Inverted */ | goal | 8 /* RangeFlag.AssocAfter */)
-               : SelectionRange.create(anchor, head, goal | (head > anchor ? 4 /* RangeFlag.AssocBefore */ : 0));
+       static range(anchor, head, goalColumn, bidiLevel) {
+           let flags = ((goalColumn !== null && goalColumn !== void 0 ? goalColumn : 33554431 /* RangeFlag.NoGoalColumn */) << 5 /* RangeFlag.GoalColumnOffset */) |
+               (bidiLevel == null ? 3 : Math.min(2, bidiLevel));
+           return head < anchor ? SelectionRange.create(head, anchor, 16 /* RangeFlag.Inverted */ | 8 /* RangeFlag.AssocAfter */ | flags)
+               : SelectionRange.create(anchor, head, (head > anchor ? 4 /* RangeFlag.AssocBefore */ : 0) | flags);
        }
        /**
        @internal
@@ -4346,6 +4347,26 @@
            }
        }
    }
+   function scrollableParent(dom) {
+       let doc = dom.ownerDocument;
+       for (let cur = dom.parentNode; cur;) {
+           if (cur == doc.body) {
+               break;
+           }
+           else if (cur.nodeType == 1) {
+               if (cur.scrollHeight > cur.clientHeight || cur.scrollWidth > cur.clientWidth)
+                   return cur;
+               cur = cur.assignedSlot || cur.parentNode;
+           }
+           else if (cur.nodeType == 11) {
+               cur = cur.host;
+           }
+           else {
+               break;
+           }
+       }
+       return null;
+   }
    class DOMSelectionState {
        constructor() {
            this.anchorNode = null;
@@ -7544,22 +7565,30 @@
            this.compositionFirstChange = null;
            this.compositionEndedAt = 0;
            this.mouseSelection = null;
+           let handleEvent = (handler, event) => {
+               if (this.ignoreDuringComposition(event))
+                   return;
+               if (event.type == "keydown" && this.keydown(view, event))
+                   return;
+               if (this.mustFlushObserver(event))
+                   view.observer.forceFlush();
+               if (this.runCustomHandlers(event.type, view, event))
+                   event.preventDefault();
+               else
+                   handler(view, event);
+           };
            for (let type in handlers) {
                let handler = handlers[type];
-               view.contentDOM.addEventListener(type, (event) => {
-                   if (!eventBelongsToEditor(view, event) || this.ignoreDuringComposition(event))
-                       return;
-                   if (type == "keydown" && this.keydown(view, event))
-                       return;
-                   if (this.mustFlushObserver(event))
-                       view.observer.forceFlush();
-                   if (this.runCustomHandlers(type, view, event))
-                       event.preventDefault();
-                   else
-                       handler(view, event);
+               view.contentDOM.addEventListener(type, event => {
+                   if (eventBelongsToEditor(view, event))
+                       handleEvent(handler, event);
                }, handlerOptions[type]);
                this.registeredEvents.push(type);
            }
+           view.scrollDOM.addEventListener("mousedown", (event) => {
+               if (event.target == view.scrollDOM)
+                   handleEvent(handlers.mousedown, event);
+           });
            if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
                // On Chrome 102, viewport updates somehow stop wheel-based
                // scrolling. Turning off pointer events during the scroll seems
@@ -7716,12 +7745,18 @@
    const EmacsyPendingKeys = "dthko";
    // Key codes for modifier keys
    const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
+   function dragScrollSpeed(dist) {
+       return dist * 0.7 + 8;
+   }
    class MouseSelection {
        constructor(view, startEvent, style, mustSelect) {
            this.view = view;
            this.style = style;
            this.mustSelect = mustSelect;
+           this.scrollSpeed = { x: 0, y: 0 };
+           this.scrolling = -1;
            this.lastEvent = startEvent;
+           this.scrollParent = scrollableParent(view.contentDOM);
            let doc = view.contentDOM.ownerDocument;
            doc.addEventListener("mousemove", this.move = this.move.bind(this));
            doc.addEventListener("mouseup", this.up = this.up.bind(this));
@@ -7737,11 +7772,24 @@
            }
        }
        move(event) {
+           var _a;
            if (event.buttons == 0)
                return this.destroy();
            if (this.dragging !== false)
                return;
            this.select(this.lastEvent = event);
+           let sx = 0, sy = 0;
+           let rect = ((_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect())
+               || { left: 0, top: 0, right: this.view.win.innerWidth, bottom: this.view.win.innerHeight };
+           if (event.clientX <= rect.left)
+               sx = -dragScrollSpeed(rect.left - event.clientX);
+           else if (event.clientX >= rect.right)
+               sx = dragScrollSpeed(event.clientX - rect.right);
+           if (event.clientY <= rect.top)
+               sy = -dragScrollSpeed(rect.top - event.clientY);
+           else if (event.clientY >= rect.bottom)
+               sy = dragScrollSpeed(event.clientY - rect.bottom);
+           this.setScrollSpeed(sx, sy);
        }
        up(event) {
            if (this.dragging == null)
@@ -7751,19 +7799,41 @@
            this.destroy();
        }
        destroy() {
+           this.setScrollSpeed(0, 0);
            let doc = this.view.contentDOM.ownerDocument;
            doc.removeEventListener("mousemove", this.move);
            doc.removeEventListener("mouseup", this.up);
            this.view.inputState.mouseSelection = null;
        }
+       setScrollSpeed(sx, sy) {
+           this.scrollSpeed = { x: sx, y: sy };
+           if (sx || sy) {
+               if (this.scrolling < 0)
+                   this.scrolling = setInterval(() => this.scroll(), 50);
+           }
+           else if (this.scrolling > -1) {
+               clearInterval(this.scrolling);
+               this.scrolling = -1;
+           }
+       }
+       scroll() {
+           if (this.scrollParent) {
+               this.scrollParent.scrollLeft += this.scrollSpeed.x;
+               this.scrollParent.scrollTop += this.scrollSpeed.y;
+           }
+           else {
+               this.view.win.scrollBy(this.scrollSpeed.x, this.scrollSpeed.y);
+           }
+           if (this.dragging === false)
+               this.select(this.lastEvent);
+       }
        select(event) {
            let selection = this.style.get(event, this.extend, this.multiple);
            if (this.mustSelect || !selection.eq(this.view.state.selection) ||
                selection.main.assoc != this.view.state.selection.main.assoc)
                this.view.dispatch({
                    selection,
-                   userEvent: "select.pointer",
-                   scrollIntoView: true
+                   userEvent: "select.pointer"
                });
            this.mustSelect = false;
        }
@@ -7954,23 +8024,15 @@
    function basicMouseSelection(view, event) {
        let start = queryPos(view, event), type = getClickType(event);
        let startSel = view.state.selection;
-       let last = start, lastEvent = event;
        return {
            update(update) {
                if (update.docChanged) {
                    start.pos = update.changes.mapPos(start.pos);
                    startSel = startSel.map(update.changes);
-                   lastEvent = null;
                }
            },
            get(event, extend, multiple) {
-               let cur;
-               if (lastEvent && event.clientX == lastEvent.clientX && event.clientY == lastEvent.clientY)
-                   cur = last;
-               else {
-                   cur = last = queryPos(view, event);
-                   lastEvent = event;
-               }
+               let cur = queryPos(view, event);
                let range = rangeForClick(view, cur.pos, cur.bias, type);
                if (start.pos != cur.pos && !extend) {
                    let startRange = rangeForClick(view, start.pos, start.bias, type);
@@ -16967,7 +17029,7 @@
    */
    const defaultHighlightStyle = /*@__PURE__*/HighlightStyle.define([
        { tag: tags.meta,
-           color: "#7a757a" },
+           color: "#404740" },
        { tag: tags.link,
            textDecoration: "underline" },
        { tag: tags.heading,
@@ -17898,7 +17960,7 @@
    function extendSel(view, how) {
        let selection = updateSel(view.state.selection, range => {
            let head = how(range);
-           return EditorSelection.range(range.anchor, head.head, head.goalColumn);
+           return EditorSelection.range(range.anchor, head.head, head.goalColumn, head.bidiLevel || undefined);
        });
        if (selection.eq(view.state.selection))
            return false;
@@ -20091,6 +20153,7 @@
                closeOnBlur: true,
                maxRenderedOptions: 100,
                defaultKeymap: true,
+               tooltipClass: () => "",
                optionClass: () => "",
                aboveCursor: false,
                icons: true,
@@ -20101,6 +20164,7 @@
                defaultKeymap: (a, b) => a && b,
                closeOnBlur: (a, b) => a && b,
                icons: (a, b) => a && b,
+               tooltipClass: (a, b) => c => joinClass(a(c), b(c)),
                optionClass: (a, b) => c => joinClass(a(c), b(c)),
                addToOptions: (a, b) => a.concat(b)
            });
@@ -20179,14 +20243,17 @@
                key: this
            };
            this.space = null;
+           this.currentClass = "";
            let cState = view.state.field(stateField);
            let { options, selected } = cState.open;
            let config = view.state.facet(completionConfig);
            this.optionContent = optionContent(config);
            this.optionClass = config.optionClass;
+           this.tooltipClass = config.tooltipClass;
            this.range = rangeAroundSelected(options.length, selected, config.maxRenderedOptions);
            this.dom = document.createElement("div");
            this.dom.className = "cm-tooltip-autocomplete";
+           this.updateTooltipClass(view.state);
            this.dom.addEventListener("mousedown", (e) => {
                for (let dom = e.target, match; dom && dom != this.dom; dom = dom.parentNode) {
                    if (dom.nodeName == "LI" && (match = /-(\d+)$/.exec(dom.id)) && +match[1] < options.length) {
@@ -20207,12 +20274,25 @@
            var _a, _b, _c;
            let cState = update.state.field(this.stateField);
            let prevState = update.startState.field(this.stateField);
+           this.updateTooltipClass(update.state);
            if (cState != prevState) {
                this.updateSel();
                if (((_a = cState.open) === null || _a === void 0 ? void 0 : _a.disabled) != ((_b = prevState.open) === null || _b === void 0 ? void 0 : _b.disabled))
                    this.dom.classList.toggle("cm-tooltip-autocomplete-disabled", !!((_c = cState.open) === null || _c === void 0 ? void 0 : _c.disabled));
            }
        }
+       updateTooltipClass(state) {
+           let cls = this.tooltipClass(state);
+           if (cls != this.currentClass) {
+               for (let c of this.currentClass.split(" "))
+                   if (c)
+                       this.dom.classList.remove(c);
+               for (let c of cls.split(" "))
+                   if (c)
+                       this.dom.classList.add(c);
+               this.currentClass = cls;
+           }
+       }
        positioned(space) {
            this.space = space;
            if (this.info)
@@ -20473,13 +20553,13 @@
            if (active.length == this.active.length && active.every((a, i) => a == this.active[i]))
                active = this.active;
            let open = this.open;
+           if (open && tr.docChanged)
+               open = open.map(tr.changes);
            if (tr.selection || active.some(a => a.hasResult() && tr.changes.touchesRange(a.from, a.to)) ||
                !sameResults(active, this.active))
-               open = CompletionDialog.build(active, state, this.id, this.open, conf);
+               open = CompletionDialog.build(active, state, this.id, open, conf);
            else if (open && open.disabled && !active.some(a => a.state == 1 /* State.Pending */))
                open = null;
-           else if (open && tr.docChanged)
-               open = open.map(tr.changes);
            if (!open && active.every(a => a.state != 1 /* State.Pending */) && active.some(a => a.hasResult()))
                active = active.map(a => a.hasResult() ? new ActiveSource(a.source, 0 /* State.Inactive */) : a);
            for (let effect of tr.effects)
@@ -24310,6 +24390,7 @@
    let drag = new Drag();
 
    document.addEventListener('mousedown', (event) => {
+     if (event.button !== 0) return
      if (!event.target.classList.contains('col-resizer')) return
 
      drag = new Drag();
@@ -24366,10 +24447,11 @@
    });
 
    class ResizeTable extends HTMLTableElement {
-     constructor (columns, rows, cellRenderer) {
+     constructor (columns, rows, headerRenderer, cellRenderer) {
        super();
 
        this.columns = columns;
+       this.headerRenderer = headerRenderer;
        this.cellRenderer = cellRenderer;
 
        this.style.tableLayout = 'auto';
@@ -24408,7 +24490,11 @@
            resizerElement.dataset.colId = colElement.dataset.colId;
            contentWrapperElement.appendChild(resizerElement);
 
-           nameElement.innerText = column;
+           if (headerRenderer) {
+             nameElement.appendChild(headerRenderer(headerElement, index, column));
+           } else {
+             nameElement.innerText = column;
+           }
          });
 
          headerTrElement.appendChild(document.createElement('th'));
@@ -24475,21 +24561,21 @@
        this.tbodyElement = tbodyElement;
 
        let highlight = false;
-       rows.forEach(function (row) {
+       rows.forEach(function (row, rowIndex) {
          const rowElement = document.createElement('tr');
          if (highlight) {
            rowElement.classList.add('highlighted-row');
          }
          highlight = !highlight;
          tbodyElement.appendChild(rowElement);
-         row.forEach(function (value, index) {
+         row.forEach(function (value, columnIndex) {
+           const cellElement = document.createElement('td');
            if (cellRenderer) {
-             cellRenderer(rowElement, index, value);
+             cellElement.appendChild(cellRenderer(cellElement, rowIndex, columnIndex, value));
            } else {
-             const cellElement = document.createElement('td');
              cellElement.innerText = value;
-             rowElement.appendChild(cellElement);
            }
+           rowElement.appendChild(cellElement);
          });
          rowElement.appendChild(document.createElement('td'));
        });
@@ -24502,6 +24588,96 @@
 
    customElements.define('resize-table', ResizeTable, { extends: 'table' });
 
+   function styleInject(css, ref) {
+     if ( ref === void 0 ) ref = {};
+     var insertAt = ref.insertAt;
+
+     if (!css || typeof document === 'undefined') { return; }
+
+     var head = document.head || document.getElementsByTagName('head')[0];
+     var style = document.createElement('style');
+     style.type = 'text/css';
+
+     if (insertAt === 'top') {
+       if (head.firstChild) {
+         head.insertBefore(style, head.firstChild);
+       } else {
+         head.appendChild(style);
+       }
+     } else {
+       head.appendChild(style);
+     }
+
+     if (style.styleSheet) {
+       style.styleSheet.cssText = css;
+     } else {
+       style.appendChild(document.createTextNode(css));
+     }
+   }
+
+   var css_248z = ".popup_popup-wrapper__huCTg {\n    position: absolute;\n    background: rgba(0, 0, 0, 0.3);\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    z-index: 2;\n}\n\n.popup_popup-content__iGYws {\n    position: absolute;\n    top: 50px;\n    left: 50px;\n    height: calc(100% - 100px);\n    width: calc(100% - 100px);\n    background: #fff;\n    border: 1px solid #888;\n}\n\n.popup_popup-pre__gF3-Q {\n    position: absolute;\n    top: 40px;\n    left: 0;\n    height: calc(100% - 112px);\n    width: calc(100% - 20px);\n    overflow: auto;\n    font-size: 18px;\n    border-top: 1px solid #ddd;\n    border-bottom: 1px solid #ddd;\n    margin: 0px;\n    padding: 10px;\n    background: #fff;\n    font-family: monospace;\n}\n\n.popup_popup-pre__gF3-Q:focus {\n    outline: none;\n}\n.popup_popup-close__3GBw3 {\n    position: absolute;\n    right: 20px;\n    bottom: 10px;\n    width: 100px;\n    height: 30px;\n    cursor: pointer;\n    font-family: Helvetica, sans-serif;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 18px;\n    color: #333;\n    border: 1px solid #888;\n    background: #fff;\n}\n\n.popup_popup-close__3GBw3:active {\n    background-color: #e6e6e6;\n}\n\n.popup_popup-title__W2N2J {\n    position: absolute;\n    left: 60px;\n    top: 60px;\n    font-family: Helvetica, sans-serif;\n    font-size: 18px;\n    color: #333;\n    font-weight: bold;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: calc(100% - 120px);\n}\n";
+   var styles = {"popup-wrapper":"popup_popup-wrapper__huCTg","popup-content":"popup_popup-content__iGYws","popup-pre":"popup_popup-pre__gF3-Q","popup-close":"popup_popup-close__3GBw3","popup-title":"popup_popup-title__W2N2J"};
+   styleInject(css_248z);
+
+   function createPopup (title, text) {
+     const wrapperElement = document.createElement('div');
+     wrapperElement.id = 'popup';
+     wrapperElement.classList.add(styles['popup-wrapper']);
+     document.body.appendChild(wrapperElement);
+
+     const contentElement = document.createElement('div');
+     contentElement.classList.add(styles['popup-content']);
+     wrapperElement.appendChild(contentElement);
+
+     const closeElement = document.createElement('input');
+     closeElement.id = 'popup-close';
+     closeElement.classList.add(styles['popup-close']);
+     closeElement.type = 'button';
+     closeElement.value = 'Close';
+     contentElement.appendChild(closeElement);
+
+     closeElement.addEventListener('click', (event) => {
+       document.body.removeChild(wrapperElement);
+     });
+
+     const titleElement = document.createElement('div');
+     titleElement.classList.add(styles['popup-title']);
+     titleElement.innerText = title;
+     wrapperElement.appendChild(titleElement);
+
+     const preElement = document.createElement('pre');
+     preElement.id = 'popup-pre';
+     preElement.classList.add(styles['popup-pre']);
+     contentElement.appendChild(preElement);
+     preElement.innerText = text;
+
+     wrapperElement.addEventListener('click', () => {
+       document.body.removeChild(wrapperElement);
+     });
+
+     contentElement.addEventListener('click', (event) => {
+       event.stopPropagation();
+     });
+
+     closeElement.focus();
+   }
+
+   document.addEventListener('keydown', (event) => {
+     if (event.code === 'Escape') {
+       const wrapperElement = document.getElementById('popup');
+       if (wrapperElement) {
+         event.preventDefault();
+         document.body.removeChild(wrapperElement);
+       }
+     } else if (event.code === 'Tab') {
+       const wrapperElement = document.getElementById('popup');
+       if (wrapperElement) {
+         event.preventDefault();
+         document.getElementById('popup-close').focus();
+       }
+     }
+   });
+
    /* global google */
 
    const PAGE_SIZE = 100;
@@ -24630,6 +24806,7 @@
          dropdownContent.classList.remove('submit-dropdown-content-show');
        }
      });
+
      window.editorView = createEditor(parent, window.metadata, onSubmit, onShiftSubmit);
    }
 
@@ -24857,13 +25034,11 @@
            }
            rows.push(row);
          }
-         const cellRenderer = function (rowElement, _columnIndex, value) {
-           const cellElement = document.createElement('td');
+         const cellRenderer = function (cellElement, _rowIndex, _columnIndex, value) {
            cellElement.style.textAlign = (typeof value) === 'string' ? 'left' : 'right';
-           cellElement.innerText = value;
-           rowElement.appendChild(cellElement);
+           return document.createTextNode(value)
          };
-         columnsElement.appendChild(new ResizeTable(columns, rows, cellRenderer));
+         columnsElement.appendChild(new ResizeTable(columns, rows, null, cellRenderer));
        }
 
        const indexEntries = Object.entries(table.indexes);
@@ -24883,13 +25058,11 @@
              rows.push(row);
            }
          }
-         const cellRenderer = function (rowElement, _columnIndex, value) {
-           const cellElement = document.createElement('td');
+         const cellRenderer = function (cellElement, _rowIndex, _columnIndex, value) {
            cellElement.style.textAlign = (typeof value) === 'string' ? 'left' : 'right';
-           cellElement.innerText = value;
-           rowElement.appendChild(cellElement);
+           return document.createTextNode(value)
          };
-         indexesElement.appendChild(new ResizeTable(columns, rows, cellRenderer));
+         indexesElement.appendChild(new ResizeTable(columns, rows, null, cellRenderer));
        }
      });
      window.structureLoaded = true;
@@ -25130,6 +25303,9 @@
                }
              }
              displaySqlFetch(sqlFetch);
+           }).catch(function (error) {
+             setSqlFetchError(sqlFetch, error);
+             displaySqlFetch(sqlFetch);
            });
          } else {
            response.text().then((result) => {
@@ -25137,20 +25313,28 @@
              sqlFetch.errorMessage = 'failed to execute query';
              sqlFetch.errorDetails = result;
              displaySqlFetch(sqlFetch);
+           }).catch(function (error) {
+             setSqlFetchError(sqlFetch, error);
+             displaySqlFetch(sqlFetch);
            });
          }
        })
        .catch(function (error) {
-         if (sqlFetch.state === 'pending') {
-           sqlFetch.endedAt = window.performance.now();
-           sqlFetch.state = 'error';
-           sqlFetch.errorMessage = 'failed to execute query';
-           sqlFetch.errorDetails = error;
-         }
+         setSqlFetchError(sqlFetch, error);
          displaySqlFetch(sqlFetch);
        });
    }
 
+   function setSqlFetchError (sqlFetch, error) {
+     // Ignore the error unless pending since the error may be the result of aborting.
+     if (sqlFetch.state === 'pending') {
+       sqlFetch.endedAt = window.performance.now();
+       sqlFetch.state = 'error';
+       sqlFetch.errorMessage = 'failed to execute query';
+       sqlFetch.errorDetails = error;
+     }
+   }
+
    function parseSqlVariables (params) {
      return Object.fromEntries(
        Array.from(params).filter(([key]) => {
@@ -25272,10 +25456,17 @@
      return abbrElement
    };
 
-   const resultCellRenderer = function (rowElement, columnIndex, value) {
+   const resultCellRenderer = function (cellElement, rowIndex, columnIndex, value) {
      const column = window.sqlFetch.result.columns[columnIndex];
      const columnType = window.sqlFetch.result.column_types[columnIndex];
 
+     cellElement.dataset.column = columnIndex.toString();
+     cellElement.dataset.row = rowIndex.toString();
+
+     if (typeof value === 'string' && value.indexOf('\n') >= 0) {
+       value = value.replaceAll('\n', '¶');
+     }
+
      if (value && window.metadata.columns[column]?.links?.length > 0) {
        const linksElement = document.createElement('div');
        window.metadata.columns[column].links.forEach((link) => {
@@ -25292,17 +25483,22 @@
        wrapperElement.appendChild(linksElement);
        wrapperElement.appendChild(textElement);
 
-       const columnElement = document.createElement('td');
-       columnElement.appendChild(wrapperElement);
-       rowElement.appendChild(columnElement);
+       return wrapperElement
      } else {
-       const cellElement = document.createElement('td');
        cellElement.style.textAlign = columnType === 'string' ? 'left' : 'right';
-       cellElement.innerText = value;
-       rowElement.appendChild(cellElement);
+       return document.createTextNode(value)
      }
    };
 
+   function resultHeaderRenderer (headerElement, columnIndex, value) {
+     headerElement.dataset.column = columnIndex.toString();
+
+     if (typeof value === 'string' && value.indexOf('\n') >= 0) {
+       value = value.replaceAll('\n', '¶');
+     }
+     return document.createTextNode(value)
+   }
+
    function displaySqlFetchInResultTab (fetch) {
      if (fetch.state === 'pending' || fetch.spinner === 'always') {
        clearResultBox();
@@ -25352,13 +25548,45 @@
      } else {
        clearResultBox();
        const resultBoxElement = document.getElementById('result-box');
-       tableElement = new ResizeTable(fetch.result.columns, rows, resultCellRenderer);
+       tableElement = new ResizeTable(fetch.result.columns, rows, resultHeaderRenderer, resultCellRenderer);
        tableElement.id = 'result-table';
+       registerTableCellPopup(tableElement);
        resultBoxElement.appendChild(tableElement);
      }
      tableElement.setAttribute('data-page', fetch.page);
    }
 
+   function registerTableCellPopup (tableElement) {
+     const listener = (event) => {
+       if (event.which === 1 && event.detail === 2) {
+         let node = event.target;
+         while (!['td', 'th', 'table'].includes(node.tagName.toLowerCase()) && node.parentNode) {
+           node = node.parentNode;
+         }
+         if (node.tagName.toLowerCase() === 'td') {
+           if (event.type === 'mousedown') {
+             const row = parseInt(node.dataset.row);
+             const column = parseInt(node.dataset.column);
+             const title = window.sqlFetch.result.columns[column].replaceAll('\n', '¶');
+             createPopup(title, window.sqlFetch.result.rows[row][column]);
+           }
+           event.preventDefault();
+         } else if (node.tagName.toLowerCase() === 'th') {
+           if (event.type === 'mousedown') {
+             const column = parseInt(node.dataset.column);
+             const value = window.sqlFetch.result.columns[column];
+             const title = value.replaceAll('\n', '¶');
+             createPopup(title, value);
+           }
+           event.preventDefault();
+         }
+       }
+     };
+     // We only open the popup on mouseup but we need to preventDefault on mousedown to avoid the clicked text from
+     // being highlighted.
+     addEventListener(tableElement, 'mouseup', listener);
+     addEventListener(tableElement, 'mousedown', listener);
+   }
    function disableDownloadButtons () {
      document.getElementById('submit-dropdown-button-download-csv').classList.add('disabled');
      document.getElementById('submit-dropdown-button-copy-csv').classList.add('disabled');
@@ -25389,15 +25617,10 @@
    }
 
    function displaySqlFetchError (message, details) {
-     let statusMessage = 'error: ' + message;
-     if (statusMessage.length > 90) {
-       statusMessage = statusMessage.substring(0, 90) + '…';
-     }
      if (details) {
-       console.log(`${message}\n${details}`);
-       statusMessage += ' (check console)';
+       console.log(details);
      }
-     setStatus(statusMessage);
+     setStatus(message);
    }
 
    function clearSpinner () {
@@ -25505,14 +25728,14 @@
      const elapsed = Math.round(100 * (sqlFetch.getDuration() / 1000.0)) / 100;
 
      let message;
-     if (result.total_rows === 1) {
-       message = `${result.total_rows} row (${elapsed}s)`;
+     if (result.rows.length === 1) {
+       message = `1 row returned after ${elapsed}s`;
      } else {
-       message = `${result.total_rows.toLocaleString()} rows (${elapsed}s)`;
+       message = `${result.rows.length.toLocaleString()} rows returned after ${elapsed}s`;
      }
 
      if (result.total_rows > result.rows.length) {
-       message += ` (truncated to ${result.rows.length.toLocaleString()})`;
+       message += ` (truncated from ${result.total_rows.toLocaleString()})`;
      }
      setStatus(message);
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sqlui
 version: !ruby/object:Gem::Version
-  version: 0.1.59
+  version: 0.1.60
 platform: ruby
 authors:
 - Nick Dower
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-12-11 00:00:00.000000000 Z
+date: 2023-01-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: airbrake