Files
supabase/apps/studio/components
Jordi EnricandClaude Opus 4.8 aaa6b770f9 perf(unified-logs): single-scan arrayJoin facet count query
Replace the OTEL facet count query's 13x UNION ALL with a single-pass
arrayJoin "explode" over `logs`. Each row is fanned out into one row per
dimension and `multiIf` picks that dimension's value, so all facet counts
plus the total are computed in one scan instead of 13.

The output (dimension, value, count) shape is unchanged, so the consumer
in unified-logs-count-query.ts needs no changes. Reuses the existing
LOG_TYPE_EXPR / LEVEL_EXPR / STATUS_EXPR expressions.

Based on the single-scan SQL shape Chase verified against the
logs.all.otel endpoint (no CTEs / window fns / tuples / subqueries).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-02 13:28:34 +02:00
..

Writing components

Where to create your components

  • For components that declare the general structure and layout of a page:
    • /components/layouts/xxx
  • For components that are tightly coupled to a specific interface:
    • /components/interfaces/xxx
  • For components that are meant to be reusable across multiple pages:
    • /components/ui/xxx
  • Note: We're gradually moving files out of the to-be-cleaned folder into the respective folders as we refactor

Component structure

  • If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an index.tsx as an entry point
  • Otherwise it can just be a file on its own
  • For example:
    • components/ui
      - SampleComponentA
        - SampleComponentA.tsx
        - SampleComponentA.constants.ts
        - SampleComponentA.utils.ts
        - SampleComponentA.types.ts
        - index.ts
      - SampleComponentB.tsx
      

Template for building components


// Declare the prop types of your component
interface ComponentAProps {
  sampleProp: string
}

// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
  return <div>ComponentA: {sampleProp}</div>
}

export default ComponentA