Bug: Auto-refresh does not trigger in query views

api/routes.ts

@@ -23,12 +23,7 @@ import {
   LogsInputSchema,
 } from '/api/clickhouse-client.ts'
 import { decodeSession, decryptMessage, encryptMessage } from '/api/user.ts'
-import {
-  type ColumnInfo,
-  fetchTablesData,
-  runSQL,
-  SQLQueryError,
-} from '/api/sql.ts'
+import { fetchTablesData, runSQL, SQLQueryError } from '/api/sql.ts'
 
 const withUserSession = async ({ cookies }: RequestContext) => {
   const session = await decodeSession(cookies.session)
@@ -471,9 +466,10 @@ const defs = {
       }
 
       try {
+        const columnsMap = new Map(tableDef.columns.map((c) => [c.name, c]))
         return fetchTablesData(
           { ...input, deployment: dep, table },
-          tableDef.columnsMap as unknown as Map<string, ColumnInfo>,
+          columnsMap,
         )
       } catch (err) {
         log.error('fetchTablesData-error', { stack: (err as Error)?.stack })

api/sql.ts

@@ -118,10 +118,10 @@ export async function refreshOneSchema(
     const tables = [...tableMap.values()].map((t) => ({
       ...t,
       columns: t.columns.sort((a, b) => a.ordinal - b.ordinal),
-      columnsMap: t.columns.reduce((map, col) => {
-        map.set(col.name, col)
-        return map
-      }, new Map<string, ColumnInfo>()),
+      columnsMap: t.columns.reduce((obj, col) => {
+        obj[col.name] = col
+        return obj
+      }, {} as Record<string, ColumnInfo>),
     }))
     const payload = {
       deploymentUrl: dep.url,

web/components/BackgroundPattern.tsx

@@ -246,7 +246,7 @@ export const BackgroundPattern = () => {
   }
 
   return (
-    <div class='fixed inset-0 overflow-hidden pointer-events-none z-0'>
+    <div class='fixed inset-0 w-full h-full max-w-[100vw] overflow-hidden pointer-events-none z-0'>
       <div
         class='absolute inset-0 opacity-10'
         style={{

web/components/SideBar.tsx

@@ -23,7 +23,7 @@ export function Sidebar(
 ) {
   const sb = url.params.sb
   return (
-    <div class='drawer-side'>
+    <div class='drawer-side overflow-hidden'>
       <div
         class={`${
           sb ? 'w-64' : 'w-16'

web/pages/DeploymentPage.tsx

@@ -416,7 +416,7 @@ const TableFooter = ({ rows }: { rows: AnyRecord[] }) => {
 const TableContent = ({ rows }: { rows: AnyRecord[] }) => {
   const columns = Object.keys(rows[0] || {})
   return (
-    <table class='table table-zebra w-full'>
+    <table class='table table-zebra min-w-full'>
       <TableHeader columns={columns} />
       <tbody>
         {rows.length === 0