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` }
)}