dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 17:35:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix query block not showing labels (#35328)

Browse Source 
* Fix query block not showing labels

* Readd the css file for react-resizable.

* Add react-resizable package to resolve a style.css file not found issue

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
This commit is contained in:
Joshen LimandIvan Vasilov authored and GitHub committed 2025-04-28 22:13:38 +02:00
1 parent 1a71f3487c
commit 9088aa7fe8
3 files changed
+41 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/studio/components/ui/QueryBlock/QueryBlock.tsx
+30 -11
View File
@@ -1,6 +1,6 @@
import { Code, Play } from 'lucide-react'
import { DragEvent, ReactNode, useEffect, useMemo, useState } from 'react'
import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { toast } from 'sonner'
import { useParams } from 'common'
@@ -9,6 +9,7 @@ import { ChartConfig } from 'components/interfaces/SQLEditor/UtilityPanel/ChartC
import Results from 'components/interfaces/SQLEditor/UtilityPanel/Results'
import { usePrimaryDatabase } from 'data/read-replicas/replicas-query'
import { QueryResponseError, useExecuteSqlMutation } from 'data/sql/execute-sql-mutation'
import dayjs from 'dayjs'
import { Parameter, parseParameters } from 'lib/sql-parameters'
import { Dashboards } from 'types'
import { ChartContainer, ChartTooltip, ChartTooltipContent, cn, CodeBlock, SQL_ICON } from 'ui'
@@ -133,9 +134,14 @@ export const QueryBlock = ({
const formattedQueryResult = useMemo(() => {
// Make sure Y axis values are numbers
return queryResult?.map((row) => {
return Object.fromEntries(Object.entries(row).map(([key, value]) => [key, Number(value)]))
return Object.fromEntries(
Object.entries(row).map(([key, value]) => {
if (key === yKey) return [key, Number(value)]
else return [key, value]
})
)
})
}, [queryResult])
}, [queryResult, yKey])
const [parameterValues, setParameterValues] = useState<Record<string, string>>({})
const [showWarning, setShowWarning] = useState<'hasWriteOperation' | 'hasUnknownFunctions'>()
@@ -151,6 +157,10 @@ export const QueryBlock = ({
const postgresConnectionString = primaryDatabase?.connectionString
const readOnlyConnectionString = primaryDatabase?.connection_string_read_only
const chartData = chartSettings.cumulative
? getCumulativeResults({ rows: formattedQueryResult ?? [] }, chartSettings)
: formattedQueryResult
const { mutate: execute, isLoading: isExecuting } = useExecuteSqlMutation({
onSuccess: (data) => {
onResults?.(data.result)
@@ -166,6 +176,14 @@ export const QueryBlock = ({
},
})
const getDateFormat = (key: any) => {
const value = chartData?.[0]?.[key] || ''
if (typeof value === 'number') return 'number'
if (dayjs(value).isValid()) return 'date'
return 'string'
}
const xKeyDateFormat = getDateFormat(xKey)
const handleExecute = () => {
if (!sql || isLoading) return
@@ -372,21 +390,22 @@ export const QueryBlock = ({
>
<BarChart
accessibilityLayer
margin={{ left: 0, right: 0 }}
data={
chartSettings.cumulative
? getCumulativeResults({ rows: formattedQueryResult ?? [] }, chartSettings)
: formattedQueryResult
}
margin={{ left: -20, right: 0, top: 10 }}
data={chartData}
>
<CartesianGrid vertical={false} />
<XAxis
tickLine
dataKey={xKey}
tickLine={false}
axisLine={false}
tickMargin={8}
interval="preserveStartEnd"
tickMargin={4}
minTickGap={32}
tickFormatter={(value) =>
xKeyDateFormat === 'date' ? dayjs(value).format('MMM D YYYY HH:mm') : value
}
/>
<YAxis tickLine={false} axisLine={false} tickMargin={4} />
<ChartTooltip content={<ChartTooltipContent className="w-[150px]" />} />
<Bar dataKey={yKey} fill="var(--chart-1)" radius={4} />
</BarChart>
apps/studio/package.json
+1
View File
@@ -107,6 +107,7 @@
"react-inlinesvg": "^4.0.4",
"react-intersection-observer": "^9.5.3",
"react-markdown": "^8.0.3",
"react-resizable": "3.0.5",
"react-simple-maps": "4.0.0-beta.6",
"react-use": "^17.5.0",
"react-virtualized-auto-sizer": "^1.0.20",
pnpm-lock.yaml
Generated
+10 -7
View File
@@ -796,6 +796,9 @@ importers:
react-markdown:
specifier: ^8.0.3
version: 8.0.7(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1)
react-resizable:
specifier: 3.0.5
version: 3.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react-simple-maps:
specifier: 4.0.0-beta.6
version: 4.0.0-beta.6(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1616,7 +1619,7 @@ importers:
dependencies:
'@mertasan/tailwindcss-variables':
specifier: ^2.2.3
version: 2.7.0(autoprefixer@10.4.16(postcss@8.4.38))(postcss@8.4.38)
version: 2.7.0(autoprefixer@10.4.16(postcss@8.5.3))(postcss@8.5.3)
'@radix-ui/colors':
specifier: ^0.1.8
version: 0.1.9
@@ -16598,11 +16601,11 @@ snapshots:
'@types/react': 18.3.3
react: 18.3.1
'@mertasan/tailwindcss-variables@2.7.0(autoprefixer@10.4.16(postcss@8.4.38))(postcss@8.4.38)':
'@mertasan/tailwindcss-variables@2.7.0(autoprefixer@10.4.16(postcss@8.5.3))(postcss@8.5.3)':
dependencies:
autoprefixer: 10.4.16(postcss@8.4.38)
autoprefixer: 10.4.16(postcss@8.5.3)
lodash: 4.17.21
postcss: 8.4.38
postcss: 8.5.3
'@mjackson/node-fetch-server@0.2.0': {}
@@ -22895,7 +22898,7 @@ snapshots:
debug: 4.4.0(supports-color@8.1.1)
enhanced-resolve: 5.17.1
eslint: 8.57.0(supports-color@8.1.1)
eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-plugin-import@2.29.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)
eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)
eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)
fast-glob: 3.3.2
get-tsconfig: 4.7.2
@@ -22907,7 +22910,7 @@ snapshots:
- eslint-import-resolver-webpack
- supports-color
eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-plugin-import@2.29.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1):
eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1):
dependencies:
debug: 3.2.7(supports-color@8.1.1)
optionalDependencies:
@@ -22934,7 +22937,7 @@ snapshots:
doctrine: 2.1.0
eslint: 8.57.0(supports-color@8.1.1)
eslint-import-resolver-node: 0.3.9(supports-color@8.1.1)
eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-plugin-import@2.29.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)
eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)
hasown: 2.0.2
is-core-module: 2.13.1
is-glob: 4.0.3