Merge pull request #1516 from supabase/master

[pull] master from supabase:master

Author: pull[bot]

apps/docs/features/docs/Reference.mdx.tsx

@@ -1,13 +1,14 @@
 import matter from 'gray-matter'
 import { readFile } from 'node:fs/promises'
 import { join } from 'node:path'
-
+import { type ComponentProps } from 'react'
 import CliGlobalFlagsHandler from '~/components/reference/enrichments/cli/CliGlobalFlagsHandler'
 import { MDXRemoteBase } from '~/features/docs/MdxBase'
 import { components } from '~/features/docs/MdxBase.shared'
 import { RefSubLayout } from '~/features/docs/Reference.ui'
 import { cache_fullProcess_withDevCacheBust } from '~/features/helpers.fs'
 import { REF_DOCS_DIRECTORY } from '~/lib/docs'
+import { CodeBlock } from '../ui/CodeBlock/CodeBlock'
 
 async function getRefMarkdownInternal(relPath: string) {
   const fullPath = join(REF_DOCS_DIRECTORY, relPath + '.mdx')
@@ -42,7 +43,14 @@ interface MDXRemoteRefsProps {
 }
 
 function MDXRemoteRefs({ source }: MDXRemoteRefsProps) {
-  const refComponents = { ...components, RefSubLayout, CliGlobalFlagsHandler }
+  const refComponents = {
+    ...components,
+    // Override the CodeBlock used for normal guides to skip type generation
+    // because it is too resource-intensive
+    pre: (props: ComponentProps<typeof CodeBlock>) => <CodeBlock {...props} skipTypeGeneration />,
+    RefSubLayout,
+    CliGlobalFlagsHandler,
+  }
 
   return <MDXRemoteBase source={source} components={refComponents} />
 }

apps/docs/features/ui/CodeBlock/CodeBlock.tsx

@@ -25,17 +25,19 @@ export async function CodeBlock({
   lineNumbers = true,
   contents,
   children,
+  skipTypeGeneration,
 }: PropsWithChildren<{
   className?: string
   lang?: string
   lineNumbers?: boolean
   contents?: string
+  skipTypeGeneration?: boolean
 }>) {
   let code = (contents || extractCode(children)).trim()
   const lang = tryToBundledLanguage(langSetting) || extractLang(children)
 
   let twoslashed = null as null | Map<number, Map<number, Array<NodeHover>>>
-  if (TWOSLASHABLE_LANGS.includes(lang)) {
+  if (!skipTypeGeneration && TWOSLASHABLE_LANGS.includes(lang)) {
     try {
       const { code: editedCode, nodes } = twoslasher(code)
       const hoverNodes: Array<NodeHover> = nodes.filter((node) => node.type === 'hover')

apps/studio/components/ui/QueryBlock/QueryBlock.tsx

@@ -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

@@ -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",