From 46af9fb8749c68b02609a161fed2ca0d2b7c9c19 Mon Sep 17 00:00:00 2001
From: glasstiger <94906625+glasstiger@users.noreply.github.com>
Date: Wed, 6 Nov 2024 12:41:45 +0000
Subject: [PATCH] chore(ui): handle and display error received while scrolling
 the grid (#348)

* chore(ui): handle and display error received while scrolling the grid

* test

* improved test

* merge

* update submodule

* update submodule

* update submodule

* update submodule

---------

Co-authored-by: Vlad Ilyushchenko <bluestreak@gmail.com>
---
 .../cypress/integration/console/grid.spec.js  | 13 +++++++
 packages/browser-tests/questdb                |  2 +-
 .../web-console/src/scenes/Result/index.tsx   | 34 +++++++++++++------
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/packages/browser-tests/cypress/integration/console/grid.spec.js b/packages/browser-tests/cypress/integration/console/grid.spec.js
index 25460c2eb..933909c5a 100644
--- a/packages/browser-tests/cypress/integration/console/grid.spec.js
+++ b/packages/browser-tests/cypress/integration/console/grid.spec.js
@@ -59,6 +59,19 @@ describe("questdb grid", () => {
     cy.getGridViewport().scrollTo("bottom");
   });
 
+  it("multiple scrolls till the bottom with error", () => {
+    const rows = 1200;
+    cy.typeQuery(`select simulate_crash('P') from long_sequence(${rows})`);
+    cy.runLine();
+
+    cy.getGridViewport().scrollTo(0, 999 * rowHeight);
+    cy.getCollapsedNotifications().should("contain", "1,200 rows in");
+
+    cy.getGridViewport().scrollTo("bottom");
+    cy.wait(100);
+    cy.getCollapsedNotifications().should("contain", "HTTP 400 (Bad request)");
+  });
+
   it("copy cell into the clipboard", () => {
     cy.typeQuery("select x from long_sequence(10)");
     cy.runLine();
diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb
index aa44288ce..1620d78e5 160000
--- a/packages/browser-tests/questdb
+++ b/packages/browser-tests/questdb
@@ -1 +1 @@
-Subproject commit aa44288ce957601c92df80659bb882a3b8b06292
+Subproject commit 1620d78e560d08db2ca8475262fd84879299fcee
diff --git a/packages/web-console/src/scenes/Result/index.tsx b/packages/web-console/src/scenes/Result/index.tsx
index 843fecb3d..eddb3adce 100644
--- a/packages/web-console/src/scenes/Result/index.tsx
+++ b/packages/web-console/src/scenes/Result/index.tsx
@@ -24,7 +24,7 @@
 
 import $ from "jquery"
 import React, { useContext, useEffect, useRef, useState } from "react"
-import { useSelector } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 import styled from "styled-components"
 import { Download2, Refresh } from "@styled-icons/remix-line"
 import { Reset } from "@styled-icons/boxicons-regular"
@@ -40,8 +40,8 @@ import {
   Text,
   Tooltip,
 } from "../../components"
-import { selectors } from "../../store"
-import { color, QueryRawResult } from "../../utils"
+import { actions, selectors } from "../../store"
+import {color, ErrorResult, QueryRawResult} from "../../utils"
 import * as QuestDB from "../../utils/questdb"
 import { ResultViewMode } from "scenes/Console/types"
 import { Button } from "@questdb/react-components"
@@ -49,6 +49,8 @@ import type { IQuestDBGrid } from "../../js/console/grid.js"
 import { eventBus } from "../../modules/EventBus"
 import { EventType } from "../../modules/EventBus/types"
 import { QuestContext } from "../../providers"
+import {QueryInNotification} from "../Editor/Monaco/query-in-notification";
+import {NotificationType} from "../../store/Query/types";
 
 const Root = styled.div`
   display: flex;
@@ -98,17 +100,29 @@ const Result = ({ viewMode }: { viewMode: ResultViewMode }) => {
   const activeSidebar = useSelector(selectors.console.getActiveSidebar)
   const gridRef = useRef<IQuestDBGrid | undefined>()
   const [gridFreezeLeftState, setGridFreezeLeftState] = useState<number>(0)
-
+  const dispatch = useDispatch()
+  
   useEffect(() => {
     const _grid = grid(
       document.getElementById("grid"),
       async function (sql, lo, hi, rendererFn: (data: QueryRawResult) => void) {
-        const result = await quest.queryRaw(sql, {
-          limit: `${lo},${hi}`,
-          nm: true,
-        })
-        if (result.type === QuestDB.Type.DQL) {
-          rendererFn(result)
+        try {
+          const result = await quest.queryRaw(sql, {
+            limit: `${lo},${hi}`,
+            nm: true,
+          })
+          if (result.type === QuestDB.Type.DQL) {
+            rendererFn(result)
+          }
+        } catch (err) {
+          dispatch(actions.query.stopRunning())
+          dispatch(
+            actions.query.addNotification({
+              content: <Text color="red">{(err as ErrorResult).error}</Text>,
+              sideContent: <QueryInNotification query={sql} />,
+              type: NotificationType.ERROR,
+            }),
+          )
         }
       },
     )