diff --git a/src/components/CodeViewer/CodeInterpreter.tsx b/src/components/CodeViewer/CodeInterpreter.tsx
index a820679cf64..be19a646a31 100644
--- a/src/components/CodeViewer/CodeInterpreter.tsx
+++ b/src/components/CodeViewer/CodeInterpreter.tsx
@@ -15,6 +15,7 @@ import { formatBytes, formatReadableRows, roundToDynamicPrecision } from './util
import { getGoogleAnalyticsUserIdFromBrowserCookie } from '../../lib/google/google'
+
interface Props {
queryString: string
runnable: boolean
@@ -55,6 +56,21 @@ function CodeInterpreter({
}
})
+ function useWindowWidth(): number {
+ const [width, setWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 0)
+
+ useEffect(() => {
+ function handleResize() {
+ setWidth(window.innerWidth)
+ }
+
+ window.addEventListener('resize', handleResize)
+ return () => window.removeEventListener('resize', handleResize)
+ }, [])
+
+ return width
+ }
+
function generateId(): string {
return short.generate().toUpperCase().slice(0, 27)
}
@@ -197,28 +213,29 @@ function CodeInterpreter({
)
return (
-
+
{show_results}
{chart && (
-
-
- {
- setCurrentView(DefaultView.Table)
- }}
- value={DefaultView.Table}
- />
- {
- setCurrentView(DefaultView.Chart)
- }}
- value={DefaultView.Chart}
- />
-
+
+
+ {
+ setCurrentView(DefaultView.Table)
+ }}
+ value={DefaultView.Table}
+ />
+ {
+ setCurrentView(DefaultView.Chart)
+ }}
+ value={DefaultView.Chart}
+ />
+
)}
@@ -227,16 +244,20 @@ function CodeInterpreter({
}
}
+ const windowWidth = useWindowWidth()
+
const runButton = () => {
+
if (runnable) {
return (
-
+
{hideTableResultButton()}
{show_statistics && results?.response?.statistics && (
-
- {`Read ${formatReadableRows(results.response.statistics.rows_read)} rows and ${formatBytes(results.response.statistics.bytes_read)} in ${roundToDynamicPrecision(results.response.statistics.elapsed)} secs`}
+
600 ? '12': '10'}px] mx-auto italic ${chart ? 'ml-[8px]' : ''}`}>
+ { windowWidth > 600 ? `Read ${formatReadableRows(results.response.statistics.rows_read)} rows and ${formatBytes(results.response.statistics.bytes_read)} in ${roundToDynamicPrecision(results.response.statistics.elapsed)} secs` :
+ `Read ${formatReadableRows(results.response.statistics.rows_read)} rows in ${roundToDynamicPrecision(results.response.statistics.elapsed)} secs` }
)}