---
url: /api/ai.md
---
# @sqlrooms/ai

An AI integration package for SQLRooms that provides components and utilities for adding AI-powered features to your data applications. This package enables natural language querying, data analysis, and AI-assisted insights.

## Features

* 🤖 **AI Query Interface**: Natural language to SQL conversion
* 📊 **Automated Analysis**: AI-powered data analysis and insights
* 🔄 **State Management**: Zustand-based state management for AI features
* 🧩 **UI Components**: Ready-to-use components for AI interactions
* 📝 **Query History**: Track and manage AI query history
* 🎯 **Tool Integration**: Framework for AI tools and actions

## Installation

```bash
npm install @sqlrooms/ai
# or
yarn add @sqlrooms/ai
```

Since version 0.8.2, you will need to install the LLM providers you want to use. For example, to use XAI, you can install the `@ai-sdk/xai` package:

```bash
npm install @ai-sdk/xai
```

Since version 0.26.0, you don't need to install the LLM providers anymore. You can use AiSettingsSlice to configure the LLM providers, and sqlrooms/ai will use the configured LLM providers via OpenAI compatible SDK.

```tsx
import {createAiSettingsSlice} from '@sqlrooms/ai';

// Create a room store with AI capabilities
const {roomStore, useRoomStore} = createRoomStore({
  ...createAiSettingsSlice({
    config: {
      providers: {
    openai: {
      baseUrl: 'https://api.openai.com/v1',
      apiKey: '',
      models: [
        {
          id: 'gpt-4.1',
          modelName: 'gpt-4.1',
        },
      },
    },
  }),
});
```

You can also pass a custom model provider to the AiSlice.

```tsx
import {createAiSlice} from '@sqlrooms/ai';

// Create a room store with AI capabilities
const {roomStore, useRoomStore} = createRoomStore({
  ...createAiSlice({
    getCustomModel: () => {
      return xai('grok-4');
    },
    ...
  }),
});
```

## Basic Usage

### Setting Up AI Integration

```tsx
import {createAiSlice} from '@sqlrooms/ai';
import {createRoomStore} from '@sqlrooms/room-shell';

// Create a room store with AI capabilities
const {roomStore, useRoomStore} = createRoomStore({
  // Base room configuration
  ...createRoomShellSlice({
    config: {
      // Your room configuration
    },
  }),
  // Add AI settings slice
  ...createAiSettingsSlice({
    config: {
      // Your AI settings configuration
    },
  }),
  // Add AI slice
  ...createAiSlice({
    initialAnalysisPrompt: 'What insights can you provide from my data?',
    // Optional: Add custom tools
    tools: {
      // Your custom tools
    },
    // Optional: Custom instructions for the AI
    getInstructions: (tablesSchema) => {
      return `Analyze the following tables: ${tablesSchema.map((t) => t.name).join(', ')}`;
    },
  }),
});

function MyApp() {
  return (
    <RoomStateProvider roomStore={roomStore}>
      <MyDataApp />
    </RoomStateProvider>
  );
}
```

### Advanced Store Configuration

For more complex applications, you can combine multiple slices:

```tsx
import {createAiSlice} from '@sqlrooms/ai';
import {
  createSqlEditorSlice,
  createDefaultSqlEditorConfig,
} from '@sqlrooms/sql-editor';
import {createRoomStore, createRoomShellSlice} from '@sqlrooms/room-shell';

// Define your application state type
export type RoomState = RoomState<RoomConfig> &
  AiSliceState &
  SqlEditorSliceState;

// Create the store with multiple slices
export const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
  (set, get, store) => ({
    // Base room slice
    ...createRoomShellSlice({
      config: {
        ...createDefaultSqlEditorConfig(),
      },
    }),
    // AI settings slice
    ...createAiSettingsSlice({
      config: {
        // Your AI settings configuration
      },
    }),
    // Ai config slice
    ...createAiConfigSlice({
      config: {
        // Optional: Pre-configured AI sessions
        sessions: [
          {
            id: 'default-session',
            name: 'Default Analysis',
            modelProvider: 'openai',
            model: 'gpt-4o',
            analysisResults: [],
            createdAt: new Date(),
          },
        ],
        currentSessionId: 'default-session',
      },
    }),
    // AI slice
    ...createAiSlice({
      initialAnalysisPrompt: 'What insights can you provide from my data?',
      tools: {
        // Your custom tools
      },
      getInstructions: (tablesSchema) => {
        return `Analyze the following tables: ${tablesSchema.map((t) => t.name).join(', ')}`;
      },
    }),
    // SQL Editor slice
    ...createSqlEditorSlice(),
  }),
);
```

### Using AI Query Controls

```tsx
import {QueryControls} from '@sqlrooms/ai';

function AiQueryPanel() {
  return (
    <div className="rounded-lg border p-4">
      <h2 className="mb-4 text-xl font-bold">Ask AI</h2>
      <QueryControls
        placeholder="Ask a question about your data..."
        onSubmit={(query) => console.log('Processing query:', query)}
      />
    </div>
  );
}
```

### Displaying Analysis Results

```tsx
import {AnalysisResultsContainer, AnalysisResult} from '@sqlrooms/ai';

function AnalysisPanel() {
  // Get the current session and its analysis results
  const currentSession = useRoomStore((state) => state.ai.getCurrentSession());
  const analysisResults = currentSession?.analysisResults || [];

  return (
    <div className="rounded-lg border p-4">
      <h2 className="mb-4 text-xl font-bold">AI Analysis</h2>
      <AnalysisResultsContainer>
        {analysisResults.map((result) => (
          <AnalysisResult key={result.id} result={result} />
        ))}
      </AnalysisResultsContainer>
    </div>
  );
}
```

### Working with AI State

```tsx
function AiStatusIndicator() {
  const isRunningAnalysis = useRoomStore((state) => state.ai.isRunningAnalysis);
  const analysisPrompt = useRoomStore((state) => state.ai.analysisPrompt);
  const currentSession = useRoomStore((state) => state.ai.getCurrentSession());
  const lastResult =
    currentSession?.analysisResults[currentSession.analysisResults.length - 1];

  if (isRunningAnalysis) {
    return <div>AI is analyzing your data...</div>;
  }

  if (lastResult?.errorMessage) {
    return <div>Error: {lastResult.errorMessage.message}</div>;
  }

  if (analysisPrompt) {
    return <div>Last query: "{analysisPrompt}"</div>;
  }

  return <div>Ask AI a question about your data</div>;
}
```

## AiSlice API Reference

The AiSlice provides a comprehensive set of state fields and methods for managing AI interactions in your application.

### State Fields

#### `analysisPrompt`

The current prompt text entered by the user for analysis.

```tsx
const prompt = useRoomStore((state) => state.ai.analysisPrompt);
```

#### `isRunningAnalysis`

Boolean flag indicating whether an analysis is currently in progress.

```tsx
const isRunning = useRoomStore((state) => state.ai.isRunningAnalysis);
```

#### `tools`

Record of available AI tools that can be used during analysis.

```tsx
const availableTools = useRoomStore((state) => state.ai.tools);
```

#### `analysisAbortController`

Optional AbortController instance that can be used to cancel an ongoing analysis.

```tsx
const abortController = useRoomStore(
  (state) => state.ai.analysisAbortController,
);
```

### Methods

#### `setAnalysisPrompt(prompt: string)`

Sets the current analysis prompt text.

```tsx
const setPrompt = useRoomStore((state) => state.ai.setAnalysisPrompt);
setPrompt('Analyze sales trends for the last quarter');
```

#### `startAnalysis()`

Starts the analysis process using the current prompt.

```tsx
const startAnalysis = useRoomStore((state) => state.ai.startAnalysis);
await startAnalysis();
```

#### `cancelAnalysis()`

Cancels any ongoing analysis.

```tsx
const cancelAnalysis = useRoomStore((state) => state.ai.cancelAnalysis);
cancelAnalysis();
```

#### `setAiModel(modelProvider: string, model: string)`

Sets the AI model and provider for the current session.

```tsx
const setModel = useRoomStore((state) => state.ai.setAiModel);
setModel('openai', 'gpt-4o');
```

#### `createSession(name?: string, modelProvider?: string, model?: string)`

Creates a new analysis session with optional name and model settings.

```tsx
const createSession = useRoomStore((state) => state.ai.createSession);
createSession('Financial Analysis', 'openai', 'gpt-4o');
```

#### `switchSession(sessionId: string)`

Switches to a different analysis session by ID.

```tsx
const switchSession = useRoomStore((state) => state.ai.switchSession);
switchSession('session-123');
```

#### `renameSession(sessionId: string, name: string)`

Renames an existing analysis session.

```tsx
const renameSession = useRoomStore((state) => state.ai.renameSession);
renameSession('session-123', 'Q4 Sales Analysis');
```

#### `deleteSession(sessionId: string)`

Deletes an analysis session by ID.

```tsx
const deleteSession = useRoomStore((state) => state.ai.deleteSession);
deleteSession('session-123');
```

#### `getCurrentSession()`

Returns the current active analysis session.

```tsx
const currentSession = useRoomStore((state) => state.ai.getCurrentSession());
```

#### `deleteAnalysisResult(sessionId: string, resultId: string)`

Deletes a specific analysis result from a session.

```tsx
const deleteResult = useRoomStore((state) => state.ai.deleteAnalysisResult);
deleteResult('session-123', 'result-456');
```

#### `findToolComponent(toolName: string)`

Finds the React component associated with a specific tool.

```tsx
const ChartComponent = useRoomStore((state) =>
  state.ai.findToolComponent('chart'),
);
```

## Data Structure

See [ai-core](https://github.com/sqlrooms/sqlrooms/tree/main/packages/ai-core) for the data structure.

## Advanced Features

* **Custom AI Tools**: Define custom tools for AI to use with the tool() function
* **Multiple Sessions**: Create and manage multiple analysis sessions for different purposes
* **Model Selection**: Switch between different AI models and providers
* **Result Management**: Save, delete, and organize analysis results
* **Conversation Context**: Maintain context across multiple queries in a session
* **Feedback Loop**: Collect user feedback to improve AI responses

For more information, visit the SQLRooms documentation.

## AI Settings Configuration

This package now includes comprehensive AI settings components. These components provide a complete set of UI elements for managing AI model configuration, parameters, and usage tracking.

### AI Settings Features

* **createAiSettingsSlice**: Function to create a Zustand slice for managing AI model configuration with room-shell integration
* **AiSettingsPanel**: Main configuration panel with modular sub-components for different configuration aspects
* **ProvidersSettings**: Component for configuring AI providers (OpenAI, Anthropic, etc.) with API keys and base URLs
* **ModelsSettings**: Component for managing available models and their parameters
* **ModelParametersSettings**: Component for configuring model parameters like max steps and system instructions
* **ModelSelector**: Standalone model selector component for quick model switching

### AI Settings Usage

#### Individual Components

```tsx
import {
  AiSettingsPanel,
  ModelSelector,
} from '@sqlrooms/ai';
import {useRoomStore} from '../store';

// Main configuration panel with sub-components
<AiSettingsPanel isOpen={isConfigOpen} setIsOpen={setIsConfigOpen}>
  <AiSettingsPanel.ProvidersSettings />
  <AiSettingsPanel.ModelsSettings />
  <AiSettingsPanel.ModelParametersSettings  />
</AiSettingsPanel>

// Standalone model selector
<ModelSelector />
```

### AI Settings API Reference

#### Core Components

* **`AiSettingsPanel`**: Main configuration panel with modular sub-components
  * `AiSettingsPanel.ProvidersSettings`: Configure AI providers (OpenAI, Anthropic, etc.)
  * `AiSettingsPanel.ModelsSettings`: Manage available models and their parameters
  * `AiSettingsPanel.ModelParametersSettings`: Configure model parameters and instructions
* **`ModelSelector`**: Standalone model selector for quick switching

#### Slice Configuration

The package uses a slice-based configuration system that integrates with SQLRooms room-shell:

* **`createAiSettingsSlice()`**: Creates the AI settings configuration slice for state management
* **`AiSettingsSliceConfig`**: TypeScript type for configuration schema
* **`createDefaultAiSettings(providers)`**: Helper to create default configuration with providers
* **`getApiKey(config, provider, model)`**: Utility to get API key from configuration
* **`getBaseUrl(config, provider, model)`**: Utility to get base URL from configuration

#### Store Integration

The AI settings configuration integrates with the main AI slice through helper functions:

* **`getApiKey()`**: Function to retrieve API key from current session and model config
* **`getMaxSteps()`**: Function to get max steps from model configuration
* **`getBaseUrl()`**: Function to get base URL from current session and model config
* **`getInstructions(tablesSchema)`**: Function to generate system instructions with optional custom instructions

## Classes

* [ToolAbortError](classes/ToolAbortError.md)

## Interfaces

* [AgentStreamResult](interfaces/AgentStreamResult.md)
* [UIMessageChunk](interfaces/UIMessageChunk.md)
* [AgentToolCall](interfaces/AgentToolCall.md)
* [AgentToolCallAdditionalData](interfaces/AgentToolCallAdditionalData.md)
* [ModelUsageData](interfaces/ModelUsageData.md)

## Type Aliases

* [DefaultToolsOptions](type-aliases/DefaultToolsOptions.md)
* [QueryToolParameters](type-aliases/QueryToolParameters.md)
* [QueryToolLlmResult](type-aliases/QueryToolLlmResult.md)
* [QueryToolAdditionalData](type-aliases/QueryToolAdditionalData.md)
* [QueryToolOptions](type-aliases/QueryToolOptions.md)
* [AiSettingsSliceConfig](type-aliases/AiSettingsSliceConfig.md)
* [AiSliceConfig](type-aliases/AiSliceConfig.md)
* [ErrorMessageSchema](type-aliases/ErrorMessageSchema.md)
* [AnalysisResultSchema](type-aliases/AnalysisResultSchema.md)
* [AnalysisSessionSchema](type-aliases/AnalysisSessionSchema.md)
* [ToolUIPart](type-aliases/ToolUIPart.md)
* [UIMessagePart](type-aliases/UIMessagePart.md)
* [AiSliceState](type-aliases/AiSliceState.md)
* [SessionType](type-aliases/SessionType.md)
* [AiSettingsSliceState](type-aliases/AiSettingsSliceState.md)

## Variables

* [QueryToolParameters](variables/QueryToolParameters.md)
* [AiSettingsSliceConfig](variables/AiSettingsSliceConfig.md)
* [AiSliceConfig](variables/AiSliceConfig.md)
* [ErrorMessageSchema](variables/ErrorMessageSchema.md)
* [AnalysisResultSchema](variables/AnalysisResultSchema.md)
* [AnalysisSessionSchema](variables/AnalysisSessionSchema.md)
* [AiThinkingDots](variables/AiThinkingDots.md)
* [AnalysisResult](variables/AnalysisResult.md)
* [AnalysisResultsContainer](variables/AnalysisResultsContainer.md)
* [ModelSelector](variables/ModelSelector.md)
* [PromptSuggestions](variables/PromptSuggestions.md)
* [QueryControls](variables/QueryControls.md)
* [ReasoningBox](variables/ReasoningBox.md)
* [SessionControls](variables/SessionControls.md)
* [ToolCallInfo](variables/ToolCallInfo.md)
* [DeleteSessionDialog](variables/DeleteSessionDialog.md)
* [SessionActions](variables/SessionActions.md)
* [SessionDropdown](variables/SessionDropdown.md)
* [SessionTitle](variables/SessionTitle.md)
* [AiModelParameters](variables/AiModelParameters.md)
* [AiModelUsage](variables/AiModelUsage.md)
* [AiModelsSettings](variables/AiModelsSettings.md)
* [AiProvidersSettings](variables/AiProvidersSettings.md)
* [AiSettingsPanel](variables/AiSettingsPanel.md)

## Functions

* [formatTablesForLLM](functions/formatTablesForLLM.md)
* [createDefaultAiInstructions](functions/createDefaultAiInstructions.md)
* [createDefaultAiTools](functions/createDefaultAiTools.md)
* [QueryToolResult](functions/QueryToolResult.md)
* [createQueryTool](functions/createQueryTool.md)
* [getQuerySummary](functions/getQuerySummary.md)
* [createDefaultAiConfig](functions/createDefaultAiConfig.md)
* [createAiSlice](functions/createAiSlice.md)
* [useStoreWithAi](functions/useStoreWithAi.md)
* [updateAgentToolCallData](functions/updateAgentToolCallData.md)
* [processAgentStream](functions/processAgentStream.md)
* [completeIncompleteToolCalls](functions/completeIncompleteToolCalls.md)
* [convertToAiSDKTools](functions/convertToAiSDKTools.md)
* [ToolErrorMessage](functions/ToolErrorMessage.md)
* [useAiChat](functions/useAiChat.md)
* [useScrollToBottom](functions/useScrollToBottom.md)
* [cleanupPendingAnalysisResults](functions/cleanupPendingAnalysisResults.md)
* [createAiSettingsSlice](functions/createAiSettingsSlice.md)
* [useStoreWithAiSettings](functions/useStoreWithAiSettings.md)
* [createDefaultAiSettingsConfig](functions/createDefaultAiSettingsConfig.md)

---

---
url: /api/ai-config.md
---
# @sqlrooms/ai-config

## Type Aliases

* [AiSettingsSliceConfig](type-aliases/AiSettingsSliceConfig.md)
* [AiSliceConfig](type-aliases/AiSliceConfig.md)
* [ErrorMessageSchema](type-aliases/ErrorMessageSchema.md)
* [AnalysisResultSchema](type-aliases/AnalysisResultSchema.md)
* [AnalysisSessionSchema](type-aliases/AnalysisSessionSchema.md)
* [ToolUIPart](type-aliases/ToolUIPart.md)
* [UIMessagePart](type-aliases/UIMessagePart.md)

## Variables

* [AiSettingsSliceConfig](variables/AiSettingsSliceConfig.md)
* [AiSliceConfig](variables/AiSliceConfig.md)
* [ErrorMessageSchema](variables/ErrorMessageSchema.md)
* [AnalysisResultSchema](variables/AnalysisResultSchema.md)
* [AnalysisSessionSchema](variables/AnalysisSessionSchema.md)

## Functions

* [createDefaultAiConfig](functions/createDefaultAiConfig.md)

---

---
url: /api/ai-core.md
---
# @sqlrooms/ai-core

# @sqlrooms/ai

An AI integration package for SQLRooms that provides components and utilities for adding AI-powered features to your data applications. This package enables natural language querying, data analysis, and AI-assisted insights.

## Features

* 🤖 **AI Query Interface**: Natural language to SQL conversion
* 📊 **Automated Analysis**: AI-powered data analysis and insights
* 🔄 **State Management**: Zustand-based state management for AI features
* 🧩 **UI Components**: Ready-to-use components for AI interactions
* 📝 **Query History**: Track and manage AI query history
* 🎯 **Tool Integration**: Framework for AI tools and actions
* 🤖 **Agent Framework**: Framework for building AI agents

## Installation

```bash
npm install @sqlrooms/ai
# or
yarn add @sqlrooms/ai
```

## Basic Usage

### Setting Up SqlRooms AI Chat for Browser-only application

```tsx
import {createAiSlice, createAiSettingsSlice} from '@sqlrooms/ai';
import {createRoomStore} from '@sqlrooms/room-shell';

// Create a room store with AI capabilities
const {roomStore, useRoomStore} = createRoomStore({
  // Base room configuration
  ...createRoomShellSlice({
    config: {
      // Your room configuration
    },
  }),
  // Ai model config slice
  ...createAiSettingsSlice({})(set, get, store),
  // Add AI slice
  ...createAiSlice({
    getInstructions: () => {
      return `You are an AI assistant that can answer questions and help with tasks.`;
    },
    initialAnalysisPrompt: 'What insights can you provide from my data?',
    tools: {
      // Your tools
    },
    getInstructions: () => {
      // add custom instructions here
      return createDefaultAiInstructions(store);
    },
  })(set, get, store),
});

function MyApp() {
  return (
    <RoomStateProvider roomStore={roomStore}>
      <MyDataApp />
    </RoomStateProvider>
  );
}
```

### Setting Up SqlRooms AI Chat for Server-side application

* api/chat/route.ts

```typescript
export async function POST(req: Request) {
  const {messages} = await req.json();

  const stream = createUIMessageStream({
    execute: async ({writer}) => {
      const result = streamText({
        model: openai('gpt-4.1'),
        system: systemPrompt,
        messages,
        tools: {
          // Your tools: remove exeucte for client tools so they run on the client side
        },
      });
      writer.merge(result.toUIMessageStream({originalMessages: messages}));
    },
  });

  return stream.toUIMessageStreamResponse();
}
```

* page.tsx

```typescript
const {roomStore, useRoomStore} = createRoomStore({
  ...createRoomShellSlice({
    // Your room configuration
    })(set, get, store),
  ...createAiSettingsSlice({
    // Your AI settings
  })(set, get, store),
  ...createAiSlice({
    chatEndPoint: '/api/chat', // Point to the server-side endpoint
    tools: {
      // Your tools
    },
  })(set, get, store),
});

function MyApp() {
  return (
    <RoomStateProvider roomStore={roomStore}>
      <MyDataApp />
    </RoomStateProvider>
  );
}
```

See [ai-nextjs](https://github.com/sqlrooms/sqlrooms/tree/main/examples/ai-nextjs) for a complete example.

## Data Structure

The basic data structure of the AI package is:

```ts
ai: {
  sessions: [
    {
      id: string,                    // CUID2 identifier
      name: string,                   // Session display name
      modelProvider: string,          // e.g., 'openai', 'anthropic'
      model: string,                  // e.g., 'gpt-4o', 'claude-3-5-sonnet'
      createdAt: Date,
      // Primary storage: Full conversation history (AI SDK v5 format)
      uiMessages: UIMessage[],
      // Secondary storage: Error messages and legacy compatibility
      analysisResults: AnalysisResult[],
      // Tool execution data
      toolAdditionalData: Record<string, unknown>,
    },
  ],
  currentSessionId: string,
}
```

### Session Schema

Each session contains:

#### `uiMessages` - Complete Chat History

The `uiMessages` array stores the complete, flat conversation history using the Vercel AI SDK v5 `UIMessage` format. This includes:

* User messages
* Assistant messages
* Tool call messages
* All message parts (text, tool invocations, etc.)

This is the **primary data structure** and serves as:

* The full context for AI model interactions
* The source for displaying conversation history
* The base for reconstructing analysis results

```tsx
// Example: Accessing UI messages
const currentSession = useRoomStore((state) => state.ai.getCurrentSession());
const messages = currentSession?.uiMessages || [];
```

#### `analysisResults` - Structured Analysis View

The `analysisResults` array is a **derived structure** that organizes messages into user prompt → AI response pairs. It primarily serves to:

* Store error messages that occur during analysis
* Provide backward compatibility with legacy data
* Offer a simplified view of analysis history

Analysis results are dynamically generated from `uiMessages` using the `transformMessagesToAnalysisResults` utility function.

```ts
type AnalysisResult = {
  id: string; // Matches the UIMessage.id
  prompt: string; // User's question/request
  errorMessage?: ErrorMessageSchema; // Error if analysis failed
  isCompleted: boolean; // Whether AI finished responding
};
```

#### `toolAdditionalData` - Rich Tool Outputs

Each session also maintains a `toolAdditionalData` object that stores additional data from tool executions, keyed by `toolCallId`. This data is used for:

* Rendering tool-specific UI components
* Passing data between tool calls
* Preserving rich data that doesn't go back to the LLM

```ts
type ToolAdditionalData = Record<string, unknown>;

// Example: Storing tool additional data
const setToolData = useRoomStore((state) => state.ai.setSessionToolAdditionalData);
setToolData(sessionId, toolCallId, {chartData: [...]});
```

## Tools

In AI package, we provide a OpenAssistantTool type that supports not only `execute` function, but also `context` object and `component` object:

* `execute` needs to return
  * llmResult: the result send back to LLM (no raw data)
  * additionalData: the data will be used by `component` and next `tool`
* `context`
  * provide e.g. runtime or async data for `execute`
  * `execute` can access `context` via `options.context`
* `component`
  * use `additionalData` to render a React component for this `tool`

For example, the `weather` tool is defined as follows:

```ts
const weatherTool: OpenAssistantTool = {
  name: 'weather',
  description: 'Get the weather in a city from a weather station',
  parameters: z.object({cityName: z.string()}),
  execute: async ({cityName}, options) => {
    const getStation = options.context?.getStation;
    const station = getStation ? await getStation(cityName) : null;
    return {
      llmResult: {
        success: true,
        details: `The weather in ${cityName} is sunny from weather station ${station}.`,
      },
      additionalData: {
        weather: 'sunny',
        station,
      },
    };
  },
  context: {
    getStation: async (cityName: string) => {
      const stations = {
        'New York': '123',
        'Los Angeles': '456',
        Chicago: '789',
      };
      return stations[cityName];
    },
  },
  component: WeatherStationComponent,
};
```

### Tool Execution Flow

1. User sends a prompt → creates a user `UIMessage`
2. AI processes and may call tools → creates assistant `UIMessage` with tool invocations
3. Tools execute and return:
   * `llmResult`: Text summary sent back to the LLM
   * `additionalData`: Rich data stored in `toolAdditionalData` for UI rendering
4. AI responds with final answer → creates assistant `UIMessage` with text
5. On completion: `uiMessages` updated, `analysisResult` created with user message ID

### Rendering Tool Results

```text
|--------------------------------|
| AnalysisResultsContainer       |
|--------------------------------|
|  |--------------------------|  |
|  | AnalysisResult           |  |
|  |                          |  |
|  | ErrorMessage             |  |
|  | ------------             |  |
|  | UIMessage                |  |
|  |                          |  |
|  | |---------------------|  |  |
|  | | Parts               |  |  |
|  | |---------------------|  |  |
|  | | |---------------|   |  |  |
|  | | |TextPart       |   |  |  |
|  | | |---------------|   |  |  |
|  | | |ToolPart       |   |  |  |
|  | | |---------------|   |  |  |
|  | |    ...              |  |  |
|  | |---------------------|  |  |
|  |                          |  |
|  |--------------------------|  |
|--------------------------------|
```

### Transfer Additional Tool Output Data to Client

#### The Problem

When tools execute, they often generate additional data (like detailed search results, charts, metadata) that needs to be sent to the client for UI rendering, but should NOT be included in the conversation history sent back to the LLM.

If the tool execution is done on the server side, the additional data needs to be transferred to the client side for UI rendering. We use the `data-tool-additional-output` data part type to transfer the additional data to the client.

#### Using `transient: true`

The AI SDK v5 provides a built-in solution through the `transient` flag on data parts. When you write a data part with `transient: true`, the SDK automatically prevents it from being added to the message history.

##### Backend Implementation (route.ts)

```typescript
writer.write({
  type: 'data-tool-additional-output',
  transient: true, // Won't be added to message history
  data: {
    toolCallId: chunk.toolCallId,
    toolName: chunk.toolName,
    output: getToolAdditionalData(chunk.toolCallId),
    timestamp: new Date().toISOString(),
  },
});
```

#### The Flow

```text
Backend (route.ts)
  │
  ├─> Tool executes
  │   └─> writer.write({
  │         type: 'data-tool-additional-output',
  │         transient: true,  // ✅ SDK handles exclusion
  │         data: {...}
  │       })
  │
  ↓
Client receives stream
  │
  ├─> onData callback
  │   └─> setSessionToolAdditionalData() ✅ Stores in toolAdditionalData
  │
  └─> messages array ✅ Automatically excludes transient data parts

Session Storage (clean) → AI SDK → UI Display
                              ↓
                        Session Storage
                              ↓
                        Backend/LLM
```

#### Benefits of This Approach

1. **✅ Clean Conversation History**: Transient data parts never appear in message history
2. **✅ Efficient Token Usage**: No unnecessary data sent to the LLM
3. **✅ Proper Data Storage**: Tool data is stored separately in `toolAdditionalData`
4. **✅ UI Flexibility**: Components can access tool data via `toolAdditionalData[toolCallId]`
5. **✅ Simple & Native**: Uses built-in SDK feature, no custom utilities needed
6. **✅ Maintainable**: Follows SDK conventions and patterns
7. **✅ No Manual Filtering**: SDK handles exclusion automatically

#### Usage in Components

To access the additional tool data in your components:

```tsx
const currentSession = useRoomStore((state) => state.ai.getCurrentSession());
const toolData = currentSession?.toolAdditionalData?.[toolCallId];
```

#### Alternative Considered: Message Annotations

AI SDK v5 supports message annotations, but these are still part of the message structure. The `transient` flag is specifically designed for data that should only be sent once and not persist in conversation history.

## Agent Framework

The agent framework enables building autonomous AI agents that can use tools and make multi-step decisions. Built on top of AI SDK v5's `Experimental_Agent` class, it provides utilities for integrating agents as tools within the main chat interface.

### What are Agents?

Agents differ from regular tools in that they:

* Can autonomously decide which tools to call and when
* Execute multiple steps to accomplish a goal
* Maintain their own reasoning loop until completion
* Can be embedded as tools within the main conversation

### Creating an Agent Tool

Agent tools follow the same OpenAssistantTool pattern but use the `processAgentStream` utility to handle streaming and progress tracking:

```typescript
import {Experimental_Agent as Agent, tool} from 'ai';
import {processAgentStream} from '@sqlrooms/ai';
import {z} from 'zod';

export function weatherAgentTool(store: StoreApi<RoomState>) {
  return {
    name: 'agent-weather',
    description: 'A specialized agent for weather-related queries',
    parameters: z.object({
      prompt: z.string().describe('The user\'s weather question')
    }),
    execute: async ({prompt}, options) => {
      const state = store.getState();
      const currentSession = state.ai.getCurrentSession();

      // Create the agent with its own set of tools
      const weatherAgent = new Agent({
        model: getModel(state),
        tools: {
          weather: tool({
            description: 'Get current weather in a location',
            inputSchema: z.object({
              location: z.string()
            }),
            execute: async ({location}) => ({
              location,
              temperature: 72 + Math.floor(Math.random() * 21) - 10
            })
          }),
          convertTemperature: tool({
            description: 'Convert temperature units',
            inputSchema: z.object({
              temperature: z.number(),
              from: z.enum(['F', 'C']),
              to: z.enum(['F', 'C'])
            }),
            execute: async ({temperature, from, to}) => {
              // Conversion logic
            }
          })
        },
        stopWhen: stepCountIs(10) // Limit agent steps
      });

      // Stream the agent's execution
      const agentResult = await weatherAgent.stream({prompt});

      // Process the stream and track progress
      const resultText = await processAgentStream(
        agentResult,
        store,
        options.toolCallId
      );

      return {
        llmResult: {
          success: true,
          details: resultText
        }
      };
    }
  };
}
```

Use the agent as a tool in your main LLM:

```typescript
createAiSlice({
  tools: {
    query: QueryTool,
    'agent-weather': weatherAgentTool(store)  // ⚡ Agent as tool
  }
})
```

### The `processAgentStream` Utility

The `processAgentStream` function handles the complexity of integrating agent execution into the main conversation:

```typescript
await processAgentStream(agentResult, store, parentToolCallId)
```

**What it handles:**

1. **Progress Tracking**: Monitors all tool calls made by the agent in real-time
2. **State Updates**: Updates `toolAdditionalData` with agent progress for UI rendering
3. **Error Handling**: Captures and reports tool execution errors
4. **Result Aggregation**: Collects the final text output from the agent

**Stored Data Structure:**

Each agent tool call stores structured progress data:

```typescript
interface AgentToolCallAdditionalData {
  agentToolCalls: Array<{
    toolCallId: string;
    toolName: string;
    output?: unknown;
    errorText?: string;
    state: 'pending' | 'success' | 'error';
  }>;
  finalOutput?: string;
  timestamp: string;
}
```

### Rendering Agent Progress

If you are using the `sqlrooms/ai-core` package, the rendering of agent progress is handled automatically.

However, you can also use the `useRoomStore` hook to access the agent progress data in your components to show real-time execution:

```tsx
const currentSession = useRoomStore((state) => state.ai.getCurrentSession());
const agentData = currentSession?.toolAdditionalData?.[toolCallId] as AgentToolCallAdditionalData;

return (
  <div>
    <h3>Agent Progress:</h3>
    {agentData?.agentToolCalls.map((call) => (
      <div key={call.toolCallId}>
        {call.toolName}: {call.state}
        {call.output && <pre>{JSON.stringify(call.output, null, 2)}</pre>}
        {call.errorText && <span className="error">{call.errorText}</span>}
      </div>
    ))}
    {agentData?.finalOutput && (
      <div className="final-result">{agentData.finalOutput}</div>
    )}
  </div>
);
```

### Best Practices

1. **Limit Steps**: Always use `stopWhen` to prevent infinite loops
2. **Specific Tools**: Give agents focused, domain-specific tools
3. **Clear Descriptions**: Write precise tool descriptions for better agent reasoning
4. **Error Handling**: Handle agent errors gracefully with try-catch in execute
5. **Progress UI**: Use `toolAdditionalData` to show agent progress to users

### Use Cases

* **Multi-step Analysis**: Agents that need to gather data from multiple sources
* **Decision Trees**: Complex workflows requiring conditional logic
* **Specialized Domains**: Weather, finance, or data analysis agents with domain-specific tools
* **Autonomous Tasks**: Tasks that require planning and execution without human intervention

## Advanced Features

* **Custom AI Tools**: Define custom tools for AI to use with the tool() function
* **Multiple Sessions**: Create and manage multiple analysis sessions for different purposes
* **Model Selection**: Switch between different AI models and providers
* **Result Management**: Save, delete, and organize analysis results
* **Conversation Context**: Maintain context across multiple queries in a session
* **Feedback Loop**: Collect user feedback to improve AI responses

For more information, visit the SQLRooms documentation.

## Classes

* [ToolAbortError](classes/ToolAbortError.md)

## Interfaces

* [AgentStreamResult](interfaces/AgentStreamResult.md)
* [UIMessageChunk](interfaces/UIMessageChunk.md)
* [AgentToolCall](interfaces/AgentToolCall.md)
* [AgentToolCallAdditionalData](interfaces/AgentToolCallAdditionalData.md)

## Type Aliases

* [AiSliceConfig](type-aliases/AiSliceConfig.md)
* [AiSliceState](type-aliases/AiSliceState.md)
* [SessionType](type-aliases/SessionType.md)
* [AddToolResult](type-aliases/AddToolResult.md)

## Variables

* [AiSliceConfig](variables/AiSliceConfig.md)
* [AiThinkingDots](variables/AiThinkingDots.md)
* [AnalysisResult](variables/AnalysisResult.md)
* [AnalysisResultsContainer](variables/AnalysisResultsContainer.md)
* [ModelSelector](variables/ModelSelector.md)
* [PromptSuggestions](variables/PromptSuggestions.md)
* [QueryControls](variables/QueryControls.md)
* [ReasoningBox](variables/ReasoningBox.md)
* [SessionControls](variables/SessionControls.md)
* [ToolCallInfo](variables/ToolCallInfo.md)
* [DeleteSessionDialog](variables/DeleteSessionDialog.md)
* [SessionActions](variables/SessionActions.md)
* [SessionDropdown](variables/SessionDropdown.md)
* [SessionTitle](variables/SessionTitle.md)

## Functions

* [createDefaultAiConfig](functions/createDefaultAiConfig.md)
* [createAiSlice](functions/createAiSlice.md)
* [useStoreWithAi](functions/useStoreWithAi.md)
* [updateAgentToolCallData](functions/updateAgentToolCallData.md)
* [processAgentStream](functions/processAgentStream.md)
* [completeIncompleteToolCalls](functions/completeIncompleteToolCalls.md)
* [convertToAiSDKTools](functions/convertToAiSDKTools.md)
* [ToolErrorMessage](functions/ToolErrorMessage.md)
* [useAiChat](functions/useAiChat.md)
* [useScrollToBottom](functions/useScrollToBottom.md)
* [cleanupPendingAnalysisResults](functions/cleanupPendingAnalysisResults.md)

---

---
url: /api/ai-rag.md
---
# @sqlrooms/ai-rag

Retrieval Augmented Generation (RAG) slice for SQLRooms. Query vector embeddings stored in DuckDB for semantic search and AI-powered applications.

This package is designed to work with [sqlrooms-rag](https://pypi.org/project/sqlrooms-rag/), a Python package that prepares embedding/FTS-index databases for RAG search.

Refer to the [ai-rag example](https://github.com/sqlrooms/examples/tree/main/ai-rag) for a complete working example.

## Features

* 🔍 **Hybrid Search** - Combines vector similarity with full-text search (BM25) using Reciprocal Rank Fusion
* 🚀 **Semantic Search** - Query embeddings using vector similarity (cosine similarity)
* 🗄️ **Multiple Databases** - Attach and search across multiple embedding databases
* 🎯 **Per-Database Embedding Providers** - Each database can use a different embedding model
* ✅ **Metadata Validation** - Automatic validation of embedding dimensions and models
* 📊 **DuckDB-Powered** - Fast, in-process vector search with SQL and FTS
* 🔄 **Flexible** - Works with OpenAI, HuggingFace, Transformers.js, or custom embeddings

## Installation

```bash
npm install @sqlrooms/ai-rag @sqlrooms/duckdb @sqlrooms/room-store
```

## Quick Start

```typescript
import {createDuckDbSlice} from '@sqlrooms/duckdb';
import {createRagSlice, createAiEmbeddingProvider} from '@sqlrooms/ai-rag';
import {createRoomStore} from '@sqlrooms/room-store';
import {openai} from '@ai-sdk/openai';

// 1. Create an embedding provider (matches your database preparation)
const embeddingProvider = createAiEmbeddingProvider(
  openai,
  'text-embedding-3-small',
  1536,
);

// 2. Configure your embedding databases
const embeddingsDatabases = [
  {
    databaseFilePathOrUrl: '/path/to/docs.duckdb',
    databaseName: 'docs',
    embeddingProvider,
    embeddingDimensions: 1536,
  },
];

// 3. Create the store with RAG capabilities
const store = createRoomStore({
  slices: [
    createDuckDbSlice({databasePath: ':memory:'}),
    createRagSlice({embeddingsDatabases}),
  ],
});

// 4. Initialize and query
await store.getState().rag.initialize();

const results = await store
  .getState()
  .rag.queryByText('How do I create a table?', {topK: 5});

console.log(results);
```

## API Reference

### `createRagSlice(options)`

Creates a RAG slice for your store.

#### Options

* `embeddingsDatabases` - Array of embedding database configurations

#### Returns

A state creator function for Zustand.

### `EmbeddingDatabase`

Configuration for an embedding database:

```typescript
type EmbeddingDatabase = {
  /** Path or URL to the DuckDB embedding database file */
  databaseFilePathOrUrl: string;

  /** Name to use when attaching the database */
  databaseName: string;

  /**
   * Embedding provider for this database.
   * MUST match the model used during database preparation.
   */
  embeddingProvider: EmbeddingProvider;

  /**
   * Expected embedding dimensions (for validation).
   * Optional but recommended.
   */
  embeddingDimensions?: number;
};
```

### `EmbeddingProvider`

Function that converts text to embeddings:

```typescript
type EmbeddingProvider = (text: string) => Promise<number[]>;
```

**Important**: The embedding provider MUST match the model used when preparing the database. Check your database metadata to ensure compatibility.

### Store Methods

#### `rag.initialize()`

Initialize RAG by attaching all embedding databases and validating metadata.

```typescript
await store.getState().rag.initialize();
```

#### `rag.queryByText(text, options)`

Query embeddings using text. By default, performs **hybrid search** combining vector similarity with full-text search (BM25) using Reciprocal Rank Fusion (RRF).

```typescript
const results = await store.getState().rag.queryByText('search query', {
  topK: 5, // Number of results to return (default: 5)
  database: 'docs', // Database to search (default: first database)
  hybrid: true, // Enable hybrid search (default: true)
  // hybrid: false, // Disable hybrid search (vector-only)
  // hybrid: 60, // Custom RRF k value (default: 60)
});
```

**Hybrid Search** combines:

* **Vector similarity**: Semantic understanding of the query
* **Full-text search (BM25)**: Keyword matching and ranking
* **Reciprocal Rank Fusion**: Smart combination of both result sets

This approach typically provides better results than vector-only search, especially for queries with specific keywords or technical terms.

Returns:

```typescript
type EmbeddingResult = {
  score: number; // Cosine similarity (0-1, higher is better)
  text: string; // The matched text chunk
  nodeId: string; // Unique identifier for the chunk
  metadata?: Record<string, unknown>; // Optional metadata (file path, etc.)
};
```

#### `rag.queryEmbeddings(embedding, options)`

Query embeddings using a pre-computed embedding vector.

```typescript
const embedding = await embeddingProvider('search query');
const results = await store.getState().rag.queryEmbeddings(embedding, {
  topK: 5,
  database: 'docs',
});
```

#### `rag.getMetadata(databaseName)`

Get metadata for a specific database:

```typescript
const metadata = await store.getState().rag.getMetadata('docs');
console.log(metadata);
// {
//   provider: 'openai',
//   model: 'text-embedding-3-small',
//   dimensions: 1536,
//   chunkingStrategy: 'markdown-aware'
// }
```

#### `rag.listDatabases()`

List all attached embedding databases:

```typescript
const databases = store.getState().rag.listDatabases();
console.log(databases); // ['docs', 'tutorials', 'api']
```

## Multiple Databases

You can attach multiple embedding databases, each with its own embedding model:

```typescript
import {openai} from '@ai-sdk/openai';
import {google} from '@ai-sdk/google';
import {createAiEmbeddingProvider} from '@sqlrooms/ai-rag';

const embeddingsDatabases = [
  {
    databaseFilePathOrUrl: '/data/duckdb_docs.duckdb',
    databaseName: 'duckdb_docs',
    // OpenAI text-embedding-3-small (1536d)
    embeddingProvider: createAiEmbeddingProvider(
      openai,
      'text-embedding-3-small',
      1536,
    ),
    embeddingDimensions: 1536,
  },
  {
    databaseFilePathOrUrl: '/data/react_docs.duckdb',
    databaseName: 'react_docs',
    // OpenAI text-embedding-3-small with reduced dimensions (512d)
    embeddingProvider: createAiEmbeddingProvider(
      openai,
      'text-embedding-3-small',
      512,
    ),
    embeddingDimensions: 512,
  },
  {
    databaseFilePathOrUrl: '/data/python_docs.duckdb',
    databaseName: 'python_docs',
    // Google text-embedding-004 (768d)
    embeddingProvider: createAiEmbeddingProvider(
      google,
      'text-embedding-004',
      768,
    ),
    embeddingDimensions: 768,
  },
];
```

Query a specific database:

```typescript
// Query DuckDB docs
const duckdbResults = await store
  .getState()
  .rag.queryByText('How to create a table?', {
    database: 'duckdb_docs',
  });

// Query React docs
const reactResults = await store
  .getState()
  .rag.queryByText('How to use hooks?', {
    database: 'react_docs',
  });
```

## Hybrid Search

Hybrid search combines vector similarity (semantic understanding) with full-text search (keyword matching) to provide more accurate and comprehensive results.

### How It Works

1. **Vector Search**: Uses embedding similarity to find semantically related content
2. **Full-Text Search (BM25)**: Uses DuckDB's FTS extension for keyword-based ranking
3. **Reciprocal Rank Fusion (RRF)**: Intelligently combines both result sets

### Benefits

* **Better Recall**: Finds results even when exact keywords aren't in the query
* **Improved Precision**: Keyword matching helps rank exact matches higher
* **Balanced Results**: RRF prevents either method from dominating unfairly

### Configuration

```typescript
// Default: Hybrid search enabled with k=60
const results = await store.getState().rag.queryByText('query', {
  hybrid: true, // Enable hybrid search (default)
});

// Pure vector search only
const vectorOnly = await store.getState().rag.queryByText('query', {
  hybrid: false, // Disable hybrid search
});

// Custom RRF k value (lower = more weight to top-ranked results)
const customRRF = await store.getState().rag.queryByText('query', {
  hybrid: 60, // Custom k value for Reciprocal Rank Fusion
});
```

### When to Use What

* **Hybrid (default)**: Best for most use cases, especially technical documentation
* **Vector-only**: When you want pure semantic matching without keyword bias
* **Lower k value** (e.g., 30): Give more weight to top-ranked results
* **Higher k value** (e.g., 100): More balanced combination, less bias to top results

### Requirements

Hybrid search requires that the embedding database was prepared with FTS indexing enabled (which is the default in the Python `prepare-embeddings` command). If FTS is not available, the system automatically falls back to vector-only search.

## Embedding Providers

The `createAiEmbeddingProvider()` function works with any provider from the Vercel AI SDK.

### OpenAI

```typescript
import {openai} from '@ai-sdk/openai';
import {createAiEmbeddingProvider} from '@sqlrooms/ai-rag';

const embeddingProvider = createAiEmbeddingProvider(
  openai,
  'text-embedding-3-small',
  1536,
);
```

### Google

```typescript
import {google} from '@ai-sdk/google';
import {createAiEmbeddingProvider} from '@sqlrooms/ai-rag';

const embeddingProvider = createAiEmbeddingProvider(
  google,
  'text-embedding-004',
  768,
);
```

### Custom Provider

```typescript
import {createAiEmbeddingProvider} from '@sqlrooms/ai-rag';

// Any provider that implements the AiProvider interface
const embeddingProvider = createAiEmbeddingProvider(
  myCustomProvider,
  'my-model-id',
  512,
);
```

### Multiple Providers Example

You can use different providers for different databases:

```typescript
import {openai} from '@ai-sdk/openai';
import {google} from '@ai-sdk/google';
import {createAiEmbeddingProvider} from '@sqlrooms/ai-rag';

const embeddingsDatabases = [
  {
    databaseName: 'docs_openai',
    databaseFilePathOrUrl: './embeddings/docs_openai.duckdb',
    embeddingProvider: createAiEmbeddingProvider(
      openai,
      'text-embedding-3-small',
      1536,
    ),
    embeddingDimensions: 1536,
  },
  {
    databaseName: 'docs_google',
    databaseFilePathOrUrl: './embeddings/docs_google.duckdb',
    embeddingProvider: createAiEmbeddingProvider(
      google,
      'text-embedding-004',
      768,
    ),
    embeddingDimensions: 768,
  },
];
```

## Preparing Databases

Use the Python `sqlrooms_rag` package to prepare embedding databases:

```bash
# Install the package
pip install sqlrooms-rag

# Prepare embeddings with OpenAI
python -m sqlrooms_rag.cli prepare-embeddings \
  docs/ \
  -o embeddings.duckdb \
  --provider openai \
  --model text-embedding-3-small \
  --embed-dim 1536

# Prepare embeddings with HuggingFace (local, free)
python -m sqlrooms_rag.cli prepare-embeddings \
  docs/ \
  -o embeddings.duckdb \
  --provider huggingface \
  --model BAAI/bge-small-en-v1.5
```

See the [Python package documentation](_media/README.md) for more details.

## Database Schema

The embedding databases created by `sqlrooms_rag` have the following structure:

```sql
-- Main documents table with embeddings
CREATE TABLE documents (
  node_id VARCHAR PRIMARY KEY,
  text TEXT,
  metadata_ JSON,
  embedding FLOAT[],  -- Vector embedding
  doc_id VARCHAR      -- Link to source document
);

-- Original source documents (full, unchunked)
CREATE TABLE source_documents (
  doc_id VARCHAR PRIMARY KEY,
  file_path VARCHAR,
  file_name VARCHAR,
  text TEXT,
  metadata_ JSON,
  created_at TIMESTAMP
);

-- Metadata about the embedding process
CREATE TABLE embedding_metadata (
  key VARCHAR PRIMARY KEY,
  value VARCHAR,
  created_at TIMESTAMP
);
```

## Error Handling

```typescript
try {
  const results = await store.getState().rag.queryByText('search query', {
    database: 'nonexistent',
  });
} catch (error) {
  // Error: Database "nonexistent" not found. Available: docs, tutorials
}

try {
  const wrongDimEmbedding = new Array(384).fill(0);
  await store.getState().rag.queryEmbeddings(wrongDimEmbedding, {
    database: 'docs', // Expects 1536 dimensions
  });
} catch (error) {
  // Error: Dimension mismatch: query has 384 dimensions,
  //        but database "docs" expects 1536 dimensions
}
```

## Best Practices

1. **Match Embedding Models**: Always use the same embedding model and dimensions when querying as when preparing the database.

2. **Check Metadata**: Use `getMetadata()` to verify the model and dimensions before querying.

3. **Dimension Validation**: Provide `embeddingDimensions` in your database configuration for automatic validation.

4. **Database Naming**: Use descriptive database names (e.g., `duckdb_docs`, `react_docs`) to easily identify them.

5. **Error Handling**: Always wrap queries in try-catch blocks to handle dimension mismatches and missing databases.

6. **Performance**: For large databases, consider using reduced dimensions (e.g., 512 instead of 1536) for faster queries and lower costs.

## Examples

See the [examples/ai](_media/ai) directory for complete examples:

* `src/embeddings.ts` - OpenAI embedding provider implementations
* `src/rag-example.ts` - Comprehensive usage examples
* `src/store.ts` - Store configuration with RAG

## License

MIT

## Interfaces

* [AiProvider](interfaces/AiProvider.md)

## Type Aliases

* [EmbeddingResult](type-aliases/EmbeddingResult.md)
* [EmbeddingProvider](type-aliases/EmbeddingProvider.md)
* [EmbeddingDatabase](type-aliases/EmbeddingDatabase.md)
* [DatabaseMetadata](type-aliases/DatabaseMetadata.md)
* [QueryOptions](type-aliases/QueryOptions.md)
* [RagSliceState](type-aliases/RagSliceState.md)
* [AiProviderFactory](type-aliases/AiProviderFactory.md)
* [RagToolParameters](type-aliases/RagToolParameters.md)
* [RagToolLlmResult](type-aliases/RagToolLlmResult.md)
* [RagToolAdditionalData](type-aliases/RagToolAdditionalData.md)
* [RagToolContext](type-aliases/RagToolContext.md)

## Variables

* [RagToolParameters](variables/RagToolParameters.md)

## Functions

* [createRagSlice](functions/createRagSlice.md)
* [useStoreWithRag](functions/useStoreWithRag.md)
* [createAiEmbeddingProvider](functions/createAiEmbeddingProvider.md)
* [createRagTool](functions/createRagTool.md)

---

---
url: /api/ai-settings.md
---
# @sqlrooms/ai-settings

AI settings UI and state management

## Interfaces

* [ModelUsageData](interfaces/ModelUsageData.md)

## Type Aliases

* [AiSettingsSliceConfig](type-aliases/AiSettingsSliceConfig.md)
* [AiSettingsSliceState](type-aliases/AiSettingsSliceState.md)

## Variables

* [AiSettingsSliceConfig](variables/AiSettingsSliceConfig.md)
* [AiModelParameters](variables/AiModelParameters.md)
* [AiModelUsage](variables/AiModelUsage.md)
* [AiModelsSettings](variables/AiModelsSettings.md)
* [AiProvidersSettings](variables/AiProvidersSettings.md)
* [AiSettingsPanel](variables/AiSettingsPanel.md)

## Functions

* [createAiSettingsSlice](functions/createAiSettingsSlice.md)
* [useStoreWithAiSettings](functions/useStoreWithAiSettings.md)
* [createDefaultAiSettingsConfig](functions/createDefaultAiSettingsConfig.md)

---

---
url: /api/canvas.md
---
# @sqlrooms/canvas

ReactFlow-based canvas for building and editing DAGs of SQL and Vega nodes, with a Zustand slice for persistence in SQLRooms apps.

* CanvasSlice stores nodes and edges under `canvas.config`
* Canvas component renders and edits the graph

Refer to the [Canvas example](https://github.com/sqlrooms/examples/tree/main/canvas).

## Type Aliases

* [CanvasSliceConfig](type-aliases/CanvasSliceConfig.md)
* [CanvasSliceState](type-aliases/CanvasSliceState.md)

## Variables

* [Canvas](variables/Canvas.md)
* [CanvasSliceConfig](variables/CanvasSliceConfig.md)

## Functions

* [createDefaultCanvasConfig](functions/createDefaultCanvasConfig.md)
* [createCanvasSlice](functions/createCanvasSlice.md)

---

---
url: /api/cosmos.md
---
# @sqlrooms/cosmos

A powerful graph visualization package for SQLRooms applications. This package provides React components and hooks for creating interactive graph visualizations using a WebGL-based graph rendering engine, with state management through Zustand.

This package is built on top of the [Cosmos library](https://github.com/cosmograph-org/cosmos), a GPU-accelerated force graph layout and rendering library.

## Features

* 🌐 **Interactive Graphs**: Create dynamic, interactive graph visualizations
* 🚀 **WebGL Rendering**: High-performance rendering for large graphs
* 🧩 **React Components**: Ready-to-use components for graph visualization
* 🔄 **State Management**: Zustand-based state management for graph state
* 🎛️ **Simulation Controls**: Fine-grained control over physics simulation
* 🎨 **Customizable Styling**: Extensive options for visual customization

## Installation

```bash
npm install @sqlrooms/cosmos
```

## Basic Usage

### Simple Graph Visualization

```tsx
import {
  CosmosGraph,
  CosmosGraphControls,
  createDefaultCosmosConfig,
} from '@sqlrooms/cosmos';

function MyGraph() {
  const graphData = {
    nodes: [
      {id: 'node1', label: 'Node 1'},
      {id: 'node2', label: 'Node 2'},
      {id: 'node3', label: 'Node 3'},
    ],
    links: [
      {source: 'node1', target: 'node2'},
      {source: 'node2', target: 'node3'},
      {source: 'node3', target: 'node1'},
    ],
  };

  return (
    <div style={{width: '800px', height: '600px'}}>
      <CosmosGraph config={createDefaultCosmosConfig()} data={graphData}>
        <CosmosGraphControls />
      </CosmosGraph>
    </div>
  );
}
```

### With Simulation Controls

```tsx
import {
  CosmosGraph,
  CosmosGraphControls,
  CosmosSimulationControls,
  createDefaultCosmosConfig,
} from '@sqlrooms/cosmos';

function AdvancedGraph() {
  return (
    <div style={{width: '800px', height: '600px', position: 'relative'}}>
      <CosmosGraph config={createDefaultCosmosConfig()} data={graphData}>
        <CosmosGraphControls />
        <CosmosSimulationControls className="absolute bottom-4 left-4" />
      </CosmosGraph>
    </div>
  );
}
```

### Using with Zustand Store

```tsx
import {
  createCosmosSlice,
  useStoreWithCosmos,
  createDefaultCosmosConfig,
} from '@sqlrooms/cosmos';
import {createRoomStore} from '@sqlrooms/room-shell';

// Create a room store with cosmos capabilities
const useStore = createRoomStore({
  cosmos: createCosmosSlice(createDefaultCosmosConfig()),
});

function GraphWithState() {
  const {setGraphData, toggleSimulation, isSimulationRunning, zoomToFit} =
    useStoreWithCosmos(useStore);

  // Load graph data
  useEffect(() => {
    setGraphData(myGraphData);
  }, []);

  return (
    <div>
      <button onClick={toggleSimulation}>
        {isSimulationRunning ? 'Pause' : 'Resume'} Simulation
      </button>
      <button onClick={zoomToFit}>Zoom to Fit</button>

      <CosmosGraph store={useStore}>
        <CosmosGraphControls />
      </CosmosGraph>
    </div>
  );
}
```

## Configuration

The Cosmos graph visualization system provides extensive configuration options for both visual appearance and physics simulation.

### Visual Configuration

```tsx
const config = {
  pointSizeScale: 1.2, // Base scale for node sizes
  scalePointsOnZoom: true, // Dynamic node sizing with zoom
  renderLinks: true, // Toggle link visibility
  linkArrows: true, // Show directional arrows
  curvedLinks: true, // Use curved links
  linkWidth: 1.5, // Width of links
  linkOpacity: 0.8, // Opacity of links
  // ... other visual options
};
```

### Physics Simulation Configuration

```tsx
const config = {
  simulationGravity: 0.2, // Center attraction strength
  simulationRepulsion: 1.0, // Node repulsion strength
  simulationLinkSpring: 1.2, // Link elasticity
  simulationLinkDistance: 15, // Preferred link distance
  simulationFriction: 0.85, // Movement damping
  simulationDecay: 1000, // Simulation cooling rate
  // ... other physics options
};
```

## Advanced Features

* **Custom Node Rendering**: Define custom renderers for nodes
* **Interactive Events**: Handle click, hover, and drag events
* **Data Binding**: Connect graph data to your application state
* **Layout Algorithms**: Apply different layout algorithms
* **Performance Optimization**: Options for handling large graphs

For more information, visit the SQLRooms documentation.

## About Cosmograph Cosmos

This package is built on top of [Cosmograph Cosmos](https://github.com/cosmograph-org/cosmos), a GPU-accelerated force graph layout and rendering library. Cosmograph Cosmos offers:

* **GPU Acceleration**: All computations and rendering happen on the GPU in fragment and vertex shaders
* **High Performance**: Capable of rendering hundreds of thousands of nodes and links in real-time
* **WebGL-based**: Utilizes WebGL for efficient graph visualization
* **Advanced Physics**: Sophisticated force-directed layout algorithms

For more information about the underlying library, visit the [Cosmograph Cosmos GitHub repository](https://github.com/cosmograph-org/cosmos) or the [official documentation](https://cosmograph-org.github.io/cosmos/).

## Type Aliases

* [CosmosGraphProps](type-aliases/CosmosGraphProps.md)
* [CosmosSliceState](type-aliases/CosmosSliceState.md)
* [RoomStateWithCosmos](type-aliases/RoomStateWithCosmos.md)
* [CosmosSliceConfig](type-aliases/CosmosSliceConfig.md)
* [HoverState](type-aliases/HoverState.md)

## Variables

* [CosmosGraph](variables/CosmosGraph.md)
* [CosmosGraphControls](variables/CosmosGraphControls.md)
* [CosmosSimulationControls](variables/CosmosSimulationControls.md)
* [CosmosSliceConfig](variables/CosmosSliceConfig.md)

## Functions

* [createCosmosSlice](functions/createCosmosSlice.md)
* [useStoreWithCosmos](functions/useStoreWithCosmos.md)
* [createDefaultCosmosConfig](functions/createDefaultCosmosConfig.md)
* [useHoverState](functions/useHoverState.md)

---

---
url: /api/data-table.md
---
# @sqlrooms/data-table

A high-performance data table component library for SQLRooms applications. This package provides flexible and feature-rich table components for displaying and interacting with large datasets, with special support for Apache Arrow data structures.

## Features

* 📊 **Multiple Table Variants**: Paginated, virtualized, and query-specific tables
* 🚀 **High Performance**: Optimized for handling large datasets efficiently
* 🏹 **Arrow Integration**: Native support for Apache Arrow data structures
* 🔍 **Sorting & Filtering**: Built-in data manipulation capabilities
* 📱 **Responsive Design**: Tables that work well on all screen sizes
* 🎨 **Customizable**: Flexible styling and configuration options

## Installation

```bash
npm install @sqlrooms/data-table
# or
yarn add @sqlrooms/data-table
```

## Basic Usage

### Paginated Data Table

```tsx
import {DataTablePaginated} from '@sqlrooms/data-table';

function MyDataTable() {
  const data = [
    {id: 1, name: 'Alice', age: 28},
    {id: 2, name: 'Bob', age: 34},
    {id: 3, name: 'Charlie', age: 42},
    // More data...
  ];

  const columns = [
    {accessorKey: 'id', header: 'ID'},
    {accessorKey: 'name', header: 'Name'},
    {accessorKey: 'age', header: 'Age'},
  ];

  return (
    <DataTablePaginated
      data={data}
      columns={columns}
      pageSize={10}
      enableSorting
      enableFiltering
    />
  );
}
```

### Working with SQL Query Results

```tsx
import {QueryDataTable} from '@sqlrooms/data-table';
import {useSql} from '@sqlrooms/duckdb';

function QueryResultsTable() {
  const {data, isLoading, error} = useSql({
    query:
      'SELECT id, name, email, created_at FROM users ORDER BY created_at DESC',
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return null;

  return <QueryDataTable data={data} />;
}
```

### Using with Apache Arrow

```tsx
import {useArrowDataTable} from '@sqlrooms/data-table';
import {Table} from 'apache-arrow';

function ArrowTable({arrowTable}: {arrowTable: Table}) {
  const {columns, data} = useArrowDataTable(arrowTable);

  return <DataTablePaginated columns={columns} data={data} pageSize={25} />;
}
```

## Advanced Features

* **Custom Cell Rendering**: Define custom renderers for specific cell types
* **Row Selection**: Enable row selection with checkboxes
* **Expandable Rows**: Show additional details in expandable row sections
* **Column Resizing**: Allow users to resize columns
* **Export Options**: Export table data to CSV or other formats
* **Theming**: Customize the appearance to match your application

For more information, visit the SQLRooms documentation.

## Type Aliases

* [DataTablePaginatedProps](type-aliases/DataTablePaginatedProps.md)
* [DataTableVirtualizedProps](type-aliases/DataTableVirtualizedProps.md)
* [DataTableProps](type-aliases/DataTableProps.md)
* [QueryDataTableProps](type-aliases/QueryDataTableProps.md)
* [ArrowColumnMeta](type-aliases/ArrowColumnMeta.md)

## Variables

* [ColumnTypeBadge](variables/ColumnTypeBadge.md)
* [DataTableArrowPaginated](variables/DataTableArrowPaginated.md)
* [DataTableModal](variables/DataTableModal.md)
* [QueryDataTable](variables/QueryDataTable.md)
* [QueryDataTableActionsMenu](variables/QueryDataTableActionsMenu.md)

## Functions

* [DataTablePaginated](functions/DataTablePaginated.md)
* [~~DataTableVirtualized~~](functions/DataTableVirtualized.md)
* [useArrowDataTable](functions/useArrowDataTable.md)
* [makePagedQuery](functions/makePagedQuery.md)

---

---
url: /api/discuss.md
---
# @sqlrooms/discuss

A simple discussion system for SQLRooms applications. Can be used for commenting and annotation with support for threaded conversations, real-time updates, and anchor-based discussions.

## Overview

The `@sqlrooms/discuss` module provides a complete discussion system with the following key features:

* **Threaded conversations**: Support for replies to discussions and comments
* **Anchor-based discussions**: Link discussions to specific data points or UI elements
* **Real-time state management**: Built on Zustand for reactive updates
* **Customizable rendering**: Flexible component system for custom UI implementations
* **Delete confirmation**: Built-in confirmation dialogs for safe content removal
* **Highlighting**: Visual highlighting of specific discussions

## Main Components

### Core Components

#### `DiscussionList`

The main container component that renders all discussions with built-in forms for adding, editing, and replying to content.

```tsx
import {DiscussionList} from '@sqlrooms/discuss';

<DiscussionList
  className="flex flex-col gap-4"
  renderComment={(props) => <CustomCommentRenderer {...props} />}
  renderDiscussion={(props) => <CustomDiscussionRenderer {...props} />}
/>;
```

#### `CommentItem`

Individual comment renderer with built-in edit/delete actions.

```tsx
import {CommentItem} from '@sqlrooms/discuss';

<CommentItem comment={comment} discussion={discussion}>
  <div className="flex flex-col gap-1">
    <div className="text-muted-foreground text-xs">
      {comment.userId} - {formatTimeRelative(comment.timestamp)}
    </div>
    <div className="whitespace-pre-wrap text-sm">{comment.text}</div>
  </div>
</CommentItem>;
```

#### `DiscussionItem`

Container for a complete discussion thread including root comment and replies.

```tsx
import {DiscussionItem} from '@sqlrooms/discuss';

<DiscussionItem
  discussion={discussion}
  renderComment={customCommentRenderer}
  className="rounded border p-4"
/>;
```

### Store Integration

#### Store Setup with `createDiscussSlice`

To use the discussion system, you need to integrate it with your room store using `createDiscussSlice`:

```tsx
import {
  createDefaultDiscussConfig,
  createDiscussSlice,
  DiscussSliceConfig,
  DiscussSliceState,
} from '@sqlrooms/discuss';
import {
  BaseRoomConfig,
  createRoomShellSlice,
  createRoomStore,
  RoomShellSliceState,
} from '@sqlrooms/room-shell';
import {z} from 'zod';

// 1. Extend your app config with DiscussSliceConfig
export const RoomConfig = BaseRoomConfig.merge(DiscussSliceConfig);
export type RoomConfig = z.infer<typeof RoomConfig>;

// 2. Extend your app state with DiscussSliceState
export type RoomState = RoomShellSliceState<RoomConfig> & DiscussSliceState;

// 3. Create the store with discuss slice
export const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
  (set, get, store) => ({
    // Add the discuss slice with a user ID
    ...createDiscussSlice({userId: 'current-user-id'})(set, get, store),

    // Add your room shell slice
    ...createRoomShellSlice<RoomConfig>({
      connector: yourDatabaseConnector,
      config: {
        // Include default discuss config
        ...createDefaultDiscussConfig(),
        // Your other config...
        layout: {
          /* your layout */
        },
        dataSources: [
          /* your data sources */
        ],
      },
      room: {
        // Your room configuration
      },
    })(set, get, store),
  }),
);
```

#### Using the Store Hook

Access discussion state and actions using the provided hook:

```tsx
import {useStoreWithDiscussion} from '@sqlrooms/discuss';

function MyComponent() {
  // Get discussions
  const discussions = useStoreWithDiscussion(
    (state) => state.discuss.config.discussions,
  );

  // Get actions
  const addDiscussion = useStoreWithDiscussion(
    (state) => state.discuss.addDiscussion,
  );
  const setReplyToItem = useStoreWithDiscussion(
    (state) => state.discuss.setReplyToItem,
  );

  // Add a new discussion
  const handleAddDiscussion = (text: string, anchorId?: string) => {
    addDiscussion(text, anchorId);
  };

  // Start replying to a discussion
  const handleReply = (discussionId: string) => {
    setReplyToItem({discussionId});
  };
}
```

## Usage Examples

### Basic Discussion Panel

```tsx
import {DiscussionList, CommentItem} from '@sqlrooms/discuss';
import {useStoreWithDiscussion} from '@sqlrooms/discuss';
import {formatTimeRelative} from '@sqlrooms/utils';

const DiscussionPanel = () => {
  const discussions = useStoreWithDiscussion(
    (state) => state.discuss.config.discussions,
  );

  return (
    <div className="h-full">
      {discussions.length === 0 ? (
        <div className="py-10 text-center text-gray-400">
          <p>No comments yet. Start a discussion!</p>
        </div>
      ) : (
        <DiscussionList
          className="flex flex-col gap-4"
          renderComment={(props) => {
            const {comment, discussion} = props;
            const {anchorId} = discussion;
            const isRootComment = comment.id === discussion.rootComment.id;

            return (
              <CommentItem {...props}>
                <div className="flex flex-col gap-1">
                  {anchorId && isRootComment && (
                    <div className="text-md flex items-center gap-2 font-medium">
                      📍 Linked to: {anchorId}
                    </div>
                  )}
                  <div className="text-muted-foreground text-xs">
                    {comment.userId} - {formatTimeRelative(comment.timestamp)}
                  </div>
                  <div className="whitespace-pre-wrap text-sm">
                    {comment.text}
                  </div>
                </div>
              </CommentItem>
            );
          }}
        />
      )}
    </div>
  );
};
```

### Anchor-Based Discussions

Link discussions to specific data points or UI elements:

```tsx
import {useStoreWithDiscussion} from '@sqlrooms/discuss';

function DataVisualization() {
  const addDiscussion = useStoreWithDiscussion(
    (state) => state.discuss.addDiscussion,
  );
  const setHighlightedDiscussionId = useStoreWithDiscussion(
    (state) => state.discuss.setHighlightedDiscussionId,
  );

  // Handle clicking on a data point
  const handleDataPointClick = (dataId: string) => {
    // Add a discussion linked to this data point
    addDiscussion('What do you think about this data point?', dataId);
  };

  // Highlight related discussion when hovering over data
  const handleDataPointHover = (dataId: string) => {
    const discussions =
      useStoreWithDiscussion.getState().discuss.config.discussions;
    const relatedDiscussion = discussions.find((d) => d.anchorId === dataId);
    if (relatedDiscussion) {
      setHighlightedDiscussionId(relatedDiscussion.id);
    }
  };

  return (
    <div>
      {/* Your data visualization with clickable elements */}
      <div
        onClick={() => handleDataPointClick('airport-LAX')}
        onMouseEnter={() => handleDataPointHover('airport-LAX')}
        className="cursor-pointer hover:bg-blue-100"
      >
        LAX Airport
      </div>
    </div>
  );
}
```

### Custom Comment Rendering

```tsx
import {DiscussionList, CommentItem} from '@sqlrooms/discuss';
import {Avatar, Badge} from '@sqlrooms/ui';

const CustomDiscussionPanel = () => {
  return (
    <DiscussionList
      renderComment={(props) => {
        const {comment, discussion} = props;

        return (
          <CommentItem {...props}>
            <div className="flex gap-3">
              <Avatar className="h-8 w-8">
                {comment.userId.charAt(0).toUpperCase()}
              </Avatar>
              <div className="flex-1">
                <div className="mb-1 flex items-center gap-2">
                  <span className="font-medium">{comment.userId}</span>
                  <Badge variant="secondary" className="text-xs">
                    {formatTimeRelative(comment.timestamp)}
                  </Badge>
                </div>
                <div className="text-sm leading-relaxed">{comment.text}</div>
              </div>
            </div>
          </CommentItem>
        );
      }}
    />
  );
};
```

### Programmatic Discussion Management

```tsx
import {useStoreWithDiscussion} from '@sqlrooms/discuss';

function DiscussionManager() {
  const {
    addDiscussion,
    removeDiscussion,
    addComment,
    setReplyToItem,
    setEditingItem,
    submitEdit,
  } = useStoreWithDiscussion((state) => state.discuss);

  // Add a new discussion
  const createDiscussion = () => {
    addDiscussion('New discussion topic', 'optional-anchor-id');
  };

  // Reply to a discussion
  const replyToDiscussion = (discussionId: string) => {
    setReplyToItem({discussionId});
    // User can now type in the form and call submitEdit
  };

  // Edit a comment
  const editComment = (discussionId: string, commentId: string) => {
    setEditingItem({discussionId, commentId});
    // User can now edit in the form and call submitEdit
  };

  // Direct comment addition (bypassing UI state)
  const addDirectComment = (discussionId: string, text: string) => {
    addComment(discussionId, text);
  };

  return (
    <div className="flex gap-2">
      <button onClick={createDiscussion}>New Discussion</button>
      <button onClick={() => replyToDiscussion('discussion-id')}>Reply</button>
      <button onClick={() => editComment('discussion-id', 'comment-id')}>
        Edit
      </button>
    </div>
  );
}
```

## API Reference

### Types

* `Comment`: Individual comment with id, userId, text, timestamp, and optional parentId
* `Discussion`: Container with id, optional anchorId, rootComment, and array of reply comments
* `DiscussSliceConfig`: Configuration type for the discuss slice
* `DiscussSliceState`: State type including all discussion actions and UI state

### Key Functions

* `createDiscussSlice({ userId })`: Creates the discussion slice for your store
* `createDefaultDiscussConfig()`: Returns default configuration for discussions
* `useStoreWithDiscussion(selector)`: Hook to access discussion state and actions

### Main Actions

* `submitEdit(text)`: Submit based on current UI state (add/reply/edit)
* `addDiscussion(text, anchorId?)`: Add new discussion
* `addComment(discussionId, text, parentId?)`: Add reply to discussion
* `setReplyToItem(item)`: Set reply context for UI
* `setEditingItem(item)`: Set editing context for UI
* `setHighlightedDiscussionId(id)`: Highlight specific discussion

This module integrates seamlessly with the SQLRooms ecosystem and provides a complete foundation for building collaborative discussion features in your applications.

## Type Aliases

* [Comment](type-aliases/Comment.md)
* [Discussion](type-aliases/Discussion.md)
* [DiscussSliceConfig](type-aliases/DiscussSliceConfig.md)
* [DiscussSliceState](type-aliases/DiscussSliceState.md)
* [RoomStateWithDiscussion](type-aliases/RoomStateWithDiscussion.md)

## Variables

* [Comment](variables/Comment.md)
* [Discussion](variables/Discussion.md)
* [DiscussSliceConfig](variables/DiscussSliceConfig.md)
* [DiscussionList](variables/DiscussionList.md)
* [CommentItem](variables/CommentItem.md)
* [DiscussionItem](variables/DiscussionItem.md)

## Functions

* [createDefaultDiscussConfig](functions/createDefaultDiscussConfig.md)
* [createDiscussSlice](functions/createDiscussSlice.md)
* [useStoreWithDiscussion](functions/useStoreWithDiscussion.md)
* [DeleteConfirmDialog](functions/DeleteConfirmDialog.md)

---

---
url: /api/dropzone.md
---
# @sqlrooms/dropzone

This package is part of the SQLRooms framework.

A flexible file upload component for SQLRooms applications that provides drag-and-drop functionality for files. This package makes it easy to handle file uploads with a modern, user-friendly interface.

## Features

* 📁 **Drag and Drop**: Intuitive drag-and-drop file upload interface
* 📋 **File Selection**: Traditional file selection dialog support
* 🔍 **File Validation**: Validate file types and sizes
* 📊 **Upload Progress**: Track and display upload progress
* 🎨 **Customizable**: Flexible styling and configuration options
* 🧩 **React Integration**: Seamless integration with React applications

## Installation

```bash
npm install @sqlrooms/dropzone
# or
yarn add @sqlrooms/dropzone
```

## Basic Usage

### Simple File Dropzone

```tsx
import {FileDropzone} from '@sqlrooms/dropzone';

function MyFileUploader() {
  const handleFileDrop = (files) => {
    console.log('Files dropped:', files);
    // Process the files...
  };

  return (
    <FileDropzone
      onFileDrop={handleFileDrop}
      accept=".csv,.json,.xlsx"
      maxSize={10 * 1024 * 1024} // 10MB
    />
  );
}
```

### With Custom Styling

```tsx
import {FileDropzone} from '@sqlrooms/dropzone';

function CustomStyledDropzone() {
  return (
    <FileDropzone
      onFileDrop={handleFiles}
      className="rounded-lg border-2 border-dashed border-blue-400 p-8 transition-colors hover:border-blue-600"
      activeClassName="border-green-500 bg-green-50"
      rejectClassName="border-red-500 bg-red-50"
      dragMessage="Drop your files here"
      idleMessage="Drag files or click to upload"
      rejectMessage="File type not supported"
    />
  );
}
```

### With File Type Validation

```tsx
import {FileDropzone} from '@sqlrooms/dropzone';

function DataFileUploader() {
  const handleFileDrop = (files) => {
    // Process data files...
  };

  return (
    <div className="rounded-lg border p-4">
      <h2 className="mb-2 text-xl font-bold">Upload Data Files</h2>
      <p className="mb-4 text-gray-600">
        Supported formats: CSV, JSON, Excel, Parquet
      </p>
      <FileDropzone
        onFileDrop={handleFileDrop}
        accept={{
          'text/csv': ['.csv'],
          'application/json': ['.json'],
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': [
            '.xlsx',
          ],
          'application/octet-stream': ['.parquet'],
        }}
        maxFiles={5}
        maxSize={50 * 1024 * 1024} // 50MB
      />
    </div>
  );
}
```

## Advanced Features

* **Multiple File Upload**: Support for uploading multiple files at once
* **File Preview**: Preview files before uploading
* **Custom Validation**: Define custom validation rules for files
* **Upload Cancellation**: Cancel ongoing uploads
* **Accessibility**: Fully accessible interface with keyboard support

For more information, visit the SQLRooms documentation.

## Variables

* [FileDropzone](variables/FileDropzone.md)

---

---
url: /api/duckdb.md
---
# @sqlrooms/duckdb

A powerful wrapper around DuckDB-WASM that provides React hooks and utilities for working with DuckDB in browser environments.

## Features

### React Integration & Type Safety

* **React Hooks**: Seamless integration with React applications via `useSql`
* **Runtime Validation**: Optional Zod schema validation for query results with type transformations
* **Typed Row Accessors**: Type-safe row access with validation and multiple iteration methods

### Data Management

* **File Operations**: Import data from various file formats (CSV, JSON, Parquet) with auto-detection
* **Arrow Integration**: Work directly with Apache Arrow tables for efficient columnar data processing
* **Schema Management**: Comprehensive database, schema, and table discovery and management
* **Qualified Table Names**: Full support for `database.schema.table` naming convention

### Performance & Operations

* **Query Deduplication**: Automatic deduplication of identical running queries to prevent duplicate execution
* **Query Cancellation**: Cancel running queries with full composability support via `QueryHandle` interface ([learn more](https://sqlrooms.org/query-cancellation))
* **Data Export**: Export query results to CSV files with pagination for large datasets
* **Batch Processing**: Handle large datasets efficiently with built-in pagination support

## Installation

```bash
npm install @sqlrooms/duckdb
```

## Basic Usage

### Using the SQL Hook

```tsx
import {useSql} from '@sqlrooms/duckdb';

function UserList() {
  // Basic usage with TypeScript types
  const {data, isLoading, error} = useSql<{id: number; name: string}>({
    query: 'SELECT id, name FROM users',
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return null;

  return (
    <ul>
      {Array.from(data.rows()).map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
```

For more information and examples on using the `useSql` hook, see the [useSql API documentation](/api/duckdb/functions/useSql).

### Using Zod for Runtime Validation

```tsx
import {useSql} from '@sqlrooms/duckdb';
import {z} from 'zod';

const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  created_at: z.string().transform((str) => new Date(str)),
});

function ValidatedUserList() {
  const {data, isLoading, error} = useSql(userSchema, {
    query: 'SELECT id, name, email, created_at FROM users',
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) {
    if (error instanceof z.ZodError) {
      return <div>Validation Error: {error.errors[0].message}</div>;
    }
    return <div>Error: {error.message}</div>;
  }
  if (!data) return null;

  return (
    <ul>
      {data.toArray().map((user) => (
        <li key={user.id}>
          {user.name} ({user.email}) - Joined:{' '}
          {user.created_at.toLocaleDateString()}
        </li>
      ))}
    </ul>
  );
}
```

### Accessing the Underlying Arrow Table and Schema

You can access the underlying Arrow table and schema of a `useSql()` query result. This is especially useful if you want to pass the data to a library that expect an Apache Arrow Table as input without additional data transformation:

```tsx
import {useSql} from '@sqlrooms/duckdb';

function ArrowTableSchemaExample() {
  const {data, isLoading, error} = useSql({
    query: 'SELECT id, name FROM users',
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data || !data.arrowTable) return null;

  const {arrowTable} = data;
  const fields = arrowTable.schema.fields;
  const numRows = arrowTable.numRows;

  return (
    <table>
      <thead>
        <tr>
          {fields.map((field) => (
            <th key={field.name}>{field.name}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {Array.from({length: numRows}).map((_, rowIdx) => (
          <tr key={rowIdx}>
            {fields.map((field, colIdx) => (
              <td key={field.name}>
                {String(arrowTable.getChildAt(colIdx)?.get(rowIdx) ?? '')}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}
```

## Working with Tables

### Using the Store for Direct Database Operations

```tsx
function DatabaseManager() {
  const createTableFromQuery = useRoomStore(
    (state) => state.db.createTableFromQuery,
  );
  const addTable = useRoomStore((state) => state.db.addTable);
  const dropTable = useRoomStore((state) => state.db.dropTable);
  const tables = useRoomStore((state) => state.db.tables);
  const refreshTableSchemas = useRoomStore(
    (state) => state.db.refreshTableSchemas,
  );

  // Create a table from a query
  const handleCreateTable = async () => {
    const result = await createTableFromQuery(
      'filtered_users',
      'SELECT * FROM users WHERE active = true',
    );
    console.log(`Created table with ${result.rowCount} rows`);
  };

  // Add a table from JavaScript objects
  const handleAddTable = async () => {
    const users = [
      {id: 1, name: 'Alice', email: 'alice@example.com'},
      {id: 2, name: 'Bob', email: 'bob@example.com'},
    ];
    await addTable('new_users', users);
  };

  // Drop a table
  const handleDropTable = async () => {
    await dropTable('old_table');
  };

  return (
    <div>
      <button onClick={handleCreateTable}>Create Filtered Users Table</button>
      <button onClick={handleAddTable}>Add New Users Table</button>
      <button onClick={handleDropTable}>Drop Old Table</button>
      <button onClick={refreshTableSchemas}>Refresh Schemas</button>

      <h3>Available Tables:</h3>
      <ul>
        {tables.map((table) => (
          <li key={table.table.toString()}>
            {table.table.toString()} ({table.columns.length} columns)
          </li>
        ))}
      </ul>
    </div>
  );
}
```

### Working with Qualified Table Names

```tsx
import {makeQualifiedTableName} from '@sqlrooms/duckdb';

// Support for database.schema.table naming
const qualifiedTable = makeQualifiedTableName({
  database: 'mydb',
  schema: 'public',
  table: 'users',
});

// Use with table operations
await createTableFromQuery(qualifiedTable, 'SELECT * FROM source_table');
await dropTable(qualifiedTable);
const tableExists = await checkTableExists(qualifiedTable);
```

## Loading Data from Files

### Using Load Functions Directly

```tsx
import {loadCSV, loadJSON, loadParquet, loadObjects} from '@sqlrooms/duckdb';

function DataLoader() {
  const getConnector = useRoomStore((state) => state.db.getConnector);

  const handleLoadCSV = async (file: File) => {
    const connector = await getConnector();

    // Generate SQL to load CSV file
    const sql = loadCSV('my_table', file.name, {
      auto_detect: true,
      replace: true,
    });

    // Execute the load operation
    await connector.query(sql).result;
  };

  const handleLoadObjects = async () => {
    const connector = await getConnector();
    const data = [
      {id: 1, name: 'Alice'},
      {id: 2, name: 'Bob'},
    ];

    // Generate SQL to load objects
    const sql = loadObjects('users', data, {replace: true});
    await connector.query(sql).result;
  };

  return (
    <div>
      <input
        type="file"
        accept=".csv"
        onChange={(e) => {
          if (e.target.files?.[0]) handleLoadCSV(e.target.files[0]);
        }}
      />
      <button onClick={handleLoadObjects}>Load Sample Data</button>
    </div>
  );
}
```

### Using the Connector Directly

```tsx
function AdvancedDataLoader() {
  const connector = useRoomStore((state) => state.db.connector);

  const handleFileUpload = async (file: File) => {
    // Load file directly using the connector
    await connector.loadFile(file, 'uploaded_data', {
      method: 'auto', // Auto-detect file type
      replace: true,
      temp: false,
    });
  };

  const handleLoadArrowTable = async (arrowTable: arrow.Table) => {
    // Load Arrow table directly
    await connector.loadArrow(arrowTable, 'arrow_data');
  };

  return (
    <input
      type="file"
      accept=".csv,.json,.parquet"
      onChange={(e) => {
        if (e.target.files?.[0]) handleFileUpload(e.target.files[0]);
      }}
    />
  );
}
```

## Exporting Data to CSV

```tsx
import {useExportToCsv} from '@sqlrooms/duckdb';

function ExportButton() {
  const {exportToCsv} = useExportToCsv();

  const handleExport = async () => {
    await exportToCsv('SELECT * FROM users ORDER BY name', 'users_export.csv');
  };

  return <button onClick={handleExport}>Export to CSV</button>;
}
```

## Low-Level DuckDB Access

### Basic direct usage

```tsx
async function executeCustomQuery() {
  // Grab the connector directly (no React hook necessary inside plain TS)
  const connector = useRoomStore((state) => state.db.connector);

  // QueryHandle is promise-like – await it directly
  const result = await connector.query('SELECT COUNT(*) AS count FROM users');

  // Inspect Arrow table
  const count = result.getChildAt(0)?.get(0);
  console.log(`Total users: ${count}`);
}
```

### Cancellation examples

```tsx
async function cancelExample() {
  const connector = useRoomStore((state) => state.db.connector);

  // 1. Manual cancel via the handle
  const query = connector.query('SELECT * FROM large_table');
  setTimeout(() => h.cancel(), 2000); // cancel after 2 s
  await query; // throws if cancelled

  // 2. Composable cancellation – many queries, one controller
  const controller = new AbortController();
  const q1 = connector.query('SELECT 1', {signal: controller.signal});
  const q2 = connector.query('SELECT 2', {signal: controller.signal});
  controller.abort(); // cancels q1 & q2
  await Promise.allSettled([q1, q2]);
}
```

### Advanced operations with the Zustand store

```tsx
function AdvancedOperations() {
  const executeSql = useRoomStore((s) => s.db.executeSql);
  const sqlSelectToJson = useRoomStore((s) => s.db.sqlSelectToJson);
  const checkTableExists = useRoomStore((s) => s.db.checkTableExists);

  const handleAdvancedQuery = async () => {
    // Cached execution with deduplication
    const query = await executeSql('SELECT * FROM users LIMIT 10');
    if (query) {
      const rows = await query; // await handle directly
      console.log('Query result:', rows);
    }

    // Parse SQL to JSON (analysis tool)
    const parsed = await sqlSelectToJson('SELECT id, name FROM users');
    console.log('Parsed query:', parsed);

    // Safety check before destructive operations
    const exists = await checkTableExists('users');
    console.log('Table exists:', exists);
  };

  return <button onClick={handleAdvancedQuery}>Run Advanced Operations</button>;
}
```

For more information, visit the SQLRooms documentation.

## Enumerations

* [DuckDBAccessMode](enumerations/DuckDBAccessMode.md)

## Interfaces

* [DuckDBConfig](interfaces/DuckDBConfig.md)
* [DuckDBBundles](interfaces/DuckDBBundles.md)
* [WasmDuckDbConnector](interfaces/WasmDuckDbConnector.md)
* [WebSocketDuckDbConnectorOptions](interfaces/WebSocketDuckDbConnectorOptions.md)
* [WebSocketDuckDbConnector](interfaces/WebSocketDuckDbConnector.md)
* [UseSqlQueryResult](interfaces/UseSqlQueryResult.md)
* [BaseDuckDbConnectorOptions](interfaces/BaseDuckDbConnectorOptions.md)
* [BaseDuckDbConnectorImpl](interfaces/BaseDuckDbConnectorImpl.md)
* [QueryOptions](interfaces/QueryOptions.md)
* [DuckDbConnector](interfaces/DuckDbConnector.md)
* [TypedRowAccessor](interfaces/TypedRowAccessor.md)

## Type Aliases

* [SchemaAndDatabase](type-aliases/SchemaAndDatabase.md)
* [DuckDbSliceState](type-aliases/DuckDbSliceState.md)
* [DuckDbConnectorType](type-aliases/DuckDbConnectorType.md)
* [~~DuckDbConnectorOptions~~](type-aliases/DuckDbConnectorOptions.md)
* [~~DuckDbQueryResult~~](type-aliases/DuckDbQueryResult.md)
* [QueryHandle](type-aliases/QueryHandle.md)
* [QualifiedTableName](type-aliases/QualifiedTableName.md)
* [SeparatedStatements](type-aliases/SeparatedStatements.md)
* [ColumnTypeCategory](type-aliases/ColumnTypeCategory.md)
* [DbSchemaNode](type-aliases/DbSchemaNode.md)
* [NodeObject](type-aliases/NodeObject.md)
* [ColumnNodeObject](type-aliases/ColumnNodeObject.md)
* [TableNodeObject](type-aliases/TableNodeObject.md)
* [SchemaNodeObject](type-aliases/SchemaNodeObject.md)
* [DatabaseNodeObject](type-aliases/DatabaseNodeObject.md)
* [TableColumn](type-aliases/TableColumn.md)
* [DataTable](type-aliases/DataTable.md)
* [SpatialLoadFileOptions](type-aliases/SpatialLoadFileOptions.md)
* [LoadFileOptions](type-aliases/LoadFileOptions.md)

## Variables

* [~~useDuckDbQuery~~](variables/useDuckDbQuery.md)
* [escapeVal](variables/escapeVal.md)
* [escapeId](variables/escapeId.md)
* [isNumericDuckType](variables/isNumericDuckType.md)
* [getSqlErrorWithPointer](variables/getSqlErrorWithPointer.md)
* [SpatialLoadFileOptions](variables/SpatialLoadFileOptions.md)
* [isSpatialLoadFileOptions](variables/isSpatialLoadFileOptions.md)
* [LoadFileOptions](variables/LoadFileOptions.md)

## Functions

* [createDuckDbSlice](functions/createDuckDbSlice.md)
* [useStoreWithDuckDb](functions/useStoreWithDuckDb.md)
* [createWasmDuckDbConnector](functions/createWasmDuckDbConnector.md)
* [createWebSocketDuckDbConnector](functions/createWebSocketDuckDbConnector.md)
* [createDuckDbConnector](functions/createDuckDbConnector.md)
* [isWasmDuckDbConnector](functions/isWasmDuckDbConnector.md)
* [useExportToCsv](functions/useExportToCsv.md)
* [useDuckDb](functions/useDuckDb.md)
* [useSql](functions/useSql.md)
* [createBaseDuckDbConnector](functions/createBaseDuckDbConnector.md)
* [arrowTableToJson](functions/arrowTableToJson.md)
* [isQualifiedTableName](functions/isQualifiedTableName.md)
* [makeQualifiedTableName](functions/makeQualifiedTableName.md)
* [getColValAsNumber](functions/getColValAsNumber.md)
* [splitSqlStatements](functions/splitSqlStatements.md)
* [sanitizeQuery](functions/sanitizeQuery.md)
* [makeLimitQuery](functions/makeLimitQuery.md)
* [separateLastStatement](functions/separateLastStatement.md)
* [joinStatements](functions/joinStatements.md)
* [load](functions/load.md)
* [loadCSV](functions/loadCSV.md)
* [loadJSON](functions/loadJSON.md)
* [loadParquet](functions/loadParquet.md)
* [loadSpatial](functions/loadSpatial.md)
* [loadObjects](functions/loadObjects.md)
* [sqlFrom](functions/sqlFrom.md)
* [literalToSQL](functions/literalToSQL.md)
* [createDbSchemaTrees](functions/createDbSchemaTrees.md)
* [getDuckDbTypeCategory](functions/getDuckDbTypeCategory.md)
* [getArrowColumnTypeCategory](functions/getArrowColumnTypeCategory.md)
* [createTypedRowAccessor](functions/createTypedRowAccessor.md)

---

---
url: /api/duckdb-core.md
---
# @sqlrooms/duckdb-core

## Interfaces

* [BaseDuckDbConnectorOptions](interfaces/BaseDuckDbConnectorOptions.md)
* [BaseDuckDbConnectorImpl](interfaces/BaseDuckDbConnectorImpl.md)
* [QueryOptions](interfaces/QueryOptions.md)
* [DuckDbConnector](interfaces/DuckDbConnector.md)
* [TypedRowAccessor](interfaces/TypedRowAccessor.md)

## Type Aliases

* [QueryHandle](type-aliases/QueryHandle.md)
* [QualifiedTableName](type-aliases/QualifiedTableName.md)
* [SeparatedStatements](type-aliases/SeparatedStatements.md)
* [ColumnTypeCategory](type-aliases/ColumnTypeCategory.md)
* [DbSchemaNode](type-aliases/DbSchemaNode.md)
* [NodeObject](type-aliases/NodeObject.md)
* [ColumnNodeObject](type-aliases/ColumnNodeObject.md)
* [TableNodeObject](type-aliases/TableNodeObject.md)
* [SchemaNodeObject](type-aliases/SchemaNodeObject.md)
* [DatabaseNodeObject](type-aliases/DatabaseNodeObject.md)
* [TableColumn](type-aliases/TableColumn.md)
* [DataTable](type-aliases/DataTable.md)

## Functions

* [createBaseDuckDbConnector](functions/createBaseDuckDbConnector.md)
* [arrowTableToJson](functions/arrowTableToJson.md)
* [isQualifiedTableName](functions/isQualifiedTableName.md)
* [makeQualifiedTableName](functions/makeQualifiedTableName.md)
* [escapeVal](functions/escapeVal.md)
* [escapeId](functions/escapeId.md)
* [isNumericDuckType](functions/isNumericDuckType.md)
* [getColValAsNumber](functions/getColValAsNumber.md)
* [getSqlErrorWithPointer](functions/getSqlErrorWithPointer.md)
* [splitSqlStatements](functions/splitSqlStatements.md)
* [sanitizeQuery](functions/sanitizeQuery.md)
* [makeLimitQuery](functions/makeLimitQuery.md)
* [separateLastStatement](functions/separateLastStatement.md)
* [joinStatements](functions/joinStatements.md)
* [load](functions/load.md)
* [loadCSV](functions/loadCSV.md)
* [loadJSON](functions/loadJSON.md)
* [loadParquet](functions/loadParquet.md)
* [loadSpatial](functions/loadSpatial.md)
* [loadObjects](functions/loadObjects.md)
* [sqlFrom](functions/sqlFrom.md)
* [literalToSQL](functions/literalToSQL.md)
* [createDbSchemaTrees](functions/createDbSchemaTrees.md)
* [getDuckDbTypeCategory](functions/getDuckDbTypeCategory.md)
* [getArrowColumnTypeCategory](functions/getArrowColumnTypeCategory.md)
* [createTypedRowAccessor](functions/createTypedRowAccessor.md)

---

---
url: /api/duckdb-node.md
---
# @sqlrooms/duckdb-node

@sqlrooms/duckdb-node - Node.js DuckDB connector for SQLRooms

This package provides a DuckDB connector for Node.js environments using
the @duckdb/node-api package.

## Interfaces

* [QueryOptions](interfaces/QueryOptions.md)
* [DuckDbConnector](interfaces/DuckDbConnector.md)
* [NodeDuckDbConnectorOptions](interfaces/NodeDuckDbConnectorOptions.md)
* [NodeDuckDbConnector](interfaces/NodeDuckDbConnector.md)

## Type Aliases

* [QueryHandle](type-aliases/QueryHandle.md)

## Functions

* [createNodeDuckDbConnector](functions/createNodeDuckDbConnector.md)

---

---
url: /api/kepler.md
---
# @sqlrooms/kepler

SQLRooms integration for [Kepler.gl](http://kepler.gl)

Refer to the [Kepler integration example](https://github.com/sqlrooms/examples/tree/main/kepler).

## Enumerations

* [AddDataMethods](enumerations/AddDataMethods.md)

## Type Aliases

* [KeplerSliceState](type-aliases/KeplerSliceState.md)
* [KeplerAddDataDialogProps](type-aliases/KeplerAddDataDialogProps.md)
* [LoadTileSet](type-aliases/LoadTileSet.md)
* [KeplerS3BrowserProps](type-aliases/KeplerS3BrowserProps.md)
* [KeplerMapSchema](type-aliases/KeplerMapSchema.md)
* [KeplerSliceConfig](type-aliases/KeplerSliceConfig.md)

## Variables

* [FileDropInput](variables/FileDropInput.md)
* [KeplerImageExport](variables/KeplerImageExport.md)
* [KeplerMapContainer](variables/KeplerMapContainer.md)
* [KeplerPlotContainer](variables/KeplerPlotContainer.md)
* [KeplerProvider](variables/KeplerProvider.md)
* [KeplerSidePanels](variables/KeplerSidePanels.md)
* [KeplerMapSchema](variables/KeplerMapSchema.md)
* [KeplerSliceConfig](variables/KeplerSliceConfig.md)

## Functions

* [createDefaultKeplerConfig](functions/createDefaultKeplerConfig.md)
* [createKeplerSlice](functions/createKeplerSlice.md)
* [useStoreWithKepler](functions/useStoreWithKepler.md)
* [KeplerAddDataDialog](functions/KeplerAddDataDialog.md)
* [KeplerAddTileSetDialog](functions/KeplerAddTileSetDialog.md)
* [KeplerS3Browser](functions/KeplerS3Browser.md)
* [useKeplerStateActions](functions/useKeplerStateActions.md)

---

---
url: /api/kepler-config.md
---
# @sqlrooms/kepler-config

This package is part of the SQLRooms framework.

# Kepler slice config

Zod schema definitions for `@sqlrooms/s3-kepler`

## Type Aliases

* [KeplerMapSchema](type-aliases/KeplerMapSchema.md)
* [KeplerSliceConfig](type-aliases/KeplerSliceConfig.md)

## Variables

* [KeplerMapSchema](variables/KeplerMapSchema.md)
* [KeplerSliceConfig](variables/KeplerSliceConfig.md)

---

---
url: /api/layout.md
---
# @sqlrooms/layout

This package is part of the SQLRooms framework and provides flexible layout components for building complex, resizable, and draggable interfaces.

## Overview

The `@sqlrooms/layout` package offers a set of components and utilities for creating dynamic, multi-pane layouts in SQLRooms applications. It's primarily built around the [react-mosaic](https://nomcopter.github.io/react-mosaic/) library, which provides a powerful windowing system similar to the one found in advanced IDEs.

> **Note:** This package uses [react-mosaic](https://nomcopter.github.io/react-mosaic/) which should not be confused with [uwdata/mosaic](https://github.com/uwdata/mosaic) used in the [`@sqlrooms/mosaic`](/api/mosaic/) package for data visualization purposes.

## Installation

```bash
npm install @sqlrooms/layout
```

## Mosaic Tree Structure

The mosaic layout is defined by a tree structure where each node is either a string (representing a panel ID) or an object with `direction`, `first`, `second`, and optional `splitPercentage` properties. Here's an example of how a mosaic tree might look:

```tsx
// Simple two-panel layout with 30/70 split
const simpleMosaicTree = {
  direction: 'row',
  first: 'data-sources', // Left panel (30% width)
  second: 'main', // Right panel (70% width)
  splitPercentage: 30,
};

// More complex nested layout
const complexMosaicTree = {
  direction: 'row',
  first: 'data-sources', // Left panel
  second: {
    // Right side contains a nested layout
    direction: 'column',
    first: 'main', // Top panel
    second: {
      // Bottom contains another nested layout
      direction: 'row',
      first: 'sql-editor',
      second: 'visualization',
      splitPercentage: 50,
    },
    splitPercentage: 60,
  },
  splitPercentage: 20,
};
```

## Components

### MosaicLayout

A wrapper around the `Mosaic` component from react-mosaic-component that provides a customized look and feel consistent with SQLRooms styling.

```tsx
import {MosaicLayout} from '@sqlrooms/layout';

// Example usage
<MosaicLayout
  renderTile={(id, path) => <YourTileContent id={id} />}
  value={yourMosaicTree}
  onChange={handleLayoutChange}
/>;
```

### MosaicTile

A component for rendering individual tiles within the mosaic layout.

## Utility Functions

The package provides several utility functions for working with mosaic layouts:

* `makeMosaicStack`: Creates a stack of mosaic nodes with specified weights and direction
* `visitMosaicLeafNodes`: Traverses all leaf nodes in a mosaic tree
* `getVisibleMosaicLayoutPanels`: Gets an array of all visible panel IDs
* `findMosaicNodePathByKey`: Finds the path to a specific node by its key
* `removeMosaicNodeByKey`: Removes a node from the mosaic tree by its key

## Learn More

For more information about the underlying react-mosaic library, visit:

* [react-mosaic documentation](https://nomcopter.github.io/react-mosaic/)
* [react-mosaic GitHub repository](https://github.com/nomcopter/react-mosaic)

## License

MIT

## Type Aliases

* [RoomPanelInfo](type-aliases/RoomPanelInfo.md)
* [LayoutSliceConfig](type-aliases/LayoutSliceConfig.md)
* [LayoutSliceState](type-aliases/LayoutSliceState.md)
* [CreateLayoutSliceProps](type-aliases/CreateLayoutSliceProps.md)
* [LayoutTypes](type-aliases/LayoutTypes.md)
* [MosaicLayoutDirection](type-aliases/MosaicLayoutDirection.md)
* [MosaicLayoutParent](type-aliases/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](type-aliases/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](type-aliases/MosaicLayoutNode.md)
* [MosaicLayoutConfig](type-aliases/MosaicLayoutConfig.md)
* [LayoutConfig](type-aliases/LayoutConfig.md)

## Variables

* [LayoutSliceConfig](variables/LayoutSliceConfig.md)
* [MosaicLayout](variables/MosaicLayout.md)
* [MAIN\_VIEW](variables/MAIN_VIEW.md)
* [LayoutTypes](variables/LayoutTypes.md)
* [~~DEFAULT\_MOSAIC\_LAYOUT~~](variables/DEFAULT_MOSAIC_LAYOUT.md)
* [MosaicLayoutDirection](variables/MosaicLayoutDirection.md)
* [MosaicLayoutParent](variables/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](variables/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](variables/MosaicLayoutNode.md)
* [MosaicLayoutConfig](variables/MosaicLayoutConfig.md)
* [LayoutConfig](variables/LayoutConfig.md)

## Functions

* [createDefaultLayoutConfig](functions/createDefaultLayoutConfig.md)
* [createLayoutSlice](functions/createLayoutSlice.md)
* [useStoreWithLayout](functions/useStoreWithLayout.md)
* [makeMosaicStack](functions/makeMosaicStack.md)
* [visitMosaicLeafNodes](functions/visitMosaicLeafNodes.md)
* [getVisibleMosaicLayoutPanels](functions/getVisibleMosaicLayoutPanels.md)
* [findMosaicNodePathByKey](functions/findMosaicNodePathByKey.md)
* [removeMosaicNodeByKey](functions/removeMosaicNodeByKey.md)
* [createDefaultMosaicLayout](functions/createDefaultMosaicLayout.md)
* [isMosaicLayoutParent](functions/isMosaicLayoutParent.md)

---

---
url: /api/layout-config.md
---
# @sqlrooms/layout-config

A central configuration and type definitions package that maintains base layout configuration schemas and Zod schema definitions for SQLRooms. It provides TypeScript types and interfaces along with essential constants and utilities used for managing layouts.

## Features

* 📝 **Layout Configuration**: Define and manage room layout configuration schemas for Mosaic layouts
* 🔍 **Type Safety**: Strong TypeScript typing for layout configuration objects
* ✅ **Validation**: Zod schemas for runtime validation of layout configurations

## Installation

```bash
npm install @sqlrooms/layout-config
# or
yarn add @sqlrooms/layout-config
```

## Basic Usage

### Working with Mosaic Layout Configuration

```tsx
import {
  MosaicLayoutConfig,
  LayoutConfig,
  MAIN_VIEW,
} from '@sqlrooms/layout-config';

// Create a new room configuration
const layoutConfig: MosaicLayoutConfig = {
  type: 'mosaic',
  nodes: {
    direction: 'row',
    first: MAIN_VIEW,
    second: {
      direction: 'column',
      first: 'files',
      second: 'tables',
    },
  },
};

// This can be part of a bigger room configuration
interface RoomConfig {
  // ... other properties
  layout: LayoutConfig;
}
```

## Advanced Features

* **Schema Extensions**: Extend base schemas for custom room types
* **Configuration Validation**: Validate configurations at runtime
* **Serialization**: Convert configurations to/from JSON for storage

For more information, visit the SQLRooms documentation.

```
```

## Type Aliases

* [LayoutTypes](type-aliases/LayoutTypes.md)
* [MosaicLayoutDirection](type-aliases/MosaicLayoutDirection.md)
* [MosaicLayoutParent](type-aliases/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](type-aliases/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](type-aliases/MosaicLayoutNode.md)
* [MosaicLayoutConfig](type-aliases/MosaicLayoutConfig.md)
* [LayoutConfig](type-aliases/LayoutConfig.md)

## Variables

* [MAIN\_VIEW](variables/MAIN_VIEW.md)
* [LayoutTypes](variables/LayoutTypes.md)
* [~~DEFAULT\_MOSAIC\_LAYOUT~~](variables/DEFAULT_MOSAIC_LAYOUT.md)
* [MosaicLayoutDirection](variables/MosaicLayoutDirection.md)
* [MosaicLayoutParent](variables/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](variables/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](variables/MosaicLayoutNode.md)
* [MosaicLayoutConfig](variables/MosaicLayoutConfig.md)
* [LayoutConfig](variables/LayoutConfig.md)

## Functions

* [createDefaultMosaicLayout](functions/createDefaultMosaicLayout.md)
* [isMosaicLayoutParent](functions/isMosaicLayoutParent.md)

---

---
url: /api/monaco-editor.md
---
# @sqlrooms/monaco-editor

This package is part of the SQLRooms framework.

# Monaco Editor

Monaco Editor components for SQLRooms, including specialized editors for JSON.

## Installation

```bash
npm install @sqlrooms/monaco-editor
```

## Components

### MonacoEditor

A base Monaco Editor component with common functionality.

```tsx
import {MonacoEditor} from '@sqlrooms/monaco-editor';

function MyComponent() {
  return (
    <MonacoEditor
      className="h-[400px]"
      language="javascript"
      value="// Your code here"
      onChange={(value) => console.log(value)}
    />
  );
}
```

### JsonMonacoEditor

A specialized Monaco Editor for editing JSON with schema validation.

```tsx
import {JsonMonacoEditor} from '@sqlrooms/monaco-editor';

function MyJsonEditor() {
  const schema = {
    type: 'object',
    properties: {
      name: {type: 'string'},
      age: {type: 'number'},
    },
    required: ['name'],
  };

  return (
    <JsonMonacoEditor
      className="h-[400px]"
      value={{name: 'John', age: 30}}
      schema={schema}
      onChange={(value) => console.log(value)}
    />
  );
}
```

### Offline Use and Bundling

By default, the editor loads from a CDN, which is SSR-friendly (works with Next.js) and reduces bundle size.

For offline environments (like PWAs), configure Monaco once at app startup:

```ts
// main.tsx or app entry point
import {configureMonacoLoader} from '@sqlrooms/monaco-editor';
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

configureMonacoLoader({
  monaco,
  workers: {
    default: editorWorker,
    json: jsonWorker,
    typescript: tsWorker,
    javascript: tsWorker,
  },
});
```

Now all `<MonacoEditor />` components automatically work offline:

```tsx
// No configuration needed - automatically detected!
<MonacoEditor language="javascript" value="// Works offline!" />
```

**Note:** Vite requires the `?worker` suffix on worker imports. This is a thin wrapper around the [`loader.config` function](https://github.com/suren-atoyan/monaco-react#loader-config).

#### Custom CDN path

You can also specify a custom CDN path:

```ts
configureMonacoLoader({paths: {vs: 'https://unpkg.com/monaco-editor/min/vs'}});
```

## Props

### MonacoEditor Props

| Prop      | Type                 | Default      | Description                              |
| --------- | -------------------- | ------------ | ---------------------------------------- |
| className | string               | ''           | CSS class name for the editor container  |
| language  | string               | 'javascript' | The language of the editor               |
| theme     | 'vs-dark' | 'light' | 'vs-dark'    | The theme of the editor                  |
| value     | string               | ''           | The value of the editor                  |
| readOnly  | boolean              | false        | Whether the editor is read-only          |
| options   | object               | {}           | Additional options for the editor        |
| onMount   | function             | -            | Callback when the editor is mounted      |
| onChange  | function             | -            | Callback when the editor content changes |

### JsonMonacoEditor Props

Extends `MonacoEditorProps` with:

| Prop   | Type             | Default | Description                         |
| ------ | ---------------- | ------- | ----------------------------------- |
| schema | object           | -       | The JSON schema to validate against |
| value  | string | object | ''      | The JSON value to edit              |

## License

MIT

## Interfaces

* [JsonMonacoEditorProps](interfaces/JsonMonacoEditorProps.md)
* [MonacoEditorProps](interfaces/MonacoEditorProps.md)
* [LoaderWorkers](interfaces/LoaderWorkers.md)
* [MonacoLoaderOptions](interfaces/MonacoLoaderOptions.md)

## Type Aliases

* [LoaderConfig](type-aliases/LoaderConfig.md)

## Variables

* [JsonMonacoEditor](variables/JsonMonacoEditor.md)
* [MonacoEditor](variables/MonacoEditor.md)

## Functions

* [isMonacoLoaderConfigured](functions/isMonacoLoaderConfigured.md)
* [configureMonacoLoader](functions/configureMonacoLoader.md)
* [ensureMonacoLoaderConfigured](functions/ensureMonacoLoaderConfigured.md)
* [hslToHex](functions/hslToHex.md)
* [getCssColor](functions/getCssColor.md)
* [getMonospaceFont](functions/getMonospaceFont.md)

---

---
url: /api/mosaic.md
---
# @sqlrooms/mosaic

This package is part of the SQLRooms framework. It provides React components and hooks for integrating [Mosaic](https://idl.uw.edu/mosaic/) - a visualization library for data exploration and analysis - into SQLRooms applications.

## Overview

Mosaic is a JavaScript library for data visualization and analysis developed by the [Interactive Data Lab (IDL)](https://idl.uw.edu/) at the University of Washington. It combines the expressiveness of declarative visualization grammars with the power of reactive programming and SQL queries.

One of Mosaic's powerful features is its cross-filtering capability powered by DuckDB, allowing users to interactively filter and explore large datasets with millions of records directly in the browser. This enables creating interactive dashboards where selections in one chart automatically filter data in other charts. For an example of this functionality, see the [Cross-Filter Flights demo](https://idl.uw.edu/mosaic/examples/flights-200k.html) which demonstrates interactive filtering across multiple visualizations of a 200,000-record flight dataset.

This package provides:

* React components for rendering Vega-Lite charts using Mosaic
* Hooks for integrating Mosaic with DuckDB in SQLRooms applications
* Utilities for working with Mosaic specifications

## Installation

```bash
npm install @sqlrooms/mosaic
```

## Usage

### VgPlotChart Component

The `VgPlotChart` component renders a Vega-Lite chart using the Mosaic library:

```tsx
import {VgPlotChart, Spec} from '@sqlrooms/mosaic';

const spec: Spec = {
  // Your Vega-Lite specification
};

function MyChart() {
  return <VgPlotChart spec={spec} />;
}
```

### useMosaic Hook

The `useMosaic` hook provides access to the Mosaic connector for DuckDB:

```tsx
import {useMosaic} from '@sqlrooms/mosaic';

function MyComponent() {
  const {isMosaicLoading, mosaicConnector} = useMosaic();

  if (isMosaicLoading) {
    return <div>Loading...</div>;
  }

  // Use mosaicConnector to interact with DuckDB through Mosaic
  return <div>Mosaic is ready!</div>;
}
```

## Resources

* [Mosaic Documentation](https://idl.uw.edu/mosaic/)
* [Cross-Filter Flights Demo](https://idl.uw.edu/mosaic/examples/flights-200k.html)
* [Vega-Lite Documentation](https://vega.github.io/vega-lite/)
* [DuckDB Documentation](https://duckdb.org/docs/)

## License

MIT

## Type Aliases

* [Spec](type-aliases/Spec.md)

## Variables

* [VgPlotChart](variables/VgPlotChart.md)

## Functions

* [useMosaic](functions/useMosaic.md)

---

---
url: /api/motherduck.md
---
# @sqlrooms/motherduck

[MotherDuck](https://motherduck.com/) is a managed DuckDB-in-the-cloud service that enables you to run DuckDB queries both in your browser and in the cloud.

This package exposes a `createWasmMotherDuckDbConnector` function, which allows SQLRooms to connect to MotherDuck.
The connector is implemented using the [`@motherduck/wasm-client`](https://motherduck.com/docs/sql-reference/wasm-client/) library which is a customized version of [`@duckdb/duckdb-wasm`](https://github.com/duckdb/duckdb-wasm/tree/main/packages/duckdb-wasm) capable of querying MotherDuck datasets in the cloud from the browser.

## Example

See [`MotherDuck Cloud Query Editor`](/examples#motherduck-cloud-query-editor) for a usage example.

## Interfaces

* [WasmMotherDuckDbConnectorOptions](interfaces/WasmMotherDuckDbConnectorOptions.md)
* [WasmMotherDuckDbConnector](interfaces/WasmMotherDuckDbConnector.md)

## Functions

* [isWasmMotherDuckDbConnector](functions/isWasmMotherDuckDbConnector.md)
* [createWasmMotherDuckDbConnector](functions/createWasmMotherDuckDbConnector.md)

---

---
url: /api/recharts.md
---
# @sqlrooms/recharts

A package that provides Recharts integration for SQLRooms based on [shadcn Chart component](https://ui.shadcn.com/docs/components/chart).

## Namespaces

* [CartesianGrid](recharts/namespaces/CartesianGrid/index.md)
* [Customized](recharts/namespaces/Customized/index.md)
* [Label](recharts/namespaces/Label/index.md)
* [LabelList](recharts/namespaces/LabelList/index.md)

## Classes

* [Area](classes/Area.md)
* [Bar](classes/Bar.md)
* [Brush](classes/Brush.md)
* [CartesianAxis](classes/CartesianAxis.md)
* [ErrorBar](classes/ErrorBar.md)
* [Line](classes/Line.md)
* [ReferenceArea](classes/ReferenceArea.md)
* [ReferenceDot](classes/ReferenceDot.md)
* [ReferenceLine](classes/ReferenceLine.md)
* [Scatter](classes/Scatter.md)
* [XAxis](classes/XAxis.md)
* [YAxis](classes/YAxis.md)
* [ZAxis](classes/ZAxis.md)
* [Sankey](classes/Sankey.md)
* [Treemap](classes/Treemap.md)
* [DefaultLegendContent](classes/DefaultLegendContent.md)
* [Legend](classes/Legend.md)
* [Tooltip](classes/Tooltip.md)
* [Funnel](classes/Funnel.md)
* [Pie](classes/Pie.md)
* [PolarAngleAxis](classes/PolarAngleAxis.md)
* [PolarRadiusAxis](classes/PolarRadiusAxis.md)
* [Radar](classes/Radar.md)
* [RadialBar](classes/RadialBar.md)

## Interfaces

* [ZAxisProps](interfaces/ZAxisProps.md)
* [TreemapProps](interfaces/TreemapProps.md)
* [DefaultTooltipContentProps](interfaces/DefaultTooltipContentProps.md)
* [ResponsiveContainerProps](interfaces/ResponsiveContainerProps.md)
* [PieLabelRenderProps](interfaces/PieLabelRenderProps.md)

## Type Aliases

* [ChartConfig](type-aliases/ChartConfig.md)
* [AreaProps](type-aliases/AreaProps.md)
* [BarProps](type-aliases/BarProps.md)
* [BrushProps](type-aliases/BrushProps.md)
* [CartesianAxisProps](type-aliases/CartesianAxisProps.md)
* [CartesianGridProps](type-aliases/CartesianGridProps.md)
* [ErrorBarProps](type-aliases/ErrorBarProps.md)
* [LineProps](type-aliases/LineProps.md)
* [ReferenceAreaProps](type-aliases/ReferenceAreaProps.md)
* [ReferenceDotProps](type-aliases/ReferenceDotProps.md)
* [ReferenceLineProps](type-aliases/ReferenceLineProps.md)
* [ScatterProps](type-aliases/ScatterProps.md)
* [XAxisProps](type-aliases/XAxisProps.md)
* [YAxisProps](type-aliases/YAxisProps.md)
* [CellProps](type-aliases/CellProps.md)
* [CustomizedProps](type-aliases/CustomizedProps.md)
* [DefaultLegendContentProps](type-aliases/DefaultLegendContentProps.md)
* [LabelProps](type-aliases/LabelProps.md)
* [LabelListProps](type-aliases/LabelListProps.md)
* [LegendProps](type-aliases/LegendProps.md)
* [TextProps](type-aliases/TextProps.md)
* [TooltipProps](type-aliases/TooltipProps.md)
* [LayerProps](type-aliases/LayerProps.md)
* [SurfaceProps](type-aliases/SurfaceProps.md)
* [FunnelProps](type-aliases/FunnelProps.md)
* [PieLabel](type-aliases/PieLabel.md)
* [PieProps](type-aliases/PieProps.md)
* [PolarAngleAxisProps](type-aliases/PolarAngleAxisProps.md)
* [PolarGridProps](type-aliases/PolarGridProps.md)
* [PolarRadiusAxisProps](type-aliases/PolarRadiusAxisProps.md)
* [RadarProps](type-aliases/RadarProps.md)
* [RadialBarProps](type-aliases/RadialBarProps.md)
* [CrossProps](type-aliases/CrossProps.md)
* [CurveProps](type-aliases/CurveProps.md)
* [DotProps](type-aliases/DotProps.md)
* [PolygonProps](type-aliases/PolygonProps.md)
* [RectangleProps](type-aliases/RectangleProps.md)
* [SectorProps](type-aliases/SectorProps.md)
* [SymbolsProps](type-aliases/SymbolsProps.md)
* [TrapezoidProps](type-aliases/TrapezoidProps.md)
* [LegendType](type-aliases/LegendType.md)

## Variables

* [ChartContainer](variables/ChartContainer.md)
* [ChartTooltip](variables/ChartTooltip.md)
* [ChartTooltipContent](variables/ChartTooltipContent.md)
* [ChartLegend](variables/ChartLegend.md)
* [ChartLegendContent](variables/ChartLegendContent.md)
* [AreaChart](variables/AreaChart.md)
* [BarChart](variables/BarChart.md)
* [ComposedChart](variables/ComposedChart.md)
* [FunnelChart](variables/FunnelChart.md)
* [LineChart](variables/LineChart.md)
* [PieChart](variables/PieChart.md)
* [RadarChart](variables/RadarChart.md)
* [RadialBarChart](variables/RadialBarChart.md)
* [ScatterChart](variables/ScatterChart.md)
* [SunburstChart](variables/SunburstChart.md)
* [Cell](variables/Cell.md)
* [DefaultTooltipContent](variables/DefaultTooltipContent.md)
* [ResponsiveContainer](variables/ResponsiveContainer.md)
* [Text](variables/Text.md)
* [Layer](variables/Layer.md)
* [PolarGrid](variables/PolarGrid.md)
* [Cross](variables/Cross.md)
* [Curve](variables/Curve.md)
* [Dot](variables/Dot.md)
* [Polygon](variables/Polygon.md)
* [Rectangle](variables/Rectangle.md)
* [Sector](variables/Sector.md)
* [Symbols](variables/Symbols.md)
* [Trapezoid](variables/Trapezoid.md)
* [Global](variables/Global.md)

## Functions

* [ChartStyle](functions/ChartStyle.md)
* [CartesianGrid](functions/CartesianGrid.md)
* [Customized](functions/Customized.md)
* [Label](functions/Label.md)
* [LabelList](functions/LabelList.md)
* [Surface](functions/Surface.md)

---

---
url: /api/room-config.md
---
# @sqlrooms/room-config

A central configuration and type definitions package that maintains base room configuration schemas and Zod schema definitions. It provides TypeScript types and interfaces along with essential constants and utilities used throughout the framework.

## Features

* 📝 **Room Configuration**: Define and manage room configuration schemas
* 🔍 **Type Safety**: Strong TypeScript typing for configuration objects
* ✅ **Validation**: Zod schemas for runtime validation of configuration

## Installation

```bash
npm install @sqlrooms/room-config
# or
yarn add @sqlrooms/room-config
```

## Basic Usage

### Working with Base Room Configuration

```tsx
import {BaseRoomConfig} from '@sqlrooms/room-config';

// Create a new room configuration
const roomConfig: BaseRoomConfig = {
  name: 'My SQL Room',
  description: 'A data analysis room using SQLRooms',
  version: '1.0.0',
  settings: {
    theme: 'dark',
    // Other settings...
  },
};

// Access configuration properties
console.log(roomConfig.name); // 'My SQL Room'
```

### Persisting Room Configuration

Room configuration is designed to be saved and restored between sessions. Here's how to use the `persistSliceConfigs` helper:

```tsx
import {
  createRoomStore,
  createRoomShellSlice,
  RoomShellSliceState,
  persistSliceConfigs,
  LayoutConfig,
} from '@sqlrooms/room-shell';
import {BaseRoomConfig} from '@sqlrooms/room-config';

type MyRoomState = RoomShellSliceState;

// Create a store with persistence for configuration
const {useRoomStore} = createRoomStore<MyRoomState>(
  persistSliceConfigs(
    {
      name: 'room-config-storage',
      sliceConfigSchemas: {
        room: BaseRoomConfig,
        layout: LayoutConfig,
      },
    },
    (set, get, store) => ({
      ...createRoomShellSlice({
        config: {
          title: 'My Room',
          // Other configuration properties
        },
        layout: {
          config: {
            // Layout configuration
          },
          panels: {
            // Panel definitions
          },
        },
      })(set, get, store),
    }),
  ),
);

// Access the config in components
function ConfigComponent() {
  // Config is accessed from state.room.config
  const config = useRoomStore((state) => state.room.config);

  return <div>{config.title}</div>;
}
```

## Advanced Features

* **Schema Extensions**: Extend base schemas for custom room types
* **Configuration Validation**: Validate configurations at runtime
* **Serialization**: Convert configurations to/from JSON for storage

For more information, visit the SQLRooms documentation.

```
```

## Type Aliases

* [LayoutTypes](type-aliases/LayoutTypes.md)
* [MosaicLayoutDirection](type-aliases/MosaicLayoutDirection.md)
* [MosaicLayoutParent](type-aliases/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](type-aliases/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](type-aliases/MosaicLayoutNode.md)
* [MosaicLayoutConfig](type-aliases/MosaicLayoutConfig.md)
* [LayoutConfig](type-aliases/LayoutConfig.md)
* [BaseRoomConfig](type-aliases/BaseRoomConfig.md)
* [DataSourceTypes](type-aliases/DataSourceTypes.md)
* [BaseDataSource](type-aliases/BaseDataSource.md)
* [FileDataSource](type-aliases/FileDataSource.md)
* [UrlDataSource](type-aliases/UrlDataSource.md)
* [SqlQueryDataSource](type-aliases/SqlQueryDataSource.md)
* [DataSource](type-aliases/DataSource.md)
* [LoadFile](type-aliases/LoadFile.md)
* [StandardLoadOptions](type-aliases/StandardLoadOptions.md)
* [SpatialLoadOptions](type-aliases/SpatialLoadOptions.md)
* [SpatialLoadFileOptions](type-aliases/SpatialLoadFileOptions.md)
* [StandardLoadFileOptions](type-aliases/StandardLoadFileOptions.md)
* [LoadFileOptions](type-aliases/LoadFileOptions.md)

## Variables

* [MAIN\_VIEW](variables/MAIN_VIEW.md)
* [LayoutTypes](variables/LayoutTypes.md)
* [~~DEFAULT\_MOSAIC\_LAYOUT~~](variables/DEFAULT_MOSAIC_LAYOUT.md)
* [MosaicLayoutDirection](variables/MosaicLayoutDirection.md)
* [MosaicLayoutParent](variables/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](variables/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](variables/MosaicLayoutNode.md)
* [MosaicLayoutConfig](variables/MosaicLayoutConfig.md)
* [LayoutConfig](variables/LayoutConfig.md)
* [DEFAULT\_ROOM\_TITLE](variables/DEFAULT_ROOM_TITLE.md)
* [BaseRoomConfig](variables/BaseRoomConfig.md)
* [DataSourceTypes](variables/DataSourceTypes.md)
* [BaseDataSource](variables/BaseDataSource.md)
* [FileDataSource](variables/FileDataSource.md)
* [UrlDataSource](variables/UrlDataSource.md)
* [SqlQueryDataSource](variables/SqlQueryDataSource.md)
* [DataSource](variables/DataSource.md)
* [LoadFile](variables/LoadFile.md)
* [StandardLoadOptions](variables/StandardLoadOptions.md)
* [SpatialLoadOptions](variables/SpatialLoadOptions.md)
* [SpatialLoadFileOptions](variables/SpatialLoadFileOptions.md)
* [StandardLoadFileOptions](variables/StandardLoadFileOptions.md)
* [LoadFileOptions](variables/LoadFileOptions.md)

## Functions

* [createDefaultMosaicLayout](functions/createDefaultMosaicLayout.md)
* [isMosaicLayoutParent](functions/isMosaicLayoutParent.md)
* [createDefaultBaseRoomConfig](functions/createDefaultBaseRoomConfig.md)
* [isFileDataSource](functions/isFileDataSource.md)
* [isUrlDataSource](functions/isUrlDataSource.md)
* [isSqlQueryDataSource](functions/isSqlQueryDataSource.md)
* [isSpatialLoadFileOptions](functions/isSpatialLoadFileOptions.md)

---

---
url: /api/room-shell.md
---
# @sqlrooms/room-shell

A powerful framework for building and managing data rooms in SQLRooms. This package provides components and utilities for creating, configuring, and managing data rooms with an intuitive user interface.

## Features

* 🏗️ **Room Structure**: Tools for defining and managing room structure
* 📊 **Data Sources**: Components for connecting to and managing data sources
* 🧩 **Panel System**: Flexible panel-based UI for room components
* 🔄 **State Management**: Robust state management using Zustand
* 📁 **File Handling**: Utilities for processing and managing room files
* 🧰 **Extensible Architecture**: Easily extend with custom components and panels

## Installation

```bash
npm install @sqlrooms/room-shell
# or
yarn add @sqlrooms/room-shell
```

## Basic Usage

### Creating a Room Builder

```tsx
import {RoomShell} from '@sqlrooms/room-shell';

function MyApp() {
  return (
    <RoomShell className="h-screen" roomStore={roomStore}>
      <RoomShell.Sidebar />
      <RoomShell.LayoutComposer />
      <RoomShell.LoadingProgress />
    </RoomShell>
  );
}
```

### Working with Room State

The room-shell package uses Zustand for state management. You can create a custom store with room-specific state and actions.

```tsx
import {
  createRoomShellSlice,
  createRoomStore,
  RoomShellSliceState,
} from '@sqlrooms/room-shell';

// Define your custom app state
type MyRoomState = RoomShellSliceState & {
  myFeatureData: any[];
  addItem: (item: any) => void;
  removeItem: (id: string) => void;
};

// Create a room store with custom state
export const {roomStore, useRoomStore} = createRoomStore<MyRoomState>(
  (set, get, store) => ({
    // Base room slice with initial configuration
    ...createRoomShellSlice({
      config: {
        title: 'My Room',
        dataSources: [],
      },
      layout: {
        config: {
          /* layout configuration */
        },
        panels: {
          /* panel definitions */
        },
      },
    })(set, get, store),

    // Custom state and actions
    myFeatureData: [],
    addItem: (item) =>
      set((state) => ({
        myFeatureData: [...state.myFeatureData, item],
      })),
    removeItem: (id) =>
      set((state) => ({
        myFeatureData: state.myFeatureData.filter((item) => item.id !== id),
      })),
  }),
);

// Use the store in a component with selector for better performance
function MyComponent() {
  // Use selectors for better performance
  const myFeatureData = useRoomStore((state) => state.myFeatureData);
  const addItem = useRoomStore((state) => state.addItem);

  return (
    <div>
      <h2>My Items ({myFeatureData.length})</h2>
      <button onClick={() => addItem({id: Date.now(), name: 'New Item'})}>
        Add Item
      </button>
      {/* Render items */}
    </div>
  );
}
```

### Persisting Room Configuration

The room configuration is designed to be persisted between sessions. You can use the `persistSliceConfigs` helper to save the configuration to localStorage or any other storage:

```tsx
import {
  createRoomShellSlice,
  createRoomStore,
  RoomShellSliceState,
  BaseRoomConfig,
  LayoutConfig,
  persistSliceConfigs,
} from '@sqlrooms/room-shell';

// Define your custom app state
type MyRoomState = RoomShellSliceState & {
  myFeatureData: any[];
  addItem: (item: any) => void;
};

// Create a store with persistence
export const {roomStore, useRoomStore} = createRoomStore<MyRoomState>(
  persistSliceConfigs(
    {
      name: 'my-room-storage',
      sliceConfigSchemas: {
        room: BaseRoomConfig,
        layout: LayoutConfig,
      },
    },
    (set, get, store) => ({
      // Base room slice
      ...createRoomShellSlice({
        config: {
          title: 'My Room',
          dataSources: [],
        },
        layout: {
          config: {
            /* layout configuration */
          },
          panels: {
            /* panel definitions */
          },
        },
      })(set, get, store),

      // Custom state and actions
      myFeatureData: [],
      addItem: (item) =>
        set((state) => ({
          myFeatureData: [...state.myFeatureData, item],
        })),
    }),
  ),
);
```

### Integrating Multiple Feature Slices

For larger applications, you can organize your state into feature slices:

```tsx
import {
  createRoomShellSlice,
  createRoomStore,
  RoomShellSliceState,
} from '@sqlrooms/room-shell';
import {createMyFeatureSlice, MyFeatureState} from './myFeatureSlice';
import {
  createAnotherFeatureSlice,
  AnotherFeatureState,
} from './anotherFeatureSlice';

// Combined app state type
type MyRoomState = RoomShellSliceState & MyFeatureState & AnotherFeatureState;

// Create a store with multiple slices
export const {roomStore, useRoomStore} = createRoomStore<MyRoomState>(
  (set, get, store) => ({
    // Base room slice
    ...createRoomShellSlice({
      config: {
        /* initial config */
      },
      layout: {
        config: {
          /* layout configuration */
        },
        panels: {
          /* panel definitions */
        },
      },
    })(set, get, store),

    // Feature slices
    ...createMyFeatureSlice()(set, get, store),
    ...createAnotherFeatureSlice({
      // Feature-specific options
      customOption: 'value',
    })(set, get, store),
  }),
);
```

### Managing Data Sources

```tsx
import {
  FileDataSourcesPanel,
  TablesListPanel,
  DataSourceType,
} from '@sqlrooms/room-shell';

function DataSourcesSection() {
  // Use selectors for better performance
  const addDataSource = useRoomStore((state) => state.room.addDataSource);
  const addRoomFile = useRoomStore((state) => state.room.addRoomFile);

  const handleFileDrop = async (files) => {
    for (const file of files) {
      await addRoomFile(file);
    }
  };

  const handleAddCsvUrl = (url) => {
    addDataSource({
      type: DataSourceType.url,
      url,
      tableName: 'data_from_url',
    });
  };

  const handleAddSqlQuery = (query) => {
    addDataSource({
      type: DataSourceType.sqlQuery,
      query,
      tableName: 'query_results',
    });
  };

  return (
    <div className="grid grid-cols-2 gap-4">
      <FileDataSourcesPanel onFileDrop={handleFileDrop} />
      <TablesListPanel />
      <button onClick={() => handleAddCsvUrl('https://example.com/data.csv')}>
        Add CSV from URL
      </button>
    </div>
  );
}
```

### Creating Custom Panels

```tsx
import {RoomPanel, RoomPanelHeader} from '@sqlrooms/room-shell';

function CustomPanel({title, children}) {
  return (
    <RoomPanel>
      <RoomPanelHeader title={title} />
      <div className="p-4">{children}</div>
    </RoomPanel>
  );
}
```

## RoomStore API Reference

The RoomStore is the core of the room-shell package. It provides a comprehensive set of properties and methods for managing room state.

### State Properties

#### `room.config`

The room configuration, which can be persisted between sessions.

```tsx
const config = useRoomStore((state) => state.room.config);
console.log(config.title); // Access room title
```

#### `schema`

The database schema name used for the room.

```tsx
const schema = useRoomStore((state) => state.room.schema);
```

#### `tasksProgress`

A record of task progress information, useful for displaying loading indicators.

```tsx
const tasksProgress = useRoomStore((state) => state.room.tasksProgress);
// Example: { "init-db": { message: "Initializing database...", progress: 0.5 } }
```

#### `roomId`

The unique identifier for the room, undefined for new rooms.

```tsx
const roomId = useRoomStore((state) => state.room.roomId);
```

#### `panels`

A record of panel information, including title, icon, component, and placement.

```tsx
const panels = useRoomStore((state) => state.room.panels);
// Example: { "data-sources": { title: "Data Sources", icon: DatabaseIcon, ... } }
```

#### `isReadOnly`

Whether the room is in read-only mode.

```tsx
const isReadOnly = useRoomStore((state) => state.room.isReadOnly);
```

#### `tables`

An array of data tables available in the room.

```tsx
const tables = useRoomStore((state) => state.room.tables);
// Access table schemas and metadata
```

#### `roomFiles`

An array of room file information.

```tsx
const roomFiles = useRoomStore((state) => state.room.roomFiles);
```

#### `roomFilesProgress`

A record of file processing progress information.

```tsx
const roomFilesProgress = useRoomStore((state) => state.room.roomFilesProgress);
```

#### `lastSavedConfig`

The last saved room configuration, used to check for unsaved changes.

```tsx
const lastSavedConfig = useRoomStore((state) => state.room.lastSavedConfig);
```

#### `initialized`

Whether the room has been initialized.

```tsx
const initialized = useRoomStore((state) => state.room.initialized);
```

#### `isDataAvailable`

Whether the room data has been loaded.

```tsx
const isDataAvailable = useRoomStore((state) => state.room.isDataAvailable);
```

#### `dataSourceStates`

A record of data source states by table name.

```tsx
const dataSourceStates = useRoomStore((state) => state.room.dataSourceStates);
```

#### `tableRowCounts`

A record of row counts by table name.

```tsx
const tableRowCounts = useRoomStore((state) => state.room.tableRowCounts);
```

### Methods

#### `initialize()`

Initialize the room state.

```tsx
const initialize = useRoomStore((state) => state.room.initialize);
await initialize();
```

#### `setTaskProgress(id, taskProgress)`

Set the progress of a task.

```tsx
const setTaskProgress = useRoomStore((state) => state.room.setTaskProgress);
setTaskProgress('my-task', {message: 'Processing...', progress: 0.5});
```

#### `getLoadingProgress()`

Get the current loading progress.

```tsx
const getLoadingProgress = useRoomStore(
  (state) => state.room.getLoadingProgress,
);
const progress = getLoadingProgress();
```

#### `setRoomConfig(config)`

Set the room configuration.

```tsx
const setRoomConfig = useRoomStore((state) => state.room.setRoomConfig);
const config = useRoomStore((state) => state.config);
setRoomConfig({...config, title: 'New Title'});
```

#### `setLastSavedConfig(config)`

Set the last saved room configuration.

```tsx
const setLastSavedConfig = useRoomStore(
  (state) => state.room.setLastSavedConfig,
);
const config = useRoomStore((state) => state.config);
setLastSavedConfig(config);
```

#### `hasUnsavedChanges()`

Check if the room has unsaved changes.

```tsx
const hasUnsavedChanges = useRoomStore((state) => state.room.hasUnsavedChanges);
if (hasUnsavedChanges()) {
  // Prompt user to save changes
}
```

#### `setLayout(layout)`

Set the room layout configuration.

```tsx
const setLayout = useRoomStore((state) => state.room.setLayout);
setLayout(newLayout);
```

#### `togglePanel(panel, show)`

Toggle the visibility of a panel.

```tsx
const togglePanel = useRoomStore((state) => state.room.togglePanel);
togglePanel('data-sources', true); // Show the data sources panel
```

#### `togglePanelPin(panel)`

Toggle the pin state of a panel.

```tsx
const togglePanelPin = useRoomStore((state) => state.room.togglePanelPin);
togglePanelPin('data-sources');
```

#### `addOrUpdateSqlQueryDataSource(tableName, query, oldTableName)`

Add or update a SQL query data source.

```tsx
const addOrUpdateSqlQueryDataSource = useRoomStore(
  (state) => state.room.addOrUpdateSqlQueryDataSource,
);
await addOrUpdateSqlQueryDataSource(
  'filtered_data',
  'SELECT * FROM data WHERE value > 10',
);
```

#### `removeSqlQueryDataSource(tableName)`

Remove a SQL query data source.

```tsx
const removeSqlQueryDataSource = useRoomStore(
  (state) => state.room.removeSqlQueryDataSource,
);
await removeSqlQueryDataSource('filtered_data');
```

#### `addRoomFile(info, desiredTableName)`

Add a room file.

```tsx
const addRoomFile = useRoomStore((state) => state.room.addRoomFile);
const dataTable = await addRoomFile(file, 'my_data');
```

#### `removeRoomFile(pathname)`

Remove a room file.

```tsx
const removeRoomFile = useRoomStore((state) => state.room.removeRoomFile);
removeRoomFile('/path/to/file.csv');
```

#### `maybeDownloadDataSources()`

Download data sources if needed.

```tsx
const maybeDownloadDataSources = useRoomStore(
  (state) => state.room.maybeDownloadDataSources,
);
await maybeDownloadDataSources();
```

#### `setRoomFiles(info)`

Set the room files.

```tsx
const setRoomFiles = useRoomStore((state) => state.room.setRoomFiles);
setRoomFiles(fileInfoArray);
```

#### `setRoomFileProgress(pathname, fileState)`

Set the progress of a room file.

```tsx
const setRoomFileProgress = useRoomStore(
  (state) => state.room.setRoomFileProgress,
);
setRoomFileProgress('/path/to/file.csv', {status: 'processing'});
```

#### `addTable(tableName, data)`

Add a table to the room.

```tsx
const addTable = useRoomStore((state) => state.db.addTable);
await addTable('my_table', records);
```

#### `addDataSource(dataSource, status)`

Add a data source to the room.

```tsx
const addDataSource = useRoomStore((state) => state.room.addDataSource);
await addDataSource({
  type: 'url',
  url: 'https://example.com/data.csv',
  tableName: 'external_data',
});
```

#### `getTable(tableName)`

Get a table by name.

```tsx
const getTable = useRoomStore((state) => state.room.getTable);
const table = getTable('my_table');
```

#### `setTables(dataTable)`

Set the room tables.

```tsx
const setTables = useRoomStore((state) => state.room.setTables);
await setTables(tableArray);
```

#### `setTableRowCount(tableName, rowCount)`

Set the row count for a table.

```tsx
const setTableRowCount = useRoomStore((state) => state.room.setTableRowCount);
setTableRowCount('my_table', 1000);
```

#### `setRoomTitle(title)`

Set the room title.

```tsx
const setRoomTitle = useRoomStore((state) => state.room.setRoomTitle);
setRoomTitle('My Awesome Room');
```

#### `setDescription(description)`

Set the room description.

```tsx
const setDescription = useRoomStore((state) => state.room.setDescription);
setDescription('This is a description of my room');
```

#### `areDatasetsReady()`

Check if all datasets are ready.

```tsx
const areDatasetsReady = useRoomStore((state) => state.room.areDatasetsReady);
if (areDatasetsReady()) {
  // Proceed with data operations
}
```

#### `findTableByName(tableName)`

Find a table by name.

```tsx
const findTableByName = useRoomStore((state) => state.room.findTableByName);
const table = findTableByName('my_table');
```

#### `updateReadyDataSources()`

Update the status of all data sources based on the current tables.

```tsx
const updateReadyDataSources = useRoomStore(
  (state) => state.room.updateReadyDataSources,
);
await updateReadyDataSources();
```

#### `onDataUpdated()`

Called when data has been updated.

```tsx
const onDataUpdated = useRoomStore((state) => state.room.onDataUpdated);
await onDataUpdated();
```

#### `areViewsReadyToRender()`

Check if views are ready to render.

```tsx
const areViewsReadyToRender = useRoomStore(
  (state) => state.room.areViewsReadyToRender,
);
if (areViewsReadyToRender()) {
  // Render views
}
```

#### `refreshTableSchemas()`

Refresh table schemas from the database.

```tsx
const refreshTableSchemas = useRoomStore(
  (state) => state.room.refreshTableSchemas,
);
const updatedTables = await refreshTableSchemas();
```

## Advanced Features

* **Custom State Slices**: Extend the room state with custom slices
* **Task Management**: Built-in task progress tracking
* **Panel Configuration**: Configure and arrange panels dynamically
* **Data Source Integration**: Connect to various data sources
* **File Processing**: Process and transform data files

For more information, visit the SQLRooms documentation.

```
```

## Enumerations

* [DataSourceStatus](enumerations/DataSourceStatus.md)

## Interfaces

* [StoreApi](interfaces/StoreApi.md)

## Type Aliases

* [RoomPanelInfo](type-aliases/RoomPanelInfo.md)
* [LayoutTypes](type-aliases/LayoutTypes.md)
* [MosaicLayoutDirection](type-aliases/MosaicLayoutDirection.md)
* [MosaicLayoutParent](type-aliases/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](type-aliases/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](type-aliases/MosaicLayoutNode.md)
* [MosaicLayoutConfig](type-aliases/MosaicLayoutConfig.md)
* [LayoutConfig](type-aliases/LayoutConfig.md)
* [BaseRoomConfig](type-aliases/BaseRoomConfig.md)
* [DataSourceTypes](type-aliases/DataSourceTypes.md)
* [BaseDataSource](type-aliases/BaseDataSource.md)
* [FileDataSource](type-aliases/FileDataSource.md)
* [UrlDataSource](type-aliases/UrlDataSource.md)
* [SqlQueryDataSource](type-aliases/SqlQueryDataSource.md)
* [DataSource](type-aliases/DataSource.md)
* [LoadFile](type-aliases/LoadFile.md)
* [StandardLoadOptions](type-aliases/StandardLoadOptions.md)
* [SpatialLoadOptions](type-aliases/SpatialLoadOptions.md)
* [SpatialLoadFileOptions](type-aliases/SpatialLoadFileOptions.md)
* [StandardLoadFileOptions](type-aliases/StandardLoadFileOptions.md)
* [LoadFileOptions](type-aliases/LoadFileOptions.md)
* [RoomShellSliceState](type-aliases/RoomShellSliceState.md)
* [TableAction](type-aliases/TableAction.md)
* [RoomFileState](type-aliases/RoomFileState.md)
* [RoomFileInfo](type-aliases/RoomFileInfo.md)
* [DataSourceState](type-aliases/DataSourceState.md)
* [BaseRoomStoreState](type-aliases/BaseRoomStoreState.md)
* [BaseRoomStore](type-aliases/BaseRoomStore.md)
* [CreateBaseRoomSliceProps](type-aliases/CreateBaseRoomSliceProps.md)
* [RoomStateProviderProps](type-aliases/RoomStateProviderProps.md)
* [StateCreator](type-aliases/StateCreator.md)

## Variables

* [MAIN\_VIEW](variables/MAIN_VIEW.md)
* [LayoutTypes](variables/LayoutTypes.md)
* [~~DEFAULT\_MOSAIC\_LAYOUT~~](variables/DEFAULT_MOSAIC_LAYOUT.md)
* [MosaicLayoutDirection](variables/MosaicLayoutDirection.md)
* [MosaicLayoutParent](variables/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](variables/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](variables/MosaicLayoutNode.md)
* [MosaicLayoutConfig](variables/MosaicLayoutConfig.md)
* [LayoutConfig](variables/LayoutConfig.md)
* [DEFAULT\_ROOM\_TITLE](variables/DEFAULT_ROOM_TITLE.md)
* [BaseRoomConfig](variables/BaseRoomConfig.md)
* [DataSourceTypes](variables/DataSourceTypes.md)
* [BaseDataSource](variables/BaseDataSource.md)
* [FileDataSource](variables/FileDataSource.md)
* [UrlDataSource](variables/UrlDataSource.md)
* [SqlQueryDataSource](variables/SqlQueryDataSource.md)
* [DataSource](variables/DataSource.md)
* [LoadFile](variables/LoadFile.md)
* [StandardLoadOptions](variables/StandardLoadOptions.md)
* [SpatialLoadOptions](variables/SpatialLoadOptions.md)
* [SpatialLoadFileOptions](variables/SpatialLoadFileOptions.md)
* [isSpatialLoadFileOptions](variables/isSpatialLoadFileOptions.md)
* [StandardLoadFileOptions](variables/StandardLoadFileOptions.md)
* [LoadFileOptions](variables/LoadFileOptions.md)
* [RoomShell](variables/RoomShell.md)
* [SidebarButton](variables/SidebarButton.md)
* [RoomShellSidebarButton](variables/RoomShellSidebarButton.md)
* [RoomShellSidebarButtons](variables/RoomShellSidebarButtons.md)
* [FileDataSourceCard](variables/FileDataSourceCard.md)
* [FileDataSourcesPanel](variables/FileDataSourcesPanel.md)
* [TableCard](variables/TableCard.md)
* [TablesListPanel](variables/TablesListPanel.md)
* [PanelHeaderButton](variables/PanelHeaderButton.md)
* [RoomPanel](variables/RoomPanel.md)
* [RoomPanelHeader](variables/RoomPanelHeader.md)
* [~~createRoomSlice~~](variables/createRoomSlice.md)
* [~~createBaseSlice~~](variables/createBaseSlice.md)
* [RoomStateContext](variables/RoomStateContext.md)

## Functions

* [createDefaultMosaicLayout](functions/createDefaultMosaicLayout.md)
* [isMosaicLayoutParent](functions/isMosaicLayoutParent.md)
* [createDefaultBaseRoomConfig](functions/createDefaultBaseRoomConfig.md)
* [isFileDataSource](functions/isFileDataSource.md)
* [isUrlDataSource](functions/isUrlDataSource.md)
* [isSqlQueryDataSource](functions/isSqlQueryDataSource.md)
* [createRoomShellSlice](functions/createRoomShellSlice.md)
* [useBaseRoomShellStore](functions/useBaseRoomShellStore.md)
* [createBaseRoomSlice](functions/createBaseRoomSlice.md)
* [createSlice](functions/createSlice.md)
* [createRoomStore](functions/createRoomStore.md)
* [createRoomStoreCreator](functions/createRoomStoreCreator.md)
* [isRoomSliceWithInitialize](functions/isRoomSliceWithInitialize.md)
* [isRoomSliceWithDestroy](functions/isRoomSliceWithDestroy.md)
* [RoomStateProvider](functions/RoomStateProvider.md)
* [useBaseRoomStore](functions/useBaseRoomStore.md)
* [createPersistHelpers](functions/createPersistHelpers.md)
* [persistSliceConfigs](functions/persistSliceConfigs.md)

---

---
url: /api/room-store.md
---
# @sqlrooms/room-store

This package provides the core state management for SQLRooms using [Zustand](https://github.com/pmndrs/zustand). It is designed to be extensible, allowing you to build custom room experiences by creating and composing state "slices".

## Installation

```bash
npm install @sqlrooms/room-store @sqlrooms/room-config zod zustand
```

## Core Concepts

### RoomStore

The `RoomStore` is a Zustand store that holds the entire state of a room. It is created by calling `createRoomStore` with a function that composes one or more slice creators.

### RoomState

The `RoomState` is the object that defines the shape of the store. It includes state from the base room shell slice and any additional slices you add:

* `room.config`: This holds the configuration of the room that is persisted. This is defined by a `zod` schema, often extending the `BaseRoomConfig` from `@sqlrooms/room-config`.
* `room`: This holds the client-side state of the room, such as task progress, and provides actions for interacting with the room.
* `db`: DuckDB database state and methods
* `layout`: Layout configuration and panel definitions

### Slices

A slice is a piece of the room's state and its associated actions. You can create your own slices to add custom functionality to your room. The framework provides `createRoomShellSlice` to create the base slice with core room functionality. You combine this with your own slices inside the `createRoomStore` composer function.

## Basic Usage

Here's an example of how to create a room store with a custom feature slice.

```typescript
import {
  createRoomStore,
  createRoomShellSlice,
  RoomShellSliceState,
} from '@sqlrooms/room-store';
import {StateCreator} from 'zustand';

// 1. Define the state and actions for your custom feature slice.
export interface MyFeatureSlice {
  activeChartId: string | null;
  setActiveChartId: (id: string | null) => void;
}

// 2. Create your custom slice.
export const createMyFeatureSlice: StateCreator<MyFeatureSlice> = (set) => ({
  activeChartId: null,
  setActiveChartId: (id) => set({activeChartId: id}),
});

// 3. Define the full state of your room, combining the base RoomShellSliceState
// with your custom slice's state.
export type MyRoomState = RoomShellSliceState & MyFeatureSlice;

// 4. Create the room store by composing the base slice and your custom slice.
export const {roomStore, useRoomStore} = createRoomStore<MyRoomState>(
  (set, get, store) => ({
    ...createRoomShellSlice({
      config: {
        // You can provide initial values for your config here
        title: 'My First Room',
        dataSources: [],
      },
      layout: {
        config: {
          // Layout configuration
        },
        panels: {
          // Panel definitions
        },
      },
    })(set, get, store),

    // Add your custom slice to the store
    ...createMyFeatureSlice(set, get, store),
  }),
);

export {roomStore, useRoomStore};
```

## Providing the Store

To make the store available to your React components, you need to use the `RoomStateProvider` component at the root of your application.

```tsx
import {RoomStateProvider} from '@sqlrooms/room-store';
import {roomStore} from './my-room-store';

function App() {
  return (
    <RoomStateProvider value={roomStore}>
      {/* Your room components go here */}
    </RoomStateProvider>
  );
}
```

## Accessing the Store in Components

You can use the `useRoomStore` hook returned by `createRoomStore` to access the room's state and actions from any component.

```tsx
import {useRoomStore} from './my-room-store';

function RoomTitle() {
  const title = useRoomStore((state) => state.room.config.title);
  const activeChartId = useRoomStore((state) => state.activeChartId);
  const setActiveChartId = useRoomStore((state) => state.setActiveChartId);

  return (
    <div>
      <h1>{title}</h1>
      <p>Active Chart: {activeChartId || 'None'}</p>
      <button onClick={() => setActiveChartId('chart-123')}>
        Activate Chart
      </button>
    </div>
  );
}
```

## Interfaces

* [StoreApi](interfaces/StoreApi.md)

## Type Aliases

* [LayoutTypes](type-aliases/LayoutTypes.md)
* [MosaicLayoutDirection](type-aliases/MosaicLayoutDirection.md)
* [MosaicLayoutParent](type-aliases/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](type-aliases/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](type-aliases/MosaicLayoutNode.md)
* [MosaicLayoutConfig](type-aliases/MosaicLayoutConfig.md)
* [LayoutConfig](type-aliases/LayoutConfig.md)
* [BaseRoomConfig](type-aliases/BaseRoomConfig.md)
* [DataSourceTypes](type-aliases/DataSourceTypes.md)
* [BaseDataSource](type-aliases/BaseDataSource.md)
* [FileDataSource](type-aliases/FileDataSource.md)
* [UrlDataSource](type-aliases/UrlDataSource.md)
* [SqlQueryDataSource](type-aliases/SqlQueryDataSource.md)
* [DataSource](type-aliases/DataSource.md)
* [LoadFile](type-aliases/LoadFile.md)
* [StandardLoadOptions](type-aliases/StandardLoadOptions.md)
* [SpatialLoadOptions](type-aliases/SpatialLoadOptions.md)
* [SpatialLoadFileOptions](type-aliases/SpatialLoadFileOptions.md)
* [StandardLoadFileOptions](type-aliases/StandardLoadFileOptions.md)
* [LoadFileOptions](type-aliases/LoadFileOptions.md)
* [BaseRoomStoreState](type-aliases/BaseRoomStoreState.md)
* [BaseRoomStore](type-aliases/BaseRoomStore.md)
* [CreateBaseRoomSliceProps](type-aliases/CreateBaseRoomSliceProps.md)
* [RoomStateProviderProps](type-aliases/RoomStateProviderProps.md)
* [StateCreator](type-aliases/StateCreator.md)

## Variables

* [MAIN\_VIEW](variables/MAIN_VIEW.md)
* [LayoutTypes](variables/LayoutTypes.md)
* [~~DEFAULT\_MOSAIC\_LAYOUT~~](variables/DEFAULT_MOSAIC_LAYOUT.md)
* [MosaicLayoutDirection](variables/MosaicLayoutDirection.md)
* [MosaicLayoutParent](variables/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](variables/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](variables/MosaicLayoutNode.md)
* [MosaicLayoutConfig](variables/MosaicLayoutConfig.md)
* [LayoutConfig](variables/LayoutConfig.md)
* [DEFAULT\_ROOM\_TITLE](variables/DEFAULT_ROOM_TITLE.md)
* [BaseRoomConfig](variables/BaseRoomConfig.md)
* [DataSourceTypes](variables/DataSourceTypes.md)
* [BaseDataSource](variables/BaseDataSource.md)
* [FileDataSource](variables/FileDataSource.md)
* [UrlDataSource](variables/UrlDataSource.md)
* [SqlQueryDataSource](variables/SqlQueryDataSource.md)
* [DataSource](variables/DataSource.md)
* [LoadFile](variables/LoadFile.md)
* [StandardLoadOptions](variables/StandardLoadOptions.md)
* [SpatialLoadOptions](variables/SpatialLoadOptions.md)
* [SpatialLoadFileOptions](variables/SpatialLoadFileOptions.md)
* [isSpatialLoadFileOptions](variables/isSpatialLoadFileOptions.md)
* [StandardLoadFileOptions](variables/StandardLoadFileOptions.md)
* [LoadFileOptions](variables/LoadFileOptions.md)
* [~~createRoomSlice~~](variables/createRoomSlice.md)
* [~~createBaseSlice~~](variables/createBaseSlice.md)
* [RoomStateContext](variables/RoomStateContext.md)

## Functions

* [createDefaultMosaicLayout](functions/createDefaultMosaicLayout.md)
* [isMosaicLayoutParent](functions/isMosaicLayoutParent.md)
* [createDefaultBaseRoomConfig](functions/createDefaultBaseRoomConfig.md)
* [isFileDataSource](functions/isFileDataSource.md)
* [isUrlDataSource](functions/isUrlDataSource.md)
* [isSqlQueryDataSource](functions/isSqlQueryDataSource.md)
* [createBaseRoomSlice](functions/createBaseRoomSlice.md)
* [createSlice](functions/createSlice.md)
* [createRoomStore](functions/createRoomStore.md)
* [createRoomStoreCreator](functions/createRoomStoreCreator.md)
* [isRoomSliceWithInitialize](functions/isRoomSliceWithInitialize.md)
* [isRoomSliceWithDestroy](functions/isRoomSliceWithDestroy.md)
* [RoomStateProvider](functions/RoomStateProvider.md)
* [useBaseRoomStore](functions/useBaseRoomStore.md)
* [createPersistHelpers](functions/createPersistHelpers.md)
* [persistSliceConfigs](functions/persistSliceConfigs.md)

---

---
url: /api/s3-browser.md
---
# @sqlrooms/s3-browser

This package is part of the SQLRooms framework.

# S3 Browser

A React component library for browsing and interacting with S3-compatible storage services.

![S3 File Browser Interface](https://github.com/user-attachments/assets/dd79fbb9-c487-4050-96ef-81cff39930d3)

## Features

* Directory navigation with breadcrumbs
* File and directory listing
* Multiple file selection
* File metadata display (size, type, last modified)
* S3 utility functions for listing and deleting files

## Installation

```bash
npm install @sqlrooms/s3-browser
# or
yarn add @sqlrooms/s3-browser
```

## Usage

### Complete Example

```tsx
import {useState} from 'react';
import {S3FileBrowser, S3CredentialsForm, S3State} from '@sqlrooms/s3-browser';
import {S3FileOrDirectory, S3Config, S3Connection} from '@sqlrooms/s3-utils';

type S3BrowserProps = {
  listS3Files: (args: {
    s3Config: S3Config;
    prefix: string;
  }) => Promise<S3FileOrDirectory[]>;
  loadS3Files: (args: {
    s3Config: S3Config;
    prefix: string;
    files: string[];
  }) => Promise<void>;
  s3: S3State['s3'];
  saveS3Credentials: (s3Config: S3Config) => Promise<void>;
  loadS3Credentials: () => Promise<S3Connection[]>;
  deleteS3Credentials: (id: string) => Promise<void>;
};

export const S3Browser = ({
  listS3Files,
  s3,
  loadS3Files,
  saveS3Credentials,
  loadS3Credentials,
  deleteS3Credentials,
}: S3BrowserProps) => {
  const [isConnecting, setIsConnecting] = useState(false);
  const [error, setError] = useState('');
  const [files, setFiles] = useState<S3FileOrDirectory[] | null>(null);
  const [selectedDirectory, onChangeSelectedDirectory] = useState('');
  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
  const {setCurrentS3Config, clearCurrentS3Config, currentS3Config} = s3;

  const listFiles = async (s3Config: S3Config, prefix: string) => {
    try {
      const files = await listS3Files({
        s3Config,
        prefix,
      });
      setCurrentS3Config(s3Config);
      setFiles(files);
      setError('');
      onChangeSelectedDirectory(prefix);
    } catch (error) {
      setError((error as Error).message);
    }
    setIsConnecting(false);
  };

  const handleLoadFiles = async () => {
    if (!currentS3Config) return;
    await loadS3Files({
      s3Config: currentS3Config,
      prefix: selectedDirectory,
      files: selectedFiles,
    });
  };

  return (
    <div className="flex h-full flex-col items-center gap-4">
      {/* Connection Panel */}
      {!files ? (
        <S3CredentialsForm
          onConnect={(values) => {
            setIsConnecting(true);
            listFiles(values, '');
          }}
          isLoading={isConnecting}
          saveS3Credentials={saveS3Credentials}
          loadS3Credentials={loadS3Credentials}
          deleteS3Credentials={deleteS3Credentials}
        />
      ) : (
        <div className="flex h-full w-full flex-col items-start justify-start gap-2">
          <S3FileBrowser
            files={files}
            selectedFiles={selectedFiles}
            selectedDirectory={selectedDirectory}
            onChangeSelectedFiles={setSelectedFiles}
            onChangeSelectedDirectory={(directory) => {
              setIsConnecting(true);
              if (!currentS3Config) return;
              listFiles(currentS3Config, directory);
            }}
            onCanConfirmChange={() => {}}
          />
          <button disabled={!selectedFiles.length} onClick={handleLoadFiles}>
            Add Selected
          </button>
        </div>
      )}
    </div>
  );
};
```

This example demonstrates:

* Integrating both `S3FileBrowser` and `S3CredentialsForm` components
* Managing S3 connection state
* Handling file listing and selection
* Error handling and loading states
* File loading functionality

### S3FileBrowser Component

The `S3FileBrowser` component provides a familiar file explorer interface for navigating and selecting files from an S3-like storage.

```tsx
import {S3FileBrowser} from '@sqlrooms/s3-browser';
import {useState} from 'react';

function MyS3Browser() {
  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
  const [selectedDirectory, setSelectedDirectory] = useState('');

  return (
    <S3FileBrowser
      files={[
        {key: 'documents', isDirectory: true},
        {
          key: 'example.txt',
          isDirectory: false,
          size: 1024,
          contentType: 'text/plain',
          lastModified: new Date(),
        },
      ]}
      selectedFiles={selectedFiles}
      selectedDirectory={selectedDirectory}
      onCanConfirmChange={(canConfirm) =>
        console.log('Can confirm:', canConfirm)
      }
      onChangeSelectedDirectory={setSelectedDirectory}
      onChangeSelectedFiles={setSelectedFiles}
    />
  );
}
```

### S3CredentialsForm Component

The `S3CredentialsForm` component provides a form interface for managing S3 credentials and saved connections.

```tsx
import {S3CredentialsForm} from '@sqlrooms/s3-browser';
import {S3Config, S3Connection} from '@sqlrooms/s3-utils';

function MyS3ConnectionManager() {
  const handleConnect = async (credentials: S3Config) => {
    try {
      // Use the credentials to establish connection
      console.log('Connecting with:', credentials);
      // Example: initializeS3Client(credentials);
    } catch (error) {
      console.error('Connection failed:', error);
    }
  };

  const handleSaveCredential = async (config: S3Config) => {
    try {
      // Save credential to your storage (e.g., local storage, database)
      const savedCredential = await saveToStorage({
        ...config,
        id: generateId(),
        createdAt: new Date().toISOString(),
      });
      return savedCredential;
    } catch (error) {
      console.error('Failed to save credential:', error);
    }
  };

  const handleLoadCredentials = async (): Promise<S3Connection[]> => {
    try {
      // Load saved credentials from your storage
      const credentials = await loadFromStorage();
      return credentials;
    } catch (error) {
      console.error('Failed to load credentials:', error);
      return [];
    }
  };

  const handleDeleteCredential = async (id: string) => {
    try {
      // Delete credential from your storage
      await deleteFromStorage(id);
    } catch (error) {
      console.error('Failed to delete credential:', error);
    }
  };

  return (
    <S3CredentialsForm
      onConnect={handleConnect}
      isLoading={false}
      saveS3Credentials={handleSaveCredential}
      loadS3Credentials={handleLoadCredentials}
      deleteS3Credentials={handleDeleteCredential}
    />
  );
}
```

Features:

* Input fields for S3 credentials (access key, secret key, region, bucket)
* Option to save connections for later use
* Auto-fill from AWS CLI exports or credential process output
* Management of saved connections (view, connect, delete)
* Secure handling of sensitive credentials
* Support for session tokens (temporary credentials)

#### Props

```tsx
interface S3CredentialsFormProps {
  /**
   * Callback fired when the connect button is clicked
   */
  onConnect: (data: S3Config) => void;

  /**
   * Loading state for the connect button
   */
  isLoading?: boolean;

  /**
   * Callback to save a new S3 credential
   */
  saveS3Credentials: (data: S3Config) => Promise<void>;

  /**
   * Callback to load saved S3 credentials
   */
  loadS3Credentials: () => Promise<S3Connection[]>;

  /**
   * Optional callback to delete a saved credential
   */
  deleteS3Credentials?: (id: string) => Promise<void>;
}
```

## API Reference

### S3FileBrowser

```tsx
interface S3FileBrowserProps {
  /**
   * Array of files and directories to display
   */
  files?: S3FileOrDirectory[];

  /**
   * Array of currently selected file keys
   */
  selectedFiles: string[];

  /**
   * Current directory path (empty string for root)
   */
  selectedDirectory: string;

  /**
   * Callback fired when selection state changes
   */
  onCanConfirmChange: (canConfirm: boolean) => void;

  /**
   * Callback fired when directory navigation occurs
   */
  onChangeSelectedDirectory: (directory: string) => void;

  /**
   * Callback fired when file selection changes
   */
  onChangeSelectedFiles: (files: string[]) => void;
}
```

## Dependencies

* `react` ^18.0.0
* `react-dom` ^18.0.0
* `@sqlrooms/ui` - UI component library
* `@sqlrooms/utils` - Utility functions
* `@sqlrooms/s3` - S3 client and types
* `@hookform/resolvers` - Form validation resolvers
* `react-hook-form` - Form handling
* `zod` - Runtime type checking and validation
* `lucide-react` - Icon components
* `class-variance-authority` - Utility for managing component variants
* `clsx` - Utility for constructing className strings
* `tailwindcss` - CSS framework

## Type Aliases

* [S3BrowserState](type-aliases/S3BrowserState.md)
* [S3Config](type-aliases/S3Config.md)
* [S3Credentials](type-aliases/S3Credentials.md)
* [S3FileOrDirectory](type-aliases/S3FileOrDirectory.md)

## Variables

* [S3FileBrowser](variables/S3FileBrowser.md)
* [S3Config](variables/S3Config.md)
* [S3Credentials](variables/S3Credentials.md)
* [S3FileOrDirectory](variables/S3FileOrDirectory.md)

## Functions

* [createS3BrowserSlice](functions/createS3BrowserSlice.md)
* [S3CredentialsForm](functions/S3CredentialsForm.md)

---

---
url: /api/s3-browser-config.md
---
# @sqlrooms/s3-browser-config

This package is part of the SQLRooms framework.

# S3 browser config

Zod schema definitions for `@sqlrooms/s3-browser`

## Type Aliases

* [S3Config](type-aliases/S3Config.md)
* [S3Credentials](type-aliases/S3Credentials.md)
* [S3FileOrDirectory](type-aliases/S3FileOrDirectory.md)

## Variables

* [S3Config](variables/S3Config.md)
* [S3Credentials](variables/S3Credentials.md)
* [S3FileOrDirectory](variables/S3FileOrDirectory.md)

---

---
url: /api/s3-utils.md
---
# @sqlrooms/s3-utils

This package is part of the SQLRooms framework.

# S3

A utilities for calling S3-compatible storage services. To be used with s3-browser

## Features

* S3 utility functions for listing and deleting files

## Installation

```bash
npm install @sqlrooms/s3-utils
# or
yarn add @sqlrooms/s3-utils
```

### S3 Utility Functions

The package also provides utility functions for working with S3:

```tsx
import {S3Client} from '@aws-sdk/client-s3';
import {listFilesAndDirectoriesWithPrefix} from '@sqlrooms/s3-utils';

// Initialize S3 client
const s3Client = new S3Client({region: 'us-east-1'});

// List files and directories
async function listFiles() {
  const files = await listFilesAndDirectoriesWithPrefix(
    s3Client,
    'my-bucket',
    'path/to/directory',
  );
  console.log(files);
}

// Delete files with a prefix
async function deleteFiles() {
  await deleteS3Files(s3Client, 'my-bucket', 'path/to/delete');
}
```

## API Reference

### Utility Functions

```tsx
/**
 * Lists files and directories with a given prefix
 */
function listFilesAndDirectoriesWithPrefix(
  S3: S3Client,
  bucket: string,
  prefix?: string,
): Promise<S3FileOrDirectory[]>;

/**
 * Delete all files with the given prefix
 */
function deleteS3Files(
  S3: S3Client,
  bucket: string,
  prefix: string,
): Promise<void>;
```

## Dependencies

* @aws-sdk/client-s3
* zod

## Functions

* [listFilesAndDirectoriesWithPrefix](functions/listFilesAndDirectoriesWithPrefix.md)
* [deleteS3Files](functions/deleteS3Files.md)

---

---
url: /api/schema-tree.md
---
# @sqlrooms/schema-tree

This package is part of the SQLRooms framework.

# DuckDB schema tree

A React component library for rendering DuckDB schema trees in a hierarchical view. It provides components to display database schemas, tables, and columns in an interactive tree structure with features like:

* Expandable/collapsible tree nodes
* Column type badges
* Context menus for actions (e.g. copying column names)
* Customizable node rendering
* Hover states and visual feedback

The main components are:

* `TableSchemaTree`: The root tree component that renders the full schema hierarchy
* `ColumnTreeNode`: Specialized node for displaying column information
* `TreeNodeActionsMenu`: Reusable menu component for node actions

This package is used by SQLRooms to provide schema browsing capabilities in the database explorer interface.

## Variables

* [TableSchemaTree](variables/TableSchemaTree.md)
* [ColumnTreeNode](variables/ColumnTreeNode.md)
* [DatabaseTreeNode](variables/DatabaseTreeNode.md)
* [SchemaTreeNode](variables/SchemaTreeNode.md)
* [TableTreeNode](variables/TableTreeNode.md)
* [TreeNodeActionsMenu](variables/TreeNodeActionsMenu.md)
* [TreeNodeActionsMenuItem](variables/TreeNodeActionsMenuItem.md)

## Functions

* [defaultRenderTableSchemaNode](functions/defaultRenderTableSchemaNode.md)
* [BaseTreeNode](functions/BaseTreeNode.md)
* [defaultRenderTableNodeMenuItems](functions/defaultRenderTableNodeMenuItems.md)

---

---
url: /api/sql-editor.md
---
# @sqlrooms/sql-editor

This package is part of the SQLRooms framework.

# SQL Editor

A powerful SQL editor component for SQLRooms applications. This package provides React components and hooks for creating interactive SQL query interfaces with Monaco editor integration, table management, and results visualization.

## Features

* 🔍 **Advanced SQL Editing**: Monaco-based SQL editor with syntax highlighting and auto-completion
* 📊 **Data Visualization**: View query results in interactive data tables
* 📑 **Multiple Tabs**: Support for multiple query tabs with save/rename/delete functionality
* 🔄 **State Management**: Zustand-based state management for SQL editor state
* 📦 **Table Management**: Browser for tables in the database with schema information
* 📤 **Data Export**: Export query results to CSV files
* 📝 **Documentation**: Optional documentation panel for SQL reference

## Installation

```bash
npm install @sqlrooms/sql-editor
```

## Basic Usage

### SqlEditor and SqlEditorModal Components

These components must be used within a `RoomShell` which provides the room store context as they rely on the SQLRooms store:

```tsx
import {RoomShell} from '@sqlrooms/room-shell';
import {SqlEditorModal} from '@sqlrooms/sql-editor';
import {useDisclosure} from '@sqlrooms/ui';
import {TerminalIcon} from 'lucide-react';
import {roomStore} from './store';

function MyApp() {
  const sqlEditorDisclosure = useDisclosure();

  return (
    <RoomShell className="h-screen" roomStore={roomStore}>
      <RoomShell.Sidebar>
        <RoomShell.SidebarButton
          title="SQL Editor"
          onClick={sqlEditorDisclosure.onToggle}
          isSelected={false}
          icon={TerminalIcon}
        />
      </RoomShell.Sidebar>
      <RoomShell.LayoutComposer />
      <RoomShell.LoadingProgress />
      <SqlEditorModal
        isOpen={sqlEditorDisclosure.isOpen}
        onClose={sqlEditorDisclosure.onClose}
      />
    </RoomShell>
  );
}
```

### Store Setup for SQL Editor

The SQL Editor requires a properly configured store with the SQL Editor slice:

```tsx
import {
  createRoomShellSlice,
  createRoomStore,
  RoomState,
} from '@sqlrooms/room-shell';
import {BaseRoomConfig} from '@sqlrooms/room-config';
import {
  createDefaultSqlEditorConfig,
  createSqlEditorSlice,
  SqlEditorSliceConfig,
  SqlEditorSliceState,
} from '@sqlrooms/sql-editor';
import {z} from 'zod';

// Define combined config schema
export const RoomConfig = BaseRoomConfig.merge(SqlEditorSliceConfig);
export type RoomConfig = z.infer<typeof RoomConfig>;

// Define combined state type
export type RoomState = RoomState<RoomConfig> & SqlEditorSliceState;

// Create combined store
export const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
  (set, get, store) => ({
    // Base room slice
    ...createRoomShellSlice<RoomConfig>({
      config: {
        title: 'SQL Workspace',
        // ... other room config
        ...createDefaultSqlEditorConfig(),
      },
    })(set, get, store),

    // Sql editor slice
    ...createSqlEditorSlice()(set, get, store),
  }),
);
```

### Standalone SqlMonacoEditor Component

Unlike the full SQL Editor components, the `SqlMonacoEditor` can be used as a standalone component without requiring the store:

```tsx
import {SqlMonacoEditor} from '@sqlrooms/sql-editor';
import {useState} from 'react';

function SimpleSqlEditor() {
  const [query, setQuery] = useState('SELECT * FROM products');

  const handleExecute = () => {
    // Execute the query using your own logic
    console.log('Executing query:', query);
  };

  return (
    <>
      <SqlMonacoEditor value={query} onChange={setQuery} height="400px" />
      <button onClick={handleExecute}>Execute</button>
    </>
  );
}
```

### With Custom Documentation Panel

Adding a custom documentation panel to the SQL Editor:

```tsx
import {SqlEditorModal} from '@sqlrooms/sql-editor';
import {useDisclosure} from '@sqlrooms/ui';
import {RoomShell} from '@sqlrooms/room-shell';
import {roomStore} from './store';

function AdvancedSqlEditor() {
  const {isOpen, onOpen, onClose} = useDisclosure();

  // Custom documentation component
  const Documentation = () => (
    <div className="p-4">
      <h2 className="mb-4 text-xl font-bold">SQL Reference</h2>
      <div className="space-y-4">
        <div>
          <h3 className="text-lg font-semibold">SELECT</h3>
          <p>Retrieves data from a table</p>
          <pre className="mt-2 rounded bg-gray-100 p-2">
            SELECT column1, column2 FROM table_name;
          </pre>
        </div>
        {/* More documentation items */}
      </div>
    </div>
  );

  return (
    <SqlEditorModal
      isOpen={isOpen}
      onClose={onClose}
      documentationPanel={<Documentation />}
    />
  );
}
```

## State Management

The SQL editor provides a Zustand slice for managing state. Here's how to set it up:

### Using in a Combined SQLRooms Store

This approach is recommended when integrating multiple SQLRooms components:

```tsx
import {
  createSqlEditorSlice,
  createDefaultSqlEditorConfig,
  SqlEditorSliceState,
  SqlEditorSliceConfig,
} from '@sqlrooms/sql-editor';
import {
  createRoomShellSlice,
  createRoomStore,
  RoomState,
  RoomShell,
} from '@sqlrooms/room-shell';
import {BaseRoomConfig} from '@sqlrooms/room-config';
import {z} from 'zod';

// 1. Define combined config schema
export const RoomConfig = BaseRoomConfig.merge(SqlEditorSliceConfig);
export type RoomConfig = z.infer<typeof RoomConfig>;

// 2. Define combined state type
export type RoomState = RoomState<RoomConfig> & SqlEditorSliceState;

// 3. Create combined store
export const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
  (set, get, store) => ({
    // Base room slice
    ...createRoomShellSlice<RoomConfig>({
      config: {
        title: 'SQL Workspace',
        // ... other room config
        ...createDefaultSqlEditorConfig(),
      },
    })(set, get, store),

    // Sql editor slice
    ...createSqlEditorSlice()(set, get, store),
  }),
);

// 4. Use the store in components
function MyComponent() {
  // Access SQL editor state and actions
  const runQuery = useRoomStore((state) => state.sqlEditor.runQuery);
  const createQueryTab = useRoomStore(
    (state) => state.sqlEditor.createQueryTab,
  );

  // Use actions
  const handleExecute = () => {
    runQuery('SELECT * FROM users LIMIT 10');
    runQuery('SELECT * FROM users LIMIT 10');
  };

  return (
    <RoomShell roomStore={roomStore}>
      <div>
        <button onClick={handleExecute}>Run Query</button>
        <SqlEditorModal isOpen={true} onClose={() => {}} />
      </div>
    </RoomShell>
  );
}
```

### Available State Actions

* `sqlEditor.runQuery(query: string)`: Execute a SQL query
* `sqlEditor.createQueryTab(initialQuery?: string)`: Create a new query tab
* `sqlEditor.deleteQueryTab(queryId: string)`: Delete a query tab
* `sqlEditor.renameQueryTab(queryId: string, newName: string)`: Rename a query tab
* `sqlEditor.updateQueryText(queryId: string, queryText: string)`: Update query text
* `sqlEditor.setSelectedQueryId(queryId: string)`: Set the selected query tab
* `sqlEditor.getCurrentQuery(defaultQuery?: string)`: Get current query text

## Available Components

### SqlEditor

The main component providing a full-featured SQL editor interface. Must be used within a RoomShell.

```tsx
import {SqlEditor} from '@sqlrooms/sql-editor';
import {RoomShell} from '@sqlrooms/room-shell';
import {roomStore} from './store';

<RoomShell roomStore={roomStore}>
  <SqlEditor
    isOpen={boolean}
    onClose={() => void}
    schema="main"
    documentationPanel={ReactNode}
  />
</RoomShell>
```

### SqlMonacoEditor

A standalone SQL-specific Monaco editor component. Can be used independently without RoomShell.

```tsx
import {SqlMonacoEditor} from '@sqlrooms/sql-editor';
import {useState} from 'react';

function SimpleSqlEditor() {
  const [query, setQuery] = useState('SELECT * FROM products');

  const handleExecute = () => {
    // Execute the query using your own logic
    console.log('Executing query:', query);
  };

  return (
    <>
      <SqlMonacoEditor value={query} onChange={setQuery} height="400px" />
      <button onClick={handleExecute}>Execute</button>
    </>
  );
}
```

### SqlEditorModal

A modal wrapper around the SQL editor. Must be used within a RoomShell.

```tsx
import {SqlEditorModal} from '@sqlrooms/sql-editor';
import {useDisclosure} from '@sqlrooms/ui';
import {RoomShell} from '@sqlrooms/room-shell';
import {roomStore} from './store';

function EditorWithModal() {
  const {isOpen, onOpen, onClose} = useDisclosure();

  return (
    <RoomShell roomStore={roomStore}>
      <button onClick={onOpen}>Open SQL Editor</button>
      <SqlEditorModal isOpen={isOpen} onClose={onClose} />
    </RoomShell>
  );
}
```

### CreateTableModal

A modal for creating new tables from SQL queries. Must be used within a RoomShell.

```tsx
import {CreateTableModal} from '@sqlrooms/sql-editor';
import {useDisclosure} from '@sqlrooms/ui';
import {RoomShell} from '@sqlrooms/room-shell';
import {roomStore} from './store';
import {useRoomStore} from './store';

function TableCreator() {
  const {isOpen, onOpen, onClose} = useDisclosure();
  const addOrUpdateSqlQueryDataSource = useRoomStore(
    (state) => state.room.addOrUpdateSqlQueryDataSource,
  );

  return (
    <RoomShell roomStore={roomStore}>
      <button onClick={onOpen}>Create Table from Results</button>
      <CreateTableModal
        isOpen={isOpen}
        onClose={onClose}
        onAddOrUpdateSqlQuery={addOrUpdateSqlQueryDataSource}
        query="SELECT * FROM users"
      />
    </RoomShell>
  );
}
```

### SqlQueryDataSourcesPanel

A panel showing available data sources for SQL queries. Must be used within a RoomShell.

```tsx
import {SqlQueryDataSourcesPanel} from '@sqlrooms/sql-editor';
import {RoomShell} from '@sqlrooms/room-shell';
import {roomStore} from './store';

<RoomShell roomStore={roomStore}>
  <SqlQueryDataSourcesPanel
    onSelectTable={(tableName) => {
      console.log(`Selected table: ${tableName}`);
    }}
  />
</RoomShell>;
```

## Props

### SqlEditor Props

| Prop               | Type      | Default   | Description                           |
| ------------------ | --------- | --------- | ------------------------------------- |
| isOpen             | boolean   | -         | Whether the editor is open            |
| onClose            | function  | -         | Callback when the editor is closed    |
| schema             | string    | 'main'    | Default schema to use for queries     |
| documentationPanel | ReactNode | undefined | Custom documentation panel to display |

### SqlMonacoEditor Props

| Prop             | Type        | Default | Description                             |
| ---------------- | ----------- | ------- | --------------------------------------- |
| value            | string      | ''      | The SQL query text                      |
| onChange         | function    | -       | Callback when the query text changes    |
| height           | string      | '300px' | Height of the editor                    |
| readOnly         | boolean     | false   | Whether the editor is read-only         |
| theme            | string      | 'dark'  | Editor theme ('dark' or 'light')        |
| tableSchemas     | DataTable\[] | \[]      | Table schemas for autocompletion        |
| customKeywords   | string\[]    | \[]      | Custom SQL keywords for autocompletion  |
| customFunctions  | string\[]    | \[]      | Custom SQL functions for autocompletion |
| getLatestSchemas | function    | -       | Callback to get latest table schemas    |
| className        | string      | -       | Additional CSS class names              |
| options          | object      | -       | Monaco editor options                   |
| onMount          | function    | -       | Callback when editor is mounted         |

### SqlEditorModal Props

| Prop               | Type      | Default   | Description                           |
| ------------------ | --------- | --------- | ------------------------------------- |
| isOpen             | boolean   | -         | Whether the modal is open             |
| onClose            | function  | -         | Callback when the modal is closed     |
| schema             | string    | 'main'    | Default schema to use for queries     |
| documentationPanel | ReactNode | undefined | Custom documentation panel to display |

### CreateTableModal Props

| Prop                  | Type     | Default | Description                       |
| --------------------- | -------- | ------- | --------------------------------- |
| isOpen                | boolean  | -       | Whether the modal is open         |
| onClose               | function | -       | Callback when the modal is closed |
| onAddOrUpdateSqlQuery | function | -       | Callback when a table is created  |
| query                 | string   | -       | SQL query that generated the data |

## Configuration

The SQL editor can be configured through the Zustand store.

```tsx
const config = createDefaultSqlEditorConfig();
// Customize if needed
sqlEditor.config.queries = [
  {id: 'default', name: 'Untitled', query: 'SELECT * FROM users LIMIT 10;'},
];
sqlEditor.config.selectedQueryId = 'default';

// Use in store creation
const {roomStore} = createRoomStore({
  ...createRoomShellSlice({
    config: {
      ...config,
      // other config options
    },
  }),
  ...createSqlEditorSlice(),
});
```

For more information, visit the SQLRooms documentation.

## Interfaces

* [SqlMonacoEditorProps](interfaces/SqlMonacoEditorProps.md)
* [QueryEditorPanelProps](interfaces/QueryEditorPanelProps.md)
* [QueryResultPanelProps](interfaces/QueryResultPanelProps.md)
* [TableStructurePanelProps](interfaces/TableStructurePanelProps.md)

## Type Aliases

* [SqlEditorProps](type-aliases/SqlEditorProps.md)
* [QueryResult](type-aliases/QueryResult.md)
* [SqlEditorSliceState](type-aliases/SqlEditorSliceState.md)
* [CreateTableFormInitialValues](type-aliases/CreateTableFormInitialValues.md)
* [CreateTableModalProps](type-aliases/CreateTableModalProps.md)
* [SqlEditorHeaderProps](type-aliases/SqlEditorHeaderProps.md)
* [SqlEditorSliceConfig](type-aliases/SqlEditorSliceConfig.md)

## Variables

* [SqlEditor](variables/SqlEditor.md)
* [SqlEditorModal](variables/SqlEditorModal.md)
* [SqlMonacoEditor](variables/SqlMonacoEditor.md)
* [CreateTableModal](variables/CreateTableModal.md)
* [QueryEditorPanel](variables/QueryEditorPanel.md)
* [QueryEditorPanelActions](variables/QueryEditorPanelActions.md)
* [QueryEditorPanelEditor](variables/QueryEditorPanelEditor.md)
* [QueryEditorPanelTabsList](variables/QueryEditorPanelTabsList.md)
* [QueryResultPanel](variables/QueryResultPanel.md)
* [SqlEditorHeader](variables/SqlEditorHeader.md)
* [SqlQueryDataSourcesPanel](variables/SqlQueryDataSourcesPanel.md)
* [SqlReferenceButton](variables/SqlReferenceButton.md)
* [SqlReferenceButtonContent](variables/SqlReferenceButtonContent.md)
* [TableStructurePanel](variables/TableStructurePanel.md)
* [SqlEditorSliceConfig](variables/SqlEditorSliceConfig.md)

## Functions

* [createSqlEditorSlice](functions/createSqlEditorSlice.md)
* [createDefaultSqlEditorConfig](functions/createDefaultSqlEditorConfig.md)

---

---
url: /api/sql-editor-config.md
---
# @sqlrooms/sql-editor-config

A central configuration and type definitions package that maintains base SQL editor configuration schemas and Zod schema definitions for SQLRooms. It provides TypeScript types and interfaces along with essential constants and utilities used for managing SQL editor state.

## Features

* 📝 **SQL Editor Configuration**: Define and manage room SQL editor configuration schemas.
* 🔍 **Type Safety**: Strong TypeScript typing for SQL editor configuration objects.
* ✅ **Validation**: Zod schemas for runtime validation of SQL editor configurations.

## Installation

```bash
npm install @sqlrooms/sql-editor-config
# or
yarn add @sqlrooms/sql-editor-config
```

## Basic Usage

### Working with SQL Editor Configuration

```tsx
import {
  SqlEditorSliceConfig,
  createDefaultSqlEditorConfig,
} from '@sqlrooms/sql-editor-config';

// Create a new SQL editor configuration
const sqlEditorConfig: SqlEditorSliceConfig = createDefaultSqlEditorConfig();

// This can be part of a bigger room configuration
interface RoomConfig {
  // ... other properties
  sqlEditor: SqlEditorSliceConfig['sqlEditor'];
}
```

## Advanced Features

* **Schema Extensions**: Extend base schemas for custom room types
* **Configuration Validation**: Validate configurations at runtime
* **Serialization**: Convert configurations to/from JSON for storage

For more information, visit the SQLRooms documentation.

```
```

## Type Aliases

* [SqlEditorSliceConfig](type-aliases/SqlEditorSliceConfig.md)

## Variables

* [SqlEditorSliceConfig](variables/SqlEditorSliceConfig.md)

## Functions

* [createDefaultSqlEditorConfig](functions/createDefaultSqlEditorConfig.md)

---

---
url: /api/ui.md
---
# @sqlrooms/ui

A comprehensive UI component library for SQLRooms applications, built on top of React and Tailwind CSS. This package provides a collection of reusable, accessible, and customizable components designed to create consistent and beautiful user interfaces.

This library is based on [shadcn/ui](https://ui.shadcn.com/), a collection of beautifully designed, accessible components that can be copied and pasted into your apps.

## Features

* 🎨 **Modern Design**: Clean, modern components following design best practices
* ♿ **Accessibility**: Components built with accessibility in mind
* 🌗 **Theming**: Support for light and dark modes
* 📱 **Responsive**: Mobile-friendly components that adapt to different screen sizes
* 🧩 **Composable**: Components designed to work together seamlessly
* 🔄 **React Hooks**: Useful hooks for common UI patterns

## Installation

```bash
npm install @sqlrooms/ui
# or
yarn add @sqlrooms/ui
```

## Basic Usage

### Using Components

```tsx
import {Button, Card, Input} from '@sqlrooms/ui';

function LoginForm() {
  return (
    <Card className="mx-auto max-w-md p-6">
      <h2 className="mb-4 text-2xl font-bold">Login</h2>
      <form>
        <div className="space-y-4">
          <div>
            <Input type="email" placeholder="Email" required />
          </div>
          <div>
            <Input type="password" placeholder="Password" required />
          </div>
          <Button type="submit" className="w-full">
            Sign In
          </Button>
        </div>
      </form>
    </Card>
  );
}
```

### Using Hooks

```tsx
import {useToast, useDisclosure} from '@sqlrooms/ui';

function MyComponent() {
  const {toast} = useToast();
  const {isOpen, onOpen, onClose} = useDisclosure();

  const handleAction = () => {
    // Perform some action
    toast({
      title: 'Success!',
      description: 'Your action was completed successfully.',
      variant: 'success',
    });
    onClose();
  };

  return (
    <div>
      <Button onClick={onOpen}>Open Dialog</Button>
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Confirm Action</DialogTitle>
            <DialogDescription>
              Are you sure you want to perform this action?
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={onClose}>
              Cancel
            </Button>
            <Button onClick={handleAction}>Confirm</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}
```

## Available Components

* **Layout**: Card, Resizable, Tabs
* **Forms**: Button, Checkbox, Input, Select, Slider, Switch, Textarea
* **Feedback**: Alert, Progress, Spinner, Toast
* **Navigation**: Accordion, Breadcrumb, Dropdown Menu
* **Overlay**: Dialog, Popover, Tooltip
* **Data Display**: Badge, Table
* **Utility**: Error Boundary, Theme Switch

## Advanced Features

* **Component Composition**: Build complex UIs by composing simple components
* **Form Handling**: Integrated with React Hook Form for easy form management
* **Custom Styling**: Extend components with custom styles using Tailwind CSS
* **Animation**: Smooth transitions and animations for interactive elements

For more information, visit the SQLRooms documentation.

## Classes

* [ErrorBoundary](classes/ErrorBoundary.md)

## Interfaces

* [BadgeProps](interfaces/BadgeProps.md)
* [ButtonProps](interfaces/ButtonProps.md)
* [CopyButtonProps](interfaces/CopyButtonProps.md)
* [TabDescriptor](interfaces/TabDescriptor.md)
* [TabStripProps](interfaces/TabStripProps.md)
* [Dimensions](interfaces/Dimensions.md)
* [UseAspectRatioDimensionsProps](interfaces/UseAspectRatioDimensionsProps.md)
* [UseDisclosureReturnValue](interfaces/UseDisclosureReturnValue.md)

## Type Aliases

* [CalendarProps](type-aliases/CalendarProps.md)
* [ToastProps](type-aliases/ToastProps.md)
* [ToastActionElement](type-aliases/ToastActionElement.md)
* [TreeNodeData](type-aliases/TreeNodeData.md)

## Variables

* [CollapsibleTrigger](variables/CollapsibleTrigger.md)
* [CollapsibleContent](variables/CollapsibleContent.md)
* [Collapsible](variables/Collapsible.md)
* [Slot](variables/Slot.md)
* [Accordion](variables/Accordion.md)
* [AccordionItem](variables/AccordionItem.md)
* [AccordionTrigger](variables/AccordionTrigger.md)
* [AccordionContent](variables/AccordionContent.md)
* [Alert](variables/Alert.md)
* [AlertTitle](variables/AlertTitle.md)
* [AlertDescription](variables/AlertDescription.md)
* [AspectRatio](variables/AspectRatio.md)
* [badgeVariants](variables/badgeVariants.md)
* [Breadcrumb](variables/Breadcrumb.md)
* [BreadcrumbList](variables/BreadcrumbList.md)
* [BreadcrumbItem](variables/BreadcrumbItem.md)
* [BreadcrumbLink](variables/BreadcrumbLink.md)
* [BreadcrumbPage](variables/BreadcrumbPage.md)
* [buttonVariants](variables/buttonVariants.md)
* [Button](variables/Button.md)
* [Card](variables/Card.md)
* [CardHeader](variables/CardHeader.md)
* [CardTitle](variables/CardTitle.md)
* [CardDescription](variables/CardDescription.md)
* [CardContent](variables/CardContent.md)
* [CardFooter](variables/CardFooter.md)
* [Checkbox](variables/Checkbox.md)
* [Command](variables/Command.md)
* [CommandInput](variables/CommandInput.md)
* [CommandList](variables/CommandList.md)
* [CommandEmpty](variables/CommandEmpty.md)
* [CommandGroup](variables/CommandGroup.md)
* [CommandSeparator](variables/CommandSeparator.md)
* [CommandItem](variables/CommandItem.md)
* [ContextMenu](variables/ContextMenu.md)
* [ContextMenuTrigger](variables/ContextMenuTrigger.md)
* [ContextMenuGroup](variables/ContextMenuGroup.md)
* [ContextMenuPortal](variables/ContextMenuPortal.md)
* [ContextMenuSub](variables/ContextMenuSub.md)
* [ContextMenuRadioGroup](variables/ContextMenuRadioGroup.md)
* [ContextMenuSubTrigger](variables/ContextMenuSubTrigger.md)
* [ContextMenuSubContent](variables/ContextMenuSubContent.md)
* [ContextMenuContent](variables/ContextMenuContent.md)
* [ContextMenuItem](variables/ContextMenuItem.md)
* [ContextMenuCheckboxItem](variables/ContextMenuCheckboxItem.md)
* [ContextMenuRadioItem](variables/ContextMenuRadioItem.md)
* [ContextMenuLabel](variables/ContextMenuLabel.md)
* [ContextMenuSeparator](variables/ContextMenuSeparator.md)
* [CopyButton](variables/CopyButton.md)
* [Dialog](variables/Dialog.md)
* [DialogTrigger](variables/DialogTrigger.md)
* [DialogPortal](variables/DialogPortal.md)
* [DialogClose](variables/DialogClose.md)
* [DialogOverlay](variables/DialogOverlay.md)
* [DialogContent](variables/DialogContent.md)
* [DialogTitle](variables/DialogTitle.md)
* [DialogDescription](variables/DialogDescription.md)
* [DropdownMenu](variables/DropdownMenu.md)
* [DropdownMenuTrigger](variables/DropdownMenuTrigger.md)
* [DropdownMenuGroup](variables/DropdownMenuGroup.md)
* [DropdownMenuPortal](variables/DropdownMenuPortal.md)
* [DropdownMenuSub](variables/DropdownMenuSub.md)
* [DropdownMenuRadioGroup](variables/DropdownMenuRadioGroup.md)
* [DropdownMenuSubTrigger](variables/DropdownMenuSubTrigger.md)
* [DropdownMenuSubContent](variables/DropdownMenuSubContent.md)
* [DropdownMenuContent](variables/DropdownMenuContent.md)
* [DropdownMenuItem](variables/DropdownMenuItem.md)
* [DropdownMenuCheckboxItem](variables/DropdownMenuCheckboxItem.md)
* [DropdownMenuRadioItem](variables/DropdownMenuRadioItem.md)
* [DropdownMenuLabel](variables/DropdownMenuLabel.md)
* [DropdownMenuSeparator](variables/DropdownMenuSeparator.md)
* [EditableText](variables/EditableText.md)
* [ErrorPane](variables/ErrorPane.md)
* [Form](variables/Form.md)
* [FormItem](variables/FormItem.md)
* [FormLabel](variables/FormLabel.md)
* [FormControl](variables/FormControl.md)
* [FormDescription](variables/FormDescription.md)
* [FormMessage](variables/FormMessage.md)
* [Input](variables/Input.md)
* [Label](variables/Label.md)
* [Menubar](variables/Menubar.md)
* [MenubarTrigger](variables/MenubarTrigger.md)
* [MenubarSubTrigger](variables/MenubarSubTrigger.md)
* [MenubarSubContent](variables/MenubarSubContent.md)
* [MenubarContent](variables/MenubarContent.md)
* [MenubarItem](variables/MenubarItem.md)
* [MenubarCheckboxItem](variables/MenubarCheckboxItem.md)
* [MenubarRadioItem](variables/MenubarRadioItem.md)
* [MenubarLabel](variables/MenubarLabel.md)
* [MenubarSeparator](variables/MenubarSeparator.md)
* [PaginationContent](variables/PaginationContent.md)
* [PaginationItem](variables/PaginationItem.md)
* [Popover](variables/Popover.md)
* [PopoverTrigger](variables/PopoverTrigger.md)
* [PopoverAnchor](variables/PopoverAnchor.md)
* [PopoverContent](variables/PopoverContent.md)
* [ProgressModal](variables/ProgressModal.md)
* [Progress](variables/Progress.md)
* [RadioGroup](variables/RadioGroup.md)
* [RadioGroupItem](variables/RadioGroupItem.md)
* [ResizablePanel](variables/ResizablePanel.md)
* [ScrollArea](variables/ScrollArea.md)
* [ScrollBar](variables/ScrollBar.md)
* [Select](variables/Select.md)
* [SelectGroup](variables/SelectGroup.md)
* [SelectValue](variables/SelectValue.md)
* [SelectTrigger](variables/SelectTrigger.md)
* [SelectScrollUpButton](variables/SelectScrollUpButton.md)
* [SelectScrollDownButton](variables/SelectScrollDownButton.md)
* [SelectContent](variables/SelectContent.md)
* [SelectLabel](variables/SelectLabel.md)
* [SelectItem](variables/SelectItem.md)
* [SelectSeparator](variables/SelectSeparator.md)
* [Separator](variables/Separator.md)
* [Sheet](variables/Sheet.md)
* [SheetTrigger](variables/SheetTrigger.md)
* [SheetClose](variables/SheetClose.md)
* [SheetPortal](variables/SheetPortal.md)
* [SheetOverlay](variables/SheetOverlay.md)
* [SheetContent](variables/SheetContent.md)
* [SheetTitle](variables/SheetTitle.md)
* [SheetDescription](variables/SheetDescription.md)
* [SkeletonPane](variables/SkeletonPane.md)
* [Slider](variables/Slider.md)
* [SpinnerPane](variables/SpinnerPane.md)
* [Spinner](variables/Spinner.md)
* [Switch](variables/Switch.md)
* [TabStrip](variables/TabStrip.md)
* [Table](variables/Table.md)
* [TableHeader](variables/TableHeader.md)
* [TableBody](variables/TableBody.md)
* [TableFooter](variables/TableFooter.md)
* [TableRow](variables/TableRow.md)
* [TableHead](variables/TableHead.md)
* [TableCell](variables/TableCell.md)
* [TableCaption](variables/TableCaption.md)
* [Tabs](variables/Tabs.md)
* [TabsList](variables/TabsList.md)
* [TabsTrigger](variables/TabsTrigger.md)
* [TabsContent](variables/TabsContent.md)
* [Textarea](variables/Textarea.md)
* [ThemeSwitch](variables/ThemeSwitch.md)
* [ToastProvider](variables/ToastProvider.md)
* [ToastViewport](variables/ToastViewport.md)
* [Toast](variables/Toast.md)
* [ToastAction](variables/ToastAction.md)
* [ToastClose](variables/ToastClose.md)
* [ToastTitle](variables/ToastTitle.md)
* [ToastDescription](variables/ToastDescription.md)
* [ToggleGroup](variables/ToggleGroup.md)
* [ToggleGroupItem](variables/ToggleGroupItem.md)
* [toggleVariants](variables/toggleVariants.md)
* [Toggle](variables/Toggle.md)
* [TooltipProvider](variables/TooltipProvider.md)
* [Tooltip](variables/Tooltip.md)
* [TooltipTrigger](variables/TooltipTrigger.md)
* [TooltipContent](variables/TooltipContent.md)

## Functions

* [Badge](functions/Badge.md)
* [BreadcrumbSeparator](functions/BreadcrumbSeparator.md)
* [BreadcrumbEllipsis](functions/BreadcrumbEllipsis.md)
* [Calendar](functions/Calendar.md)
* [ComboboxDemo](functions/ComboboxDemo.md)
* [CommandDialog](functions/CommandDialog.md)
* [CommandShortcut](functions/CommandShortcut.md)
* [ContextMenuShortcut](functions/ContextMenuShortcut.md)
* [DialogHeader](functions/DialogHeader.md)
* [DialogFooter](functions/DialogFooter.md)
* [Drawer](functions/Drawer.md)
* [DrawerTrigger](functions/DrawerTrigger.md)
* [DrawerPortal](functions/DrawerPortal.md)
* [DrawerClose](functions/DrawerClose.md)
* [DrawerHandle](functions/DrawerHandle.md)
* [DrawerOverlay](functions/DrawerOverlay.md)
* [DrawerContent](functions/DrawerContent.md)
* [DrawerHeader](functions/DrawerHeader.md)
* [DrawerFooter](functions/DrawerFooter.md)
* [DrawerTitle](functions/DrawerTitle.md)
* [DrawerDescription](functions/DrawerDescription.md)
* [DropdownMenuShortcut](functions/DropdownMenuShortcut.md)
* [FormField](functions/FormField.md)
* [useFormField](functions/useFormField.md)
* [MenubarMenu](functions/MenubarMenu.md)
* [MenubarGroup](functions/MenubarGroup.md)
* [MenubarPortal](functions/MenubarPortal.md)
* [MenubarRadioGroup](functions/MenubarRadioGroup.md)
* [MenubarSub](functions/MenubarSub.md)
* [MenubarShortcut](functions/MenubarShortcut.md)
* [Pagination](functions/Pagination.md)
* [PaginationLink](functions/PaginationLink.md)
* [PaginationPrevious](functions/PaginationPrevious.md)
* [PaginationNext](functions/PaginationNext.md)
* [PaginationEllipsis](functions/PaginationEllipsis.md)
* [ResizablePanelGroup](functions/ResizablePanelGroup.md)
* [ResizableHandle](functions/ResizableHandle.md)
* [SheetHeader](functions/SheetHeader.md)
* [SheetFooter](functions/SheetFooter.md)
* [Skeleton](functions/Skeleton.md)
* [Toaster](functions/Toaster.md)
* [Tree](functions/Tree.md)
* [reducer](functions/reducer.md)
* [toast](functions/toast.md)
* [useToast](functions/useToast.md)
* [useAspectRatioDimensions](functions/useAspectRatioDimensions.md)
* [useDisclosure](functions/useDisclosure.md)
* [useRelativeCoordinates](functions/useRelativeCoordinates.md)
* [cn](functions/cn.md)
* [sqlroomsTailwindPreset](functions/sqlroomsTailwindPreset.md)
* [ThemeProvider](functions/ThemeProvider.md)
* [useTheme](functions/useTheme.md)

---

---
url: /api/utils.md
---
# @sqlrooms/utils

A collection of utility functions and helpers for SQLRooms applications. This package provides common utilities for string manipulation, file handling, color management, formatting, and more.

## Features

* 🔠 **String Utilities**: Functions for string manipulation and formatting
* 📁 **File Path Handling**: Tools for working with file paths and extensions
* 🎨 **Color Utilities**: Color conversion and manipulation functions
* 📊 **Formatting**: Data formatting for display purposes
* 🔄 **XHR Helpers**: Utilities for working with XMLHttpRequests
* 🧰 **General Helpers**: Common helper functions for everyday tasks

## Installation

```bash
npm install @sqlrooms/utils
# or
yarn add @sqlrooms/utils
```

## Basic Usage

### String Utilities

```tsx
import {truncate, capitalize, slugify} from '@sqlrooms/utils';

// Truncate long text
const shortText = truncate(
  'This is a very long text that needs to be shortened',
  20,
);
console.log(shortText); // 'This is a very long...'

// Capitalize text
const capitalized = capitalize('hello world');
console.log(capitalized); // 'Hello world'

// Create a URL-friendly slug
const slug = slugify('Hello World! This is a test');
console.log(slug); // 'hello-world-this-is-a-test'
```

### File Path Utilities

```tsx
import {getFileExtension, joinPaths, normalizePath} from '@sqlrooms/utils';

// Get file extension
const ext = getFileExtension('document.pdf');
console.log(ext); // 'pdf'

// Join path segments
const fullPath = joinPaths('/base/path', 'subfolder', 'file.txt');
console.log(fullPath); // '/base/path/subfolder/file.txt'

// Normalize a path
const normalized = normalizePath('/path//to/../folder/./file.txt');
console.log(normalized); // '/path/folder/file.txt'
```

### JSON Utilities

```tsx
import {safeJsonParse} from '@sqlrooms/utils';

// Safely parse JSON without throwing exceptions
const result = safeJsonParse('{"name": "John", "age": 30}');
console.log(result); // { name: 'John', age: 30 }

// Handle invalid JSON gracefully
const invalid = safeJsonParse('{"name": "John", age: 30}');
console.log(invalid); // undefined
```

### Formatting Utilities

```tsx
import {formatBytes, formatNumber, formatDate} from '@sqlrooms/utils';

// Format file size
console.log(formatBytes(1024)); // '1 KB'
console.log(formatBytes(1048576)); // '1 MB'

// Format numbers
console.log(formatNumber(1234567.89)); // '1,234,567.89'

// Format dates
console.log(formatDate(new Date(), 'yyyy-MM-dd')); // '2023-04-15'
```

## Advanced Features

* **Type Safety**: All utilities are fully typed with TypeScript
* **Browser Compatibility**: Works in all modern browsers
* **Tree-Shakable**: Import only what you need to minimize bundle size
* **No Dependencies**: Zero external runtime dependencies

For more information, visit the SQLRooms documentation.

## Type Aliases

* [ProgressInfo](type-aliases/ProgressInfo.md)

## Variables

* [formatCount](variables/formatCount.md)
* [formatCount4](variables/formatCount4.md)
* [formatCountShort](variables/formatCountShort.md)
* [NUMBER\_FORMAT](variables/NUMBER_FORMAT.md)

## Functions

* [isMacOS](functions/isMacOS.md)
* [opacifyHex](functions/opacifyHex.md)
* [splitFilePath](functions/splitFilePath.md)
* [convertToValidColumnOrTableName](functions/convertToValidColumnOrTableName.md)
* [convertToUniqueColumnOrTableName](functions/convertToUniqueColumnOrTableName.md)
* [generateUniqueName](functions/generateUniqueName.md)
* [generateUniquePath](functions/generateUniquePath.md)
* [convertToUniqueS3ObjectName](functions/convertToUniqueS3ObjectName.md)
* [convertToUniqueS3FolderPath](functions/convertToUniqueS3FolderPath.md)
* [shorten](functions/shorten.md)
* [formatNumber](functions/formatNumber.md)
* [formatDateTime](functions/formatDateTime.md)
* [formatDate](functions/formatDate.md)
* [formatTimeOfDay](functions/formatTimeOfDay.md)
* [formatTimeRelative](functions/formatTimeRelative.md)
* [formatTimestampForFilename](functions/formatTimestampForFilename.md)
* [getErrorMessageForDisplay](functions/getErrorMessageForDisplay.md)
* [safeJsonParse](functions/safeJsonParse.md)
* [memoizeOnce](functions/memoizeOnce.md)
* [genRandomStr](functions/genRandomStr.md)
* [formatBytes](functions/formatBytes.md)
* [camelCaseToTitle](functions/camelCaseToTitle.md)
* [capitalize](functions/capitalize.md)
* [truncate](functions/truncate.md)
* [postData](functions/postData.md)
* [downloadFile](functions/downloadFile.md)
* [uploadFile](functions/uploadFile.md)

---

---
url: /api/vega.md
---
# @sqlrooms/vega

A package that provides Vega-Lite visualization components for the SQLRooms framework, allowing you to create interactive data visualizations directly from SQL queries.

## About Vega-Lite

[Vega-Lite](https://vega.github.io/vega-lite/) is a high-level grammar of interactive graphics. It provides a concise, declarative JSON syntax to create an expressive range of visualizations for data analysis and presentation.

Vega-Lite specifications describe visualizations as encoding mappings from data to properties of graphical marks (e.g., points or bars). The Vega-Lite compiler automatically produces visualization components including axes, legends, and scales. This approach allows for concise specifications while giving users control to customize various parts of a visualization.

This package integrates Vega-Lite with SQLRooms, allowing you to easily create data visualizations directly from SQL queries.

## Components

### VegaLiteChart

A React component that renders a Vega-Lite chart with SQL data and responsive sizing.

#### Features

* **SQL-Powered**: Directly use SQL queries to fetch data for your visualizations
* **Responsive Design**: Multiple sizing options to fit any layout
* **Aspect Ratio Control**: Maintain visual consistency with customizable aspect ratios
* **Integration with DuckDB**: Seamlessly works with the SQLRooms DuckDB integration

#### Installation

```bash
npm install @sqlrooms/vega
# or
yarn add @sqlrooms/vega
```

#### Usage

```tsx
import {VegaLiteChart} from '@sqlrooms/vega';

// Basic usage
function MyChart() {
  return (
    <VegaLiteChart
      sqlQuery="SELECT category, count(*) as count FROM sales GROUP BY category"
      spec={{
        mark: 'bar',
        encoding: {
          x: {field: 'category', type: 'nominal'},
          y: {field: 'count', type: 'quantitative'},
        },
      }}
    />
  );
}
```

#### Props

| Prop          | Type                          | Default     | Description                                                           |
| ------------- | ----------------------------- | ----------- | --------------------------------------------------------------------- |
| `sqlQuery`    | `string`                      | (required)  | The SQL query to fetch data for the chart                             |
| `spec`        | `string \| VisualizationSpec` | (required)  | The Vega-Lite specification for the chart                             |
| `width`       | `number \| 'auto'`            | `'auto'`    | The chart width in pixels, or 'auto' to use container width           |
| `height`      | `number \| 'auto'`            | `'auto'`    | The chart height in pixels, or 'auto' to calculate from aspect ratio  |
| `aspectRatio` | `number`                      | `3/2`       | The desired width-to-height ratio when dimensions are auto-calculated |
| `className`   | `string`                      | `undefined` | Additional CSS classes to apply to the container                      |

#### Sizing Options

The chart can be sized in multiple ways:

* **Fixed dimensions**: Provide both width and height as numbers
* **Fixed width, proportional height**: Provide width as number, height as 'auto'
* **Fixed height, proportional width**: Provide height as number, width as 'auto'
* **Fully responsive**: Leave both as 'auto' (default), chart will fill container while maintaining aspect ratio

#### Examples

**Fixed size chart:**

```tsx
<VegaLiteChart
  width={600}
  height={400}
  sqlQuery="SELECT category, count(*) as count FROM sales GROUP BY category"
  spec={{
    mark: 'bar',
    encoding: {
      x: {field: 'category', type: 'nominal'},
      y: {field: 'count', type: 'quantitative'},
    },
  }}
/>
```

**Responsive chart with 16:9 aspect ratio:**

```tsx
<VegaLiteChart
  className="max-w-[600px]"
  aspectRatio={16 / 9}
  sqlQuery="SELECT date, value FROM metrics"
  spec={{
    mark: 'line',
    encoding: {
      x: {field: 'date', type: 'temporal'},
      y: {field: 'value', type: 'quantitative'},
    },
  }}
/>
```

### VegaChartTool

A tool for creating Vega-Lite charts in AI-assisted workflows, designed to work with the [SQLRooms AI assistant framework](/api/ai/).

#### Features

* **AI Integration**: Allows AI assistants to create data visualizations
* **SQL-Powered**: Uses SQL queries to fetch data for visualizations
* **Declarative Specs**: Uses Vega-Lite's declarative JSON syntax for chart creation
* **Responsive Design**: Charts automatically adapt to container size

#### Usage

```tsx
import {createVegaChartTool} from '@sqlrooms/vega';
import {createAiSlice} from '@sqlrooms/ai';
import {createRoomStore} from '@sqlrooms/room-shell';

// Create a room store with the VegaChartTool configured
export const {roomStore, useRoomStore} = createRoomStore((set, get, store) => ({
  // Other slices and state...

  // AI slice with custom tools
  ...createAiSlice({
    getApiKey: (modelProvider: string) => {
      return get()?.apiKeys[modelProvider] || '';
    },
    // Configure custom tools at store creation time
    customTools: {
      // Add the VegaChart tool
      chart: createVegaChartTool({
        // Optional custom description
        description:
          'Create data visualizations using Vega-Lite and SQL queries',
      }),

      // Other custom tools...
    },
  })(set, get, store),

  // Other state and methods...
}));
```

#### Tool Parameters

The VegaChartTool accepts the following parameters:

| Parameter      | Type     | Description                                                 |
| -------------- | -------- | ----------------------------------------------------------- |
| `sqlQuery`     | `string` | The SQL query to fetch data for the chart                   |
| `vegaLiteSpec` | `string` | The Vega-Lite specification as a JSON string                |
| `reasoning`    | `string` | Optional explanation of the chart's purpose or significance |

#### Example AI Assistant Usage

When the AI assistant uses the VegaChartTool, it will generate a response like this:

```json
{
  "sqlQuery": "SELECT product_category, SUM(sales) as total_sales FROM sales GROUP BY product_category ORDER BY total_sales DESC LIMIT 10",
  "vegaLiteSpec": "{\"mark\": \"bar\", \"encoding\": {\"x\": {\"field\": \"product_category\", \"type\": \"nominal\", \"sort\": \"-y\"}, \"y\": {\"field\": \"total_sales\", \"type\": \"quantitative\", \"title\": \"Total Sales\"}, \"color\": {\"field\": \"product_category\", \"type\": \"nominal\", \"legend\": null}}}",
  "reasoning": "This chart visualizes the top 10 product categories by total sales to identify the best-performing categories."
}
```

In a conversation with the AI assistant, it might look like this:

```
User: Can you show me a chart of our top 10 product categories by sales?

AI: I'll create a visualization of your top 10 product categories by sales.

[Chart: Bar chart showing product categories on the x-axis and total sales on the y-axis]

This chart displays your top 10 product categories ranked by total sales. As you can see,
Electronics leads with the highest sales, followed by Furniture and Clothing. This visualization
helps identify which product categories are driving the most revenue for your business.
```

The tool will:

1. Execute the SQL query to fetch the data
2. Apply the Vega-Lite specification to create the visualization
3. Render the chart in the UI with responsive sizing

## Dependencies

This package depends on:

* `@sqlrooms/duckdb` - For SQL query execution
* `@sqlrooms/ui` - For UI utilities
* `@sqlrooms/utils` - For utility functions
* `@sqlrooms/ai` - For AI assistant integration
* `react-vega` - For rendering Vega-Lite visualizations

## Type Aliases

* [VegaChartToolParameters](type-aliases/VegaChartToolParameters.md)
* [VisualizationSpec](type-aliases/VisualizationSpec.md)

## Variables

* [VegaChartToolParameters](variables/VegaChartToolParameters.md)
* [DEFAULT\_VEGA\_CHART\_DESCRIPTION](variables/DEFAULT_VEGA_CHART_DESCRIPTION.md)
* [VegaLiteChart](variables/VegaLiteChart.md)

## Functions

* [createVegaChartTool](functions/createVegaChartTool.md)
* [VegaChartToolResult](functions/VegaChartToolResult.md)

## References

### VegaChartToolParametersType

Renames and re-exports [VegaChartToolParameters](variables/VegaChartToolParameters.md)

---

---
url: /api/data-table/functions/DataTableVirtualized.md
---
[@sqlrooms/data-table](../index.md) / DataTableVirtualized

# ~~Function: DataTableVirtualized()~~

> **DataTableVirtualized**<`Data`>(`props`): `Element` | `null`

## Type Parameters

| Type Parameter |
| ------ |
| `Data` *extends* `object` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`DataTableVirtualizedProps`](../type-aliases/DataTableVirtualizedProps.md)<`Data`> |

## Returns

`Element` | `null`

## Deprecated

Use `DataTablePaginated` instead.

---

---
url: /api/duckdb/type-aliases/DuckDbConnectorOptions.md
---
[@sqlrooms/duckdb](../index.md) / DuckDbConnectorOptions

# ~~Type Alias: DuckDbConnectorOptions~~

> **DuckDbConnectorOptions** = `object` & `WasmDuckDbConnectorOptions` | { `type`: `"ws"`; `wsUrl?`: `string`; `initializationQuery?`: `string`; }

Options for creating a DuckDB connector instance.

## Type Declaration

`object` & `WasmDuckDbConnectorOptions`

{ `type`: `"ws"`; `wsUrl?`: `string`; `initializationQuery?`: `string`; }

| Name | Type | Description |
| ------ | ------ | ------ |
| `type` | `"ws"` | - |
| `wsUrl?` | `string` | WebSocket server URL |
| `initializationQuery?` | `string` | SQL to run after connection |

## Deprecated

Use `createWasmDuckDbConnector` or `createWebSocketDuckDbConnector` instead.

---

---
url: /api/duckdb/type-aliases/DuckDbQueryResult.md
---
[@sqlrooms/duckdb](../index.md) / DuckDbQueryResult

# ~~Type Alias: DuckDbQueryResult\<T>~~

> **DuckDbQueryResult**<`T`> = [`UseSqlQueryResult`](../interfaces/UseSqlQueryResult.md)<`T`>

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Deprecated

Use UseSqlQueryResult instead

---

---
url: /api/room-store/variables/createBaseSlice.md
---
[@sqlrooms/room-store](../index.md) / createBaseSlice

# ~~Variable: createBaseSlice()~~

> `const` **createBaseSlice**: <`SliceState`, `StoreState`>(`sliceCreator`) => [`StateCreator`](../type-aliases/StateCreator.md)<`SliceState`> = `createSlice`

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `SliceState` | - |
| `StoreState` | [`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md) & `SliceState` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `sliceCreator` | (...`args`) => `SliceState` |

## Returns

[`StateCreator`](../type-aliases/StateCreator.md)<`SliceState`>

## Deprecated

Use createSlice instead

---

---
url: /api/room-shell/variables/createBaseSlice.md
---
[@sqlrooms/room-shell](../index.md) / createBaseSlice

# ~~Variable: createBaseSlice~~

> `const` **createBaseSlice**: *typeof* [`createSlice`](../functions/createSlice.md)

## Deprecated

Use createSlice instead

---

---
url: /api/room-store/variables/createRoomSlice.md
---
[@sqlrooms/room-store](../index.md) / createRoomSlice

# ~~Variable: createRoomSlice()~~

> `const` **createRoomSlice**: (`props?`) => [`StateCreator`](../type-aliases/StateCreator.md)<[`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md)> = `createBaseRoomSlice`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props?` | [`CreateBaseRoomSliceProps`](../type-aliases/CreateBaseRoomSliceProps.md) |

## Returns

[`StateCreator`](../type-aliases/StateCreator.md)<[`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md)>

## Deprecated

Use createBaseRoomSlice instead

---

---
url: /api/room-shell/variables/createRoomSlice.md
---
[@sqlrooms/room-shell](../index.md) / createRoomSlice

# ~~Variable: createRoomSlice~~

> `const` **createRoomSlice**: *typeof* [`createBaseRoomSlice`](../functions/createBaseRoomSlice.md)

## Deprecated

Use createBaseRoomSlice instead

---

---
url: /api/layout-config/variables/DEFAULT_MOSAIC_LAYOUT.md
---
[@sqlrooms/layout-config](../index.md) / DEFAULT\_MOSAIC\_LAYOUT

# ~~Variable: DEFAULT\_MOSAIC\_LAYOUT~~

> `const` **DEFAULT\_MOSAIC\_LAYOUT**: [`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)

## Deprecated

Use createDefaultMosaicLayout instead

---

---
url: /api/layout/variables/DEFAULT_MOSAIC_LAYOUT.md
---
[@sqlrooms/layout](../index.md) / DEFAULT\_MOSAIC\_LAYOUT

# ~~Variable: DEFAULT\_MOSAIC\_LAYOUT~~

> `const` **DEFAULT\_MOSAIC\_LAYOUT**: [`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)

## Deprecated

Use createDefaultMosaicLayout instead

---

---
url: /api/room-config/variables/DEFAULT_MOSAIC_LAYOUT.md
---
[@sqlrooms/room-config](../index.md) / DEFAULT\_MOSAIC\_LAYOUT

# ~~Variable: DEFAULT\_MOSAIC\_LAYOUT~~

> `const` **DEFAULT\_MOSAIC\_LAYOUT**: [`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)

## Deprecated

Use createDefaultMosaicLayout instead

---

---
url: /api/room-shell/variables/DEFAULT_MOSAIC_LAYOUT.md
---
[@sqlrooms/room-shell](../index.md) / DEFAULT\_MOSAIC\_LAYOUT

# ~~Variable: DEFAULT\_MOSAIC\_LAYOUT~~

> `const` **DEFAULT\_MOSAIC\_LAYOUT**: [`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)

## Deprecated

Use createDefaultMosaicLayout instead

---

---
url: /api/room-store/variables/DEFAULT_MOSAIC_LAYOUT.md
---
[@sqlrooms/room-store](../index.md) / DEFAULT\_MOSAIC\_LAYOUT

# ~~Variable: DEFAULT\_MOSAIC\_LAYOUT~~

> `const` **DEFAULT\_MOSAIC\_LAYOUT**: [`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)

## Deprecated

Use createDefaultMosaicLayout instead

---

---
url: /api/duckdb/variables/useDuckDbQuery.md
---
[@sqlrooms/duckdb](../index.md) / useDuckDbQuery

# ~~Variable: useDuckDbQuery()~~

> `const` **useDuckDbQuery**: {<`Row`>(`options`): `object`; <`Schema`>(`zodSchema`, `options`): `object`; } = `useSql`

## Call Signature

> <`Row`>(`options`): `object`

A React hook for executing SQL queries with automatic state management.
Provides two ways to ensure type safety:

1. Using TypeScript types (compile-time safety only)
2. Using Zod schemas (both compile-time and runtime validation)

### Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `Row` | The TypeScript type for each row in the result |

### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | { `query`: `string`; `enabled?`: `boolean`; } | Configuration object containing the query and execution control |
| `options.query` | `string` | - |
| `options.enabled?` | `boolean` | - |

### Returns

`object`

Object containing the query result, loading state, and any error

| Name | Type |
| ------ | ------ |
| `data` | [`UseSqlQueryResult`](../interfaces/UseSqlQueryResult.md)<`Row`> | `undefined` |
| `error` | `Error` | `null` |
| `isLoading` | `boolean` |

### Example

```typescript
// Option 1: Using TypeScript types (faster, no runtime validation)
interface User {
  id: number;
  name: string;
  email: string;
}

const {data, isLoading, error} = useSql<User>({
  query: 'SELECT id, name, email FROM users'
});

// Option 2: Using Zod schema (slower but with runtime validation)
const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  createdAt: z.string().transform(str => new Date(str)) // Transform string to Date
});

const {data: validatedData, isLoading, error} = useSql(
  userSchema,
  {query: 'SELECT id, name, email, created_at as createdAt FROM users'}
);
```

## Error Handling

```typescript
if (isLoading) return <div>Loading...</div>;
if (error) {
  // With Zod, you can catch validation errors specifically
  if (error instanceof z.ZodError) {
    return <div>Validation Error: {error.errors[0].message}</div>;
  }
  return <div>Error: {error.message}</div>;
}
if (!data) return null;
```

## Data Access Methods

There are several ways to access data with different performance characteristics:

### 1. Typed Row Access (getRow, rows(), toArray())

* Provides type safety and validation
* Converts data to JavaScript objects
* Slower for large datasets due to object creation and validation

```typescript
// Iterate through rows using the rows() iterator (recommended)
for (const user of data.rows()) {
  console.log(user.name, user.email);
}

// Traditional for loop with index access
for (let i = 0; i < data.length; i++) {
  const user = data.getRow(i);
  console.log(`User ${i}: ${user.name} (${user.email})`);
}

// Get all rows as an array
const allUsers = data.toArray();

// With Zod schema, transformed fields are available
for (const user of validatedData.rows()) {
  console.log(`Created: ${user.createdAt.toISOString()}`); // createdAt is a Date object
}
```

### 2. Direct Arrow Table Access

* Much faster for large datasets
* Columnar access is more efficient for analytics
* No type safety or validation

```typescript
// For performance-critical operations with large datasets:
const nameColumn = data.arrowTable.getChild('name');
const emailColumn = data.arrowTable.getChild('email');

// Fast columnar iteration (no object creation)
for (let i = 0; i < data.length; i++) {
  console.log(nameColumn.get(i), emailColumn.get(i));
}

// Note: For filtering data, it's most efficient to use SQL in your query
const { data } = useSql<User>({
  query: "SELECT * FROM users WHERE age > 30"
});
```

### 3. Using Flechette for Advanced Operations

For more advanced Arrow operations, consider using [Flechette](https://idl.uw.edu/flechette/),
a faster and lighter alternative to the standard Arrow JS implementation.

```typescript
// Example using Flechette with SQL query results
import { tableFromIPC } from '@uwdata/flechette';

// Convert Arrow table to Flechette table
const serializedData = data.arrowTable.serialize();
const flechetteTable = tableFromIPC(serializedData);

// Extract all columns into a { name: array, ... } object
const columns = flechetteTable.toColumns();

// Create a new table with a selected subset of columns
const subtable = flechetteTable.select(['name', 'email']);

// Convert to array of objects with customization options
const objects = flechetteTable.toArray({
  useDate: true,  // Convert timestamps to Date objects
  useMap: true    // Create Map objects for key-value pairs
});

// For large datasets, consider memory management
serializedData = null; // Allow garbage collection of the serialized data
```

Flechette provides several advantages:

* Better performance (1.3-1.6x faster value iteration, 7-11x faster row object extraction)
* Smaller footprint (~43k minified vs 163k for Arrow JS)
* Support for additional data types (including decimal-to-number conversion)
* More flexible data value conversion options

## Call Signature

> <`Schema`>(`zodSchema`, `options`): `object`

A React hook for executing SQL queries with automatic state management.
Provides two ways to ensure type safety:

1. Using TypeScript types (compile-time safety only)
2. Using Zod schemas (both compile-time and runtime validation)

### Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `Schema` *extends* `ZodType`<`unknown`, `unknown`, `$ZodTypeInternals`<`unknown`, `unknown`>> | The Zod schema type that defines the shape and validation of each row |

### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `zodSchema` | `Schema` | A Zod schema that defines the expected shape and validation rules for each row |
| `options` | { `query`: `string`; `enabled?`: `boolean`; } | Configuration object containing the query and execution control |
| `options.query` | `string` | - |
| `options.enabled?` | `boolean` | - |

### Returns

`object`

Object containing the query result, loading state, and any error

| Name | Type |
| ------ | ------ |
| `data` | [`UseSqlQueryResult`](../interfaces/UseSqlQueryResult.md)<`output`<`Schema`>> | `undefined` |
| `error` | `Error` | `null` |
| `isLoading` | `boolean` |

### Example

```typescript
// Option 1: Using TypeScript types (faster, no runtime validation)
interface User {
  id: number;
  name: string;
  email: string;
}

const {data, isLoading, error} = useSql<User>({
  query: 'SELECT id, name, email FROM users'
});

// Option 2: Using Zod schema (slower but with runtime validation)
const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  createdAt: z.string().transform(str => new Date(str)) // Transform string to Date
});

const {data: validatedData, isLoading, error} = useSql(
  userSchema,
  {query: 'SELECT id, name, email, created_at as createdAt FROM users'}
);
```

## Error Handling

```typescript
if (isLoading) return <div>Loading...</div>;
if (error) {
  // With Zod, you can catch validation errors specifically
  if (error instanceof z.ZodError) {
    return <div>Validation Error: {error.errors[0].message}</div>;
  }
  return <div>Error: {error.message}</div>;
}
if (!data) return null;
```

## Data Access Methods

There are several ways to access data with different performance characteristics:

### 1. Typed Row Access (getRow, rows(), toArray())

* Provides type safety and validation
* Converts data to JavaScript objects
* Slower for large datasets due to object creation and validation

```typescript
// Iterate through rows using the rows() iterator (recommended)
for (const user of data.rows()) {
  console.log(user.name, user.email);
}

// Traditional for loop with index access
for (let i = 0; i < data.length; i++) {
  const user = data.getRow(i);
  console.log(`User ${i}: ${user.name} (${user.email})`);
}

// Get all rows as an array
const allUsers = data.toArray();

// With Zod schema, transformed fields are available
for (const user of validatedData.rows()) {
  console.log(`Created: ${user.createdAt.toISOString()}`); // createdAt is a Date object
}
```

### 2. Direct Arrow Table Access

* Much faster for large datasets
* Columnar access is more efficient for analytics
* No type safety or validation

```typescript
// For performance-critical operations with large datasets:
const nameColumn = data.arrowTable.getChild('name');
const emailColumn = data.arrowTable.getChild('email');

// Fast columnar iteration (no object creation)
for (let i = 0; i < data.length; i++) {
  console.log(nameColumn.get(i), emailColumn.get(i));
}

// Note: For filtering data, it's most efficient to use SQL in your query
const { data } = useSql<User>({
  query: "SELECT * FROM users WHERE age > 30"
});
```

### 3. Using Flechette for Advanced Operations

For more advanced Arrow operations, consider using [Flechette](https://idl.uw.edu/flechette/),
a faster and lighter alternative to the standard Arrow JS implementation.

```typescript
// Example using Flechette with SQL query results
import { tableFromIPC } from '@uwdata/flechette';

// Convert Arrow table to Flechette table
const serializedData = data.arrowTable.serialize();
const flechetteTable = tableFromIPC(serializedData);

// Extract all columns into a { name: array, ... } object
const columns = flechetteTable.toColumns();

// Create a new table with a selected subset of columns
const subtable = flechetteTable.select(['name', 'email']);

// Convert to array of objects with customization options
const objects = flechetteTable.toArray({
  useDate: true,  // Convert timestamps to Date objects
  useMap: true    // Create Map objects for key-value pairs
});

// For large datasets, consider memory management
serializedData = null; // Allow garbage collection of the serialized data
```

Flechette provides several advantages:

* Better performance (1.3-1.6x faster value iteration, 7-11x faster row object extraction)
* Smaller footprint (~43k minified vs 163k for Arrow JS)
* Support for additional data types (including decimal-to-number conversion)
* More flexible data value conversion options

## Deprecated

Use useSql instead

---

---
url: /api/recharts/recharts/namespaces/CartesianGrid.md
---
[@sqlrooms/recharts](../../../index.md) / CartesianGrid

# CartesianGrid

## Variables

* [displayName](variables/displayName.md)

---

---
url: /case-studies.md
---

# Case Studies

Built something with SQLRooms? We'd love to feature it!

[Submit your app](https://github.com/sqlrooms/sqlrooms/discussions/categories/case-studies) to be included on this page.

## [Foursquare Spatial Desktop](https://foursquare.com/products/spatial-desktop)

[Foursquare Spatial Desktop](https://foursquare.com/products/spatial-desktop) is a powerful geospatial computing tool that transforms your desktop into a comprehensive spatial analysis environment. Built on SQLRooms, it delivers native DuckDB query performance and real-time visualization rendering—all powered natively on your machine without requiring server infrastructure.

[\<img src=/media/case-studies/fsq-spatial-desktop-earthquakes.webp width=450>](https://foursquare.com/products/spatial-desktop/)

Key features include:

* **Native DuckDB Performance**: Run complex spatial queries on multi-GB datasets with native DuckDB integration without cloud compute dependence
* **Real-time Rendering**: Harness Kepler.gl's visualization excellence to render millions of points with interactive filtering and smooth animations
* **Modern Spatial Formats**: Native support for GeoParquet, PMTiles, and other formats GIS professionals need
* **Flexible Data Management**: Save projects locally or to personal cloud storage without internet connectivity requirements
* **Offline Capability**: Full analytical power available without cloud dependencies

## [Flowmap City](https://www.flowmap.city/)

[Flowmap City](https://www.flowmap.city/) is a powerful web-based platform for visualizing and analyzing mobility data and origin-destination flows. The application helps urban planners, transportation analysts, and researchers understand movement patterns in cities and regions.

The platform enables users to upload their own mobility datasets and create interactive visualizations that can be shared with stakeholders or embedded in other applications.

Key features include:

* **Flow Visualization**: Analyze origin-destination patterns with interactive flow maps
* **Mobility Analysis**: Study commuting patterns, transportation demand, and traffic flows
* **Temporal Patterns**: Explore how movement patterns change over time and seasons
* **Multi-modal Analysis**: Compare different transportation modes and their usage
* **Infrastructure Planning**: Make data-driven decisions for transportation infrastructure
* **Interactive Filtering**: Filter and analyze specific routes, regions, or time periods

## [Cosmograph](https://cosmograph.app/)

[Cosmograph](https://cosmograph.app/) is a powerful web-based application for visualizing and analyzing large graph datasets and machine learning embeddings. The application runs entirely in the browser, leveraging your GPU for all computations while keeping your data private and secure. The upcoming version of Cosmograph is being built using SQLRooms to enhance its data processing capabilities and analytical features.

Key features include:

* **Network Graph Visualization**: Analyze complex relationships and patterns in graph data
* **ML Embeddings Analysis**: Visualize and explore machine learning embeddings in 2D space
* **Temporal Analysis**: Study how relationships and patterns evolve over time
* **Community Detection**: Identify clusters and anomalies within your data
* **Interactive Analysis**: Use filters and histograms to explore data distributions
* **GPU-Accelerated**: Performs all calculations locally using your GPU for optimal performance

## [Transcality](https://www.transcality.com/)

[Transcality](https://www.transcality.com/) is a Swiss company building transport modeling software using SQLRooms. Their platform creates digital twins of transportation systems, enabling planners and engineers to simulate infrastructure changes—like adding or closing a road—and immediately see the effects on traffic flow.

By leveraging SQLRooms, Transcality enables visualization, filtering, and aggregation of simulation results to run directly on end-users' machines, providing fast and interactive exploration of traffic scenarios.

Key features include:

* **Traffic Flow Modeling**: Simulate and analyze traffic patterns at various resolutions
* **Infrastructure Scenarios**: Model the impact of road closures, new routes, or construction
* **Digital Transportation Twins**: Build comprehensive models of transportation systems
* **Local Data Exploration**: Visualize, filter, and aggregate simulation results directly in the browser

---

---
url: /api/ai-rag/_media/ai/CHANGELOG.md
---
# Change Log

All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

**Note:** Version bump only for package nextjs-ai

---

---
url: /api/recharts/classes/Area.md
---
[@sqlrooms/recharts](../index.md) / Area

# Class: Area

## Extends

* `PureComponent`<[`AreaProps`](../type-aliases/AreaProps.md), `State`>

## Constructors

### Constructor

> **new Area**(`props`): `Area`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`AreaProps`](../type-aliases/AreaProps.md) |

#### Returns

`Area`

#### Inherited from

`PureComponent<Props, State>.constructor`

### Constructor

> **new Area**(`props`, `context`): `Area`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`AreaProps`](../type-aliases/AreaProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`Area`

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - | - |
| `defaultProps.fill` | `public` | `string` | - | - | - |
| `defaultProps.fillOpacity` | `public` | `number` | - | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.connectNulls` | `public` | `boolean` | - | - | - |
| `defaultProps.points` | `public` | `AreaPointItem`\[] | - | - | - |
| `defaultProps.dot` | `public` | `boolean` | - | - | - |
| `defaultProps.activeDot` | `public` | `boolean` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
|  `getBaseValue` | `static` | (`props`, `item`, `xAxis`, `yAxis`) => `number` | - | - | - |
|  `getComposedData` | `static` | (`__namedParameters`) => `object` | - | - | - |
|  `renderDotItem` | `static` | (`option`, `props`) => `Element` | - | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `id` | `public` | `string` | - | - | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `State` | (`prevState`, `props`) => `State` | `Pick`<`State`, `K`> | `null` | `Pick`<`State`, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`AreaProps`](../type-aliases/AreaProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### renderDots()

> **renderDots**(`needClip`, `clipDot`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipDot` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### renderHorizontalRect()

> **renderHorizontalRect**(`alpha`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `alpha` | `number` |

#### Returns

`Element`

***

### renderVerticalRect()

> **renderVerticalRect**(`alpha`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `alpha` | `number` |

#### Returns

`Element`

***

### renderClipRect()

> **renderClipRect**(`alpha`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `alpha` | `number` |

#### Returns

`Element`

***

### renderAreaStatically()

> **renderAreaStatically**(`points`, `baseLine`, `needClip`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `points` | `AreaPointItem`\[] |
| `baseLine` | `number` | `Coordinate`\[] | `undefined` |
| `needClip` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### renderAreaWithAnimation()

> **renderAreaWithAnimation**(`needClip`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### renderArea()

> **renderArea**(`needClip`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Bar.md
---
[@sqlrooms/recharts](../index.md) / Bar

# Class: Bar

## Extends

* `PureComponent`<[`BarProps`](../type-aliases/BarProps.md), `State`>

## Constructors

### Constructor

> **new Bar**(`props`): `Bar`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`BarProps`](../type-aliases/BarProps.md) |

#### Returns

`Bar`

#### Inherited from

`PureComponent<Props, State>.constructor`

### Constructor

> **new Bar**(`props`, `context`): `Bar`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`BarProps`](../type-aliases/BarProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`Bar`

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.minPointSize` | `public` | `number` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.data` | `public` | `BarRectangleItem`\[] | - | - | - |
| `defaultProps.layout` | `public` | `string` | - | - | - |
| `defaultProps.activeBar` | `public` | `boolean` | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
|  `getComposedData` | `static` | (`props`) => `object` | Compose the data of each group | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `id` | `public` | `string` | - | - | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `State` | (`prevState`, `props`) => `State` | `Pick`<`State`, `K`> | `null` | `Pick`<`State`, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`BarProps`](../type-aliases/BarProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### renderRectanglesStatically()

> **renderRectanglesStatically**(`data`): `Element`\[]

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `data` | `BarRectangleItem`\[] |

#### Returns

`Element`\[]

***

### renderRectanglesWithAnimation()

> **renderRectanglesWithAnimation**(): `Element`

#### Returns

`Element`

***

### renderRectangles()

> **renderRectangles**(): `Element` | `Element`\[]

#### Returns

`Element` | `Element`\[]

***

### renderBackground()

> **renderBackground**(): `Element`\[]

#### Returns

`Element`\[]

***

### renderErrorBar()

> **renderErrorBar**(`needClip`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Brush.md
---
[@sqlrooms/recharts](../index.md) / Brush

# Class: Brush

## Extends

* `PureComponent`<[`BrushProps`](../type-aliases/BrushProps.md), `State`>

## Constructors

### Constructor

> **new Brush**(`props`): `Brush`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`BrushProps`](../type-aliases/BrushProps.md) |

#### Returns

`Brush`

#### Overrides

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | `PureComponent.props` |
|  `state` | `public` | `Readonly`<`S`> | - | `PureComponent.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.height` | `public` | `number` | - | - |
| `defaultProps.travellerWidth` | `public` | `number` | - | - |
| `defaultProps.gap` | `public` | `number` | - | - |
| `defaultProps.fill` | `public` | `string` | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - |
| `defaultProps.padding` | `public` | `object` | - | - |
| `defaultProps.padding.top` | `public` | `number` | - | - |
| `defaultProps.padding.right` | `public` | `number` | - | - |
| `defaultProps.padding.bottom` | `public` | `number` | - | - |
| `defaultProps.padding.left` | `public` | `number` | - | - |
| `defaultProps.leaveTimeOut` | `public` | `number` | - | - |
| `defaultProps.alwaysShowText` | `public` | `boolean` | - | - |
|  `leaveTimer?` | `public` | `number` | - | - |
|  `travellerDragStartHandlers?` | `public` | `Record`<`BrushTravellerId`, (`event`) => `void`> | - | - |
|  `handleDrag` | `public` | (`e`) => `void` | - | - |
|  `handleTouchMove` | `public` | (`e`) => `void` | - | - |
|  `handleDragEnd` | `public` | () => `void` | - | - |
|  `handleLeaveWrapper` | `public` | () => `void` | - | - |
|  `handleEnterSlideOrTraveller` | `public` | () => `void` | - | - |
|  `handleLeaveSlideOrTraveller` | `public` | () => `void` | - | - |
|  `handleSlideDragStart` | `public` | (`e`) => `void` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `State` | (`prevState`, `props`) => `State` | `Pick`<`State`, `K`> | `null` | `Pick`<`State`, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### renderDefaultTraveller()

> `static` **renderDefaultTraveller**(`props`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `any` |

#### Returns

`Element`

***

### renderTraveller()

> `static` **renderTraveller**(`option`, `props`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `BrushTravellerType` |
| `props` | `any` |

#### Returns

`Element`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`BrushProps`](../type-aliases/BrushProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### componentWillUnmount()

> **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Overrides

`PureComponent.componentWillUnmount`

***

### getIndexInRange()

> `static` **getIndexInRange**(`valueRange`, `x`): `number`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `valueRange` | `number`\[] |
| `x` | `number` |

#### Returns

`number`

***

### getIndex()

> **getIndex**(`__namedParameters`): `object`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `startX`: `number`; `endX`: `number`; } |
| `__namedParameters.startX` | `number` |
| `__namedParameters.endX` | `number` |

#### Returns

`object`

| Name | Type |
| ------ | ------ |
| `startIndex` | `number` |
| `endIndex` | `number` |

***

### getTextOfTick()

> **getTextOfTick**(`index`): `any`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `index` | `number` |

#### Returns

`any`

***

### attachDragEndListener()

> **attachDragEndListener**(): `void`

#### Returns

`void`

***

### detachDragEndListener()

> **detachDragEndListener**(): `void`

#### Returns

`void`

***

### handleSlideDrag()

> **handleSlideDrag**(`e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `e` | `MouseEvent` | `MouseEvent`<`SVGGElement`, `MouseEvent`> | `Touch` |

#### Returns

`void`

***

### handleTravellerDragStart()

> **handleTravellerDragStart**(`id`, `e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `id` | `BrushTravellerId` |
| `e` | `MouseEvent`<`SVGGElement`, `MouseEvent`> | `TouchEvent`<`SVGGElement`> |

#### Returns

`void`

***

### handleTravellerMove()

> **handleTravellerMove**(`e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `e` | `MouseEvent` | `MouseEvent`<`SVGGElement`, `MouseEvent`> | `Touch` |

#### Returns

`void`

***

### handleTravellerMoveKeyboard()

> **handleTravellerMoveKeyboard**(`direction`, `id`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `direction` | `-1` | `1` |
| `id` | `BrushTravellerId` |

#### Returns

`void`

***

### renderBackground()

> **renderBackground**(): `Element`

#### Returns

`Element`

***

### renderPanorama()

> **renderPanorama**(): `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>

#### Returns

`ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>

***

### renderTravellerLayer()

> **renderTravellerLayer**(`travellerX`, `id`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `travellerX` | `number` |
| `id` | `BrushTravellerId` |

#### Returns

`Element`

***

### renderSlide()

> **renderSlide**(`startX`, `endX`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `startX` | `number` |
| `endX` | `number` |

#### Returns

`Element`

***

### renderText()

> **renderText**(): `Element`

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/CartesianAxis.md
---
[@sqlrooms/recharts](../index.md) / CartesianAxis

# Class: CartesianAxis

## Extends

* `Component`<[`CartesianAxisProps`](../type-aliases/CartesianAxisProps.md), `IState`>

## Constructors

### Constructor

> **new CartesianAxis**(`props`): `CartesianAxis`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`CartesianAxisProps`](../type-aliases/CartesianAxisProps.md) |

#### Returns

`CartesianAxis`

#### Overrides

`Component<Props, IState>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `Component.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | `Component.props` |
|  `state` | `public` | `Readonly`<`S`> | - | `Component.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.x` | `public` | `number` | - | - |
| `defaultProps.y` | `public` | `number` | - | - |
| `defaultProps.width` | `public` | `number` | - | - |
| `defaultProps.height` | `public` | `number` | - | - |
| `defaultProps.viewBox` | `public` | `object` | - | - |
| `defaultProps.viewBox.x` | `public` | `number` | - | - |
| `defaultProps.viewBox.y` | `public` | `number` | - | - |
| `defaultProps.viewBox.width` | `public` | `number` | - | - |
| `defaultProps.viewBox.height` | `public` | `number` | - | - |
| `defaultProps.orientation` | `public` | `string` | - | - |
| `defaultProps.ticks` | `public` | `CartesianTickItem`\[] | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - |
| `defaultProps.tickLine` | `public` | `boolean` | - | - |
| `defaultProps.axisLine` | `public` | `boolean` | - | - |
| `defaultProps.tick` | `public` | `boolean` | - | - |
| `defaultProps.mirror` | `public` | `boolean` | - | - |
| `defaultProps.minTickGap` | `public` | `number` | - | - |
| `defaultProps.tickSize` | `public` | `number` | - | - |
| `defaultProps.tickMargin` | `public` | `number` | - | - |
| `defaultProps.interval` | `public` | `string` | - | - |
|  `layerReference` | `private` | `any` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `IState` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `IState` | (`prevState`, `props`) => `IState` | `Pick`<`IState`, `K`> | `null` | `Pick`<`IState`, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`Component.forceUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.UNSAFE_componentWillUpdate`

***

### shouldComponentUpdate()

> **shouldComponentUpdate**(`__namedParameters`, `nextState`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`CartesianAxisProps`](../type-aliases/CartesianAxisProps.md) |
| `nextState` | `IState` |

#### Returns

`boolean`

#### Overrides

`Component.shouldComponentUpdate`

***

### componentDidMount()

> **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Overrides

`Component.componentDidMount`

***

### getTickLineCoord()

> **getTickLineCoord**(`data`): `object`

Calculate the coordinates of endpoints in ticks

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `CartesianTickItem` | The data of a simple tick |

#### Returns

`object`

(x1, y1): The coordinate of endpoint close to tick text
(x2, y2): The coordinate of endpoint close to axis

| Name | Type |
| ------ | ------ |
| `line` | { `x1`: `number`; `y1`: `number`; `x2`: `number`; `y2`: `number`; } |
| `tick` | { `x`: `number`; `y`: `number`; } |

***

### getTickTextAnchor()

> **getTickTextAnchor**(): `string`

#### Returns

`string`

***

### getTickVerticalAnchor()

> **getTickVerticalAnchor**(): `string`

#### Returns

`string`

***

### renderAxisLine()

> **renderAxisLine**(): `Element`

#### Returns

`Element`

***

### renderTickItem()

> `static` **renderTickItem**(`option`, `props`, `value`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `boolean` | `SVGProps`<`SVGTextElement`> | `ReactElement`<`SVGElement`, `string` | `JSXElementConstructor`<`any`>> | (`props`) => `ReactElement`<`SVGElement`> | `undefined` |
| `props` | `any` |
| `value` | `ReactNode` |

#### Returns

`Element`

***

### renderTicks()

> **renderTicks**(`ticks`, `fontSize`, `letterSpacing`): `Element`

render the ticks

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `ticks` | `CartesianTickItem`\[] | The ticks to actually render (overrides what was passed in props) |
| `fontSize` | `string` | Fontsize to consider for tick spacing |
| `letterSpacing` | `string` | Letterspacing to consider for tick spacing |

#### Returns

`Element`

renderedTicks

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`Component.render`

---

---
url: /api/recharts/classes/DefaultLegendContent.md
---
[@sqlrooms/recharts](../index.md) / DefaultLegendContent

# Class: DefaultLegendContent

## Extends

* `PureComponent`<[`DefaultLegendContentProps`](../type-aliases/DefaultLegendContentProps.md)>

## Constructors

### Constructor

> **new DefaultLegendContent**(`props`): `DefaultLegendContent`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`DefaultLegendContentProps`](../type-aliases/DefaultLegendContentProps.md) |

#### Returns

`DefaultLegendContent`

#### Inherited from

`PureComponent<Props>.constructor`

### Constructor

> **new DefaultLegendContent**(`props`, `context`): `DefaultLegendContent`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`DefaultLegendContentProps`](../type-aliases/DefaultLegendContentProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`DefaultLegendContent`

#### Inherited from

`PureComponent<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | `PureComponent.props` |
|  `state` | `public` | `Readonly`<`S`> | - | `PureComponent.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.iconSize` | `public` | `number` | - | - |
| `defaultProps.layout` | `public` | `string` | - | - |
| `defaultProps.align` | `public` | `string` | - | - |
| `defaultProps.verticalAlign` | `public` | `string` | - | - |
| `defaultProps.inactiveColor` | `public` | `string` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | { } | (`prevState`, `props`) => { } | `Pick`<{ }, `K`> | `null` | `Pick`<{ }, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### renderIcon()

> **renderIcon**(`data`): `Element`

Render the path of icon

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `Payload` | Data of each legend item |

#### Returns

`Element`

Path element

***

### renderItems()

> **renderItems**(): `Element`\[]

Draw items of legend

#### Returns

`Element`\[]

Items

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/ErrorBar.md
---
[@sqlrooms/recharts](../index.md) / ErrorBar

# Class: ErrorBar

## Extends

* `Component`<[`ErrorBarProps`](../type-aliases/ErrorBarProps.md)>

## Constructors

### Constructor

> **new ErrorBar**(`props`): `ErrorBar`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`ErrorBarProps`](../type-aliases/ErrorBarProps.md) |

#### Returns

`ErrorBar`

#### Inherited from

`React.Component<Props>.constructor`

### Constructor

> **new ErrorBar**(`props`, `context`): `ErrorBar`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`ErrorBarProps`](../type-aliases/ErrorBarProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`ErrorBar`

#### Inherited from

`React.Component<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `React.Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `React.Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `React.Component.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | `React.Component.props` |
|  `state` | `public` | `Readonly`<`S`> | - | `React.Component.state` |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - |
| `defaultProps.strokeWidth` | `public` | `number` | - | - |
| `defaultProps.width` | `public` | `number` | - | - |
| `defaultProps.offset` | `public` | `number` | - | - |
| `defaultProps.layout` | `public` | `string` | - | - |
|  `displayName` | `static` | `string` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | { } | (`prevState`, `props`) => { } | `Pick`<{ }, `K`> | `null` | `Pick`<{ }, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`React.Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`React.Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`React.Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`React.Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`React.Component.render`

---

---
url: /api/ui/classes/ErrorBoundary.md
---
[@sqlrooms/ui](../index.md) / ErrorBoundary

# Class: ErrorBoundary

## Extends

* `Component`<`Props`, `State`>

## Constructors

### Constructor

> **new ErrorBoundary**(`props`): `ErrorBoundary`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Props` |

#### Returns

`ErrorBoundary`

#### Inherited from

`Component<Props, State>.constructor`

### Constructor

> **new ErrorBoundary**(`props`, `context`): `ErrorBoundary`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | `Props` |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`ErrorBoundary`

#### Inherited from

`Component<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `state` | `public` | `State` | - | `Component.state` | - |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `Component.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | - | `Component.props` |

## Methods

### getDerivedStateFromError()

> `static` **getDerivedStateFromError**(`error`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |

#### Returns

`State`

***

### componentDidCatch()

> **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Overrides

`Component.componentDidCatch`

***

### handleRetry()

> `private` **handleRetry**(): `void`

#### Returns

`void`

***

### render()

> **render**(): `string` | `number` | `bigint` | `boolean` | `Iterable`<`ReactNode`, `any`, `any`> | `Promise`<`AwaitedReactNode`> | `Element` | `null` | `undefined`

#### Returns

`string` | `number` | `bigint` | `boolean` | `Iterable`<`ReactNode`, `any`, `any`> | `Promise`<`AwaitedReactNode`> | `Element` | `null` | `undefined`

#### Overrides

`Component.render`

***

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `State` | (`prevState`, `props`) => `State` | `Pick`<`State`, `K`> | `null` | `Pick`<`State`, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`Component.componentWillUnmount`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.UNSAFE_componentWillUpdate`

---

---
url: /api/recharts/classes/Funnel.md
---
[@sqlrooms/recharts](../index.md) / Funnel

# Class: Funnel

## Extends

* `PureComponent`<[`FunnelProps`](../type-aliases/FunnelProps.md), `State`>

## Constructors

### Constructor

> **new Funnel**(`props`): `Funnel`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`FunnelProps`](../type-aliases/FunnelProps.md) |

#### Returns

`Funnel`

#### Inherited from

`PureComponent<FunnelProps, State>.constructor`

### Constructor

> **new Funnel**(`props`, `context`): `Funnel`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`FunnelProps`](../type-aliases/FunnelProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`Funnel`

#### Inherited from

`PureComponent<FunnelProps, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - | - |
| `defaultProps.fill` | `public` | `string` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.labelLine` | `public` | `boolean` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
| `defaultProps.nameKey` | `public` | `string` | - | - | - |
| `defaultProps.lastShapeType` | `public` | `string` | - | - | - |
|  `getRealFunnelData` | `static` | (`item`) => `any`\[] | - | - | - |
|  `getRealWidthHeight` | `static` | (`item`, `offset`) => `object` | - | - | - |
|  `getComposedData` | `static` | (`__namedParameters`) => `object` | - | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `State` | (`prevState`, `props`) => `State` | `Pick`<`State`, `K`> | `null` | `Pick`<`State`, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`FunnelProps`](../type-aliases/FunnelProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### isActiveIndex()

> **isActiveIndex**(`i`): `boolean`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `i` | `number` |

#### Returns

`boolean`

***

### renderTrapezoidsStatically()

> **renderTrapezoidsStatically**(`trapezoids`): `Element`\[]

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `trapezoids` | `FunnelTrapezoidItem`\[] |

#### Returns

`Element`\[]

***

### renderTrapezoidsWithAnimation()

> **renderTrapezoidsWithAnimation**(): `Element`

#### Returns

`Element`

***

### renderTrapezoids()

> **renderTrapezoids**(): `Element` | `Element`\[]

#### Returns

`Element` | `Element`\[]

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Legend.md
---
[@sqlrooms/recharts](../index.md) / Legend

# Class: Legend

## Extends

* `PureComponent`<[`LegendProps`](../type-aliases/LegendProps.md), `State`>

## Constructors

### Constructor

> **new Legend**(`props`): `Legend`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`LegendProps`](../type-aliases/LegendProps.md) |

#### Returns

`Legend`

#### Inherited from

`PureComponent<Props, State>.constructor`

### Constructor

> **new Legend**(`props`, `context`): `Legend`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`LegendProps`](../type-aliases/LegendProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`Legend`

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | `PureComponent.props` |
|  `state` | `public` | `Readonly`<`S`> | - | `PureComponent.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.iconSize` | `public` | `number` | - | - |
| `defaultProps.layout` | `public` | `string` | - | - |
| `defaultProps.align` | `public` | `string` | - | - |
| `defaultProps.verticalAlign` | `public` | `string` | - | - |
|  `wrapperNode` | `private` | `any` | - | - |
|  `lastBoundingBox` | `public` | `object` | - | - |
| `lastBoundingBox.width` | `public` | `number` | - | - |
| `lastBoundingBox.height` | `public` | `number` | - | - |
|  `updateBBox` | `private` | `any` | - | - |
|  `getBBoxSnapshot` | `private` | `any` | - | - |
|  `getDefaultPosition` | `private` | `any` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `State` | (`prevState`, `props`) => `State` | `Pick`<`State`, `K`> | `null` | `Pick`<`State`, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getWithHeight()

> `static` **getWithHeight**(`item`, `chartWidth`): { `height`: `number`; } | { `width`: `number`; } | `null`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | { `props`: { `layout?`: `LayoutType`; `height?`: `number`; `width?`: `number`; }; } |
| `item.props` | { `layout?`: `LayoutType`; `height?`: `number`; `width?`: `number`; } |
| `item.props.layout?` | `LayoutType` |
| `item.props.height?` | `number` |
| `item.props.width?` | `number` |
| `chartWidth` | `number` |

#### Returns

{ `height`: `number`; } | { `width`: `number`; } | `null`

***

### componentDidMount()

> **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Overrides

`PureComponent.componentDidMount`

***

### componentDidUpdate()

> **componentDidUpdate**(): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Returns

`void`

#### Overrides

`PureComponent.componentDidUpdate`

***

### getBBox()

> **getBBox**(): `DOMRect`

#### Returns

`DOMRect`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Line.md
---
[@sqlrooms/recharts](../index.md) / Line

# Class: Line

## Extends

* `PureComponent`<[`LineProps`](../type-aliases/LineProps.md), `State`>

## Constructors

### Constructor

> **new Line**(`props`): `Line`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`LineProps`](../type-aliases/LineProps.md) |

#### Returns

`Line`

#### Inherited from

`PureComponent<Props, State>.constructor`

### Constructor

> **new Line**(`props`, `context`): `Line`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`LineProps`](../type-aliases/LineProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`Line`

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - | - |
| `defaultProps.connectNulls` | `public` | `boolean` | - | - | - |
| `defaultProps.activeDot` | `public` | `boolean` | - | - | - |
| `defaultProps.dot` | `public` | `boolean` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - | - |
| `defaultProps.strokeWidth` | `public` | `number` | - | - | - |
| `defaultProps.fill` | `public` | `string` | - | - | - |
| `defaultProps.points` | `public` | `LinePointItem`\[] | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animateNewValues` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.label` | `public` | `boolean` | - | - | - |
|  `getComposedData` | `static` | (`props`) => `object` | Compose the data of each group | - | - |
|  `mainCurve?` | `public` | `SVGPathElement` | - | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `generateSimpleStrokeDasharray` | `public` | (`totalLength`, `length`) => `string` | - | - | - |
|  `getStrokeDasharray` | `public` | (`length`, `totalLength`, `lines`) => `string` | - | - | - |
|  `id` | `public` | `string` | - | - | - |
|  `pathRef` | `public` | (`node`) => `void` | - | - | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `State` | (`prevState`, `props`) => `State` | `Pick`<`State`, `K`> | `null` | `Pick`<`State`, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### componentDidMount()

> **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Overrides

`PureComponent.componentDidMount`

***

### componentDidUpdate()

> **componentDidUpdate**(): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Returns

`void`

#### Overrides

`PureComponent.componentDidUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`LineProps`](../type-aliases/LineProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### getTotalLength()

> **getTotalLength**(): `number`

#### Returns

`number`

***

### repeat()

> `static` **repeat**(`lines`, `count`): `number`\[]

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `lines` | `number`\[] |
| `count` | `number` |

#### Returns

`number`\[]

***

### renderErrorBar()

> **renderErrorBar**(`needClip`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### renderDotItem()

> `static` **renderDotItem**(`option`, `props`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `LineDot` |
| `props` | `any` |

#### Returns

`Element`

***

### renderDots()

> **renderDots**(`needClip`, `clipDot`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipDot` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### renderCurveStatically()

> **renderCurveStatically**(`points`, `needClip`, `clipPathId`, `props?`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `points` | `LinePointItem`\[] |
| `needClip` | `boolean` |
| `clipPathId` | `string` |
| `props?` | { `strokeDasharray`: `string`; } |
| `props.strokeDasharray?` | `string` |

#### Returns

`Element`

***

### renderCurveWithAnimation()

> **renderCurveWithAnimation**(`needClip`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### renderCurve()

> **renderCurve**(`needClip`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Pie.md
---
[@sqlrooms/recharts](../index.md) / Pie

# Class: Pie

## Extends

* `PureComponent`<[`PieProps`](../type-aliases/PieProps.md), `State`>

## Constructors

### Constructor

> **new Pie**(`props`): `Pie`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`PieProps`](../type-aliases/PieProps.md) |

#### Returns

`Pie`

#### Overrides

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | - | `PureComponent.props` |
|  `pieRef` | `public` | `SVGGElement` | - | - | - |
|  `sectorRefs` | `public` | `SVGGElement`\[] | - | - | - |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - | - |
| `defaultProps.fill` | `public` | `string` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.cx` | `public` | `string` | - | - | - |
| `defaultProps.cy` | `public` | `string` | - | - | - |
| `defaultProps.startAngle` | `public` | `number` | - | - | - |
| `defaultProps.endAngle` | `public` | `number` | - | - | - |
| `defaultProps.innerRadius` | `public` | `number` | - | - | - |
| `defaultProps.outerRadius` | `public` | `string` | - | - | - |
| `defaultProps.paddingAngle` | `public` | `number` | - | - | - |
| `defaultProps.labelLine` | `public` | `boolean` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.minAngle` | `public` | `number` | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
| `defaultProps.nameKey` | `public` | `string` | - | - | - |
| `defaultProps.blendStroke` | `public` | `boolean` | - | - | - |
| `defaultProps.rootTabIndex` | `public` | `number` | - | - | - |
|  `parseDeltaAngle` | `static` | (`startAngle`, `endAngle`) => `number` | - | - | - |
|  `getRealPieData` | `static` | (`itemProps`) => `any`\[] | - | - | - |
|  `parseCoordinateOfPie` | `static` | (`itemProps`, `offset`) => `object` | - | - | - |
|  `getComposedData` | `static` | (`__namedParameters`) => `Omit`<[`PieProps`](../type-aliases/PieProps.md), `"dataKey"`> | - | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `id` | `public` | `string` | - | - | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `State` | (`prevState`, `props`) => `State` | `Pick`<`State`, `K`> | `null` | `Pick`<`State`, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`PieProps`](../type-aliases/PieProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### getTextAnchor()

> `static` **getTextAnchor**(`x`, `cx`): `"end"` | `"middle"` | `"start"`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `x` | `number` |
| `cx` | `number` |

#### Returns

`"end"` | `"middle"` | `"start"`

***

### isActiveIndex()

> **isActiveIndex**(`i`): `boolean`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `i` | `number` |

#### Returns

`boolean`

***

### hasActiveIndex()

> **hasActiveIndex**(): `number` | `boolean`

#### Returns

`number` | `boolean`

***

### renderLabelLineItem()

> `static` **renderLabelLineItem**(`option`, `props`, `key`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `PieLabelLine` |
| `props` | `any` |
| `key` | `string` |

#### Returns

`Element`

***

### renderLabelItem()

> `static` **renderLabelItem**(`option`, `props`, `value`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | [`PieLabel`](../type-aliases/PieLabel.md) |
| `props` | `any` |
| `value` | `any` |

#### Returns

`Element`

***

### renderLabels()

> **renderLabels**(`sectors`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `sectors` | `PieSectorDataItem`\[] |

#### Returns

`Element`

***

### renderSectorsStatically()

> **renderSectorsStatically**(`sectors`): `Element`\[]

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `sectors` | `PieSectorDataItem`\[] |

#### Returns

`Element`\[]

***

### renderSectorsWithAnimation()

> **renderSectorsWithAnimation**(): `Element`

#### Returns

`Element`

***

### attachKeyboardHandlers()

> **attachKeyboardHandlers**(`pieRef`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `pieRef` | `SVGGElement` |

#### Returns

`void`

***

### renderSectors()

> **renderSectors**(): `Element` | `Element`\[]

#### Returns

`Element` | `Element`\[]

***

### componentDidMount()

> **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Overrides

`PureComponent.componentDidMount`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/PolarAngleAxis.md
---
[@sqlrooms/recharts](../index.md) / PolarAngleAxis

# Class: PolarAngleAxis

## Extends

* `PureComponent`<[`PolarAngleAxisProps`](../type-aliases/PolarAngleAxisProps.md)>

## Constructors

### Constructor

> **new PolarAngleAxis**(`props`): `PolarAngleAxis`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`PolarAngleAxisProps`](../type-aliases/PolarAngleAxisProps.md) |

#### Returns

`PolarAngleAxis`

#### Inherited from

`PureComponent<Props>.constructor`

### Constructor

> **new PolarAngleAxis**(`props`, `context`): `PolarAngleAxis`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`PolarAngleAxisProps`](../type-aliases/PolarAngleAxisProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`PolarAngleAxis`

#### Inherited from

`PureComponent<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | `PureComponent.props` |
|  `state` | `public` | `Readonly`<`S`> | - | `PureComponent.state` |
|  `displayName` | `static` | `string` | - | - |
|  `axisType` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.type` | `public` | `string` | - | - |
| `defaultProps.angleAxisId` | `public` | `number` | - | - |
| `defaultProps.scale` | `public` | `string` | - | - |
| `defaultProps.cx` | `public` | `number` | - | - |
| `defaultProps.cy` | `public` | `number` | - | - |
| `defaultProps.orientation` | `public` | `string` | - | - |
| `defaultProps.axisLine` | `public` | `boolean` | - | - |
| `defaultProps.tickLine` | `public` | `boolean` | - | - |
| `defaultProps.tickSize` | `public` | `number` | - | - |
| `defaultProps.tick` | `public` | `boolean` | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - |
| `defaultProps.allowDuplicatedCategory` | `public` | `boolean` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | { } | (`prevState`, `props`) => { } | `Pick`<{ }, `K`> | `null` | `Pick`<{ }, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getTickLineCoord()

> **getTickLineCoord**(`data`): `object`

Calculate the coordinate of line endpoint

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `TickItem` | The Data if ticks |

#### Returns

`object`

(x0, y0): The start point of text,
(x1, y1): The end point close to text,
(x2, y2): The end point close to axis

| Name | Type |
| ------ | ------ |
| `x1` | `number` |
| `y1` | `number` |
| `x2` | `number` |
| `y2` | `number` |

***

### getTickTextAnchor()

> **getTickTextAnchor**(`data`): `string`

Get the text-anchor of each tick

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `TickItem` | Data of ticks |

#### Returns

`string`

text-anchor

***

### renderAxisLine()

> **renderAxisLine**(): `Element`

#### Returns

`Element`

***

### renderTickItem()

> `static` **renderTickItem**(`option`, `props`, `value`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `boolean` | `SVGProps`<`SVGTextElement`> | `ReactElement`<`SVGElement`, `string` | `JSXElementConstructor`<`any`>> | (`props`) => `ReactElement`<`SVGElement`> | `undefined` |
| `props` | `any` |
| `value` | `string` | `number` |

#### Returns

`Element`

***

### renderTicks()

> **renderTicks**(): `Element`

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/PolarRadiusAxis.md
---
[@sqlrooms/recharts](../index.md) / PolarRadiusAxis

# Class: PolarRadiusAxis

## Extends

* `PureComponent`<[`PolarRadiusAxisProps`](../type-aliases/PolarRadiusAxisProps.md)>

## Constructors

### Constructor

> **new PolarRadiusAxis**(`props`): `PolarRadiusAxis`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`PolarRadiusAxisProps`](../type-aliases/PolarRadiusAxisProps.md) |

#### Returns

`PolarRadiusAxis`

#### Inherited from

`PureComponent<Props>.constructor`

### Constructor

> **new PolarRadiusAxis**(`props`, `context`): `PolarRadiusAxis`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`PolarRadiusAxisProps`](../type-aliases/PolarRadiusAxisProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`PolarRadiusAxis`

#### Inherited from

`PureComponent<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | `PureComponent.props` |
|  `state` | `public` | `Readonly`<`S`> | - | `PureComponent.state` |
|  `displayName` | `static` | `string` | - | - |
|  `axisType` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.type` | `public` | `string` | - | - |
| `defaultProps.radiusAxisId` | `public` | `number` | - | - |
| `defaultProps.cx` | `public` | `number` | - | - |
| `defaultProps.cy` | `public` | `number` | - | - |
| `defaultProps.angle` | `public` | `number` | - | - |
| `defaultProps.orientation` | `public` | `string` | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - |
| `defaultProps.axisLine` | `public` | `boolean` | - | - |
| `defaultProps.tick` | `public` | `boolean` | - | - |
| `defaultProps.tickCount` | `public` | `number` | - | - |
| `defaultProps.allowDataOverflow` | `public` | `boolean` | - | - |
| `defaultProps.scale` | `public` | `string` | - | - |
| `defaultProps.allowDuplicatedCategory` | `public` | `boolean` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | { } | (`prevState`, `props`) => { } | `Pick`<{ }, `K`> | `null` | `Pick`<{ }, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getTickValueCoord()

> **getTickValueCoord**(`coordinate`): `Coordinate`

Calculate the coordinate of tick

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `coordinate` | `TickItem` | The radius of tick |

#### Returns

`Coordinate`

(x, y)

***

### getTickTextAnchor()

> **getTickTextAnchor**(): `string`

#### Returns

`string`

***

### getViewBox()

> **getViewBox**(): `object`

#### Returns

`object`

| Name | Type |
| ------ | ------ |
| `cx` | `number` |
| `cy` | `number` |
| `startAngle` | `number` |
| `endAngle` | `number` |
| `innerRadius` | `number` |
| `outerRadius` | `number` |

***

### renderAxisLine()

> **renderAxisLine**(): `Element`

#### Returns

`Element`

***

### renderTickItem()

> `static` **renderTickItem**(`option`, `props`, `value`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `boolean` | `SVGProps`<`SVGTextElement`> | `ReactElement`<`SVGElement`, `string` | `JSXElementConstructor`<`any`>> | (`props`) => `ReactElement`<`SVGElement`> | `undefined` |
| `props` | `any` |
| `value` | `string` | `number` |

#### Returns

`Element`

***

### renderTicks()

> **renderTicks**(): `Element`

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Radar.md
---
[@sqlrooms/recharts](../index.md) / Radar

# Class: Radar

## Extends

* `PureComponent`<[`RadarProps`](../type-aliases/RadarProps.md), `State`>

## Constructors

### Constructor

> **new Radar**(`props`): `Radar`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`RadarProps`](../type-aliases/RadarProps.md) |

#### Returns

`Radar`

#### Inherited from

`PureComponent<Props, State>.constructor`

### Constructor

> **new Radar**(`props`, `context`): `Radar`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`RadarProps`](../type-aliases/RadarProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`Radar`

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.angleAxisId` | `public` | `number` | - | - | - |
| `defaultProps.radiusAxisId` | `public` | `number` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.activeDot` | `public` | `boolean` | - | - | - |
| `defaultProps.dot` | `public` | `boolean` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
|  `getComposedData` | `static` | (`__namedParameters`) => `object` | - | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |
|  `handleMouseEnter` | `public` | (`e`) => `void` | - | - | - |
|  `handleMouseLeave` | `public` | (`e`) => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `State` | (`prevState`, `props`) => `State` | `Pick`<`State`, `K`> | `null` | `Pick`<`State`, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`RadarProps`](../type-aliases/RadarProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### renderDotItem()

> `static` **renderDotItem**(`option`, `props`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `RadarDot` |
| `props` | `any` |

#### Returns

`Element`

***

### renderDots()

> **renderDots**(`points`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `points` | `RadarPoint`\[] |

#### Returns

`Element`

***

### renderPolygonStatically()

> **renderPolygonStatically**(`points`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `points` | `RadarPoint`\[] |

#### Returns

`Element`

***

### renderPolygonWithAnimation()

> **renderPolygonWithAnimation**(): `Element`

#### Returns

`Element`

***

### renderPolygon()

> **renderPolygon**(): `Element`

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/RadialBar.md
---
[@sqlrooms/recharts](../index.md) / RadialBar

# Class: RadialBar

## Extends

* `PureComponent`<[`RadialBarProps`](../type-aliases/RadialBarProps.md), `State`>

## Constructors

### Constructor

> **new RadialBar**(`props`): `RadialBar`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`RadialBarProps`](../type-aliases/RadialBarProps.md) |

#### Returns

`RadialBar`

#### Inherited from

`PureComponent<RadialBarProps, State>.constructor`

### Constructor

> **new RadialBar**(`props`, `context`): `RadialBar`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`RadialBarProps`](../type-aliases/RadialBarProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`RadialBar`

#### Inherited from

`PureComponent<RadialBarProps, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.angleAxisId` | `public` | `number` | - | - | - |
| `defaultProps.radiusAxisId` | `public` | `number` | - | - | - |
| `defaultProps.minPointSize` | `public` | `number` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.data` | `public` | `RadialBarDataItem`\[] | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
| `defaultProps.forceCornerRadius` | `public` | `boolean` | - | - | - |
| `defaultProps.cornerIsExternal` | `public` | `boolean` | - | - | - |
|  `getComposedData` | `static` | (`__namedParameters`) => `object` | - | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `State` | (`prevState`, `props`) => `State` | `Pick`<`State`, `K`> | `null` | `Pick`<`State`, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`RadialBarProps`](../type-aliases/RadialBarProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### getDeltaAngle()

> **getDeltaAngle**(): `number`

#### Returns

`number`

***

### renderSectorsStatically()

> **renderSectorsStatically**(`sectors`): `Element`\[]

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `sectors` | [`SectorProps`](../type-aliases/SectorProps.md)\[] |

#### Returns

`Element`\[]

***

### renderSectorsWithAnimation()

> **renderSectorsWithAnimation**(): `Element`

#### Returns

`Element`

***

### renderSectors()

> **renderSectors**(): `Element` | `Element`\[]

#### Returns

`Element` | `Element`\[]

***

### renderBackground()

> **renderBackground**(`sectors?`): `Element`\[]

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `sectors?` | `RadialBarDataItem`\[] |

#### Returns

`Element`\[]

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/ReferenceArea.md
---
[@sqlrooms/recharts](../index.md) / ReferenceArea

# Class: ReferenceArea

## Extends

* `Component`<[`ReferenceAreaProps`](../type-aliases/ReferenceAreaProps.md)>

## Constructors

### Constructor

> **new ReferenceArea**(`props`): `ReferenceArea`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`ReferenceAreaProps`](../type-aliases/ReferenceAreaProps.md) |

#### Returns

`ReferenceArea`

#### Inherited from

`React.Component<Props>.constructor`

### Constructor

> **new ReferenceArea**(`props`, `context`): `ReferenceArea`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`ReferenceAreaProps`](../type-aliases/ReferenceAreaProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`ReferenceArea`

#### Inherited from

`React.Component<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `React.Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `React.Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `React.Component.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | `React.Component.props` |
|  `state` | `public` | `Readonly`<`S`> | - | `React.Component.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.isFront` | `public` | `boolean` | - | - |
| `defaultProps.ifOverflow` | `public` | `string` | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - |
| `defaultProps.r` | `public` | `number` | - | - |
| `defaultProps.fill` | `public` | `string` | - | - |
| `defaultProps.fillOpacity` | `public` | `number` | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - |
| `defaultProps.strokeWidth` | `public` | `number` | - | - |
|  `renderRect` | `static` | (`option`, `props`) => `Element` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | { } | (`prevState`, `props`) => { } | `Pick`<{ }, `K`> | `null` | `Pick`<{ }, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`React.Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`React.Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`React.Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`React.Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`React.Component.render`

---

---
url: /api/recharts/classes/ReferenceDot.md
---
[@sqlrooms/recharts](../index.md) / ReferenceDot

# Class: ReferenceDot

## Extends

* `Component`<[`ReferenceDotProps`](../type-aliases/ReferenceDotProps.md)>

## Constructors

### Constructor

> **new ReferenceDot**(`props`): `ReferenceDot`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`ReferenceDotProps`](../type-aliases/ReferenceDotProps.md) |

#### Returns

`ReferenceDot`

#### Inherited from

`React.Component<Props>.constructor`

### Constructor

> **new ReferenceDot**(`props`, `context`): `ReferenceDot`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`ReferenceDotProps`](../type-aliases/ReferenceDotProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`ReferenceDot`

#### Inherited from

`React.Component<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `React.Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `React.Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `React.Component.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | `React.Component.props` |
|  `state` | `public` | `Readonly`<`S`> | - | `React.Component.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.isFront` | `public` | `boolean` | - | - |
| `defaultProps.ifOverflow` | `public` | `string` | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - |
| `defaultProps.r` | `public` | `number` | - | - |
| `defaultProps.fill` | `public` | `string` | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - |
| `defaultProps.fillOpacity` | `public` | `number` | - | - |
| `defaultProps.strokeWidth` | `public` | `number` | - | - |
|  `renderDot` | `static` | (`option`, `props`) => `Element` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | { } | (`prevState`, `props`) => { } | `Pick`<{ }, `K`> | `null` | `Pick`<{ }, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`React.Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`React.Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`React.Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`React.Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`React.Component.render`

---

---
url: /api/recharts/classes/ReferenceLine.md
---
[@sqlrooms/recharts](../index.md) / ReferenceLine

# Class: ReferenceLine

## Extends

* `Component`<[`ReferenceLineProps`](../type-aliases/ReferenceLineProps.md)>

## Constructors

### Constructor

> **new ReferenceLine**(`props`): `ReferenceLine`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`ReferenceLineProps`](../type-aliases/ReferenceLineProps.md) |

#### Returns

`ReferenceLine`

#### Inherited from

`React.Component<Props>.constructor`

### Constructor

> **new ReferenceLine**(`props`, `context`): `ReferenceLine`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`ReferenceLineProps`](../type-aliases/ReferenceLineProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`ReferenceLine`

#### Inherited from

`React.Component<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `React.Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `React.Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `React.Component.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | `React.Component.props` |
|  `state` | `public` | `Readonly`<`S`> | - | `React.Component.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.isFront` | `public` | `boolean` | - | - |
| `defaultProps.ifOverflow` | `public` | `string` | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - |
| `defaultProps.fill` | `public` | `string` | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - |
| `defaultProps.fillOpacity` | `public` | `number` | - | - |
| `defaultProps.strokeWidth` | `public` | `number` | - | - |
| `defaultProps.position` | `public` | `string` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | { } | (`prevState`, `props`) => { } | `Pick`<{ }, `K`> | `null` | `Pick`<{ }, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`React.Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`React.Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`React.Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`React.Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`React.Component.render`

---

---
url: /api/recharts/classes/Sankey.md
---
[@sqlrooms/recharts](../index.md) / Sankey

# Class: Sankey

## Extends

* `PureComponent`<`Props`, `State`>

## Constructors

### Constructor

> **new Sankey**(`props`): `Sankey`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Props` |

#### Returns

`Sankey`

#### Inherited from

`PureComponent<Props, State>.constructor`

### Constructor

> **new Sankey**(`props`, `context`): `Sankey`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | `Props` |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`Sankey`

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.nameKey` | `public` | `string` | - | - | - |
| `defaultProps.dataKey` | `public` | `string` | - | - | - |
| `defaultProps.nodePadding` | `public` | `number` | - | - | - |
| `defaultProps.nodeWidth` | `public` | `number` | - | - | - |
| `defaultProps.linkCurvature` | `public` | `number` | - | - | - |
| `defaultProps.iterations` | `public` | `number` | - | - | - |
| `defaultProps.margin` | `public` | `object` | - | - | - |
| `defaultProps.margin.top` | `public` | `number` | - | - | - |
| `defaultProps.margin.right` | `public` | `number` | - | - | - |
| `defaultProps.margin.bottom` | `public` | `number` | - | - | - |
| `defaultProps.margin.left` | `public` | `number` | - | - | - |
| `defaultProps.sort` | `public` | `boolean` | - | - | - |
|  `state` | `public` | `object` | - | `PureComponent.state` | - |
| `state.activeElement` | `public` | `any` | - | - | - |
| `state.activeElementType` | `public` | `any` | - | - | - |
| `state.isTooltipActive` | `public` | `boolean` | - | - | - |
| `state.nodes` | `public` | `SankeyNode`\[] | - | - | - |
| `state.links` | `public` | `SankeyLink`\[] | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `State` | (`prevState`, `props`) => `State` | `Pick`<`State`, `K`> | `null` | `Pick`<`State`, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Props` |
| `prevState` | `State` |

#### Returns

`State`

***

### handleMouseEnter()

> **handleMouseEnter**(`el`, `type`, `e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `el` | `ReactElement` |
| `type` | `string` |
| `e` | `any` |

#### Returns

`void`

***

### handleMouseLeave()

> **handleMouseLeave**(`el`, `type`, `e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `el` | `ReactElement` |
| `type` | `string` |
| `e` | `any` |

#### Returns

`void`

***

### handleClick()

> **handleClick**(`el`, `type`, `e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `el` | `ReactElement` |
| `type` | `string` |
| `e` | `any` |

#### Returns

`void`

***

### renderLinkItem()

> `static` **renderLinkItem**(`option`, `props`): `any`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `any` |
| `props` | `any` |

#### Returns

`any`

***

### renderLinks()

> **renderLinks**(`links`, `nodes`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `links` | `SankeyLink`\[] |
| `nodes` | `SankeyNode`\[] |

#### Returns

`Element`

***

### renderNodeItem()

> `static` **renderNodeItem**(`option`, `props`): `any`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `any` |
| `props` | `Props` |

#### Returns

`any`

***

### renderNodes()

> **renderNodes**(`nodes`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nodes` | `SankeyNode`\[] |

#### Returns

`Element`

***

### renderTooltip()

> **renderTooltip**(): `ReactElement`

#### Returns

`ReactElement`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Scatter.md
---
[@sqlrooms/recharts](../index.md) / Scatter

# Class: Scatter

## Extends

* `PureComponent`<[`ScatterProps`](../type-aliases/ScatterProps.md), `State`>

## Constructors

### Constructor

> **new Scatter**(`props`): `Scatter`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`ScatterProps`](../type-aliases/ScatterProps.md) |

#### Returns

`Scatter`

#### Inherited from

`PureComponent<Props, State>.constructor`

### Constructor

> **new Scatter**(`props`, `context`): `Scatter`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`ScatterProps`](../type-aliases/ScatterProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`Scatter`

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - | - |
| `defaultProps.zAxisId` | `public` | `number` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.lineType` | `public` | `string` | - | - | - |
| `defaultProps.lineJointType` | `public` | `string` | - | - | - |
| `defaultProps.data` | `public` | `any`\[] | - | - | - |
| `defaultProps.shape` | `public` | `string` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
|  `getComposedData` | `static` | (`xAxis`) => `object` | Compose the data of each group | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |
|  `id` | `public` | `string` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `State` | (`prevState`, `props`) => `State` | `Pick`<`State`, `K`> | `null` | `Pick`<`State`, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`ScatterProps`](../type-aliases/ScatterProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### renderSymbolsStatically()

> **renderSymbolsStatically**(`points`): `Element`\[]

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `points` | `ScatterPointItem`\[] |

#### Returns

`Element`\[]

***

### renderSymbolsWithAnimation()

> **renderSymbolsWithAnimation**(): `Element`

#### Returns

`Element`

***

### renderSymbols()

> **renderSymbols**(): `Element` | `Element`\[]

#### Returns

`Element` | `Element`\[]

***

### renderErrorBar()

> **renderErrorBar**(): `ReactElement`<[`ErrorBarProps`](../type-aliases/ErrorBarProps.md), `string` | `JSXElementConstructor`<`any`>>\[]

#### Returns

`ReactElement`<[`ErrorBarProps`](../type-aliases/ErrorBarProps.md), `string` | `JSXElementConstructor`<`any`>>\[]

***

### renderLine()

> **renderLine**(): `Element`

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/ai-core/classes/ToolAbortError.md
---
[@sqlrooms/ai-core](../index.md) / ToolAbortError

# Class: ToolAbortError

Custom error class for operation abort errors.
This allows for type-safe error handling when operations are cancelled by the user.

Tools should throw this error when they detect an abort signal,
and error handlers can check for this specific error type to provide
appropriate user feedback.

## Examples

```ts
if (abortSignal?.aborted) {
  throw new ToolAbortError('Operation was aborted');
}
```

```ts
try {
  await someTool.execute(params, { abortSignal });
} catch (error) {
  if (error instanceof ToolAbortError) {
    console.log('User cancelled the operation');
  }
}
```

## Extends

* `Error`

## Constructors

### Constructor

> **new ToolAbortError**(`message`): `ToolAbortError`

#### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `message` | `string` | `'Operation was aborted'` |

#### Returns

`ToolAbortError`

#### Overrides

`Error.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `stackTraceLimit` | `static` | `number` | The `Error.stackTraceLimit` property specifies the number of stack frames collected by a stack trace (whether generated by `new Error().stack` or `Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes will affect any stack trace captured *after* the value has been changed. If set to a non-number value, or set to a negative number, stack traces will not capture any frames. | `Error.stackTraceLimit` |
|  `cause?` | `public` | `unknown` | - | `Error.cause` |
|  `name` | `public` | `string` | - | `Error.name` |
|  `message` | `public` | `string` | - | `Error.message` |
|  `stack?` | `public` | `string` | - | `Error.stack` |

## Methods

### captureStackTrace()

> `static` **captureStackTrace**(`targetObject`, `constructorOpt?`): `void`

Creates a `.stack` property on `targetObject`, which when accessed returns
a string representing the location in the code at which
`Error.captureStackTrace()` was called.

```js
const myObject = {};
Error.captureStackTrace(myObject);
myObject.stack;  // Similar to `new Error().stack`
```

The first line of the trace will be prefixed with
`${myObject.name}: ${myObject.message}`.

The optional `constructorOpt` argument accepts a function. If given, all frames
above `constructorOpt`, including `constructorOpt`, will be omitted from the
generated stack trace.

The `constructorOpt` argument is useful for hiding implementation
details of error generation from the user. For instance:

```js
function a() {
  b();
}

function b() {
  c();
}

function c() {
  // Create an error without stack trace to avoid calculating the stack trace twice.
  const { stackTraceLimit } = Error;
  Error.stackTraceLimit = 0;
  const error = new Error();
  Error.stackTraceLimit = stackTraceLimit;

  // Capture the stack trace above function b
  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
  throw error;
}

a();
```

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `targetObject` | `object` |
| `constructorOpt?` | `Function` |

#### Returns

`void`

#### Inherited from

`Error.captureStackTrace`

***

### prepareStackTrace()

> `static` **prepareStackTrace**(`err`, `stackTraces`): `any`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `err` | `Error` |
| `stackTraces` | `CallSite`\[] |

#### Returns

`any`

#### See

https://v8.dev/docs/stack-trace-api#customizing-stack-traces

#### Inherited from

`Error.prepareStackTrace`

---

---
url: /api/ai/classes/ToolAbortError.md
---
[@sqlrooms/ai](../index.md) / ToolAbortError

# Class: ToolAbortError

Custom error class for operation abort errors.
This allows for type-safe error handling when operations are cancelled by the user.

Tools should throw this error when they detect an abort signal,
and error handlers can check for this specific error type to provide
appropriate user feedback.

## Examples

```ts
if (abortSignal?.aborted) {
  throw new ToolAbortError('Operation was aborted');
}
```

```ts
try {
  await someTool.execute(params, { abortSignal });
} catch (error) {
  if (error instanceof ToolAbortError) {
    console.log('User cancelled the operation');
  }
}
```

## Extends

* `Error`

## Constructors

### Constructor

> **new ToolAbortError**(`message?`): `ToolAbortError`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `message?` | `string` |

#### Returns

`ToolAbortError`

#### Overrides

`Error.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `stackTraceLimit` | `static` | `number` | The `Error.stackTraceLimit` property specifies the number of stack frames collected by a stack trace (whether generated by `new Error().stack` or `Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes will affect any stack trace captured *after* the value has been changed. If set to a non-number value, or set to a negative number, stack traces will not capture any frames. | `Error.stackTraceLimit` |
|  `cause?` | `public` | `unknown` | - | `Error.cause` |
|  `name` | `public` | `string` | - | `Error.name` |
|  `message` | `public` | `string` | - | `Error.message` |
|  `stack?` | `public` | `string` | - | `Error.stack` |

## Methods

### captureStackTrace()

> `static` **captureStackTrace**(`targetObject`, `constructorOpt?`): `void`

Creates a `.stack` property on `targetObject`, which when accessed returns
a string representing the location in the code at which
`Error.captureStackTrace()` was called.

```js
const myObject = {};
Error.captureStackTrace(myObject);
myObject.stack;  // Similar to `new Error().stack`
```

The first line of the trace will be prefixed with
`${myObject.name}: ${myObject.message}`.

The optional `constructorOpt` argument accepts a function. If given, all frames
above `constructorOpt`, including `constructorOpt`, will be omitted from the
generated stack trace.

The `constructorOpt` argument is useful for hiding implementation
details of error generation from the user. For instance:

```js
function a() {
  b();
}

function b() {
  c();
}

function c() {
  // Create an error without stack trace to avoid calculating the stack trace twice.
  const { stackTraceLimit } = Error;
  Error.stackTraceLimit = 0;
  const error = new Error();
  Error.stackTraceLimit = stackTraceLimit;

  // Capture the stack trace above function b
  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
  throw error;
}

a();
```

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `targetObject` | `object` |
| `constructorOpt?` | `Function` |

#### Returns

`void`

#### Inherited from

`Error.captureStackTrace`

***

### prepareStackTrace()

> `static` **prepareStackTrace**(`err`, `stackTraces`): `any`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `err` | `Error` |
| `stackTraces` | `CallSite`\[] |

#### Returns

`any`

#### See

https://v8.dev/docs/stack-trace-api#customizing-stack-traces

#### Inherited from

`Error.prepareStackTrace`

---

---
url: /api/recharts/classes/Tooltip.md
---
[@sqlrooms/recharts](../index.md) / Tooltip

# Class: Tooltip\<TValue, TName>

## Extends

* `PureComponent`<[`TooltipProps`](../type-aliases/TooltipProps.md)<`TValue`, `TName`>>

## Type Parameters

| Type Parameter |
| ------ |
| `TValue` *extends* `ValueType` |
| `TName` *extends* `NameType` |

## Constructors

### Constructor

> **new Tooltip**<`TValue`, `TName`>(`props`): `Tooltip`<`TValue`, `TName`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`TooltipProps`](../type-aliases/TooltipProps.md) |

#### Returns

`Tooltip`<`TValue`, `TName`>

#### Inherited from

`PureComponent<TooltipProps<TValue, TName>>.constructor`

### Constructor

> **new Tooltip**<`TValue`, `TName`>(`props`, `context`): `Tooltip`<`TValue`, `TName`>

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`TooltipProps`](../type-aliases/TooltipProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`Tooltip`<`TValue`, `TName`>

#### Inherited from

`PureComponent<TooltipProps<TValue, TName>>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | `PureComponent.props` |
|  `state` | `public` | `Readonly`<`S`> | - | `PureComponent.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.accessibilityLayer` | `public` | `boolean` | - | - |
| `defaultProps.allowEscapeViewBox` | `public` | `object` | - | - |
| `defaultProps.allowEscapeViewBox.x` | `public` | `boolean` | - | - |
| `defaultProps.allowEscapeViewBox.y` | `public` | `boolean` | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - |
| `defaultProps.contentStyle` | `public` | `object` | - | - |
| `defaultProps.coordinate` | `public` | `object` | - | - |
| `defaultProps.coordinate.x` | `public` | `number` | - | - |
| `defaultProps.coordinate.y` | `public` | `number` | - | - |
| `defaultProps.cursor` | `public` | `boolean` | - | - |
| `defaultProps.cursorStyle` | `public` | `object` | - | - |
| `defaultProps.filterNull` | `public` | `boolean` | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - |
| `defaultProps.itemStyle` | `public` | `object` | - | - |
| `defaultProps.labelStyle` | `public` | `object` | - | - |
| `defaultProps.offset` | `public` | `number` | - | - |
| `defaultProps.reverseDirection` | `public` | `object` | - | - |
| `defaultProps.reverseDirection.x` | `public` | `boolean` | - | - |
| `defaultProps.reverseDirection.y` | `public` | `boolean` | - | - |
| `defaultProps.separator` | `public` | `string` | - | - |
| `defaultProps.trigger` | `public` | `string` | - | - |
| `defaultProps.useTranslate3d` | `public` | `boolean` | - | - |
| `defaultProps.viewBox` | `public` | `object` | - | - |
| `defaultProps.viewBox.x` | `public` | `number` | - | - |
| `defaultProps.viewBox.y` | `public` | `number` | - | - |
| `defaultProps.viewBox.height` | `public` | `number` | - | - |
| `defaultProps.viewBox.width` | `public` | `number` | - | - |
| `defaultProps.wrapperStyle` | `public` | `object` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | { } | (`prevState`, `props`) => { } | `Pick`<{ }, `K`> | `null` | `Pick`<{ }, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Treemap.md
---
[@sqlrooms/recharts](../index.md) / Treemap

# Class: Treemap

## Extends

* `PureComponent`<[`TreemapProps`](../interfaces/TreemapProps.md), `State`>

## Constructors

### Constructor

> **new Treemap**(`props`): `Treemap`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`TreemapProps`](../interfaces/TreemapProps.md) |

#### Returns

`Treemap`

#### Inherited from

`PureComponent<Props, State>.constructor`

### Constructor

> **new Treemap**(`props`, `context`): `Treemap`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`TreemapProps`](../interfaces/TreemapProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`Treemap`

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.aspectRatio` | `public` | `number` | - | - | - |
| `defaultProps.dataKey` | `public` | `string` | - | - | - |
| `defaultProps.type` | `public` | `string` | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.isUpdateAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
|  `state` | `public` | `object` | - | `PureComponent.state` | - |
| `state.isTooltipActive` | `public` | `boolean` | - | - | - |
| `state.isAnimationFinished` | `public` | `boolean` | - | - | - |
| `state.activeNode?` | `public` | `TreemapNode` | - | - | - |
| `state.formatRoot?` | `public` | `TreemapNode` | - | - | - |
| `state.currentRoot?` | `public` | `TreemapNode` | - | - | - |
| `state.nestIndex?` | `public` | `TreemapNode`\[] | - | - | - |
| `state.prevData?` | `public` | `any`\[] | - | - | - |
| `state.prevType?` | `public` | `"flat"` | `"nest"` | - | - | - |
| `state.prevWidth?` | `public` | `number` | - | - | - |
| `state.prevHeight?` | `public` | `number` | - | - | - |
| `state.prevDataKey?` | `public` | `DataKey`<`any`> | - | - | - |
| `state.prevAspectRatio?` | `public` | `number` | - | - | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `State` | (`prevState`, `props`) => `State` | `Pick`<`State`, `K`> | `null` | `Pick`<`State`, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`TreemapProps`](../interfaces/TreemapProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### handleMouseEnter()

> **handleMouseEnter**(`node`, `e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `TreemapNode` |
| `e` | `any` |

#### Returns

`void`

***

### handleMouseLeave()

> **handleMouseLeave**(`node`, `e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `TreemapNode` |
| `e` | `any` |

#### Returns

`void`

***

### handleClick()

> **handleClick**(`node`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `TreemapNode` |

#### Returns

`void`

***

### handleNestIndex()

> **handleNestIndex**(`node`, `i`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `TreemapNode` |
| `i` | `number` |

#### Returns

`void`

***

### renderItem()

> **renderItem**(`content`, `nodeProps`, `isLeaf`): `ReactElement`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `content` | `any` |
| `nodeProps` | `TreemapNode` |
| `isLeaf` | `boolean` |

#### Returns

`ReactElement`

***

### renderContentItem()

> `static` **renderContentItem**(`content`, `nodeProps`, `type`, `colorPanel`): `ReactElement`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `content` | `any` |
| `nodeProps` | `TreemapNode` |
| `type` | `string` |
| `colorPanel` | `string`\[] |

#### Returns

`ReactElement`

***

### renderNode()

> **renderNode**(`root`, `node`): `ReactElement`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `root` | `TreemapNode` |
| `node` | `TreemapNode` |

#### Returns

`ReactElement`

***

### renderAllNodes()

> **renderAllNodes**(): `ReactElement`

#### Returns

`ReactElement`

***

### renderTooltip()

> **renderTooltip**(): `ReactElement`

#### Returns

`ReactElement`

***

### renderNestIndex()

> **renderNestIndex**(): `ReactElement`

#### Returns

`ReactElement`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/XAxis.md
---
[@sqlrooms/recharts](../index.md) / XAxis

# Class: XAxis

## Extends

* `Component`<[`XAxisProps`](../type-aliases/XAxisProps.md)>

## Constructors

### Constructor

> **new XAxis**(`props`): `XAxis`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`XAxisProps`](../type-aliases/XAxisProps.md) |

#### Returns

`XAxis`

#### Inherited from

`React.Component<Props>.constructor`

### Constructor

> **new XAxis**(`props`, `context`): `XAxis`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`XAxisProps`](../type-aliases/XAxisProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`XAxis`

#### Inherited from

`React.Component<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `React.Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `React.Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `React.Component.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | `React.Component.props` |
|  `state` | `public` | `Readonly`<`S`> | - | `React.Component.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.allowDecimals` | `public` | `boolean` | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - |
| `defaultProps.orientation` | `public` | `string` | - | - |
| `defaultProps.width` | `public` | `number` | - | - |
| `defaultProps.height` | `public` | `number` | - | - |
| `defaultProps.mirror` | `public` | `boolean` | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - |
| `defaultProps.tickCount` | `public` | `number` | - | - |
| `defaultProps.type` | `public` | `string` | - | - |
| `defaultProps.padding` | `public` | `object` | - | - |
| `defaultProps.padding.left` | `public` | `number` | - | - |
| `defaultProps.padding.right` | `public` | `number` | - | - |
| `defaultProps.allowDataOverflow` | `public` | `boolean` | - | - |
| `defaultProps.scale` | `public` | `string` | - | - |
| `defaultProps.reversed` | `public` | `boolean` | - | - |
| `defaultProps.allowDuplicatedCategory` | `public` | `boolean` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | { } | (`prevState`, `props`) => { } | `Pick`<{ }, `K`> | `null` | `Pick`<{ }, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`React.Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`React.Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`React.Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`React.Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`React.Component.render`

---

---
url: /api/recharts/classes/YAxis.md
---
[@sqlrooms/recharts](../index.md) / YAxis

# Class: YAxis

## Extends

* `Component`<[`YAxisProps`](../type-aliases/YAxisProps.md)>

## Constructors

### Constructor

> **new YAxis**(`props`): `YAxis`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`YAxisProps`](../type-aliases/YAxisProps.md) |

#### Returns

`YAxis`

#### Inherited from

`React.Component<Props>.constructor`

### Constructor

> **new YAxis**(`props`, `context`): `YAxis`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`YAxisProps`](../type-aliases/YAxisProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`YAxis`

#### Inherited from

`React.Component<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `React.Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `React.Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `React.Component.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | `React.Component.props` |
|  `state` | `public` | `Readonly`<`S`> | - | `React.Component.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.allowDuplicatedCategory` | `public` | `boolean` | - | - |
| `defaultProps.allowDecimals` | `public` | `boolean` | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - |
| `defaultProps.orientation` | `public` | `string` | - | - |
| `defaultProps.width` | `public` | `number` | - | - |
| `defaultProps.height` | `public` | `number` | - | - |
| `defaultProps.mirror` | `public` | `boolean` | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - |
| `defaultProps.tickCount` | `public` | `number` | - | - |
| `defaultProps.type` | `public` | `string` | - | - |
| `defaultProps.padding` | `public` | `object` | - | - |
| `defaultProps.padding.top` | `public` | `number` | - | - |
| `defaultProps.padding.bottom` | `public` | `number` | - | - |
| `defaultProps.allowDataOverflow` | `public` | `boolean` | - | - |
| `defaultProps.scale` | `public` | `string` | - | - |
| `defaultProps.reversed` | `public` | `boolean` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | { } | (`prevState`, `props`) => { } | `Pick`<{ }, `K`> | `null` | `Pick`<{ }, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`React.Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`React.Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`React.Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`React.Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`React.Component.render`

---

---
url: /api/recharts/classes/ZAxis.md
---
[@sqlrooms/recharts](../index.md) / ZAxis

# Class: ZAxis

## Extends

* `Component`<[`ZAxisProps`](../interfaces/ZAxisProps.md)>

## Constructors

### Constructor

> **new ZAxis**(`props`): `ZAxis`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`ZAxisProps`](../interfaces/ZAxisProps.md) |

#### Returns

`ZAxis`

#### Inherited from

`React.Component<Props>.constructor`

### Constructor

> **new ZAxis**(`props`, `context`): `ZAxis`

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`ZAxisProps`](../interfaces/ZAxisProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

`ZAxis`

#### Inherited from

`React.Component<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `React.Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `React.Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `React.Component.context` |
|  `props` | `readonly` | `Readonly`<`P`> | - | `React.Component.props` |
|  `state` | `public` | `Readonly`<`S`> | - | `React.Component.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.zAxisId` | `public` | `number` | - | - |
| `defaultProps.range` | `public` | `number`\[] | - | - |
| `defaultProps.scale` | `public` | `string` | - | - |
| `defaultProps.type` | `public` | `string` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback?`): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | { } | (`prevState`, `props`) => { } | `Pick`<{ }, `K`> | `null` | `Pick`<{ }, `K`> | `null` |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback?`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback?` | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`React.Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`React.Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`React.Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |

#### Returns

`any`

#### Inherited from

`React.Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot?`): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`P`> |
| `prevState` | `Readonly`<`S`> |
| `snapshot?` | `any` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`P`> |
| `nextState` | `Readonly`<`S`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `ReactNode`

#### Returns

`ReactNode`

#### Overrides

`React.Component.render`

---

---
url: /api/recharts/recharts/namespaces/Customized.md
---
[@sqlrooms/recharts](../../../index.md) / Customized

# Customized

## Variables

* [displayName](variables/displayName.md)

---

---
url: /llms.md
---
# Docs for LLMs

This page provides access to machine-readable documentation files for Large Language Models and AI assistants supporting the [llms.txt convention](https://llmstxt.org/).

## [/llms.txt](/llms.txt)

A concise version of the SQLRooms documentation that includes links to additional resources.

```
https://sqlrooms.org/llms.txt
```

## [/llms-full.txt](/llms-full.txt)

A comprehensive version containing the complete SQLRooms documentation and API reference concatenated into a single file.

```
https://sqlrooms.org/llms-full.txt
```

## Package-level documentation

### [`@sqlrooms/ai`](https://sqlrooms.org/api/ai.md)

```
https://sqlrooms.org/api/ai.md
```

### [`@sqlrooms/duckdb`](https://sqlrooms.org/api/duckdb.md)

```
https://sqlrooms.org/api/duckdb.md
```

### [`@sqlrooms/room-shell`](https://sqlrooms.org/api/room-shell.md)

```
https://sqlrooms.org/api/room-shell.md
```

### [`@sqlrooms/ui`](https://sqlrooms.org/api/ui.md)

```
https://sqlrooms.org/api/ui.md
```

### [`@sqlrooms/sql-editor`](https://sqlrooms.org/api/sql-editor.md)

```
https://sqlrooms.org/api/sql-editor.md
```

### [`@sqlrooms/schema-tree`](https://sqlrooms.org/api/schema-tree.md)

```
https://sqlrooms.org/api/schema-tree.md
```

and so on for all the other packages…

---

---
url: /api/kepler/enumerations/AddDataMethods.md
---
[@sqlrooms/kepler](../index.md) / AddDataMethods

# Enumeration: AddDataMethods

## Enumeration Members

| Enumeration Member | Value |
| ------ | ------ |
|  `Upload` | `"upload"` |
|  `TileSet` | `"tileset"` |
|  `S3` | `"s3"` |

---

---
url: /api/room-shell/enumerations/DataSourceStatus.md
---
[@sqlrooms/room-shell](../index.md) / DataSourceStatus

# Enumeration: DataSourceStatus

## Enumeration Members

| Enumeration Member | Value |
| ------ | ------ |
|  `PENDING` | `"PENDING"` |
|  `FETCHING` | `"FETCHING"` |
|  `READY` | `"READY"` |
|  `ERROR` | `"ERROR"` |

---

---
url: /api/duckdb/enumerations/DuckDBAccessMode.md
---
[@sqlrooms/duckdb](../index.md) / DuckDBAccessMode

# Enumeration: DuckDBAccessMode

## Enumeration Members

| Enumeration Member | Value |
| ------ | ------ |
|  `UNDEFINED` | `0` |
|  `AUTOMATIC` | `1` |
|  `READ_ONLY` | `2` |
|  `READ_WRITE` | `3` |

---

---
url: /examples.md
---

# Example Applications

All example applications are available in our [Examples Repository](https://github.com/sqlrooms/examples). Here's a list of featured examples:

## Basic examples

### [Getting Started](https://github.com/sqlrooms/examples/tree/main/get-started)

[Github repo](https://github.com/sqlrooms/examples/tree/main/get-started)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/get-started?embed=1)

A minimal Vite application demonstrating the basic usage of SQLRooms. Features include:

* Sets up an app store and a single main panel using SQLRooms' project builder utilities
* Loads a CSV file of California earthquakes as a data source
* Runs a SQL query in the browser (DuckDB WASM) to show summary statistics
* Simple UI with loading, error, and result states

To create a new project from the get-started example run this:

```bash
npx degit sqlrooms/examples/get-started my-new-app/
```

### [SQL Query Editor](https://query.sqlrooms.org/)

[Try live](https://query.sqlrooms.org/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/query)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/query?embed=1)

[![Netlify Status](https://api.netlify.com/api/v1/badges/779ab00f-9f8f-4c12-92d2-a75426ac0315/deploy-status)](https://app.netlify.com/projects/sqlrooms-query/deploys)

A comprehensive SQL query editor demonstrating SQLRooms' DuckDB integration. Features include:

* Interactive SQL editor with syntax highlighting
* File dropzone for adding data tables to DuckDB
* Schema tree for browsing database tables and columns
* Tabbed interface for working with multiple queries
* Query execution with results data table
* Support for query cancellation
* There is a [version of the example with offline functionality](https://github.com/sqlrooms/examples/tree/main/query-pwa) which supports Progressive Web App (PWA) features, persistent database storage with OPFS, and state persistence via local storage

To create a new project from the query example run this:

```bash
npx degit sqlrooms/examples/query my-new-app/
```

#### Running locally

```sh
npm install
npm run dev
```

## AI Assistant

### [AI-Powered Analytics](https://ai.sqlrooms.org/)

[Try live](https://ai.sqlrooms.org/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/ai)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/ai?embed=1\&file=components/app-shell.tsx)

[![Netlify Status](https://api.netlify.com/api/v1/badges/031f0d4f-c2a3-44f8-adf1-6429164bb0c7/deploy-status)](https://app.netlify.com/projects/sqlrooms-ai/deploys)

An advanced example showing how to build an AI-powered analytics application with SQLRooms. Features include:

* Natural language data exploration
* AI-driven data analysis
* Integration with [SQLRooms AI assistant](/api/ai/)
* Custom visualization components
* Room state persistence

To create a new project from the AI example run this:

```bash
npx degit sqlrooms/examples/ai my-new-app/
```

#### Running locally

```sh
npm install
npm run dev
```

### [AI App Builder](https://sqlrooms-ai.netlify.app/)

[Github repo](https://github.com/sqlrooms/examples/tree/main/app-builder)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/app-builder?embed=1\&file=src/main.tsx)

A SQLRooms app that builds SQLRooms apps—demonstrating recursive bootstrapping. The outer app runs an AI assistant on the left and a code editor in the middle, while the right third hosts the inner app which compiles on the fly and executes in a browser-based virtual environment powered by [StackBlitz WebContainers](https://github.com/stackblitz/webcontainer-core).

Features:

* AI-assisted app generation via [SQLRooms AI assistant](/api/ai/)
* Live code editing with instant preview
* In-browser compilation and execution (no server required, except for the model)
* Recursive bootstrapping pattern

To create a new project from this example:

```bash
npx degit sqlrooms/examples/app-builder my-new-app/
```

#### Running locally

```sh
npm install
npm run dev
```

## Geospatial

### [Deck.gl Geospatial Visualization](https://sqlrooms-deckgl.netlify.app/)

[Try live](https://sqlrooms-deckgl.netlify.app/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/deckgl)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/deckgl?embed=1\&file=src/app.tsx)

[![Netlify Status](https://api.netlify.com/api/v1/badges/b507fcea-e5ec-4822-988d-77857944cf48/deploy-status)](https://app.netlify.com/projects/sqlrooms-deckgl/deploys)

An example demonstrating [deck.gl](https://deck.gl/) integration for geospatial data visualization. Features include:

* Load airports data file into DuckDB
* Run SQL queries to filter and transform data
* Visualize airport locations on an interactive map
* High-performance WebGL-based rendering

To create a new project from the deckgl example run this:

```sh
npx degit sqlrooms/examples/deckgl my-new-app/
```

#### Running Locally

```sh
npm install
npm run dev
```

### [Deck.gl + Commenting & Annotation](https://sqlrooms-deckgl-discuss.netlify.app/)

[Try live](https://sqlrooms-deckgl-discuss.netlify.app/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/deckgl-discuss)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/deckgl-discuss?embed=1\&file=src/app.tsx)

[![Netlify Status](https://api.netlify.com/api/v1/badges/9c32bdac-f2b1-4cf3-b48b-fa197e0986e3/deploy-status)](https://app.netlify.com/projects/sqlrooms-deckgl-discuss/deploys)

An example showcasing integration with [deck.gl](https://deck.gl/) for geospatial data visualization combined with the [@sqlrooms/discuss](/api/discuss) module for collaborative features. Features include:

* High-performance WebGL-based geospatial visualizations
* Real-time commenting and annotation system
* Contextual discussions tied to specific data points

To create a new project from the deckgl-discuss example run this:

```bash
npx degit sqlrooms/examples/deckgl-discuss my-new-app/
```

#### Running locally

```sh
npm install
npm run dev
```

### [Kepler.gl Geospatial Visualization](https://kepler.sqlrooms.org/)

[Try live](https://kepler.sqlrooms.org/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/kepler)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/kepler?embed=1\&file=src/app.tsx)

[![Netlify Status](https://api.netlify.com/api/v1/badges/888420a3-33e4-4142-a3b5-03a61c44e09a/deploy-status)](https://app.netlify.com/projects/sqlrooms-kepler/deploys)

An example demonstrating [Kepler.gl](https://kepler.gl/) integration for geospatial data visualization. Features include:

* Load earthquakes dataset into DuckDB
* Add data as a Kepler layer for map visualization
* Interactive map controls and filtering
* Rich styling options for geospatial layers

To create a new project from the kepler example run this:

```sh
npx degit sqlrooms/examples/kepler my-new-app/
```

#### Running locally

```sh
npm install
npm dev
```

## Graph and embedding visualization

### [Cosmos – Graph Visualization](http://sqlrooms-cosmos.netlify.app/)

[Try live](http://sqlrooms-cosmos.netlify.app/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/cosmos)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/cosmos?embed=1\&file=src/app.tsx)

[![Netlify Status](https://api.netlify.com/api/v1/badges/9e7cb117-0355-406d-88f8-54bf6d9050a0/deploy-status)](https://app.netlify.com/projects/sqlrooms-cosmos/deploys)

An example demonstrating integration with the [Cosmos](https://github.com/cosmograph-org/cosmos) GPU-accelerated graph visualization library. Features include:

* WebGL-based force-directed layout computation
* High-performance rendering of large networks
* Real-time interaction and filtering capabilities
* Customizable visual attributes and physics parameters
* Event handling for node/edge interactions

To create a new project from the cosmos example run this:

```bash
npx degit sqlrooms/examples/cosmos my-new-app/
```

#### Running locally

```sh
npm install
npm dev
```

### [Cosmos – 2D Embedding Visualization](http://sqlrooms-cosmos-embedding.netlify.app/)

[Try live](http://sqlrooms-cosmos-embedding.netlify.app/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/cosmos-embedding)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/cosmos-embedding?embed=1\&file=src/app.tsx)

[![Netlify Status](https://api.netlify.com/api/v1/badges/da9fa044-3770-40c1-80cb-224db20de6d4/deploy-status)](https://app.netlify.com/projects/sqlrooms-cosmos-embedding/deploys)

An example showcasing integration with Cosmos for visualizing high-dimensional data in 2D space. Features include:

* WebGL-powered rendering of 2D embeddings
* GPU-accelerated positioning and transitions
* Dynamic mapping of data attributes to visual properties
* Efficient handling of large-scale embedding datasets
* Interactive exploration with pan, zoom, and filtering

To create a new project from the cosmos-embedding example run this:

```bash
npx degit sqlrooms/examples/cosmos-embedding my-new-app/
```

#### Running locally

```sh
npm install
npm dev
```

## Charts

### [Next.js + Recharts Example](https://sqlrooms-nextjs.netlify.app/)

[Try live](https://sqlrooms-nextjs.netlify.app/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/nextjs)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/nextjs?embed=1)

[![Netlify Status](https://api.netlify.com/api/v1/badges/3b7e32f9-b8f0-4da1-8ae7-6fa7c0fd9589/deploy-status)](https://app.netlify.com/projects/sqlrooms-nextjs/deploys)

A minimalistic [Next.js](https://nextjs.org/) app example featuring:

* [Recharts module](/api/recharts) for data visualization
* [Tailwind 4](https://tailwindcss.com/blog/tailwindcss-v4) for styling (experimental)

To create a new project from the Next.js example run this:

```bash
npx degit sqlrooms/examples/nextjs my-new-app/
```

#### Running locally

```sh
npm install
npm dev
```

### [Mosaic Interactive Visualization Example](https://sqlrooms-mosaic.netlify.app/)

[Try live](https://sqlrooms-mosaic.netlify.app/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/mosaic)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/mosaic?embed=1\&file=src/app.tsx)

[![Netlify Status](https://api.netlify.com/api/v1/badges/e67a893c-87ac-409d-ac54-3d31e431bb0b/deploy-status)](https://app.netlify.com/projects/sqlrooms-mosaic/deploys)

An example demonstrating integration with [Mosaic](https://idl.uw.edu/mosaic/), a powerful interactive visualization framework utilizing DuckDB and high-performance cross-filtering.

Features include:

* Complete project setup using Vite and TypeScript
* Comprehensive data source management and configuration
* Seamless integration with Mosaic for interactive visualizations
* Real-time cross-filtering capabilities across multiple views
* Example dashboards with common visualization types

To create a new project from the mosaic example run this:

```bash
npx degit sqlrooms/examples/mosaic my-new-app/
```

#### Running locally

```sh
npm install
npm dev
```

## Other examples

### [MotherDuck Cloud Query Editor](https://motherduck.sqlrooms.org/)

[Try live](https://motherduck.sqlrooms.org/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/query-motherduck)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/query-motherduck?embed=1)

[![Netlify Status](https://api.netlify.com/api/v1/badges/92d69716-a7b3-4051-9b31-2016584d4d5e/deploy-status)](https://app.netlify.com/projects/sqlrooms-motherduck/deploys)

A browser-based SQL query editor that connects directly to MotherDuck's cloud-hosted DuckDB using the WASM connector. Features include:

* Example of using the `WasmMotherDuckDbConnector` from [`@sqlrooms/motherduck`](api/motherduck)
* Connect to MotherDuck from the browser using DuckDB WASM
* Run SQL queries against local and cloud datasets
* Attach and query [DuckLake data lake and catalog](https://motherduck.com/docs/integrations/file-formats/ducklake/)

To create a new project from the query-motherduck example run this:

```bash
npx degit sqlrooms/examples/query-motherduck my-new-app/
```

### AI RAG Example (Retrieval Augmented Generation)

[Github repo](https://github.com/sqlrooms/examples/tree/main/ai-rag)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/ai-rag?embed=1\&file=src/app.tsx)

An example demonstrating Retrieval Augmented Generation (RAG) using SQLRooms and DuckDB for vector search. Features include:

* AI chat with RAG: ask questions and get answers based on relevant documentation
* Direct RAG search UI to query embedded documentation
* Vector embeddings stored in DuckDB with native vector similarity search
* Integration with OpenAI for embeddings and chat responses

To create a new project from the ai-rag example run this:

```bash
npx degit sqlrooms/examples/ai-rag my-new-app/
```

#### Setup

##### 1. Generate DuckDB Documentation Embeddings

First, generate vector embeddings of the DuckDB documentation using the [sqlrooms-rag](https://pypi.org/project/sqlrooms-rag/) package:

```bash
# Download DuckDB docs
npx degit duckdb/duckdb-web/docs ./duckdb-docs

# Generate embeddings with OpenAI (requires OPENAI_API_KEY env var)
OPENAI_API_KEY=your-key uvx --from sqlrooms-rag prepare-embeddings ./duckdb-docs -o public/rag/duckdb_docs.duckdb --provider openai
```

This will process all markdown files and create a DuckDB database with 1536-dim OpenAI embeddings at `public/rag/duckdb_docs.duckdb`.

##### 2. Set Your OpenAI API Key

The app requires an OpenAI API key for:

* Generating embeddings for your search queries (on the fly)
* Powering the AI chat responses

You'll be prompted to enter your API key when you start the app, or you can set it in the settings.

#### Running Locally

```bash
npm install
npm run dev
```

Then open the app and:

1. Enter your OpenAI API key in the settings
2. Click the search icon to test RAG search directly
3. Use the AI chat to ask questions about DuckDB

## Looking for More?

You can find even more example applications in our [Examples Repository](https://github.com/sqlrooms/examples).

Also, check out our [Case Studies](/case-studies) page for real-world applications using SQLRooms.

---

---
url: /api/duckdb-core/functions/arrowTableToJson.md
---
[@sqlrooms/duckdb-core](../index.md) / arrowTableToJson

# Function: arrowTableToJson()

> **arrowTableToJson**(`table`): `Record`<`string`, `unknown`>\[]

Converts an Arrow table to a JSON-compatible array of objects

## Parameters

| Parameter | Type |
| ------ | ------ |
| `table` | `Table` |

## Returns

`Record`<`string`, `unknown`>\[]

## See

* https://duckdb.org/docs/api/wasm/query.html#arrow-table-to-json
* https://github.com/apache/arrow/issues/37856

---

---
url: /api/duckdb/functions/arrowTableToJson.md
---
[@sqlrooms/duckdb](../index.md) / arrowTableToJson

# Function: arrowTableToJson()

> **arrowTableToJson**(`table`): `Record`<`string`, `unknown`>\[]

Converts an Arrow table to a JSON-compatible array of objects

## Parameters

| Parameter | Type |
| ------ | ------ |
| `table` | `Table` |

## Returns

`Record`<`string`, `unknown`>\[]

## See

* https://duckdb.org/docs/api/wasm/query.html#arrow-table-to-json
* https://github.com/apache/arrow/issues/37856

---

---
url: /api/ui/functions/Badge.md
---
[@sqlrooms/ui](../index.md) / Badge

# Function: Badge()

> **Badge**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`BadgeProps`](../interfaces/BadgeProps.md) |

## Returns

`Element`

---

---
url: /api/schema-tree/functions/BaseTreeNode.md
---
[@sqlrooms/schema-tree](../index.md) / BaseTreeNode

# Function: BaseTreeNode()

> **BaseTreeNode**<`T`>(`props`): `Element`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `PropsWithChildren`<{ `className?`: `string`; `nodeObject`: `T`; `asChild?`: `boolean`; }> |

## Returns

`Element`

---

---
url: /api/ui/functions/BreadcrumbEllipsis.md
---
[@sqlrooms/ui](../index.md) / BreadcrumbEllipsis

# Function: BreadcrumbEllipsis()

> **BreadcrumbEllipsis**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DetailedHTMLProps`<`HTMLAttributes`<`HTMLSpanElement`>> |

## Returns

`Element`

---

---
url: /api/ui/functions/BreadcrumbSeparator.md
---
[@sqlrooms/ui](../index.md) / BreadcrumbSeparator

# Function: BreadcrumbSeparator()

> **BreadcrumbSeparator**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DetailedHTMLProps`<`LiHTMLAttributes`<`HTMLLIElement`>> |

## Returns

`Element`

---

---
url: /api/ui/functions/Calendar.md
---
[@sqlrooms/ui](../index.md) / Calendar

# Function: Calendar()

> **Calendar**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DayPickerDefaultProps` | `DayPickerSingleProps` | `DayPickerMultipleProps` | `DayPickerRangeProps` |

## Returns

`Element`

---

---
url: /api/utils/functions/camelCaseToTitle.md
---
[@sqlrooms/utils](../index.md) / camelCaseToTitle

# Function: camelCaseToTitle()

> **camelCaseToTitle**(`camelCase`): `string`

Converts a camelCase string into a Title Case string.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `camelCase` | `string` | The camelCase string to convert |

## Returns

`string`

A Title Case string with spaces between words

## Example

```ts
camelCaseToTitle("myVariableName") // returns "My Variable Name"
camelCaseToTitle("URL") // returns "URL"
```

---

---
url: /api/utils/functions/capitalize.md
---
[@sqlrooms/utils](../index.md) / capitalize

# Function: capitalize()

> **capitalize**(`str`): `string`

Capitalizes the first letter of string

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `str` | `string` | The string to capitalize |

## Returns

`string`

A new string with the first letter capitalized

## Example

```ts
capitalize("hello world") // returns "Hello world"
```

---

---
url: /api/recharts/functions/CartesianGrid.md
---
[@sqlrooms/recharts](../index.md) / CartesianGrid

# Function: CartesianGrid()

> **CartesianGrid**(`props`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`CartesianGridProps`](../type-aliases/CartesianGridProps.md) |

## Returns

`Element`

---

---
url: /api/recharts/functions/ChartStyle.md
---
[@sqlrooms/recharts](../index.md) / ChartStyle

# Function: ChartStyle()

> **ChartStyle**(`__namedParameters`): `Element` | `null`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `id`: `string`; `config`: [`ChartConfig`](../type-aliases/ChartConfig.md); } |
| `__namedParameters.id` | `string` |
| `__namedParameters.config` | [`ChartConfig`](../type-aliases/ChartConfig.md) |

## Returns

`Element` | `null`

---

---
url: /api/ai-core/functions/cleanupPendingAnalysisResults.md
---
[@sqlrooms/ai-core](../index.md) / cleanupPendingAnalysisResults

# Function: cleanupPendingAnalysisResults()

> **cleanupPendingAnalysisResults**(`session`): `object`

Cleans up pending analysis results from interrupted conversations and restores them
with proper IDs from actual user messages. This handles the case where a page refresh
occurred during an active analysis, leaving orphaned "**pending**" results.

Should be called once when loading persisted session data, not in migrations.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `session` | { `id`: `string`; `name`: `string`; `modelProvider`: `string`; `model`: `string`; `customModelName?`: `string`; `baseUrl?`: `string`; `analysisResults`: `object`\[]; `createdAt?`: `Date`; `uiMessages`: `object`\[]; `toolAdditionalData?`: `Record`<`string`, `unknown`>; `messagesRevision`: `number`; } | The session to clean up |
| `session.id` | `string` | - |
| `session.name` | `string` | - |
| `session.modelProvider` | `string` | - |
| `session.model` | `string` | - |
| `session.customModelName?` | `string` | - |
| `session.baseUrl?` | `string` | - |
| `session.analysisResults` | `object`\[] | - |
| `session.createdAt?` | `Date` | - |
| `session.uiMessages` | `object`\[] | - |
| `session.toolAdditionalData?` | `Record`<`string`, `unknown`> | - |
| `session.messagesRevision` | `number` | - |

## Returns

`object`

The cleaned session with restored analysis results

| Name | Type |
| ------ | ------ |
| `id` | `string` |
| `name` | `string` |
| `modelProvider` | `string` |
| `model` | `string` |
| `customModelName?` | `string` |
| `baseUrl?` | `string` |
| `analysisResults` | `object`\[] |
| `createdAt?` | `Date` |
| `uiMessages` | `object`\[] |
| `toolAdditionalData?` | `Record`<`string`, `unknown`> |
| `messagesRevision` | `number` |

---

---
url: /api/ai/functions/cleanupPendingAnalysisResults.md
---
[@sqlrooms/ai](../index.md) / cleanupPendingAnalysisResults

# Function: cleanupPendingAnalysisResults()

> **cleanupPendingAnalysisResults**(`session`): `object`

Cleans up pending analysis results from interrupted conversations and restores them
with proper IDs from actual user messages. This handles the case where a page refresh
occurred during an active analysis, leaving orphaned "**pending**" results.

Should be called once when loading persisted session data, not in migrations.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `session` | { `id`: `string`; `name`: `string`; `modelProvider`: `string`; `model`: `string`; `customModelName?`: `string`; `baseUrl?`: `string`; `analysisResults`: `object`\[]; `createdAt?`: `Date`; `uiMessages`: `object`\[]; `toolAdditionalData?`: `Record`<`string`, `unknown`>; `messagesRevision`: `number`; } | The session to clean up |
| `session.id` | `string` | - |
| `session.name` | `string` | - |
| `session.modelProvider` | `string` | - |
| `session.model` | `string` | - |
| `session.customModelName?` | `string` | - |
| `session.baseUrl?` | `string` | - |
| `session.analysisResults` | `object`\[] | - |
| `session.createdAt?` | `Date` | - |
| `session.uiMessages` | `object`\[] | - |
| `session.toolAdditionalData?` | `Record`<`string`, `unknown`> | - |
| `session.messagesRevision` | `number` | - |

## Returns

`object`

The cleaned session with restored analysis results

| Name | Type |
| ------ | ------ |
| `id` | `string` |
| `name` | `string` |
| `modelProvider` | `string` |
| `model` | `string` |
| `customModelName?` | `string` |
| `baseUrl?` | `string` |
| `analysisResults` | `object`\[] |
| `createdAt?` | `Date` |
| `uiMessages` | `object`\[] |
| `toolAdditionalData?` | `Record`<`string`, `unknown`> |
| `messagesRevision` | `number` |

---

---
url: /api/ui/functions/cn.md
---
[@sqlrooms/ui](../index.md) / cn

# Function: cn()

> **cn**(...`inputs`): `string`

## Parameters

| Parameter | Type |
| ------ | ------ |
| ...`inputs` | `ClassValue`\[] |

## Returns

`string`

---

---
url: /api/ui/functions/ComboboxDemo.md
---
[@sqlrooms/ui](../index.md) / ComboboxDemo

# Function: ComboboxDemo()

> **ComboboxDemo**(): `Element`

## Returns

`Element`

---

---
url: /api/ui/functions/CommandDialog.md
---
[@sqlrooms/ui](../index.md) / CommandDialog

# Function: CommandDialog()

> **CommandDialog**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DialogProps` |

## Returns

`Element`

---

---
url: /api/ui/functions/CommandShortcut.md
---
[@sqlrooms/ui](../index.md) / CommandShortcut

# Function: CommandShortcut()

> **CommandShortcut**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLSpanElement`> |

## Returns

`Element`

---

---
url: /api/ai-core/functions/completeIncompleteToolCalls.md
---
[@sqlrooms/ai-core](../index.md) / completeIncompleteToolCalls

# Function: completeIncompleteToolCalls()

> **completeIncompleteToolCalls**(`messages`): `UIMessage`<`unknown`, `UIDataTypes`, `UITools`>\[]

Validates and completes UIMessages to ensure all tool-call parts have corresponding tool-result parts.
This is important when canceling with AbortController, which may leave incomplete tool-calls.
Assumes sequential tool execution (only one tool runs at a time).

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `messages` | `UIMessage`<`unknown`, `UIDataTypes`, `UITools`>\[] | The messages to validate and complete |

## Returns

`UIMessage`<`unknown`, `UIDataTypes`, `UITools`>\[]

Cleaned messages with completed tool-call/result pairs

---

---
url: /api/ai/functions/completeIncompleteToolCalls.md
---
[@sqlrooms/ai](../index.md) / completeIncompleteToolCalls

# Function: completeIncompleteToolCalls()

> **completeIncompleteToolCalls**(`messages`): `UIMessage`<`unknown`, `UIDataTypes`, `UITools`>\[]

Validates and completes UIMessages to ensure all tool-call parts have corresponding tool-result parts.
This is important when canceling with AbortController, which may leave incomplete tool-calls.
Assumes sequential tool execution (only one tool runs at a time).

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `messages` | `UIMessage`<`unknown`, `UIDataTypes`, `UITools`>\[] | The messages to validate and complete |

## Returns

`UIMessage`<`unknown`, `UIDataTypes`, `UITools`>\[]

Cleaned messages with completed tool-call/result pairs

---

---
url: /api/monaco-editor/functions/configureMonacoLoader.md
---
[@sqlrooms/monaco-editor](../index.md) / configureMonacoLoader

# Function: configureMonacoLoader()

> **configureMonacoLoader**(`options`): `void`

Configures the Monaco loader for bundling Monaco with your application.
Call this once at app startup to enable offline use across all editor components.

After calling this, all MonacoEditor components will automatically use the bundled version
without needing the `bundleMonaco` prop.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `options` | [`MonacoLoaderOptions`](../interfaces/MonacoLoaderOptions.md) |

## Returns

`void`

## Example

```ts
import {configureMonacoLoader} from '@sqlrooms/monaco-editor';
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';

configureMonacoLoader({
  monaco,
  workers: { default: editorWorker }
});
```

---

---
url: /api/ui/functions/ContextMenuShortcut.md
---
[@sqlrooms/ui](../index.md) / ContextMenuShortcut

# Function: ContextMenuShortcut()

> **ContextMenuShortcut**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLSpanElement`> |

## Returns

`Element`

---

---
url: /api/ai-core/functions/convertToAiSDKTools.md
---
[@sqlrooms/ai-core](../index.md) / convertToAiSDKTools

# Function: convertToAiSDKTools()

> **convertToAiSDKTools**(`tools`, `onToolCompleted?`): `ToolSet`

Converts OpenAssistant tools to Vercel AI SDK tools with onToolCompleted handler

## Parameters

| Parameter | Type |
| ------ | ------ |
| `tools` | `Record`<`string`, `OpenAssistantTool`> |
| `onToolCompleted?` | (`toolCallId`, `additionalData`) => `void` |

## Returns

`ToolSet`

---

---
url: /api/ai/functions/convertToAiSDKTools.md
---
[@sqlrooms/ai](../index.md) / convertToAiSDKTools

# Function: convertToAiSDKTools()

> **convertToAiSDKTools**(`tools`, `onToolCompleted?`): `ToolSet`

Converts OpenAssistant tools to Vercel AI SDK tools with onToolCompleted handler

## Parameters

| Parameter | Type |
| ------ | ------ |
| `tools` | `Record`<`string`, `OpenAssistantTool`> |
| `onToolCompleted?` | (`toolCallId`, `additionalData`) => `void` |

## Returns

`ToolSet`

---

---
url: /api/utils/functions/convertToUniqueColumnOrTableName.md
---
[@sqlrooms/utils](../index.md) / convertToUniqueColumnOrTableName

# Function: convertToUniqueColumnOrTableName()

> **convertToUniqueColumnOrTableName**(`filename`, `existingTables?`): `string`

Converts a filename into a valid and unique column or table name for database use.

* Removes file extension
* Replaces invalid characters with underscores
* Ensures the name starts with a letter or underscore
* Truncates to max length of 63 characters
* Ensures uniqueness among existing names

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `filename` | `string` | The original filename to convert |
| `existingTables?` | `string`\[] | Optional array of existing table names to ensure uniqueness |

## Returns

`string`

A valid and unique table/column name

## Example

```ts
convertToUniqueColumnOrTableName("my-file.csv") // returns "my_file"
convertToUniqueColumnOrTableName("123data.csv") // returns "_123data"
```

---

---
url: /api/utils/functions/convertToUniqueS3FolderPath.md
---
[@sqlrooms/utils](../index.md) / convertToUniqueS3FolderPath

# Function: convertToUniqueS3FolderPath()

> **convertToUniqueS3FolderPath**(`str`, `existingObjects?`): `string`

Converts a string into a valid and unique S3 folder path.

* Ensures the path ends with a forward slash
* Replaces special characters with underscores
* Ensures uniqueness among existing paths

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `str` | `string` | The string to convert into an S3 folder path |
| `existingObjects?` | `string`\[] | Optional array of existing S3 paths to ensure uniqueness |

## Returns

`string`

A valid and unique S3 folder path ending with a forward slash

## Example

```ts
convertToUniqueS3FolderPath("my folder") // returns "my_folder/"
```

---

---
url: /api/utils/functions/convertToUniqueS3ObjectName.md
---
[@sqlrooms/utils](../index.md) / convertToUniqueS3ObjectName

# Function: convertToUniqueS3ObjectName()

> **convertToUniqueS3ObjectName**(`str`, `existingObjects?`): `string`

Converts a string into a valid and unique S3 object name.

* Replaces special characters with underscores
* Ensures name is within S3's length limits
* Ensures uniqueness among existing objects

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `str` | `string` | The string to convert into an S3 object name |
| `existingObjects?` | `string`\[] | Optional array of existing S3 object names to ensure uniqueness |

## Returns

`string`

A valid and unique S3 object name

## Example

```ts
convertToUniqueS3ObjectName("my file.txt") // returns "my_file.txt"
```

---

---
url: /api/utils/functions/convertToValidColumnOrTableName.md
---
[@sqlrooms/utils](../index.md) / convertToValidColumnOrTableName

# Function: convertToValidColumnOrTableName()

> **convertToValidColumnOrTableName**(`filename`): `string`

Converts a filename into a valid column or table name for database use.

* Removes file extension
* Replaces invalid characters with underscores
* Ensures the name starts with a letter or underscore
* Truncates to max length of 63 characters

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `filename` | `string` | The original filename to convert |

## Returns

`string`

A valid table/column name

## Example

```ts
convertToValidColumnOrTableName("my-file.csv") // returns "my_file"
convertToValidColumnOrTableName("123data.csv") // returns "_123data"
```

---

---
url: /api/ai-rag/functions/createAiEmbeddingProvider.md
---
[@sqlrooms/ai-rag](../index.md) / createAiEmbeddingProvider

# Function: createAiEmbeddingProvider()

> **createAiEmbeddingProvider**(`providerOrFactory`, `modelId`, `dimensions?`, `getApiKey?`): [`EmbeddingProvider`](../type-aliases/EmbeddingProvider.md)

Create an embedding provider using Vercel AI SDK.

This is a generic function that works with any provider from the Vercel AI SDK:

* OpenAI (@ai-sdk/openai)
* Google (@ai-sdk/google)
* Anthropic (@ai-sdk/anthropic)
* Custom providers

Supports both static providers and dynamic provider factories for runtime API key configuration.

IMPORTANT: The model and dimensions MUST match the ones used during database preparation.
Check your database metadata to ensure compatibility.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `providerOrFactory` | [`AiProvider`](../interfaces/AiProvider.md) | [`AiProviderFactory`](../type-aliases/AiProviderFactory.md) | Provider instance or factory function that creates a provider |
| `modelId` | `string` | Model identifier (e.g., 'text-embedding-3-small', 'text-embedding-004') |
| `dimensions?` | `number` | Embedding dimensions (optional, defaults to model's native dimensions) |
| `getApiKey?` | () => `string` | `undefined` | Optional function to retrieve API key at runtime (for dynamic provider factories) |

## Returns

[`EmbeddingProvider`](../type-aliases/EmbeddingProvider.md)

EmbeddingProvider function

## Examples

```typescript
import {openai} from '@ai-sdk/openai';
import {createAiEmbeddingProvider} from '@sqlrooms/ai-rag';

// OpenAI text-embedding-3-small (1536 dimensions)
const provider = createAiEmbeddingProvider(
  openai,
  'text-embedding-3-small',
  1536
);
```

```typescript
import {createOpenAI} from '@ai-sdk/openai';
import {createAiEmbeddingProvider} from '@sqlrooms/ai-rag';

// Provider factory that creates OpenAI instance with runtime API key
const provider = createAiEmbeddingProvider(
  (apiKey) => createOpenAI({apiKey}),
  'text-embedding-3-small',
  1536,
  () => store.getState().aiSettings.config.providers?.['openai']?.apiKey
);
```

## Note

Requires AI SDK 5+ which uses v2 embedding specification.
The provider must support the `embedding()` method that returns a v2 model.

---

---
url: /api/ai-settings/functions/createAiSettingsSlice.md
---
[@sqlrooms/ai-settings](../index.md) / createAiSettingsSlice

# Function: createAiSettingsSlice()

> **createAiSettingsSlice**(`props?`): `StateCreator`<[`AiSettingsSliceState`](../type-aliases/AiSettingsSliceState.md)>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props?` | `CreateAiSettingsSliceParams` |

## Returns

`StateCreator`<[`AiSettingsSliceState`](../type-aliases/AiSettingsSliceState.md)>

---

---
url: /api/ai/functions/createAiSettingsSlice.md
---
[@sqlrooms/ai](../index.md) / createAiSettingsSlice

# Function: createAiSettingsSlice()

> **createAiSettingsSlice**(`props?`): `StateCreator`<[`AiSettingsSliceState`](../type-aliases/AiSettingsSliceState.md)>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props?` | `CreateAiSettingsSliceParams` |

## Returns

`StateCreator`<[`AiSettingsSliceState`](../type-aliases/AiSettingsSliceState.md)>

---

---
url: /api/ai-core/functions/createAiSlice.md
---
[@sqlrooms/ai-core](../index.md) / createAiSlice

# Function: createAiSlice()

> **createAiSlice**(`params`): `StateCreator`<[`AiSliceState`](../type-aliases/AiSliceState.md)>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `params` | `AiSliceOptions` |

## Returns

`StateCreator`<[`AiSliceState`](../type-aliases/AiSliceState.md)>

---

---
url: /api/ai/functions/createAiSlice.md
---
[@sqlrooms/ai](../index.md) / createAiSlice

# Function: createAiSlice()

> **createAiSlice**(`params`): `StateCreator`<[`AiSliceState`](../type-aliases/AiSliceState.md)>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `params` | `AiSliceOptions` |

## Returns

`StateCreator`<[`AiSliceState`](../type-aliases/AiSliceState.md)>

---

---
url: /api/duckdb-core/functions/createBaseDuckDbConnector.md
---
[@sqlrooms/duckdb-core](../index.md) / createBaseDuckDbConnector

# Function: createBaseDuckDbConnector()

> **createBaseDuckDbConnector**(`__namedParameters`, `impl`): [`DuckDbConnector`](../interfaces/DuckDbConnector.md)

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`BaseDuckDbConnectorOptions`](../interfaces/BaseDuckDbConnectorOptions.md) |
| `impl` | [`BaseDuckDbConnectorImpl`](../interfaces/BaseDuckDbConnectorImpl.md) |

## Returns

[`DuckDbConnector`](../interfaces/DuckDbConnector.md)

---

---
url: /api/duckdb/functions/createBaseDuckDbConnector.md
---
[@sqlrooms/duckdb](../index.md) / createBaseDuckDbConnector

# Function: createBaseDuckDbConnector()

> **createBaseDuckDbConnector**(`__namedParameters`, `impl`): [`DuckDbConnector`](../interfaces/DuckDbConnector.md)

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`BaseDuckDbConnectorOptions`](../interfaces/BaseDuckDbConnectorOptions.md) | `undefined` |
| `impl` | [`BaseDuckDbConnectorImpl`](../interfaces/BaseDuckDbConnectorImpl.md) |

## Returns

[`DuckDbConnector`](../interfaces/DuckDbConnector.md)

---

---
url: /api/room-shell/functions/createBaseRoomSlice.md
---
[@sqlrooms/room-shell](../index.md) / createBaseRoomSlice

# Function: createBaseRoomSlice()

> **createBaseRoomSlice**(`props?`): [`StateCreator`](../type-aliases/StateCreator.md)<[`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md)>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props?` | [`CreateBaseRoomSliceProps`](../type-aliases/CreateBaseRoomSliceProps.md) |

## Returns

[`StateCreator`](../type-aliases/StateCreator.md)<[`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md)>

---

---
url: /api/room-store/functions/createBaseRoomSlice.md
---
[@sqlrooms/room-store](../index.md) / createBaseRoomSlice

# Function: createBaseRoomSlice()

> **createBaseRoomSlice**(`props?`): [`StateCreator`](../type-aliases/StateCreator.md)<[`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md)>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props?` | [`CreateBaseRoomSliceProps`](../type-aliases/CreateBaseRoomSliceProps.md) |

## Returns

[`StateCreator`](../type-aliases/StateCreator.md)<[`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md)>

---

---
url: /api/canvas/functions/createCanvasSlice.md
---
[@sqlrooms/canvas](../index.md) / createCanvasSlice

# Function: createCanvasSlice()

> **createCanvasSlice**(`props`): `StateCreator`<[`CanvasSliceState`](../type-aliases/CanvasSliceState.md)>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `config?`: `Partial`<{ `viewport`: { `x`: `number`; `y`: `number`; `zoom`: `number`; }; `nodes`: `object`\[]; `edges`: `object`\[]; }>; `ai?`: `Partial`<`AiSliceOptions`>; } |
| `props.config?` | `Partial`<{ `viewport`: { `x`: `number`; `y`: `number`; `zoom`: `number`; }; `nodes`: `object`\[]; `edges`: `object`\[]; }> |
| `props.ai?` | `Partial`<`AiSliceOptions`> |

## Returns

`StateCreator`<[`CanvasSliceState`](../type-aliases/CanvasSliceState.md)>

---

---
url: /api/cosmos/functions/createCosmosSlice.md
---
[@sqlrooms/cosmos](../index.md) / createCosmosSlice

# Function: createCosmosSlice()

> **createCosmosSlice**(): `StateCreator`<[`CosmosSliceState`](../type-aliases/CosmosSliceState.md)>

Creates a Zustand slice for managing Cosmos graph state.
This slice handles graph creation, destruction, configuration, and data updates.

## Returns

`StateCreator`<[`CosmosSliceState`](../type-aliases/CosmosSliceState.md)>

A state creator function for the Cosmos slice

---

---
url: /api/duckdb-core/functions/createDbSchemaTrees.md
---
[@sqlrooms/duckdb-core](../index.md) / createDbSchemaTrees

# Function: createDbSchemaTrees()

> **createDbSchemaTrees**(`tables`): [`DbSchemaNode`](../type-aliases/DbSchemaNode.md)\[]

Group tables by database, schema and create a tree of databases, schemas, tables, and columns.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tables` | [`DataTable`](../type-aliases/DataTable.md)\[] | The tables to group |

## Returns

[`DbSchemaNode`](../type-aliases/DbSchemaNode.md)\[]

An array of database nodes containing schemas, tables and columns

---

---
url: /api/duckdb/functions/createDbSchemaTrees.md
---
[@sqlrooms/duckdb](../index.md) / createDbSchemaTrees

# Function: createDbSchemaTrees()

> **createDbSchemaTrees**(`tables`): [`DbSchemaNode`](../type-aliases/DbSchemaNode.md)\[]

Group tables by database, schema and create a tree of databases, schemas, tables, and columns.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tables` | [`DataTable`](../type-aliases/DataTable.md)\[] | The tables to group |

## Returns

[`DbSchemaNode`](../type-aliases/DbSchemaNode.md)\[]

An array of database nodes containing schemas, tables and columns

---

---
url: /api/ai-config/functions/createDefaultAiConfig.md
---
[@sqlrooms/ai-config](../index.md) / createDefaultAiConfig

# Function: createDefaultAiConfig()

> **createDefaultAiConfig**(`props?`): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props?` | `Partial`<{ `sessions`: `object`\[]; `currentSessionId?`: `string`; }> |

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `sessions` | `object`\[] |
| `currentSessionId?` | `string` |

---

---
url: /api/ai-core/functions/createDefaultAiConfig.md
---
[@sqlrooms/ai-core](../index.md) / createDefaultAiConfig

# Function: createDefaultAiConfig()

> **createDefaultAiConfig**(`props?`): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props?` | `Partial`<{ `sessions`: `object`\[]; `currentSessionId?`: `string`; }> |

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `sessions` | `object`\[] |
| `currentSessionId?` | `string` |

---

---
url: /api/ai/functions/createDefaultAiConfig.md
---
[@sqlrooms/ai](../index.md) / createDefaultAiConfig

# Function: createDefaultAiConfig()

> **createDefaultAiConfig**(`props?`): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props?` | `Partial`<{ `sessions`: `object`\[]; `currentSessionId?`: `string`; }> |

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `sessions` | `object`\[] |
| `currentSessionId?` | `string` |

---

---
url: /api/ai/functions/createDefaultAiInstructions.md
---
[@sqlrooms/ai](../index.md) / createDefaultAiInstructions

# Function: createDefaultAiInstructions()

> **createDefaultAiInstructions**(`store`): `string`

Returns the default system instructions for the AI assistant

## Parameters

| Parameter | Type |
| ------ | ------ |
| `store` | `StoreApi`<[`AiSliceState`](../type-aliases/AiSliceState.md) & `DuckDbSliceState`> |

## Returns

`string`

---

---
url: /api/ai-settings/functions/createDefaultAiSettingsConfig.md
---
[@sqlrooms/ai-settings](../index.md) / createDefaultAiSettingsConfig

# Function: createDefaultAiSettingsConfig()

> **createDefaultAiSettingsConfig**(`props?`): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props?` | `Partial`<{ `providers`: `z.ZodRecord`<`z.ZodString`, `z.ZodObject`<{ `baseUrl`: `z.ZodString`; `apiKey`: `z.ZodString`; `models`: `z.ZodArray`<`z.ZodObject`<{ `modelName`: `z.ZodString`; }, `z.core.$strip`>>; }, `z.core.$strip`>>; `customModels`: `object`\[]; `modelParameters`: { `maxSteps`: `number`; `additionalInstruction`: `string`; }; }> |

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `providers` | `z.ZodRecord`<`z.ZodString`, `z.ZodObject`<{ `baseUrl`: `z.ZodString`; `apiKey`: `z.ZodString`; `models`: `z.ZodArray`<`z.ZodObject`<{ `modelName`: `z.ZodString`; }, `z.core.$strip`>>; }, `z.core.$strip`>> |
| `customModels` | `object`\[] |
| `modelParameters` | { `maxSteps`: `number`; `additionalInstruction`: `string`; } |

---

---
url: /api/ai/functions/createDefaultAiSettingsConfig.md
---
[@sqlrooms/ai](../index.md) / createDefaultAiSettingsConfig

# Function: createDefaultAiSettingsConfig()

> **createDefaultAiSettingsConfig**(`props?`): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props?` | `Partial`<{ `providers`: `z.ZodRecord`<`z.ZodString`, `z.ZodObject`<{ `baseUrl`: `z.ZodString`; `apiKey`: `z.ZodString`; `models`: `z.ZodArray`<`z.ZodObject`<{ `modelName`: `z.ZodString`; }, `z.core.$strip`>>; }, `z.core.$strip`>>; `customModels`: `object`\[]; `modelParameters`: { `maxSteps`: `number`; `additionalInstruction`: `string`; }; }> |

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `providers` | `z.ZodRecord`<`z.ZodString`, `z.ZodObject`<{ `baseUrl`: `z.ZodString`; `apiKey`: `z.ZodString`; `models`: `z.ZodArray`<`z.ZodObject`<{ `modelName`: `z.ZodString`; }, `z.core.$strip`>>; }, `z.core.$strip`>> |
| `customModels` | `object`\[] |
| `modelParameters` | { `maxSteps`: `number`; `additionalInstruction`: `string`; } |

---

---
url: /api/ai/functions/createDefaultAiTools.md
---
[@sqlrooms/ai](../index.md) / createDefaultAiTools

# Function: createDefaultAiTools()

> **createDefaultAiTools**(`store`, `options?`): `OpenAssistantToolSet`

Default tools available to the AI assistant for data analysis
Includes:

* query: Executes SQL queries against DuckDB

## Parameters

| Parameter | Type |
| ------ | ------ |
| `store` | `StoreApi`<[`AiSliceState`](../type-aliases/AiSliceState.md) & `DuckDbSliceState`> |
| `options?` | [`DefaultToolsOptions`](../type-aliases/DefaultToolsOptions.md) |

## Returns

`OpenAssistantToolSet`

---

---
url: /api/room-config/functions/createDefaultBaseRoomConfig.md
---
[@sqlrooms/room-config](../index.md) / createDefaultBaseRoomConfig

# Function: createDefaultBaseRoomConfig()

> **createDefaultBaseRoomConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `title` | `string` |
| `description?` | `string` | `null` |
| `dataSources` | ({ `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; })\[] |

---

---
url: /api/room-shell/functions/createDefaultBaseRoomConfig.md
---
[@sqlrooms/room-shell](../index.md) / createDefaultBaseRoomConfig

# Function: createDefaultBaseRoomConfig()

> **createDefaultBaseRoomConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `title` | `string` |
| `description?` | `string` | `null` |
| `dataSources` | ({ `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; })\[] |

---

---
url: /api/room-store/functions/createDefaultBaseRoomConfig.md
---
[@sqlrooms/room-store](../index.md) / createDefaultBaseRoomConfig

# Function: createDefaultBaseRoomConfig()

> **createDefaultBaseRoomConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `title` | `string` |
| `description?` | `string` | `null` |
| `dataSources` | ({ `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; })\[] |

---

---
url: /api/canvas/functions/createDefaultCanvasConfig.md
---
[@sqlrooms/canvas](../index.md) / createDefaultCanvasConfig

# Function: createDefaultCanvasConfig()

> **createDefaultCanvasConfig**(`props?`): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props?` | `Partial`<{ `viewport`: { `x`: `number`; `y`: `number`; `zoom`: `number`; }; `nodes`: `object`\[]; `edges`: `object`\[]; }> |

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `viewport` | { `x`: `number`; `y`: `number`; `zoom`: `number`; } |
| `nodes` | `object`\[] |
| `edges` | `object`\[] |

---

---
url: /api/cosmos/functions/createDefaultCosmosConfig.md
---
[@sqlrooms/cosmos](../index.md) / createDefaultCosmosConfig

# Function: createDefaultCosmosConfig()

> **createDefaultCosmosConfig**(): `object`

## Returns

| Name | Type | Description |
| ------ | ------ | ------ |
| `pointSizeScale` | `number` | Scale factor for point (node) sizes in the graph. Values > 1 make nodes larger, values < 1 make them smaller. **Default** `1.1` |
| `scalePointsOnZoom` | `boolean` | When true, nodes will dynamically resize based on the current zoom level. This helps maintain visual clarity at different zoom levels. **Default** `true` |
| `renderLinks` | `boolean` | Controls whether links (edges) between nodes are displayed. **Default** `true` |
| `linkWidthScale` | `number` | Scale factor for link (edge) width. Values > 1 make links thicker, values < 1 make them thinner. **Default** `1` |
| `linkArrowsSizeScale` | `number` | Scale factor for the size of directional arrows on links. Only applies when linkArrows is true. **Default** `1` |
| `linkArrows` | `boolean` | When true, displays arrows indicating link direction. Useful for directed graphs. **Default** `false` |
| `curvedLinks` | `boolean` | When true, links are rendered as curved Bezier paths. When false, links are straight lines. **Default** `false` |
| `simulationGravity` | `number` | Controls the strength of the central gravitational force. Higher values pull nodes more strongly toward the center. **Default** `0.25` |
| `simulationRepulsion` | `number` | Controls how strongly nodes repel each other. Higher values create more space between unconnected nodes. **Default** `1.0` |
| `simulationLinkSpring` | `number` | Controls the strength of the spring force between linked nodes. Higher values pull connected nodes more tightly together. **Default** `1.0` |
| `simulationLinkDistance` | `number` | The natural or resting length of links between nodes. Higher values create more spacing between connected nodes. **Default** `10` |
| `simulationFriction` | `number` | Controls how quickly node movement decays. Higher values (closer to 1) create more damped movement. **Default** `0.85` |
| `simulationDecay` | `number` | Controls how quickly the simulation stabilizes. Lower values result in longer, smoother transitions. **Default** `1000` |

---

---
url: /api/discuss/functions/createDefaultDiscussConfig.md
---
[@sqlrooms/discuss](../index.md) / createDefaultDiscussConfig

# Function: createDefaultDiscussConfig()

> **createDefaultDiscussConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `discussions` | `object`\[] |

---

---
url: /api/kepler/functions/createDefaultKeplerConfig.md
---
[@sqlrooms/kepler](../index.md) / createDefaultKeplerConfig

# Function: createDefaultKeplerConfig()

> **createDefaultKeplerConfig**(`props?`): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props?` | `Partial`<{ `currentMapId`: `string`; `maps`: `object`\[]; `openTabs`: `string`\[]; }> |

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `currentMapId` | `string` |
| `maps` | `object`\[] |
| `openTabs` | `string`\[] |

---

---
url: /api/layout/functions/createDefaultLayoutConfig.md
---
[@sqlrooms/layout](../index.md) / createDefaultLayoutConfig

# Function: createDefaultLayoutConfig()

> **createDefaultLayoutConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `type` | `"mosaic"` |
| `nodes` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `null` |
| `pinned?` | `string`\[] |
| `fixed?` | `string`\[] |

---

---
url: /api/layout-config/functions/createDefaultMosaicLayout.md
---
[@sqlrooms/layout-config](../index.md) / createDefaultMosaicLayout

# Function: createDefaultMosaicLayout()

> **createDefaultMosaicLayout**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `type` | `"mosaic"` |
| `nodes` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `null` |
| `pinned?` | `string`\[] |
| `fixed?` | `string`\[] |

---

---
url: /api/layout/functions/createDefaultMosaicLayout.md
---
[@sqlrooms/layout](../index.md) / createDefaultMosaicLayout

# Function: createDefaultMosaicLayout()

> **createDefaultMosaicLayout**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `type` | `"mosaic"` |
| `nodes` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `null` |
| `pinned?` | `string`\[] |
| `fixed?` | `string`\[] |

---

---
url: /api/room-config/functions/createDefaultMosaicLayout.md
---
[@sqlrooms/room-config](../index.md) / createDefaultMosaicLayout

# Function: createDefaultMosaicLayout()

> **createDefaultMosaicLayout**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `type` | `"mosaic"` |
| `nodes` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `null` |
| `pinned?` | `string`\[] |
| `fixed?` | `string`\[] |

---

---
url: /api/room-shell/functions/createDefaultMosaicLayout.md
---
[@sqlrooms/room-shell](../index.md) / createDefaultMosaicLayout

# Function: createDefaultMosaicLayout()

> **createDefaultMosaicLayout**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `type` | `"mosaic"` |
| `nodes` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `null` |
| `pinned?` | `string`\[] |
| `fixed?` | `string`\[] |

---

---
url: /api/room-store/functions/createDefaultMosaicLayout.md
---
[@sqlrooms/room-store](../index.md) / createDefaultMosaicLayout

# Function: createDefaultMosaicLayout()

> **createDefaultMosaicLayout**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `type` | `"mosaic"` |
| `nodes` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `null` |
| `pinned?` | `string`\[] |
| `fixed?` | `string`\[] |

---

---
url: /api/sql-editor-config/functions/createDefaultSqlEditorConfig.md
---
[@sqlrooms/sql-editor-config](../index.md) / createDefaultSqlEditorConfig

# Function: createDefaultSqlEditorConfig()

> **createDefaultSqlEditorConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `queries` | `object`\[] |
| `selectedQueryId` | `string` |
| `lastExecutedQuery?` | `string` |
| `openTabs` | `string`\[] |

---

---
url: /api/sql-editor/functions/createDefaultSqlEditorConfig.md
---
[@sqlrooms/sql-editor](../index.md) / createDefaultSqlEditorConfig

# Function: createDefaultSqlEditorConfig()

> **createDefaultSqlEditorConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `queries` | `object`\[] |
| `selectedQueryId` | `string` |
| `lastExecutedQuery?` | `string` |
| `openTabs` | `string`\[] |

---

---
url: /api/discuss/functions/createDiscussSlice.md
---
[@sqlrooms/discuss](../index.md) / createDiscussSlice

# Function: createDiscussSlice()

> **createDiscussSlice**(`__namedParameters`): `StateCreator`<[`DiscussSliceState`](../type-aliases/DiscussSliceState.md)>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `userId`: `string`; } |
| `__namedParameters.userId` | `string` |

## Returns

`StateCreator`<[`DiscussSliceState`](../type-aliases/DiscussSliceState.md)>

---

---
url: /api/duckdb/functions/createDuckDbConnector.md
---
[@sqlrooms/duckdb](../index.md) / createDuckDbConnector

# Function: createDuckDbConnector()

> **createDuckDbConnector**(`options`): [`DuckDbConnector`](../interfaces/DuckDbConnector.md)

## Parameters

| Parameter | Type |
| ------ | ------ |
| `options` | [`DuckDbConnectorOptions`](../type-aliases/DuckDbConnectorOptions.md) |

## Returns

[`DuckDbConnector`](../interfaces/DuckDbConnector.md)

---

---
url: /api/duckdb/functions/createDuckDbSlice.md
---
[@sqlrooms/duckdb](../index.md) / createDuckDbSlice

# Function: createDuckDbSlice()

> **createDuckDbSlice**(`__namedParameters`): `StateCreator`<[`DuckDbSliceState`](../type-aliases/DuckDbSliceState.md)>

Create a DuckDB slice for managing the connector

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `CreateDuckDbSliceProps` |

## Returns

`StateCreator`<[`DuckDbSliceState`](../type-aliases/DuckDbSliceState.md)>

---

---
url: /api/kepler/functions/createKeplerSlice.md
---
[@sqlrooms/kepler](../index.md) / createKeplerSlice

# Function: createKeplerSlice()

> **createKeplerSlice**(`__namedParameters`): `StateCreator`<[`KeplerSliceState`](../type-aliases/KeplerSliceState.md)>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `CreateKeplerSliceOptions` |

## Returns

`StateCreator`<[`KeplerSliceState`](../type-aliases/KeplerSliceState.md)>

---

---
url: /api/layout/functions/createLayoutSlice.md
---
[@sqlrooms/layout](../index.md) / createLayoutSlice

# Function: createLayoutSlice()

> **createLayoutSlice**(`__namedParameters`): `StateCreator`<[`LayoutSliceState`](../type-aliases/LayoutSliceState.md)>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`CreateLayoutSliceProps`](../type-aliases/CreateLayoutSliceProps.md) |

## Returns

`StateCreator`<[`LayoutSliceState`](../type-aliases/LayoutSliceState.md)>

---

---
url: /api/duckdb-node/functions/createNodeDuckDbConnector.md
---
[@sqlrooms/duckdb-node](../index.md) / createNodeDuckDbConnector

# Function: createNodeDuckDbConnector()

> **createNodeDuckDbConnector**(`options`): [`NodeDuckDbConnector`](../interfaces/NodeDuckDbConnector.md)

Creates a DuckDB connector for Node.js environments using @duckdb/node-api.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | [`NodeDuckDbConnectorOptions`](../interfaces/NodeDuckDbConnectorOptions.md) | Configuration options for the connector |

## Returns

[`NodeDuckDbConnector`](../interfaces/NodeDuckDbConnector.md)

A NodeDuckDbConnector instance

## Example

```typescript
const connector = createNodeDuckDbConnector({
  dbPath: ':memory:',
  initializationQuery: 'INSTALL json; LOAD json;'
});

await connector.initialize();
const result = await connector.query('SELECT 1 as value');
console.log(result.numRows); // 1
```

---

---
url: /api/room-shell/functions/createPersistHelpers.md
---
[@sqlrooms/room-shell](../index.md) / createPersistHelpers

# Function: createPersistHelpers()

> **createPersistHelpers**<`T`>(`sliceConfigs`): `object`

Creates partialize and merge functions for Zustand persist middleware.
Automatically handles extracting and merging slice configs.

## Type Parameters

| Type Parameter |
| ------ |
| `T` *extends* `Record`<`string`, `ZodType`<`unknown`, `unknown`, `$ZodTypeInternals`<`unknown`, `unknown`>>> |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `sliceConfigs` | `T` | Map of slice names to their Zod config schemas |

## Returns

`object`

Object with partialize and merge functions

| Name | Type |
| ------ | ------ |
| `partialize()` | (`state`) => `Record`<`string`, `any`> |
| `merge()` | (`persistedState`, `currentState`) => `any` |

## Example

```ts
const {partialize, merge} = createPersistHelpers({
  room: BaseRoomConfig,
  layout: LayoutConfig,
  sqlEditor: SqlEditorSliceConfig,
});

export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
  persist(
    (set, get, store) => ({...}),
    {
      name: 'my-app-state-storage',
      partialize,
      merge,
    },
  ) as StateCreator<RoomState>,
);
```

---

---
url: /api/room-store/functions/createPersistHelpers.md
---
[@sqlrooms/room-store](../index.md) / createPersistHelpers

# Function: createPersistHelpers()

> **createPersistHelpers**<`T`>(`sliceConfigs`): `object`

Creates partialize and merge functions for Zustand persist middleware.
Automatically handles extracting and merging slice configs.

## Type Parameters

| Type Parameter |
| ------ |
| `T` *extends* `Record`<`string`, `ZodType`<`unknown`, `unknown`, `$ZodTypeInternals`<`unknown`, `unknown`>>> |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `sliceConfigs` | `T` | Map of slice names to their Zod config schemas |

## Returns

`object`

Object with partialize and merge functions

| Name | Type |
| ------ | ------ |
| `partialize()` | (`state`) => `Record`<`string`, `any`> |
| `merge()` | (`persistedState`, `currentState`) => `any` |

## Example

```ts
const {partialize, merge} = createPersistHelpers({
  room: BaseRoomConfig,
  layout: LayoutConfig,
  sqlEditor: SqlEditorSliceConfig,
});

export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
  persist(
    (set, get, store) => ({...}),
    {
      name: 'my-app-state-storage',
      partialize,
      merge,
    },
  ) as StateCreator<RoomState>,
);
```

---

---
url: /api/ai/functions/createQueryTool.md
---
[@sqlrooms/ai](../index.md) / createQueryTool

# Function: createQueryTool()

> **createQueryTool**(`store`, `options?`): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `store` | `StoreApi`<[`AiSliceState`](../type-aliases/AiSliceState.md) & `DuckDbSliceState`> |
| `options?` | [`QueryToolOptions`](../type-aliases/QueryToolOptions.md) |

## Returns

`object`

| Name | Type | Default value |
| ------ | ------ | ------ |
| `name` | `string` | `'query'` |
| `description` | `string` | - |
| `parameters` | `ZodObject`<{ `type`: `ZodLiteral`<`"query"`>; `sqlQuery`: `ZodString`; `reasoning`: `ZodString`; }, `$strip`> | `QueryToolParameters` |
| `execute()` | (`params`, `options?`) => `Promise`<{ `llmResult`: { `success`: `boolean`; `data`: { `type`: `"query"`; `summary`: `Record`<`string`, `unknown`>\[] | `null`; `firstRows?`: `Record`<`string`, `unknown`>\[]; }; `details?`: `undefined`; `errorMessage?`: `undefined`; }; `additionalData`: { `title`: `string`; `sqlQuery`: `string`; }; } | { `additionalData?`: `undefined`; `llmResult`: { `data?`: `undefined`; `success`: `boolean`; `details`: `string`; `errorMessage`: `string`; }; }> | - |
| `component()` | (`props`) => `Element` | `QueryToolResult` |

---

---
url: /api/ai-rag/functions/createRagSlice.md
---
[@sqlrooms/ai-rag](../index.md) / createRagSlice

# Function: createRagSlice()

> **createRagSlice**(`__namedParameters`): `StateCreator`<[`RagSliceState`](../type-aliases/RagSliceState.md)>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `embeddingsDatabases`: [`EmbeddingDatabase`](../type-aliases/EmbeddingDatabase.md)\[]; } |
| `__namedParameters.embeddingsDatabases` | [`EmbeddingDatabase`](../type-aliases/EmbeddingDatabase.md)\[] |

## Returns

`StateCreator`<[`RagSliceState`](../type-aliases/RagSliceState.md)>

---

---
url: /api/ai-rag/functions/createRagTool.md
---
[@sqlrooms/ai-rag](../index.md) / createRagTool

# Function: createRagTool()

> **createRagTool**(): `OpenAssistantTool`<`ZodObject`<{ `query`: `ZodString`; `database`: `ZodOptional`<`ZodString`>; `topK`: `ZodDefault`<`ZodOptional`<`ZodNumber`>>; }, `$strip`>, [`RagToolLlmResult`](../type-aliases/RagToolLlmResult.md), [`RagToolAdditionalData`](../type-aliases/RagToolAdditionalData.md), `unknown`>

Create a RAG (Retrieval Augmented Generation) tool for AI.

This tool allows the AI to search through embedded documentation
to find relevant context before answering questions.

## Returns

`OpenAssistantTool`<`ZodObject`<{ `query`: `ZodString`; `database`: `ZodOptional`<`ZodString`>; `topK`: `ZodDefault`<`ZodOptional`<`ZodNumber`>>; }, `$strip`>, [`RagToolLlmResult`](../type-aliases/RagToolLlmResult.md), [`RagToolAdditionalData`](../type-aliases/RagToolAdditionalData.md), `unknown`>

## Example

```typescript
const store = createRoomStore({
  slices: [
    createRagSlice({embeddingsDatabases: [...]}),
    createAiSlice({
      tools: {
        rag: createRagTool(),
      }
    })
  ]
});
```

---

---
url: /api/room-shell/functions/createRoomShellSlice.md
---
[@sqlrooms/room-shell](../index.md) / createRoomShellSlice

# Function: createRoomShellSlice()

> **createRoomShellSlice**(`props`): [`StateCreator`](../type-aliases/StateCreator.md)<[`RoomShellSliceState`](../type-aliases/RoomShellSliceState.md)>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `CreateRoomShellSliceProps` |

## Returns

[`StateCreator`](../type-aliases/StateCreator.md)<[`RoomShellSliceState`](../type-aliases/RoomShellSliceState.md)>

---

---
url: /api/room-shell/functions/createRoomStore.md
---
[@sqlrooms/room-shell](../index.md) / createRoomStore

# Function: createRoomStore()

> **createRoomStore**<`RS`>(`stateCreator`): `object`

Create a room store with custom fields and methods

## Type Parameters

| Type Parameter |
| ------ |
| `RS` *extends* [`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md) |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `stateCreator` | [`StateCreator`](../type-aliases/StateCreator.md)<`RS`> |

## Returns

`object`

The room store and a hook for accessing the room store

| Name | Type |
| ------ | ------ |
| `roomStore` | [`StoreApi`](../interfaces/StoreApi.md)<[`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md) & `RS`> |
| `useRoomStore()` | <`T`>(`selector`) => `T` |

---

---
url: /api/room-store/functions/createRoomStore.md
---
[@sqlrooms/room-store](../index.md) / createRoomStore

# Function: createRoomStore()

> **createRoomStore**<`RS`>(`stateCreator`): `object`

Create a room store with custom fields and methods

## Type Parameters

| Type Parameter |
| ------ |
| `RS` *extends* [`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md) |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `stateCreator` | [`StateCreator`](../type-aliases/StateCreator.md)<`RS`> |

## Returns

`object`

The room store and a hook for accessing the room store

| Name | Type |
| ------ | ------ |
| `roomStore` | [`StoreApi`](../interfaces/StoreApi.md)<[`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md) & `RS`> |
| `useRoomStore()` | <`T`>(`selector`) => `T` |

---

---
url: /api/room-shell/functions/createRoomStoreCreator.md
---
[@sqlrooms/room-shell](../index.md) / createRoomStoreCreator

# Function: createRoomStoreCreator()

> **createRoomStoreCreator**<`RS`>(): <`TFactory`>(`stateCreatorFactory`) => `object`

Factory to create a room store creator with custom params.

## Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `RS` *extends* [`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md) | Room state type |

## Returns

An object with createRoomStore(params) and useRoomStore(selector)

> <`TFactory`>(`stateCreatorFactory`): `object`

### Type Parameters

| Type Parameter |
| ------ |
| `TFactory` *extends* (...`args`) => [`StateCreator`](../type-aliases/StateCreator.md)<`RS`> |

### Parameters

| Parameter | Type |
| ------ | ------ |
| `stateCreatorFactory` | `TFactory` |

### Returns

`object`

| Name | Type |
| ------ | ------ |
| `createRoomStore()` | (...`args`) => [`StoreApi`](../interfaces/StoreApi.md)<`RS`> |
| `useRoomStore()` | <`T`>(`selector`) => `T` |

---

---
url: /api/room-store/functions/createRoomStoreCreator.md
---
[@sqlrooms/room-store](../index.md) / createRoomStoreCreator

# Function: createRoomStoreCreator()

> **createRoomStoreCreator**<`RS`>(): <`TFactory`>(`stateCreatorFactory`) => `object`

Factory to create a room store creator with custom params.

## Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `RS` *extends* [`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md) | Room state type |

## Returns

An object with createRoomStore(params) and useRoomStore(selector)

> <`TFactory`>(`stateCreatorFactory`): `object`

### Type Parameters

| Type Parameter |
| ------ |
| `TFactory` *extends* (...`args`) => [`StateCreator`](../type-aliases/StateCreator.md)<`RS`> |

### Parameters

| Parameter | Type |
| ------ | ------ |
| `stateCreatorFactory` | `TFactory` |

### Returns

`object`

| Name | Type |
| ------ | ------ |
| `createRoomStore()` | (...`args`) => [`StoreApi`](../interfaces/StoreApi.md)<`RS`> |
| `useRoomStore()` | <`T`>(`selector`) => `T` |

---

---
url: /api/s3-browser/functions/createS3BrowserSlice.md
---
[@sqlrooms/s3-browser](../index.md) / createS3BrowserSlice

# Function: createS3BrowserSlice()

> **createS3BrowserSlice**(): `StateCreator`<[`S3BrowserState`](../type-aliases/S3BrowserState.md)>

## Returns

`StateCreator`<[`S3BrowserState`](../type-aliases/S3BrowserState.md)>

---

---
url: /api/room-shell/functions/createSlice.md
---
[@sqlrooms/room-shell](../index.md) / createSlice

# Function: createSlice()

> **createSlice**<`SliceState`, `StoreState`>(`sliceCreator`): [`StateCreator`](../type-aliases/StateCreator.md)<`SliceState`>

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `SliceState` | - |
| `StoreState` | [`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md) & `SliceState` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `sliceCreator` | (...`args`) => `SliceState` |

## Returns

[`StateCreator`](../type-aliases/StateCreator.md)<`SliceState`>

---

---
url: /api/room-store/functions/createSlice.md
---
[@sqlrooms/room-store](../index.md) / createSlice

# Function: createSlice()

> **createSlice**<`SliceState`, `StoreState`>(`sliceCreator`): [`StateCreator`](../type-aliases/StateCreator.md)<`SliceState`>

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `SliceState` | - |
| `StoreState` | [`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md) & `SliceState` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `sliceCreator` | (...`args`) => `SliceState` |

## Returns

[`StateCreator`](../type-aliases/StateCreator.md)<`SliceState`>

---

---
url: /api/sql-editor/functions/createSqlEditorSlice.md
---
[@sqlrooms/sql-editor](../index.md) / createSqlEditorSlice

# Function: createSqlEditorSlice()

> **createSqlEditorSlice**(`__namedParameters`): `StateCreator`<[`SqlEditorSliceState`](../type-aliases/SqlEditorSliceState.md)>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `config?`: { `queries`: `object`\[]; `selectedQueryId`: `string`; `lastExecutedQuery?`: `string`; `openTabs`: `string`\[]; }; `queryResultLimit?`: `number`; `queryResultLimitOptions?`: `number`\[]; } |
| `__namedParameters.config?` | { `queries`: `object`\[]; `selectedQueryId`: `string`; `lastExecutedQuery?`: `string`; `openTabs`: `string`\[]; } |
| `__namedParameters.config.queries` | `object`\[] |
| `__namedParameters.config.selectedQueryId` | `string` |
| `__namedParameters.config.lastExecutedQuery?` | `string` |
| `__namedParameters.config.openTabs` | `string`\[] |
| `__namedParameters.queryResultLimit?` | `number` |
| `__namedParameters.queryResultLimitOptions?` | `number`\[] |

## Returns

`StateCreator`<[`SqlEditorSliceState`](../type-aliases/SqlEditorSliceState.md)>

---

---
url: /api/duckdb-core/functions/createTypedRowAccessor.md
---
[@sqlrooms/duckdb-core](../index.md) / createTypedRowAccessor

# Function: createTypedRowAccessor()

> **createTypedRowAccessor**<`T`>(`__namedParameters`): [`TypedRowAccessor`](../interfaces/TypedRowAccessor.md)<`T`>

Creates a row accessor wrapper around an Arrow table that provides typed row access.

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `arrowTable`: `Table`<`T`>; `validate?`: (`row`) => `T`; } |
| `__namedParameters.arrowTable` | `Table`<`T`> |
| `__namedParameters.validate?` | (`row`) => `T` |

## Returns

[`TypedRowAccessor`](../interfaces/TypedRowAccessor.md)<`T`>

---

---
url: /api/duckdb/functions/createTypedRowAccessor.md
---
[@sqlrooms/duckdb](../index.md) / createTypedRowAccessor

# Function: createTypedRowAccessor()

> **createTypedRowAccessor**<`T`>(`__namedParameters`): [`TypedRowAccessor`](../interfaces/TypedRowAccessor.md)<`T`>

Creates a row accessor wrapper around an Arrow table that provides typed row access.

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `arrowTable`: `Table`<`T`>; `validate?`: (`row`) => `T`; } |
| `__namedParameters.arrowTable` | `Table`<`T`> |
| `__namedParameters.validate?` | (`row`) => `T` |

## Returns

[`TypedRowAccessor`](../interfaces/TypedRowAccessor.md)<`T`>

---

---
url: /api/vega/functions/createVegaChartTool.md
---
[@sqlrooms/vega](../index.md) / createVegaChartTool

# Function: createVegaChartTool()

> **createVegaChartTool**(`options`): `OpenAssistantTool`<`ZodObject`<{ `sqlQuery`: `ZodString`; `vegaLiteSpec`: `ZodString`; `reasoning`: `ZodString`; }, `$strip`>, `VegaChartToolLlmResult`, `VegaChartToolAdditionalData`, `unknown`>

Creates a VegaLite chart visualization tool for AI assistants

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | { `description?`: `string`; } | Configuration options for the VegaChart tool |
| `options.description?` | `string` | Custom description for the tool (defaults to a standard description) |

## Returns

`OpenAssistantTool`<`ZodObject`<{ `sqlQuery`: `ZodString`; `vegaLiteSpec`: `ZodString`; `reasoning`: `ZodString`; }, `$strip`>, `VegaChartToolLlmResult`, `VegaChartToolAdditionalData`, `unknown`>

A tool that can be used with the AI assistant

---

---
url: /api/duckdb/functions/createWasmDuckDbConnector.md
---
[@sqlrooms/duckdb](../index.md) / createWasmDuckDbConnector

# Function: createWasmDuckDbConnector()

> **createWasmDuckDbConnector**(`options`): [`WasmDuckDbConnector`](../interfaces/WasmDuckDbConnector.md)

## Parameters

| Parameter | Type |
| ------ | ------ |
| `options` | `WasmDuckDbConnectorOptions` |

## Returns

[`WasmDuckDbConnector`](../interfaces/WasmDuckDbConnector.md)

---

---
url: /api/motherduck/functions/createWasmMotherDuckDbConnector.md
---
[@sqlrooms/motherduck](../index.md) / createWasmMotherDuckDbConnector

# Function: createWasmMotherDuckDbConnector()

> **createWasmMotherDuckDbConnector**(`options`): [`WasmMotherDuckDbConnector`](../interfaces/WasmMotherDuckDbConnector.md)

## Parameters

| Parameter | Type |
| ------ | ------ |
| `options` | [`WasmMotherDuckDbConnectorOptions`](../interfaces/WasmMotherDuckDbConnectorOptions.md) |

## Returns

[`WasmMotherDuckDbConnector`](../interfaces/WasmMotherDuckDbConnector.md)

---

---
url: /api/duckdb/functions/createWebSocketDuckDbConnector.md
---
[@sqlrooms/duckdb](../index.md) / createWebSocketDuckDbConnector

# Function: createWebSocketDuckDbConnector()

> **createWebSocketDuckDbConnector**(`options`): [`WebSocketDuckDbConnector`](../interfaces/WebSocketDuckDbConnector.md)

Create a WebSocket-based DuckDB connector.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `options` | [`WebSocketDuckDbConnectorOptions`](../interfaces/WebSocketDuckDbConnectorOptions.md) |

## Returns

[`WebSocketDuckDbConnector`](../interfaces/WebSocketDuckDbConnector.md)

---

---
url: /api/recharts/functions/Customized.md
---
[@sqlrooms/recharts](../index.md) / Customized

# Function: Customized()

> **Customized**<`P`, `C`>(`__namedParameters`): `Element`

custom svg elements by rechart instance props and state.

## Type Parameters

| Type Parameter |
| ------ |
| `P` |
| `C` *extends* `Comp`<`P`> |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`CustomizedProps`](../type-aliases/CustomizedProps.md)<`P`, `C`> |

## Returns

`Element`

svg elements

---

---
url: /api/data-table/functions/DataTablePaginated.md
---
[@sqlrooms/data-table](../index.md) / DataTablePaginated

# Function: DataTablePaginated()

> **DataTablePaginated**<`Data`>(`props`): `Element`

Data table with pagination, sorting, and custom actions.

## Type Parameters

| Type Parameter |
| ------ |
| `Data` *extends* `object` |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`DataTablePaginatedProps`](../type-aliases/DataTablePaginatedProps.md)<`Data`> |  |

## Returns

`Element`

---

---
url: /api/schema-tree/functions/defaultRenderTableNodeMenuItems.md
---
[@sqlrooms/schema-tree](../index.md) / defaultRenderTableNodeMenuItems

# Function: defaultRenderTableNodeMenuItems()

> **defaultRenderTableNodeMenuItems**(`nodeObject`, `viewTableModal?`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `nodeObject` | `TableNodeObject` |
| `viewTableModal?` | `UseDisclosureReturnValue` |

## Returns

`Element`

---

---
url: /api/schema-tree/functions/defaultRenderTableSchemaNode.md
---
[@sqlrooms/schema-tree](../index.md) / defaultRenderTableSchemaNode

# Function: defaultRenderTableSchemaNode()

> **defaultRenderTableSchemaNode**(`node`): `Element` | `null`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `DbSchemaNode` |

## Returns

`Element` | `null`

---

---
url: /api/discuss/functions/DeleteConfirmDialog.md
---
[@sqlrooms/discuss](../index.md) / DeleteConfirmDialog

# Function: DeleteConfirmDialog()

> **DeleteConfirmDialog**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DeleteConfirmDialogProps` |

## Returns

`Element`

---

---
url: /api/s3-utils/functions/deleteS3Files.md
---
[@sqlrooms/s3-utils](../index.md) / deleteS3Files

# Function: deleteS3Files()

> **deleteS3Files**(`S3`, `bucket`, `prefix`): `Promise`<`void`>

Delete all files with the given prefix

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `S3` | `S3Client` | - |
| `bucket` | `string` | - |
| `prefix` | `string` |  |

## Returns

`Promise`<`void`>

---

---
url: /api/ui/functions/DialogFooter.md
---
[@sqlrooms/ui](../index.md) / DialogFooter

# Function: DialogFooter()

> **DialogFooter**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DialogHeader.md
---
[@sqlrooms/ui](../index.md) / DialogHeader

# Function: DialogHeader()

> **DialogHeader**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/utils/functions/downloadFile.md
---
[@sqlrooms/utils](../index.md) / downloadFile

# Function: downloadFile()

> **downloadFile**(`url`, `opts?`): `Promise`<`Uint8Array`<`ArrayBufferLike`>>

Downloads a file from a specified URL using XMLHttpRequest

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `url` | `string` | The URL to download the file from |
| `opts?` | { `method?`: `string`; `headers?`: `Record`<`string`, `string`>; `onProgress?`: (`info`) => `void`; } | Optional configuration for the download |
| `opts.method?` | `string` | The HTTP method to use |
| `opts.headers?` | `Record`<`string`, `string`> | Additional headers to include in the request |
| `opts.onProgress?` | (`info`) => `void` | Callback function to track download progress |

## Returns

`Promise`<`Uint8Array`<`ArrayBufferLike`>>

The downloaded file as a Uint8Array

## Throws

Throws an object containing status and error message if download fails

---

---
url: /api/ui/functions/Drawer.md
---
[@sqlrooms/ui](../index.md) / Drawer

# Function: Drawer()

> **Drawer**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DialogProps` |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerClose.md
---
[@sqlrooms/ui](../index.md) / DrawerClose

# Function: DrawerClose()

> **DrawerClose**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DialogCloseProps` & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerContent.md
---
[@sqlrooms/ui](../index.md) / DrawerContent

# Function: DrawerContent()

> **DrawerContent**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `Omit`<`DialogContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> & `object` |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerDescription.md
---
[@sqlrooms/ui](../index.md) / DrawerDescription

# Function: DrawerDescription()

> **DrawerDescription**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DialogDescriptionProps` & `RefAttributes`<`HTMLParagraphElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerFooter.md
---
[@sqlrooms/ui](../index.md) / DrawerFooter

# Function: DrawerFooter()

> **DrawerFooter**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>> |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerHandle.md
---
[@sqlrooms/ui](../index.md) / DrawerHandle

# Function: DrawerHandle()

> **DrawerHandle**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerHeader.md
---
[@sqlrooms/ui](../index.md) / DrawerHeader

# Function: DrawerHeader()

> **DrawerHeader**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>> |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerOverlay.md
---
[@sqlrooms/ui](../index.md) / DrawerOverlay

# Function: DrawerOverlay()

> **DrawerOverlay**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `Omit`<`DialogOverlayProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerPortal.md
---
[@sqlrooms/ui](../index.md) / DrawerPortal

# Function: DrawerPortal()

> **DrawerPortal**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DialogPortalProps` |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerTitle.md
---
[@sqlrooms/ui](../index.md) / DrawerTitle

# Function: DrawerTitle()

> **DrawerTitle**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DialogTitleProps` & `RefAttributes`<`HTMLHeadingElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerTrigger.md
---
[@sqlrooms/ui](../index.md) / DrawerTrigger

# Function: DrawerTrigger()

> **DrawerTrigger**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DialogTriggerProps` & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DropdownMenuShortcut.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuShortcut

# Function: DropdownMenuShortcut()

> **DropdownMenuShortcut**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLSpanElement`> |

## Returns

`Element`

---

---
url: /api/monaco-editor/functions/ensureMonacoLoaderConfigured.md
---
[@sqlrooms/monaco-editor](../index.md) / ensureMonacoLoaderConfigured

# Function: ensureMonacoLoaderConfigured()

> **ensureMonacoLoaderConfigured**(): `Promise`<`void`>

**`Internal`**

Dynamically imports and configures Monaco for bundling (SSR-safe).

This is an advanced utility that most users don't need.
Use `configureMonacoLoader()` at app startup instead for better control.

This function:

* Only runs on the client side (checks typeof window)
* Dynamically imports monaco-editor to avoid SSR issues in Next.js
* Automatically configures the loader with the imported Monaco instance

When to use:

* You need Monaco bundled but can't call configureMonacoLoader at app startup
* You're working in an environment where top-level imports of monaco-editor fail

When NOT to use:

* For normal bundling, use `configureMonacoLoader()` at app startup
* For CDN loading, just use the component - no configuration needed

## Returns

`Promise`<`void`>

---

---
url: /api/duckdb-core/functions/escapeId.md
---
[@sqlrooms/duckdb-core](../index.md) / escapeId

# Function: escapeId()

> **escapeId**(`id`): `string`

Escapes an identifier (like table or column names) for use in DuckDB SQL queries
by wrapping it in double quotes and escaping any existing double quotes by doubling them.
If the identifier is already properly quoted, returns it as is.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `id` | `string` | The identifier string to escape |

## Returns

`string`

The escaped identifier wrapped in double quotes

## Example

```ts
escapeId("my_table") // Returns '"my_table"'
escapeId("my""table") // Returns '"my""""table"'
```

---

---
url: /api/duckdb-core/functions/escapeVal.md
---
[@sqlrooms/duckdb-core](../index.md) / escapeVal

# Function: escapeVal()

> **escapeVal**(`val`): `string`

Escapes a value for use in DuckDB SQL queries by wrapping it in single quotes
and escaping any existing single quotes by doubling them.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `val` | `unknown` | The value to escape. Will be converted to string if not already a string. |

## Returns

`string`

The escaped string value wrapped in single quotes.

## Example

```ts
escapeVal("John's data") // Returns "'John''s data'"
```

---

---
url: /api/layout/functions/findMosaicNodePathByKey.md
---
[@sqlrooms/layout](../index.md) / findMosaicNodePathByKey

# Function: findMosaicNodePathByKey()

> **findMosaicNodePathByKey**(`root`, `key`): `MosaicPath` | `undefined`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `root` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `null` | `undefined` |
| `key` | `string` |

## Returns

`MosaicPath` | `undefined`

---

---
url: /api/utils/functions/formatBytes.md
---
[@sqlrooms/utils](../index.md) / formatBytes

# Function: formatBytes()

> **formatBytes**(`bytes`): `string`

Formats a number of bytes into a human-readable string with appropriate size units.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `bytes` | `number` | The number of bytes to format |

## Returns

`string`

A string representation of the bytes with appropriate unit (Bytes, KB, MB, etc.)

## Example

```ts
formatBytes(1024) // returns "1 KB"
formatBytes(1234567) // returns "1.18 MB"
```

---

---
url: /api/utils/functions/formatDate.md
---
[@sqlrooms/utils](../index.md) / formatDate

# Function: formatDate()

> **formatDate**(`d`): `string`

Formats a date into YYYY-MM-DD format

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `d` | `number` | `bigint` | `Date` | Date to format (can be Date object, timestamp number, or bigint) |

## Returns

`string`

Formatted date string

## Example

```ts
formatDate(new Date()); // e.g., "2024-03-13"
```

---

---
url: /api/utils/functions/formatDateTime.md
---
[@sqlrooms/utils](../index.md) / formatDateTime

# Function: formatDateTime()

> **formatDateTime**(`d`): `string`

Formats a date into a human-readable datetime string

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `d` | `number` | `bigint` | `Date` | Date to format (can be Date object, timestamp number, or bigint) |

## Returns

`string`

Formatted string in "Day YYYY-MM-DD HH:MM AM/PM" format

## Example

```ts
formatDateTime(new Date()); // e.g., "Wed 2024-03-13 02:30 PM"
```

---

---
url: /api/utils/functions/formatNumber.md
---
[@sqlrooms/utils](../index.md) / formatNumber

# Function: formatNumber()

> **formatNumber**(`n`): `string`

Formats a number using US locale formatting

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `n` | `number` | Number to format |

## Returns

`string`

Formatted number string

## Example

```ts
formatNumber(1234567.89); // "1,234,568"
```

---

---
url: /api/ai/functions/formatTablesForLLM.md
---
[@sqlrooms/ai](../index.md) / formatTablesForLLM

# Function: formatTablesForLLM()

> **formatTablesForLLM**(`tables`): `string`

Formats table schema information in a clean, LLM-friendly format

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tables` | `DataTable`\[] | Array of DataTable objects from the DuckDB state |

## Returns

`string`

Formatted string representation of table schemas

---

---
url: /api/utils/functions/formatTimeOfDay.md
---
[@sqlrooms/utils](../index.md) / formatTimeOfDay

# Function: formatTimeOfDay()

> **formatTimeOfDay**(`d`): `string`

Formats a date into time of day (HH:MM AM/PM)

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `d` | `number` | `bigint` | `Date` | Date to format (can be Date object, timestamp number, or bigint) |

## Returns

`string`

Formatted time string

## Example

```ts
formatTimeOfDay(new Date()); // e.g., "02:30 PM"
```

---

---
url: /api/utils/functions/formatTimeRelative.md
---
[@sqlrooms/utils](../index.md) / formatTimeRelative

# Function: formatTimeRelative()

> **formatTimeRelative**(`d`): `string`

Formats a date relative to the current time (e.g., "2 hours ago", "in 3 days")

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `d` | `string` | `number` | `Dayjs` | `Date` | `null` | `undefined` | Date to format (accepts any dayjs ConfigType) |

## Returns

`string`

Human-readable relative time string

## Example

```ts
formatTimeRelative(new Date(Date.now() - 3600000)); // "1 hour ago"
```

---

---
url: /api/utils/functions/formatTimestampForFilename.md
---
[@sqlrooms/utils](../index.md) / formatTimestampForFilename

# Function: formatTimestampForFilename()

> **formatTimestampForFilename**(): `string`

Formats the current timestamp for use in filenames (filesystem-safe)

## Returns

`string`

Timestamp string in YYYY-MM-DDTHH-mm-ss format

## Example

```ts
formatTimestampForFilename(); // "2024-03-13T14-30-25"
```

---

---
url: /api/ui/functions/FormField.md
---
[@sqlrooms/ui](../index.md) / FormField

# Function: FormField()

> **FormField**<`TFieldValues`, `TName`>(`__namedParameters`): `Element`

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `TFieldValues` *extends* `FieldValues` | `FieldValues` |
| `TName` *extends* `string` | `FieldPath`<`TFieldValues`> |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `ControllerProps`<`TFieldValues`, `TName`> |

## Returns

`Element`

---

---
url: /api/utils/functions/generateUniqueName.md
---
[@sqlrooms/utils](../index.md) / generateUniqueName

# Function: generateUniqueName()

> **generateUniqueName**(`name`, `usedNames?`): `string`

Generates a unique name by appending a numeric suffix if the name already exists.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `name` | `string` | The base name to make unique |
| `usedNames?` | `string`\[] | Optional array of existing names to check against |

## Returns

`string`

A unique name, potentially with a numeric suffix

## Example

```ts
generateUniqueName("table", ["table"]) // returns "table_1"
generateUniqueName("table_1", ["table_1"]) // returns "table_2"
```

---

---
url: /api/utils/functions/generateUniquePath.md
---
[@sqlrooms/utils](../index.md) / generateUniquePath

# Function: generateUniquePath()

> **generateUniquePath**(`filePath`, `existingPaths`): `string`

Generates a unique file path by appending a numeric suffix if the path already exists.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `filePath` | `string` | The original file path |
| `existingPaths` | `string`\[] | Array of existing file paths to check against |

## Returns

`string`

A unique file path

## Example

```ts
generateUniquePath("file.txt", ["file.txt"]) // returns "file_1.txt"
```

---

---
url: /api/utils/functions/genRandomStr.md
---
[@sqlrooms/utils](../index.md) / genRandomStr

# Function: genRandomStr()

> **genRandomStr**(`length`): `string`

Generates a random string of specified length

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `length` | `number` | The length of the random string to generate |

## Returns

`string`

Random string containing uppercase letters, lowercase letters, and numbers

## Example

```ts
const random = genRandomStr(10); // e.g., "aB3kF9mN2x"
```

---

---
url: /api/duckdb-core/functions/getArrowColumnTypeCategory.md
---
[@sqlrooms/duckdb-core](../index.md) / getArrowColumnTypeCategory

# Function: getArrowColumnTypeCategory()

> **getArrowColumnTypeCategory**(`type`): [`ColumnTypeCategory`](../type-aliases/ColumnTypeCategory.md)

This function is used to get the type category of a column from an Arrow table.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `type` | `DataType` | The Arrow DataType of the column. |

## Returns

[`ColumnTypeCategory`](../type-aliases/ColumnTypeCategory.md)

The type category of the column.

---

---
url: /api/duckdb/functions/getArrowColumnTypeCategory.md
---
[@sqlrooms/duckdb](../index.md) / getArrowColumnTypeCategory

# Function: getArrowColumnTypeCategory()

> **getArrowColumnTypeCategory**(`type`): [`ColumnTypeCategory`](../type-aliases/ColumnTypeCategory.md)

This function is used to get the type category of a column from an Arrow table.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `type` | `DataType` | The Arrow DataType of the column. |

## Returns

[`ColumnTypeCategory`](../type-aliases/ColumnTypeCategory.md)

The type category of the column.

---

---
url: /api/duckdb-core/functions/getColValAsNumber.md
---
[@sqlrooms/duckdb-core](../index.md) / getColValAsNumber

# Function: getColValAsNumber()

> **getColValAsNumber**(`res`, `column`, `index`): `number`

Extracts a numeric value from an Arrow Table at the specified column and row index.
Handles both column name and index-based access. Converts BigInt values to numbers.

## Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `res` | `Table` | `undefined` | The Arrow Table containing the data |
| `column` | `string` | `number` | `0` | The column name or index (0-based) to read from. Defaults to first column (0) |
| `index` | `number` | `0` | The row index (0-based) to read from. Defaults to first row (0) |

## Returns

`number`

The numeric value at the specified position, or NaN if the value is null/undefined

## Example

```ts
const value = getColValAsNumber(table, "amount", 0)
```

---

---
url: /api/duckdb/functions/getColValAsNumber.md
---
[@sqlrooms/duckdb](../index.md) / getColValAsNumber

# Function: getColValAsNumber()

> **getColValAsNumber**(`res`, `column?`, `index?`): `number`

Extracts a numeric value from an Arrow Table at the specified column and row index.
Handles both column name and index-based access. Converts BigInt values to numbers.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `res` | `Table` | The Arrow Table containing the data |
| `column?` | `string` | `number` | The column name or index (0-based) to read from. Defaults to first column (0) |
| `index?` | `number` | The row index (0-based) to read from. Defaults to first row (0) |

## Returns

`number`

The numeric value at the specified position, or NaN if the value is null/undefined

## Example

```ts
const value = getColValAsNumber(table, "amount", 0)
```

---

---
url: /api/monaco-editor/functions/getCssColor.md
---
[@sqlrooms/monaco-editor](../index.md) / getCssColor

# Function: getCssColor()

> **getCssColor**(`variableName`, `fallbackColor`): `string`

Safely gets a CSS variable and ensures it's in a format Monaco can use

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `variableName` | `string` | CSS variable name (e.g. '--background') |
| `fallbackColor` | `string` | Fallback color if the variable isn't found |

## Returns

`string`

A color string in a format Monaco can use (typically hex)

---

---
url: /api/duckdb-core/functions/getDuckDbTypeCategory.md
---
[@sqlrooms/duckdb-core](../index.md) / getDuckDbTypeCategory

# Function: getDuckDbTypeCategory()

> **getDuckDbTypeCategory**(`columnType`): [`ColumnTypeCategory`](../type-aliases/ColumnTypeCategory.md) | `undefined`

Get the category of a column type

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `columnType` | `string` | The type of the column |

## Returns

[`ColumnTypeCategory`](../type-aliases/ColumnTypeCategory.md) | `undefined`

The category of the column type

---

---
url: /api/duckdb/functions/getDuckDbTypeCategory.md
---
[@sqlrooms/duckdb](../index.md) / getDuckDbTypeCategory

# Function: getDuckDbTypeCategory()

> **getDuckDbTypeCategory**(`columnType`): [`ColumnTypeCategory`](../type-aliases/ColumnTypeCategory.md) | `undefined`

Get the category of a column type

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `columnType` | `string` | The type of the column |

## Returns

[`ColumnTypeCategory`](../type-aliases/ColumnTypeCategory.md) | `undefined`

The category of the column type

---

---
url: /api/utils/functions/getErrorMessageForDisplay.md
---
[@sqlrooms/utils](../index.md) / getErrorMessageForDisplay

# Function: getErrorMessageForDisplay()

> **getErrorMessageForDisplay**(`e`): `string`

Extracts and formats an error message for display, removing common prefixes and truncating at first newline

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `e` | `unknown` | Error object or any other value that can be converted to string |

## Returns

`string`

Cleaned up error message string

## Example

```ts
getErrorMessageForDisplay(new Error("Query failed: Error: Invalid syntax\nMore details...")); // "Invalid syntax"
```

---

---
url: /api/monaco-editor/functions/getMonospaceFont.md
---
[@sqlrooms/monaco-editor](../index.md) / getMonospaceFont

# Function: getMonospaceFont()

> **getMonospaceFont**(): `string`

Gets a monospace font family from CSS variables or falls back to a system monospace font stack

## Returns

`string`

Monospace font family string suitable for code editors

---

---
url: /api/ai/functions/getQuerySummary.md
---
[@sqlrooms/ai](../index.md) / getQuerySummary

# Function: getQuerySummary()

> **getQuerySummary**(`connector`, `sqlQuery`): `Promise`<`Record`<`string`, `unknown`>\[] | `null`>

Generates summary statistics for a SQL query result

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `connector` | `DuckDbConnector` | DuckDB connection instance |
| `sqlQuery` | `string` | SQL SELECT query to analyze |

## Returns

`Promise`<`Record`<`string`, `unknown`>\[] | `null`>

Summary statistics as JSON object, or null if the query is not a SELECT statement or if summary generation fails

---

---
url: /api/duckdb-core/functions/getSqlErrorWithPointer.md
---
[@sqlrooms/duckdb-core](../index.md) / getSqlErrorWithPointer

# Function: getSqlErrorWithPointer()

> **getSqlErrorWithPointer**(`query`, `position`): `object`

Function given a query and position finds the line and column of the console.error();

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | The query to parse |
| `position` | `number` | The position of the error |

## Returns

`object`

The line and column of the error

| Name | Type |
| ------ | ------ |
| `line` | `number` |
| `column` | `number` |
| `lineText` | `string` |
| `pointerLine` | `string` |
| `formatted` | `string` |

---

---
url: /api/layout/functions/getVisibleMosaicLayoutPanels.md
---
[@sqlrooms/layout](../index.md) / getVisibleMosaicLayoutPanels

# Function: getVisibleMosaicLayoutPanels()

> **getVisibleMosaicLayoutPanels**(`root`): `string`\[]

## Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `root` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `null` | `DEFAULT_MOSAIC_LAYOUT.nodes` |

## Returns

`string`\[]

---

---
url: /api/monaco-editor/functions/hslToHex.md
---
[@sqlrooms/monaco-editor](../index.md) / hslToHex

# Function: hslToHex()

> **hslToHex**(`h`, `s`, `l`): `string`

Converts HSL color values to Hex color string

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `h` | `number` | Hue (0-360) |
| `s` | `number` | Saturation (0-100) |
| `l` | `number` | Lightness (0-100) |

## Returns

`string`

Hex color string (#RRGGBB)

---

---
url: /api/room-config/functions/isFileDataSource.md
---
[@sqlrooms/room-config](../index.md) / isFileDataSource

# Function: isFileDataSource()

> **isFileDataSource**(`ds`): ds is { tableName: string; type: "file"; fileName: string; loadOptions?: { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; options?: string | Record\<string, unknown> | string\[]; method: "st\_read"; \[key: string]: unknown } | { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; method: "read\_json" | "read\_ndjson" | "read\_parquet" | "read\_csv" | "auto"; \[key: string]: unknown } }

Type guard to check if a data source is a FileDataSource

## Parameters

| Parameter | Type |
| ------ | ------ |
| `ds` | { `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; } |

## Returns

ds is { tableName: string; type: "file"; fileName: string; loadOptions?: { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; options?: string | Record\<string, unknown> | string\[]; method: "st\_read"; \[key: string]: unknown } | { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; method: "read\_json" | "read\_ndjson" | "read\_parquet" | "read\_csv" | "auto"; \[key: string]: unknown } }

---

---
url: /api/room-shell/functions/isFileDataSource.md
---
[@sqlrooms/room-shell](../index.md) / isFileDataSource

# Function: isFileDataSource()

> **isFileDataSource**(`ds`): ds is { tableName: string; type: "file"; fileName: string; loadOptions?: { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; method: "read\_json" | "read\_ndjson" | "read\_parquet" | "read\_csv" | "auto"; \[key: string]: unknown } | { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; options?: string | Record\<string, unknown> | string\[]; method: "st\_read"; \[key: string]: unknown } }

Type guard to check if a data source is a FileDataSource

## Parameters

| Parameter | Type |
| ------ | ------ |
| `ds` | { `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; } |

## Returns

ds is { tableName: string; type: "file"; fileName: string; loadOptions?: { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; method: "read\_json" | "read\_ndjson" | "read\_parquet" | "read\_csv" | "auto"; \[key: string]: unknown } | { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; options?: string | Record\<string, unknown> | string\[]; method: "st\_read"; \[key: string]: unknown } }

---

---
url: /api/room-store/functions/isFileDataSource.md
---
[@sqlrooms/room-store](../index.md) / isFileDataSource

# Function: isFileDataSource()

> **isFileDataSource**(`ds`): ds is { tableName: string; type: "file"; fileName: string; loadOptions?: { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; method: "read\_json" | "read\_ndjson" | "read\_parquet" | "read\_csv" | "auto"; \[key: string]: unknown } | { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; options?: string | Record\<string, unknown> | string\[]; method: "st\_read"; \[key: string]: unknown } }

Type guard to check if a data source is a FileDataSource

## Parameters

| Parameter | Type |
| ------ | ------ |
| `ds` | { `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; } |

## Returns

ds is { tableName: string; type: "file"; fileName: string; loadOptions?: { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; method: "read\_json" | "read\_ndjson" | "read\_parquet" | "read\_csv" | "auto"; \[key: string]: unknown } | { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; options?: string | Record\<string, unknown> | string\[]; method: "st\_read"; \[key: string]: unknown } }

---

---
url: /api/utils/functions/isMacOS.md
---
[@sqlrooms/utils](../index.md) / isMacOS

# Function: isMacOS()

> **isMacOS**(): `boolean`

Function to detect if the user is on a Mac device

## Returns

`boolean`

boolean indicating if the user is on a Mac

---

---
url: /api/monaco-editor/functions/isMonacoLoaderConfigured.md
---
[@sqlrooms/monaco-editor](../index.md) / isMonacoLoaderConfigured

# Function: isMonacoLoaderConfigured()

> **isMonacoLoaderConfigured**(): `boolean`

Checks if the Monaco loader has been configured for bundling.
When true, Monaco is bundled with the app instead of loaded from CDN.

## Returns

`boolean`

---

---
url: /api/layout-config/functions/isMosaicLayoutParent.md
---
[@sqlrooms/layout-config](../index.md) / isMosaicLayoutParent

# Function: isMosaicLayoutParent()

> **isMosaicLayoutParent**(`node`): `node is MosaicLayoutParent`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `null` | `undefined` |

## Returns

`node is MosaicLayoutParent`

---

---
url: /api/layout/functions/isMosaicLayoutParent.md
---
[@sqlrooms/layout](../index.md) / isMosaicLayoutParent

# Function: isMosaicLayoutParent()

> **isMosaicLayoutParent**(`node`): `node is MosaicLayoutParent`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `null` | `undefined` |

## Returns

`node is MosaicLayoutParent`

---

---
url: /api/room-config/functions/isMosaicLayoutParent.md
---
[@sqlrooms/room-config](../index.md) / isMosaicLayoutParent

# Function: isMosaicLayoutParent()

> **isMosaicLayoutParent**(`node`): `node is MosaicLayoutParent`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `null` | `undefined` |

## Returns

`node is MosaicLayoutParent`

---

---
url: /api/room-shell/functions/isMosaicLayoutParent.md
---
[@sqlrooms/room-shell](../index.md) / isMosaicLayoutParent

# Function: isMosaicLayoutParent()

> **isMosaicLayoutParent**(`node`): `node is MosaicLayoutParent`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `null` | `undefined` |

## Returns

`node is MosaicLayoutParent`

---

---
url: /api/room-store/functions/isMosaicLayoutParent.md
---
[@sqlrooms/room-store](../index.md) / isMosaicLayoutParent

# Function: isMosaicLayoutParent()

> **isMosaicLayoutParent**(`node`): `node is MosaicLayoutParent`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `null` | `undefined` |

## Returns

`node is MosaicLayoutParent`

---

---
url: /api/duckdb-core/functions/isNumericDuckType.md
---
[@sqlrooms/duckdb-core](../index.md) / isNumericDuckType

# Function: isNumericDuckType()

> **isNumericDuckType**(`type`): `boolean`

Checks if a DuckDB type string represents a numeric type.
Includes INTEGER, DECIMAL, FLOAT, REAL, and DOUBLE types.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `type` | `string` | The DuckDB type string to check |

## Returns

`boolean`

True if the type is numeric, false otherwise

## Example

```ts
isNumericDuckType('INTEGER') // Returns true
isNumericDuckType('VARCHAR') // Returns false
```

---

---
url: /api/duckdb-core/functions/isQualifiedTableName.md
---
[@sqlrooms/duckdb-core](../index.md) / isQualifiedTableName

# Function: isQualifiedTableName()

> **isQualifiedTableName**(`tableName`): `tableName is QualifiedTableName`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `tableName` | `string` | [`QualifiedTableName`](../type-aliases/QualifiedTableName.md) |

## Returns

`tableName is QualifiedTableName`

---

---
url: /api/duckdb/functions/isQualifiedTableName.md
---
[@sqlrooms/duckdb](../index.md) / isQualifiedTableName

# Function: isQualifiedTableName()

> **isQualifiedTableName**(`tableName`): `tableName is QualifiedTableName`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `tableName` | `string` | [`QualifiedTableName`](../type-aliases/QualifiedTableName.md) |

## Returns

`tableName is QualifiedTableName`

---

---
url: /api/room-shell/functions/isRoomSliceWithDestroy.md
---
[@sqlrooms/room-shell](../index.md) / isRoomSliceWithDestroy

# Function: isRoomSliceWithDestroy()

> **isRoomSliceWithDestroy**(`slice`): `slice is Required<Pick<SliceFunctions, "destroy">>`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `slice` | `unknown` |

## Returns

`slice is Required<Pick<SliceFunctions, "destroy">>`

---

---
url: /api/room-store/functions/isRoomSliceWithDestroy.md
---
[@sqlrooms/room-store](../index.md) / isRoomSliceWithDestroy

# Function: isRoomSliceWithDestroy()

> **isRoomSliceWithDestroy**(`slice`): `slice is Required<Pick<SliceFunctions, "destroy">>`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `slice` | `unknown` |

## Returns

`slice is Required<Pick<SliceFunctions, "destroy">>`

---

---
url: /api/room-shell/functions/isRoomSliceWithInitialize.md
---
[@sqlrooms/room-shell](../index.md) / isRoomSliceWithInitialize

# Function: isRoomSliceWithInitialize()

> **isRoomSliceWithInitialize**(`slice`): `slice is Required<Pick<SliceFunctions, "initialize">>`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `slice` | `unknown` |

## Returns

`slice is Required<Pick<SliceFunctions, "initialize">>`

---

---
url: /api/room-store/functions/isRoomSliceWithInitialize.md
---
[@sqlrooms/room-store](../index.md) / isRoomSliceWithInitialize

# Function: isRoomSliceWithInitialize()

> **isRoomSliceWithInitialize**(`slice`): `slice is Required<Pick<SliceFunctions, "initialize">>`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `slice` | `unknown` |

## Returns

`slice is Required<Pick<SliceFunctions, "initialize">>`

---

---
url: /api/room-config/functions/isSpatialLoadFileOptions.md
---
[@sqlrooms/room-config](../index.md) / isSpatialLoadFileOptions

# Function: isSpatialLoadFileOptions()

> **isSpatialLoadFileOptions**(`options`): options is { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; options?: string | Record\<string, unknown> | string\[]; method: "st\_read"; \[key: string]: unknown }

Type guard to check if options are spatial load file options

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | The options to check |

## Returns

options is { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; options?: string | Record\<string, unknown> | string\[]; method: "st\_read"; \[key: string]: unknown }

True if options are spatial load file options

---

---
url: /api/room-config/functions/isSqlQueryDataSource.md
---
[@sqlrooms/room-config](../index.md) / isSqlQueryDataSource

# Function: isSqlQueryDataSource()

> **isSqlQueryDataSource**(`ds`): `ds is { tableName: string; type: "sql"; sqlQuery: string }`

Type guard to check if a data source is a SqlQueryDataSource

## Parameters

| Parameter | Type |
| ------ | ------ |
| `ds` | { `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; } |

## Returns

`ds is { tableName: string; type: "sql"; sqlQuery: string }`

---

---
url: /api/room-shell/functions/isSqlQueryDataSource.md
---
[@sqlrooms/room-shell](../index.md) / isSqlQueryDataSource

# Function: isSqlQueryDataSource()

> **isSqlQueryDataSource**(`ds`): `ds is { tableName: string; type: "sql"; sqlQuery: string }`

Type guard to check if a data source is a SqlQueryDataSource

## Parameters

| Parameter | Type |
| ------ | ------ |
| `ds` | { `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; } |

## Returns

`ds is { tableName: string; type: "sql"; sqlQuery: string }`

---

---
url: /api/room-store/functions/isSqlQueryDataSource.md
---
[@sqlrooms/room-store](../index.md) / isSqlQueryDataSource

# Function: isSqlQueryDataSource()

> **isSqlQueryDataSource**(`ds`): `ds is { tableName: string; type: "sql"; sqlQuery: string }`

Type guard to check if a data source is a SqlQueryDataSource

## Parameters

| Parameter | Type |
| ------ | ------ |
| `ds` | { `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; } |

## Returns

`ds is { tableName: string; type: "sql"; sqlQuery: string }`

---

---
url: /api/room-config/functions/isUrlDataSource.md
---
[@sqlrooms/room-config](../index.md) / isUrlDataSource

# Function: isUrlDataSource()

> **isUrlDataSource**(`ds`): ds is { tableName: string; type: "url"; url: string; loadOptions?: { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; options?: string | Record\<string, unknown> | string\[]; method: "st\_read"; \[key: string]: unknown } | { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; method: "read\_json" | "read\_ndjson" | "read\_parquet" | "read\_csv" | "auto"; \[key: string]: unknown }; httpMethod?: string; headers?: Record\<string, string> }

Type guard to check if a data source is a UrlDataSource

## Parameters

| Parameter | Type |
| ------ | ------ |
| `ds` | { `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; } |

## Returns

ds is { tableName: string; type: "url"; url: string; loadOptions?: { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; options?: string | Record\<string, unknown> | string\[]; method: "st\_read"; \[key: string]: unknown } | { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; method: "read\_json" | "read\_ndjson" | "read\_parquet" | "read\_csv" | "auto"; \[key: string]: unknown }; httpMethod?: string; headers?: Record\<string, string> }

---

---
url: /api/room-shell/functions/isUrlDataSource.md
---
[@sqlrooms/room-shell](../index.md) / isUrlDataSource

# Function: isUrlDataSource()

> **isUrlDataSource**(`ds`): ds is { tableName: string; type: "url"; url: string; loadOptions?: { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; method: "read\_json" | "read\_ndjson" | "read\_parquet" | "read\_csv" | "auto"; \[key: string]: unknown } | { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; options?: string | Record\<string, unknown> | string\[]; method: "st\_read"; \[key: string]: unknown }; httpMethod?: string; headers?: Record\<string, string> }

Type guard to check if a data source is a UrlDataSource

## Parameters

| Parameter | Type |
| ------ | ------ |
| `ds` | { `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; } |

## Returns

ds is { tableName: string; type: "url"; url: string; loadOptions?: { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; method: "read\_json" | "read\_ndjson" | "read\_parquet" | "read\_csv" | "auto"; \[key: string]: unknown } | { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; options?: string | Record\<string, unknown> | string\[]; method: "st\_read"; \[key: string]: unknown }; httpMethod?: string; headers?: Record\<string, string> }

---

---
url: /api/room-store/functions/isUrlDataSource.md
---
[@sqlrooms/room-store](../index.md) / isUrlDataSource

# Function: isUrlDataSource()

> **isUrlDataSource**(`ds`): ds is { tableName: string; type: "url"; url: string; loadOptions?: { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; method: "read\_json" | "read\_ndjson" | "read\_parquet" | "read\_csv" | "auto"; \[key: string]: unknown } | { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; options?: string | Record\<string, unknown> | string\[]; method: "st\_read"; \[key: string]: unknown }; httpMethod?: string; headers?: Record\<string, string> }

Type guard to check if a data source is a UrlDataSource

## Parameters

| Parameter | Type |
| ------ | ------ |
| `ds` | { `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; } |

## Returns

ds is { tableName: string; type: "url"; url: string; loadOptions?: { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; method: "read\_json" | "read\_ndjson" | "read\_parquet" | "read\_csv" | "auto"; \[key: string]: unknown } | { schema?: string; select?: string\[]; where?: string; view?: boolean; temp?: boolean; replace?: boolean; options?: string | Record\<string, unknown> | string\[]; method: "st\_read"; \[key: string]: unknown }; httpMethod?: string; headers?: Record\<string, string> }

---

---
url: /api/duckdb/functions/isWasmDuckDbConnector.md
---
[@sqlrooms/duckdb](../index.md) / isWasmDuckDbConnector

# Function: isWasmDuckDbConnector()

> **isWasmDuckDbConnector**(`connector`): `connector is WasmDuckDbConnector`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `connector` | [`DuckDbConnector`](../interfaces/DuckDbConnector.md) |

## Returns

`connector is WasmDuckDbConnector`

---

---
url: /api/motherduck/functions/isWasmMotherDuckDbConnector.md
---
[@sqlrooms/motherduck](../index.md) / isWasmMotherDuckDbConnector

# Function: isWasmMotherDuckDbConnector()

> **isWasmMotherDuckDbConnector**(`connector`): `connector is WasmMotherDuckDbConnector`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `connector` | `DuckDbConnector` |

## Returns

`connector is WasmMotherDuckDbConnector`

---

---
url: /api/duckdb-core/functions/joinStatements.md
---
[@sqlrooms/duckdb-core](../index.md) / joinStatements

# Function: joinStatements()

> **joinStatements**(`precedingStatements`, `lastStatement`): `string`

Joins preceding statements with a (potentially modified) last statement into a single query.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `precedingStatements` | `string`\[] | Statements to execute before the last one |
| `lastStatement` | `string` | The final statement (can be modified, e.g., wrapped in CREATE TABLE) |

## Returns

`string`

A single query string with all statements joined by semicolons

---

---
url: /api/duckdb/functions/joinStatements.md
---
[@sqlrooms/duckdb](../index.md) / joinStatements

# Function: joinStatements()

> **joinStatements**(`precedingStatements`, `lastStatement`): `string`

Joins preceding statements with a (potentially modified) last statement into a single query.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `precedingStatements` | `string`\[] | Statements to execute before the last one |
| `lastStatement` | `string` | The final statement (can be modified, e.g., wrapped in CREATE TABLE) |

## Returns

`string`

A single query string with all statements joined by semicolons

---

---
url: /api/kepler/functions/KeplerAddDataDialog.md
---
[@sqlrooms/kepler](../index.md) / KeplerAddDataDialog

# Function: KeplerAddDataDialog()

> **KeplerAddDataDialog**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`KeplerAddDataDialogProps`](../type-aliases/KeplerAddDataDialogProps.md) |

## Returns

`Element`

---

---
url: /api/kepler/functions/KeplerAddTileSetDialog.md
---
[@sqlrooms/kepler](../index.md) / KeplerAddTileSetDialog

# Function: KeplerAddTileSetDialog()

> **KeplerAddTileSetDialog**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `tileSetModal`: `Pick`<`UseDisclosureReturnValue`, `"isOpen"` | `"onClose"`>; `loadTileSet`: [`LoadTileSet`](../type-aliases/LoadTileSet.md); } |
| `__namedParameters.tileSetModal` | `Pick`<`UseDisclosureReturnValue`, `"isOpen"` | `"onClose"`> |
| `__namedParameters.loadTileSet` | [`LoadTileSet`](../type-aliases/LoadTileSet.md) |

## Returns

`Element`

---

---
url: /api/kepler/functions/KeplerS3Browser.md
---
[@sqlrooms/kepler](../index.md) / KeplerS3Browser

# Function: KeplerS3Browser()

> **KeplerS3Browser**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`KeplerS3BrowserProps`](../type-aliases/KeplerS3BrowserProps.md) |

## Returns

`Element`

---

---
url: /api/recharts/functions/Label.md
---
[@sqlrooms/recharts](../index.md) / Label

# Function: Label()

> **Label**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`LabelProps`](../type-aliases/LabelProps.md) |

## Returns

`Element`

---

---
url: /api/recharts/functions/LabelList.md
---
[@sqlrooms/recharts](../index.md) / LabelList

# Function: LabelList()

> **LabelList**<`T`>(`__namedParameters`): `Element`

## Type Parameters

| Type Parameter |
| ------ |
| `T` *extends* `Data` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`LabelListProps`](../type-aliases/LabelListProps.md)<`T`> |

## Returns

`Element`

---

---
url: /api/s3-utils/functions/listFilesAndDirectoriesWithPrefix.md
---
[@sqlrooms/s3-utils](../index.md) / listFilesAndDirectoriesWithPrefix

# Function: listFilesAndDirectoriesWithPrefix()

> **listFilesAndDirectoriesWithPrefix**(`S3`, `bucket`, `prefix?`): `Promise`<({ `key`: `string`; `isDirectory`: `true`; } | { `key`: `string`; `isDirectory`: `false`; `lastModified?`: `Date`; `size?`: `number`; `contentType?`: `string`; })\[]>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `S3` | `S3Client` |
| `bucket` | `string` |
| `prefix?` | `string` |

## Returns

`Promise`<({ `key`: `string`; `isDirectory`: `true`; } | { `key`: `string`; `isDirectory`: `false`; `lastModified?`: `Date`; `size?`: `number`; `contentType?`: `string`; })\[]>

---

---
url: /api/duckdb-core/functions/literalToSQL.md
---
[@sqlrooms/duckdb-core](../index.md) / literalToSQL

# Function: literalToSQL()

> **literalToSQL**(`value`): `string`

Convert a value to a SQL literal.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `value` | `unknown` | The value to convert. |

## Returns

`string`

The SQL literal.

---

---
url: /api/duckdb/functions/literalToSQL.md
---
[@sqlrooms/duckdb](../index.md) / literalToSQL

# Function: literalToSQL()

> **literalToSQL**(`value`): `string`

Convert a value to a SQL literal.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `value` | `unknown` | The value to convert. |

## Returns

`string`

The SQL literal.

---

---
url: /api/duckdb-core/functions/load.md
---
[@sqlrooms/duckdb-core](../index.md) / load

# Function: load()

> **load**(`method`, `tableName`, `fileName`, `options`, `defaults`): `string`

Generic function to load data from a file into a DuckDB table

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `method` | `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"` | `"st_read"` | The DuckDB read method to use (e.g., 'read\_csv', 'read\_json') |
| `tableName` | `string` | Name of the table to create |
| `fileName` | `string` | Path to the input file |
| `options` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options including select, where, view, temp, replace and file-specific options |
| `options.schema?` | `string` | - |
| `options.select?` | `string`\[] | - |
| `options.where?` | `string` | - |
| `options.view?` | `boolean` | - |
| `options.temp?` | `boolean` | - |
| `options.replace?` | `boolean` | - |
| `defaults` | `Record`<`string`, `unknown`> | Default options to merge with provided options |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb/functions/load.md
---
[@sqlrooms/duckdb](../index.md) / load

# Function: load()

> **load**(`method`, `tableName`, `fileName`, `options?`, `defaults?`): `string`

Generic function to load data from a file into a DuckDB table

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `method` | `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"` | `"st_read"` | The DuckDB read method to use (e.g., 'read\_csv', 'read\_json') |
| `tableName` | `string` | Name of the table to create |
| `fileName` | `string` | Path to the input file |
| `options?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options including select, where, view, temp, replace and file-specific options |
| `options.schema?` | `string` | - |
| `options.select?` | `string`\[] | - |
| `options.where?` | `string` | - |
| `options.view?` | `boolean` | - |
| `options.temp?` | `boolean` | - |
| `options.replace?` | `boolean` | - |
| `defaults?` | `Record`<`string`, `unknown`> | Default options to merge with provided options |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb-core/functions/loadCSV.md
---
[@sqlrooms/duckdb-core](../index.md) / loadCSV

# Function: loadCSV()

> **loadCSV**(`tableName`, `fileName`, `options?`): `string`

Load data from a CSV file into a DuckDB table

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Name of the table to create |
| `fileName` | `string` | Path to the CSV file |
| `options?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options |
| `options.schema?` | `string` | - |
| `options.select?` | `string`\[] | - |
| `options.where?` | `string` | - |
| `options.view?` | `boolean` | - |
| `options.temp?` | `boolean` | - |
| `options.replace?` | `boolean` | - |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb/functions/loadCSV.md
---
[@sqlrooms/duckdb](../index.md) / loadCSV

# Function: loadCSV()

> **loadCSV**(`tableName`, `fileName`, `options?`): `string`

Load data from a CSV file into a DuckDB table

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Name of the table to create |
| `fileName` | `string` | Path to the CSV file |
| `options?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options |
| `options.schema?` | `string` | - |
| `options.select?` | `string`\[] | - |
| `options.where?` | `string` | - |
| `options.view?` | `boolean` | - |
| `options.temp?` | `boolean` | - |
| `options.replace?` | `boolean` | - |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb-core/functions/loadJSON.md
---
[@sqlrooms/duckdb-core](../index.md) / loadJSON

# Function: loadJSON()

> **loadJSON**(`tableName`, `fileName`, `options?`): `string`

Load data from a JSON file into a DuckDB table

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Name of the table to create |
| `fileName` | `string` | Path to the JSON file |
| `options?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options |
| `options.schema?` | `string` | - |
| `options.select?` | `string`\[] | - |
| `options.where?` | `string` | - |
| `options.view?` | `boolean` | - |
| `options.temp?` | `boolean` | - |
| `options.replace?` | `boolean` | - |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb/functions/loadJSON.md
---
[@sqlrooms/duckdb](../index.md) / loadJSON

# Function: loadJSON()

> **loadJSON**(`tableName`, `fileName`, `options?`): `string`

Load data from a JSON file into a DuckDB table

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Name of the table to create |
| `fileName` | `string` | Path to the JSON file |
| `options?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options |
| `options.schema?` | `string` | - |
| `options.select?` | `string`\[] | - |
| `options.where?` | `string` | - |
| `options.view?` | `boolean` | - |
| `options.temp?` | `boolean` | - |
| `options.replace?` | `boolean` | - |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb-core/functions/loadObjects.md
---
[@sqlrooms/duckdb-core](../index.md) / loadObjects

# Function: loadObjects()

> **loadObjects**(`tableName`, `data`, `options`): `string`

Load JavaScript objects directly into a DuckDB table

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Name of the table to create |
| `data` | `Record`<`string`, `unknown`>\[] | Array of objects to load |
| `options` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options |
| `options.schema?` | `string` | - |
| `options.select?` | `string`\[] | - |
| `options.where?` | `string` | - |
| `options.view?` | `boolean` | - |
| `options.temp?` | `boolean` | - |
| `options.replace?` | `boolean` | - |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb/functions/loadObjects.md
---
[@sqlrooms/duckdb](../index.md) / loadObjects

# Function: loadObjects()

> **loadObjects**(`tableName`, `data`, `options?`): `string`

Load JavaScript objects directly into a DuckDB table

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Name of the table to create |
| `data` | `Record`<`string`, `unknown`>\[] | Array of objects to load |
| `options?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options |
| `options.schema?` | `string` | - |
| `options.select?` | `string`\[] | - |
| `options.where?` | `string` | - |
| `options.view?` | `boolean` | - |
| `options.temp?` | `boolean` | - |
| `options.replace?` | `boolean` | - |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb-core/functions/loadParquet.md
---
[@sqlrooms/duckdb-core](../index.md) / loadParquet

# Function: loadParquet()

> **loadParquet**(`tableName`, `fileName`, `options?`): `string`

Load data from a Parquet file into a DuckDB table

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Name of the table to create |
| `fileName` | `string` | Path to the Parquet file |
| `options?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options |
| `options.schema?` | `string` | - |
| `options.select?` | `string`\[] | - |
| `options.where?` | `string` | - |
| `options.view?` | `boolean` | - |
| `options.temp?` | `boolean` | - |
| `options.replace?` | `boolean` | - |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb/functions/loadParquet.md
---
[@sqlrooms/duckdb](../index.md) / loadParquet

# Function: loadParquet()

> **loadParquet**(`tableName`, `fileName`, `options?`): `string`

Load data from a Parquet file into a DuckDB table

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Name of the table to create |
| `fileName` | `string` | Path to the Parquet file |
| `options?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options |
| `options.schema?` | `string` | - |
| `options.select?` | `string`\[] | - |
| `options.where?` | `string` | - |
| `options.view?` | `boolean` | - |
| `options.temp?` | `boolean` | - |
| `options.replace?` | `boolean` | - |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb-core/functions/loadSpatial.md
---
[@sqlrooms/duckdb-core](../index.md) / loadSpatial

# Function: loadSpatial()

> **loadSpatial**(`tableName`, `fileName`, `options`): `string`

Load geometry data within a spatial file format.
This method requires that the DuckDB spatial extension is loaded.
Supports GeoJSON, TopoJSON, and other common spatial formats.
For TopoJSON, set the layer option to indicate the feature to extract.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Name of the table to create |
| `fileName` | `string` | Path to the spatial data file |
| `options` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; } | Load options including spatial-specific options |
| `options.schema?` | `string` | - |
| `options.select?` | `string`\[] | - |
| `options.where?` | `string` | - |
| `options.view?` | `boolean` | - |
| `options.temp?` | `boolean` | - |
| `options.replace?` | `boolean` | - |
| `options.options?` | `string` | `Record`<`string`, `unknown`> | `string`\[] | - |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb/functions/loadSpatial.md
---
[@sqlrooms/duckdb](../index.md) / loadSpatial

# Function: loadSpatial()

> **loadSpatial**(`tableName`, `fileName`, `options?`): `string`

Load geometry data within a spatial file format.
This method requires that the DuckDB spatial extension is loaded.
Supports GeoJSON, TopoJSON, and other common spatial formats.
For TopoJSON, set the layer option to indicate the feature to extract.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Name of the table to create |
| `fileName` | `string` | Path to the spatial data file |
| `options?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; } | Load options including spatial-specific options |
| `options.schema?` | `string` | - |
| `options.select?` | `string`\[] | - |
| `options.where?` | `string` | - |
| `options.view?` | `boolean` | - |
| `options.temp?` | `boolean` | - |
| `options.replace?` | `boolean` | - |
| `options.options?` | `string` | `Record`<`string`, `unknown`> | `string`\[] | - |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb-core/functions/makeLimitQuery.md
---
[@sqlrooms/duckdb-core](../index.md) / makeLimitQuery

# Function: makeLimitQuery()

> **makeLimitQuery**(`query`, `options`): `string`

Make a limit query from a query and a limit.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | The SELECT query to make limited. |
| `options` | { `limit?`: `number`; `offset?`: `number`; `sanitize?`: `boolean`; } | The options for the limit query. |
| `options.limit?` | `number` | The number of rows to limit the query to. |
| `options.offset?` | `number` | The number of rows to offset the query by. |
| `options.sanitize?` | `boolean` | Whether to sanitize the query. |

## Returns

`string`

The limited query.

---

---
url: /api/duckdb/functions/makeLimitQuery.md
---
[@sqlrooms/duckdb](../index.md) / makeLimitQuery

# Function: makeLimitQuery()

> **makeLimitQuery**(`query`, `options?`): `string`

Make a limit query from a query and a limit.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | The SELECT query to make limited. |
| `options?` | { `limit?`: `number`; `offset?`: `number`; `sanitize?`: `boolean`; } | The options for the limit query. |
| `options.limit?` | `number` | The number of rows to limit the query to. |
| `options.offset?` | `number` | The number of rows to offset the query by. |
| `options.sanitize?` | `boolean` | Whether to sanitize the query. |

## Returns

`string`

The limited query.

---

---
url: /api/layout/functions/makeMosaicStack.md
---
[@sqlrooms/layout](../index.md) / makeMosaicStack

# Function: makeMosaicStack()

> **makeMosaicStack**(`direction`, `children`): `MosaicNode`<`string`> | `null`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `direction` | `MosaicDirection` |
| `children` | `object`\[] |

## Returns

`MosaicNode`<`string`> | `null`

---

---
url: /api/data-table/functions/makePagedQuery.md
---
[@sqlrooms/data-table](../index.md) / makePagedQuery

# Function: makePagedQuery()

> **makePagedQuery**(`query`, `sorting`, `pagination`): `string`

Make a paged query from a query and pagination/sorting state.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | The query to make paged. |
| `sorting` | `SortingState` | The sorting state. |
| `pagination` | `PaginationState` | The pagination state. |

## Returns

`string`

The paged query.

---

---
url: /api/duckdb-core/functions/makeQualifiedTableName.md
---
[@sqlrooms/duckdb-core](../index.md) / makeQualifiedTableName

# Function: makeQualifiedTableName()

> **makeQualifiedTableName**(`table`): `object`

Get a qualified table name from a table name, schema, and database.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `table` | [`QualifiedTableName`](../type-aliases/QualifiedTableName.md) | The name of the table. |

## Returns

`object`

The qualified table name.

| Name | Type |
| ------ | ------ |
| `database` | `string` | `undefined` |
| `schema` | `string` | `undefined` |
| `table` | `string` |
| `toString()` | () => `string` |

---

---
url: /api/duckdb/functions/makeQualifiedTableName.md
---
[@sqlrooms/duckdb](../index.md) / makeQualifiedTableName

# Function: makeQualifiedTableName()

> **makeQualifiedTableName**(`table`): `object`

Get a qualified table name from a table name, schema, and database.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `table` | [`QualifiedTableName`](../type-aliases/QualifiedTableName.md) | The name of the table. |

## Returns

`object`

The qualified table name.

| Name | Type |
| ------ | ------ |
| `database` | `string` | `undefined` |
| `schema` | `string` | `undefined` |
| `table` | `string` |
| `toString()` | () => `string` |

---

---
url: /api/utils/functions/memoizeOnce.md
---
[@sqlrooms/utils](../index.md) / memoizeOnce

# Function: memoizeOnce()

> **memoizeOnce**<`TArgs`, `TReturn`>(`fn`): (...`args`) => `TReturn`

Creates a memoized version of a function that caches only the last result.
The cache is invalidated when any of the arguments change.

This is useful for expensive operations that are likely to be called
multiple times with the same arguments, like database queries or API calls.

## Type Parameters

| Type Parameter |
| ------ |
| `TArgs` *extends* readonly `unknown`\[] |
| `TReturn` |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `fn` | (...`args`) => `TReturn` | The function to memoize |

## Returns

A memoized version of the function

> (...`args`): `TReturn`

### Parameters

| Parameter | Type |
| ------ | ------ |
| ...`args` | `TArgs` |

### Returns

`TReturn`

## Example

```ts
const expensiveQuery = async (userId: string, limit: number) => {
  return await database.query(`SELECT * FROM users WHERE id = ? LIMIT ?`, [userId, limit]);
};

const memoizedQuery = memoizeOnce(expensiveQuery);

// First call executes the function
const result1 = await memoizedQuery("123", 10);

// Second call with same arguments returns cached result
const result2 = await memoizedQuery("123", 10); // Uses cache

// Call with different arguments invalidates cache and executes function
const result3 = await memoizedQuery("456", 10); // Executes function
```

---

---
url: /api/ui/functions/MenubarGroup.md
---
[@sqlrooms/ui](../index.md) / MenubarGroup

# Function: MenubarGroup()

> **MenubarGroup**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `MenubarGroupProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/MenubarMenu.md
---
[@sqlrooms/ui](../index.md) / MenubarMenu

# Function: MenubarMenu()

> **MenubarMenu**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `MenubarMenuProps` & `object` |

## Returns

`Element`

---

---
url: /api/ui/functions/MenubarPortal.md
---
[@sqlrooms/ui](../index.md) / MenubarPortal

# Function: MenubarPortal()

> **MenubarPortal**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `MenubarPortalProps` |

## Returns

`Element`

---

---
url: /api/ui/functions/MenubarRadioGroup.md
---
[@sqlrooms/ui](../index.md) / MenubarRadioGroup

# Function: MenubarRadioGroup()

> **MenubarRadioGroup**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `MenubarRadioGroupProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/MenubarShortcut.md
---
[@sqlrooms/ui](../index.md) / MenubarShortcut

# Function: MenubarShortcut()

> **MenubarShortcut**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLSpanElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/MenubarSub.md
---
[@sqlrooms/ui](../index.md) / MenubarSub

# Function: MenubarSub()

> **MenubarSub**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `MenubarSubProps` |

## Returns

`Element`

---

---
url: /api/utils/functions/opacifyHex.md
---
[@sqlrooms/utils](../index.md) / opacifyHex

# Function: opacifyHex()

> **opacifyHex**(`hexCode`, `opacity`): `string`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `hexCode` | `string` |
| `opacity` | `number` |

## Returns

`string`

---

---
url: /api/ui/functions/Pagination.md
---
[@sqlrooms/ui](../index.md) / Pagination

# Function: Pagination()

> **Pagination**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DetailedHTMLProps`<`HTMLAttributes`<`HTMLElement`>> |

## Returns

`Element`

---

---
url: /api/ui/functions/PaginationEllipsis.md
---
[@sqlrooms/ui](../index.md) / PaginationEllipsis

# Function: PaginationEllipsis()

> **PaginationEllipsis**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DetailedHTMLProps`<`HTMLAttributes`<`HTMLSpanElement`>> |

## Returns

`Element`

---

---
url: /api/ui/functions/PaginationLink.md
---
[@sqlrooms/ui](../index.md) / PaginationLink

# Function: PaginationLink()

> **PaginationLink**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `PaginationLinkProps` |

## Returns

`Element`

---

---
url: /api/ui/functions/PaginationNext.md
---
[@sqlrooms/ui](../index.md) / PaginationNext

# Function: PaginationNext()

> **PaginationNext**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `object` & `Pick`<[`ButtonProps`](../interfaces/ButtonProps.md), `"size"`> & `ClassAttributes`<`HTMLAnchorElement`> & `AnchorHTMLAttributes`<`HTMLAnchorElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/PaginationPrevious.md
---
[@sqlrooms/ui](../index.md) / PaginationPrevious

# Function: PaginationPrevious()

> **PaginationPrevious**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `object` & `Pick`<[`ButtonProps`](../interfaces/ButtonProps.md), `"size"`> & `ClassAttributes`<`HTMLAnchorElement`> & `AnchorHTMLAttributes`<`HTMLAnchorElement`> |

## Returns

`Element`

---

---
url: /api/room-shell/functions/persistSliceConfigs.md
---
[@sqlrooms/room-shell](../index.md) / persistSliceConfigs

# Function: persistSliceConfigs()

> **persistSliceConfigs**<`S`>(`options`, `stateCreator`): [`StateCreator`](../type-aliases/StateCreator.md)<`S`>

Wraps a state creator with Zustand's persist middleware and automatically
handles slice config serialization/deserialization using Zod schemas.

This helper combines persist functionality with automatic `partialize` and `merge`
functions generated from your slice config schemas, eliminating manual type casting.

## Type Parameters

| Type Parameter |
| ------ |
| `S` |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | `object` & `Omit`<`PersistOptions`<`S`, `S`, `unknown`>, `"partialize"` | `"merge"`> | Persist configuration object |
| `stateCreator` | [`StateCreator`](../type-aliases/StateCreator.md)<`S`> | Zustand state creator function |

## Returns

[`StateCreator`](../type-aliases/StateCreator.md)<`S`>

Properly typed StateCreator with persist middleware applied

## See

[Zustand persist middleware docs](https://zustand.docs.pmnd.rs/middlewares/persist)

## Examples

Basic usage:

```ts
export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
  persistSliceConfigs(
    {
      name: 'my-app-state-storage',
      sliceConfigSchemas: {
        room: BaseRoomConfig,
        layout: LayoutConfig,
        sqlEditor: SqlEditorSliceConfig,
      },
    },
    (set, get, store) => ({
      ...createRoomSlice()(set, get, store),
      ...createLayoutSlice({...})(set, get, store),
    })
  )
);
```

With custom partialize/merge for additional state:

```ts
export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
  persistSliceConfigs(
    {
      name: 'my-app-state-storage',
      sliceConfigSchemas: {
        room: BaseRoomConfig,
        layout: LayoutConfig,
      },
      partialize: (state) => ({
        apiKey: state.apiKey, // Persist additional field
        ...createPersistHelpers({room: BaseRoomConfig, layout: LayoutConfig}).partialize(state),
      }),
      merge: (persisted, current) => ({
        ...createPersistHelpers({room: BaseRoomConfig, layout: LayoutConfig}).merge(persisted, current),
        apiKey: persisted.apiKey, // Restore additional field
      }),
    },
    (set, get, store) => ({...})
  )
);
```

---

---
url: /api/room-store/functions/persistSliceConfigs.md
---
[@sqlrooms/room-store](../index.md) / persistSliceConfigs

# Function: persistSliceConfigs()

> **persistSliceConfigs**<`S`>(`options`, `stateCreator`): [`StateCreator`](../type-aliases/StateCreator.md)<`S`>

Wraps a state creator with Zustand's persist middleware and automatically
handles slice config serialization/deserialization using Zod schemas.

This helper combines persist functionality with automatic `partialize` and `merge`
functions generated from your slice config schemas, eliminating manual type casting.

## Type Parameters

| Type Parameter |
| ------ |
| `S` |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | `object` & `Omit`<`PersistOptions`<`S`, `S`, `unknown`>, `"partialize"` | `"merge"`> | Persist configuration object |
| `stateCreator` | [`StateCreator`](../type-aliases/StateCreator.md)<`S`> | Zustand state creator function |

## Returns

[`StateCreator`](../type-aliases/StateCreator.md)<`S`>

Properly typed StateCreator with persist middleware applied

## See

[Zustand persist middleware docs](https://zustand.docs.pmnd.rs/middlewares/persist)

## Examples

Basic usage:

```ts
export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
  persistSliceConfigs(
    {
      name: 'my-app-state-storage',
      sliceConfigSchemas: {
        room: BaseRoomConfig,
        layout: LayoutConfig,
        sqlEditor: SqlEditorSliceConfig,
      },
    },
    (set, get, store) => ({
      ...createRoomSlice()(set, get, store),
      ...createLayoutSlice({...})(set, get, store),
    })
  )
);
```

With custom partialize/merge for additional state:

```ts
export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
  persistSliceConfigs(
    {
      name: 'my-app-state-storage',
      sliceConfigSchemas: {
        room: BaseRoomConfig,
        layout: LayoutConfig,
      },
      partialize: (state) => ({
        apiKey: state.apiKey, // Persist additional field
        ...createPersistHelpers({room: BaseRoomConfig, layout: LayoutConfig}).partialize(state),
      }),
      merge: (persisted, current) => ({
        ...createPersistHelpers({room: BaseRoomConfig, layout: LayoutConfig}).merge(persisted, current),
        apiKey: persisted.apiKey, // Restore additional field
      }),
    },
    (set, get, store) => ({...})
  )
);
```

---

---
url: /api/utils/functions/postData.md
---
[@sqlrooms/utils](../index.md) / postData

# Function: postData()

> **postData**(`params`): `Promise`<`any`>

Posts data to a specified URL endpoint using fetch API

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `params` | { `url`: `string`; `data?`: `Record`<`string`, `unknown`>; } | The parameters for the POST request |
| `params.url` | `string` | The URL to send the POST request to |
| `params.data?` | `Record`<`string`, `unknown`> | Optional data to be sent in the request body |

## Returns

`Promise`<`any`>

The parsed JSON response from the server

## Throws

If the response is not ok, throws an error with the status message or error details

---

---
url: /api/ai-core/functions/processAgentStream.md
---
[@sqlrooms/ai-core](../index.md) / processAgentStream

# Function: processAgentStream()

> **processAgentStream**(`agentResult`, `store`, `parentToolCallId`): `Promise`<`string`>

Processes an agent stream result, tracking tool calls and forwarding chunks to the writer

This function handles:

* Tracking all tool calls made by the agent
* Updating session additional data for UI progress rendering
* Forwarding text deltas and tool outputs to the stream writer
* Returning the final text result

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `agentResult` | [`AgentStreamResult`](../interfaces/AgentStreamResult.md) | The stream result from agent.stream() |
| `store` | `StoreApi`<[`AiSliceState`](../type-aliases/AiSliceState.md)> | The store containing AiSliceState |
| `parentToolCallId` | `string` | The tool call ID of the parent agent tool (for storing additional data) |

## Returns

`Promise`<`string`>

The final text output from the agent

---

---
url: /api/ai/functions/processAgentStream.md
---
[@sqlrooms/ai](../index.md) / processAgentStream

# Function: processAgentStream()

> **processAgentStream**(`agentResult`, `store`, `parentToolCallId`): `Promise`<`string`>

Processes an agent stream result, tracking tool calls and forwarding chunks to the writer

This function handles:

* Tracking all tool calls made by the agent
* Updating session additional data for UI progress rendering
* Forwarding text deltas and tool outputs to the stream writer
* Returning the final text result

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `agentResult` | [`AgentStreamResult`](../interfaces/AgentStreamResult.md) | The stream result from agent.stream() |
| `store` | `StoreApi`<[`AiSliceState`](../type-aliases/AiSliceState.md)> | The store containing AiSliceState |
| `parentToolCallId` | `string` | The tool call ID of the parent agent tool (for storing additional data) |

## Returns

`Promise`<`string`>

The final text output from the agent

---

---
url: /api/ai/functions/QueryToolResult.md
---
[@sqlrooms/ai](../index.md) / QueryToolResult

# Function: QueryToolResult()

> **QueryToolResult**(`props`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `QueryToolResultProps` |

## Returns

`Element`

---

---
url: /api/ui/functions/reducer.md
---
[@sqlrooms/ui](../index.md) / reducer

# Function: reducer()

> **reducer**(`state`, `action`): `State`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `State` |
| `action` | `Action` |

## Returns

`State`

---

---
url: /api/layout/functions/removeMosaicNodeByKey.md
---
[@sqlrooms/layout](../index.md) / removeMosaicNodeByKey

# Function: removeMosaicNodeByKey()

> **removeMosaicNodeByKey**(`root`, `key`): { `success`: `true`; `nextTree`: `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md); } | { `success`: `false`; }

## Parameters

| Parameter | Type |
| ------ | ------ |
| `root` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `null` | `undefined` |
| `key` | `string` |

## Returns

{ `success`: `true`; `nextTree`: `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md); } | { `success`: `false`; }

---

---
url: /api/ui/functions/ResizableHandle.md
---
[@sqlrooms/ui](../index.md) / ResizableHandle

# Function: ResizableHandle()

> **ResizableHandle**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `Omit`<`HTMLAttributes`\<keyof `HTMLElementTagNameMap`>, `"id"` | `"onFocus"` | `"onBlur"` | `"onClick"` | `"onPointerDown"` | `"onPointerUp"`> & `object` & `object` & `object` |

## Returns

`Element`

---

---
url: /api/ui/functions/ResizablePanelGroup.md
---
[@sqlrooms/ui](../index.md) / ResizablePanelGroup

# Function: ResizablePanelGroup()

> **ResizablePanelGroup**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `Omit`<`HTMLAttributes`\<keyof `HTMLElementTagNameMap`>, `"id"`> & `object` & `object` & `RefAttributes`<`ImperativePanelGroupHandle`> |

## Returns

`Element`

---

---
url: /api/room-shell/functions/RoomStateProvider.md
---
[@sqlrooms/room-shell](../index.md) / RoomStateProvider

# Function: RoomStateProvider()

> **RoomStateProvider**<`RS`>(`__namedParameters`): `ReactNode`

## Type Parameters

| Type Parameter |
| ------ |
| `RS` *extends* [`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md) |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`RoomStateProviderProps`](../type-aliases/RoomStateProviderProps.md)<`RS`> |

## Returns

`ReactNode`

---

---
url: /api/room-store/functions/RoomStateProvider.md
---
[@sqlrooms/room-store](../index.md) / RoomStateProvider

# Function: RoomStateProvider()

> **RoomStateProvider**<`RS`>(`__namedParameters`): `ReactNode`

## Type Parameters

| Type Parameter |
| ------ |
| `RS` *extends* [`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md) |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`RoomStateProviderProps`](../type-aliases/RoomStateProviderProps.md)<`RS`> |

## Returns

`ReactNode`

---

---
url: /api/s3-browser/functions/S3CredentialsForm.md
---
[@sqlrooms/s3-browser](../index.md) / S3CredentialsForm

# Function: S3CredentialsForm()

> **S3CredentialsForm**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `S3CredentialsFormProps` |

## Returns

`Element`

---

---
url: /api/utils/functions/safeJsonParse.md
---
[@sqlrooms/utils](../index.md) / safeJsonParse

# Function: safeJsonParse()

> **safeJsonParse**<`T`>(`json`): `T` | `undefined`

Parse a JSON string and return the parsed object.
If the string is not valid JSON, return undefined.

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `json` | `string` | `null` | `undefined` | The JSON string to parse. |

## Returns

`T` | `undefined`

The parsed object or undefined if the string is not valid JSON.

---

---
url: /api/duckdb-core/functions/sanitizeQuery.md
---
[@sqlrooms/duckdb-core](../index.md) / sanitizeQuery

# Function: sanitizeQuery()

> **sanitizeQuery**(`query`): `string`

Sanitizes a SQL query by removing trailing semicolons, comments, and normalizing whitespace

## Parameters

| Parameter | Type |
| ------ | ------ |
| `query` | `string` |

## Returns

`string`

---

---
url: /api/duckdb/functions/sanitizeQuery.md
---
[@sqlrooms/duckdb](../index.md) / sanitizeQuery

# Function: sanitizeQuery()

> **sanitizeQuery**(`query`): `string`

Sanitizes a SQL query by removing trailing semicolons, comments, and normalizing whitespace

## Parameters

| Parameter | Type |
| ------ | ------ |
| `query` | `string` |

## Returns

`string`

---

---
url: /api/duckdb/functions/separateLastStatement.md
---
[@sqlrooms/duckdb](../index.md) / separateLastStatement

# Function: separateLastStatement()

> **separateLastStatement**(`query`): [`SeparatedStatements`](../type-aliases/SeparatedStatements.md)

Separates a SQL query into preceding statements and the last statement.
Useful when you need to execute multiple statements but handle the last one differently
(e.g., wrap it in CREATE TABLE, add LIMIT, etc.).

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | The SQL query string containing one or more statements |

## Returns

[`SeparatedStatements`](../type-aliases/SeparatedStatements.md)

Object containing preceding statements and the last statement

## Throws

Error if the query contains no statements

---

---
url: /api/duckdb-core/functions/separateLastStatement.md
---
[@sqlrooms/duckdb-core](../index.md) / separateLastStatement

# Function: separateLastStatement()

> **separateLastStatement**(`query`): [`SeparatedStatements`](../type-aliases/SeparatedStatements.md)

Separates a SQL query into preceding statements and the last statement.
Useful when you need to execute multiple statements but handle the last one differently
(e.g., wrap it in CREATE TABLE, add LIMIT, etc.).

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | The SQL query string containing one or more statements |

## Returns

[`SeparatedStatements`](../type-aliases/SeparatedStatements.md)

Object containing preceding statements and the last statement

## Throws

Error if the query contains no statements

---

---
url: /api/ui/functions/SheetFooter.md
---
[@sqlrooms/ui](../index.md) / SheetFooter

# Function: SheetFooter()

> **SheetFooter**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/SheetHeader.md
---
[@sqlrooms/ui](../index.md) / SheetHeader

# Function: SheetHeader()

> **SheetHeader**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/utils/functions/shorten.md
---
[@sqlrooms/utils](../index.md) / shorten

# Function: shorten()

> **shorten**(`str`, `maxLength`): `string`

Shortens a string to a specified maximum length by truncating and adding an ellipsis.

## Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `str` | `string` | `undefined` | The string to shorten |
| `maxLength` | `number` | `10` | Maximum length of the resulting string (including ellipsis). Defaults to 10. |

## Returns

`string`

The shortened string with ellipsis if truncated, or the original string if shorter than maxLength

## Example

```ts
shorten("Hello World", 8) // Returns "Hello..."
shorten("Hi", 8) // Returns "Hi"
```

---

---
url: /api/ui/functions/Skeleton.md
---
[@sqlrooms/ui](../index.md) / Skeleton

# Function: Skeleton()

> **Skeleton**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/utils/functions/splitFilePath.md
---
[@sqlrooms/utils](../index.md) / splitFilePath

# Function: splitFilePath()

> **splitFilePath**(`filePath`): `object`

Splits a file path into its directory, name, and extension components.
Preserves the original path separator style (Windows backslashes or Unix forward slashes).

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `filePath` | `string` | The full file path to split |

## Returns

`object`

An object containing the directory path, file name (without extension), extension, and full filename

| Name | Type |
| ------ | ------ |
| `dir` | `string` |
| `name` | `string` |
| `ext` | `string` |
| `filename` | `string` |

## Example

```ts
splitFilePath("path/to/file.txt") // returns { dir: "path/to", name: "file", ext: "txt", filename: "file.txt" }
splitFilePath("C:\\Users\\file.txt") // returns { dir: "C:\\Users", name: "file", ext: "txt", filename: "file.txt" }
```

---

---
url: /api/duckdb/functions/splitSqlStatements.md
---
[@sqlrooms/duckdb](../index.md) / splitSqlStatements

# Function: splitSqlStatements()

> **splitSqlStatements**(`input`): `string`\[]

Split a string with potentially multiple SQL queries (separated as usual by ';')
into an array of queries.
This implementation:

* Handles single and double quoted strings with proper escaping
* Removes all comments: line comments (--) and block comments (/\* ... \*/)
* Ignores semicolons in quoted strings and comments
* Trims whitespace from queries
* Handles SQL-style escaped quotes ('' inside strings)
* Returns only non-empty queries

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `input` | `string` | The SQL string containing one or more statements |

## Returns

`string`\[]

An array of SQL statements with all comments removed

---

---
url: /api/duckdb-core/functions/splitSqlStatements.md
---
[@sqlrooms/duckdb-core](../index.md) / splitSqlStatements

# Function: splitSqlStatements()

> **splitSqlStatements**(`input`): `string`\[]

Split a string with potentially multiple SQL queries (separated as usual by ';')
into an array of queries.
This implementation:

* Handles single and double quoted strings with proper escaping
* Removes all comments: line comments (--) and block comments (/\* ... \*/)
* Ignores semicolons in quoted strings and comments
* Trims whitespace from queries
* Handles SQL-style escaped quotes ('' inside strings)
* Returns only non-empty queries

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `input` | `string` | The SQL string containing one or more statements |

## Returns

`string`\[]

An array of SQL statements with all comments removed

---

---
url: /api/duckdb/functions/sqlFrom.md
---
[@sqlrooms/duckdb](../index.md) / sqlFrom

# Function: sqlFrom()

> **sqlFrom**(`data`, `options?`): `string`

Create a SQL query that embeds the given data for loading.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `Record`<`string`, `unknown`>\[] | The dataset as an array of objects. |
| `options?` | { `columns?`: `string`\[] | `Record`<`string`, `string`>; } | Loading options. |
| `options.columns?` | `string`\[] | `Record`<`string`, `string`> | The columns to include. If not specified, the keys of the first data object are used. |

## Returns

`string`

SQL query string to load data.

---

---
url: /api/duckdb-core/functions/sqlFrom.md
---
[@sqlrooms/duckdb-core](../index.md) / sqlFrom

# Function: sqlFrom()

> **sqlFrom**(`data`, `options?`): `string`

Create a SQL query that embeds the given data for loading.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `Record`<`string`, `unknown`>\[] | The dataset as an array of objects. |
| `options?` | { `columns?`: `string`\[] | `Record`<`string`, `string`>; } | Loading options. |
| `options.columns?` | `string`\[] | `Record`<`string`, `string`> | The columns to include. If not specified, the keys of the first data object are used. |

## Returns

`string`

SQL query string to load data.

---

---
url: /api/ui/functions/sqlroomsTailwindPreset.md
---
[@sqlrooms/ui](../index.md) / sqlroomsTailwindPreset

# Function: sqlroomsTailwindPreset()

> **sqlroomsTailwindPreset**(`_options?`): `Partial`<`Config`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `_options?` | `Record`<`string`, `unknown`> |

## Returns

`Partial`<`Config`>

---

---
url: /api/recharts/functions/Surface.md
---
[@sqlrooms/recharts](../index.md) / Surface

# Function: Surface()

> **Surface**(`props`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`SurfaceProps`](../type-aliases/SurfaceProps.md) |

## Returns

`Element`

---

---
url: /api/ui/functions/ThemeProvider.md
---
[@sqlrooms/ui](../index.md) / ThemeProvider

# Function: ThemeProvider()

> **ThemeProvider**(`__namedParameters`): `Element`

ThemeProvider component that manages and provides theme context to its children.
Handles system theme detection and persistence of theme preference.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `ThemeProviderProps` |

## Returns

`Element`

## Example

```tsx
// Basic usage with default settings
function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}

// Custom default theme and storage key
function App() {
  return (
    <ThemeProvider defaultTheme="dark" storageKey="my-app-theme">
      <YourApp />
    </ThemeProvider>
  );
}
```

---

---
url: /api/ui/functions/toast.md
---
[@sqlrooms/ui](../index.md) / toast

# Function: toast()

> **toast**(`__namedParameters`): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `Toast` |

## Returns

`object`

| Name | Type | Default value |
| ------ | ------ | ------ |
| `id` | `string` | `id` |
| `dismiss()` | () => `void` | - |
| `update()` | (`props`) => `void` | - |

---

---
url: /api/ui/functions/Toaster.md
---
[@sqlrooms/ui](../index.md) / Toaster

# Function: Toaster()

> **Toaster**(): `Element`

## Returns

`Element`

---

---
url: /api/ai-core/functions/ToolErrorMessage.md
---
[@sqlrooms/ai-core](../index.md) / ToolErrorMessage

# Function: ToolErrorMessage()

> **ToolErrorMessage**(`props`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ToolErrorMessageProps` |

## Returns

`Element`

---

---
url: /api/ai/functions/ToolErrorMessage.md
---
[@sqlrooms/ai](../index.md) / ToolErrorMessage

# Function: ToolErrorMessage()

> **ToolErrorMessage**(`props`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ToolErrorMessageProps` |

## Returns

`Element`

---

---
url: /api/ui/functions/Tree.md
---
[@sqlrooms/ui](../index.md) / Tree

# Function: Tree()

> **Tree**<`T`>(`props`): `ReactElement`

Component that renders a generic tree.

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `TreeProps`<`T`> |

## Returns

`ReactElement`

---

---
url: /api/utils/functions/truncate.md
---
[@sqlrooms/utils](../index.md) / truncate

# Function: truncate()

> **truncate**(`text`, `maxWords`): `string`

Truncates text to a specified word limit

## Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `text` | `string` | `undefined` | The text to truncate |
| `maxWords` | `number` | `10` | The maximum number of words to keep (default: 10) |

## Returns

`string`

The truncated text with "..." appended if truncated

## Example

```ts
truncate("This is a very long sentence that should be truncated", 5) // returns "This is a very long..."
truncate("Short text", 10) // returns "Short text"
```

---

---
url: /api/ai-core/functions/updateAgentToolCallData.md
---
[@sqlrooms/ai-core](../index.md) / updateAgentToolCallData

# Function: updateAgentToolCallData()

> **updateAgentToolCallData**(`store`, `parentToolCallId`, `agentToolCalls`, `finalOutput?`): `void`

Updates the additional data for an agent tool call in the current session

## Parameters

| Parameter | Type |
| ------ | ------ |
| `store` | `StoreApi`<[`AiSliceState`](../type-aliases/AiSliceState.md)> |
| `parentToolCallId` | `string` |
| `agentToolCalls` | [`AgentToolCall`](../interfaces/AgentToolCall.md)\[] |
| `finalOutput?` | `string` |

## Returns

`void`

---

---
url: /api/ai/functions/updateAgentToolCallData.md
---
[@sqlrooms/ai](../index.md) / updateAgentToolCallData

# Function: updateAgentToolCallData()

> **updateAgentToolCallData**(`store`, `parentToolCallId`, `agentToolCalls`, `finalOutput?`): `void`

Updates the additional data for an agent tool call in the current session

## Parameters

| Parameter | Type |
| ------ | ------ |
| `store` | `StoreApi`<[`AiSliceState`](../type-aliases/AiSliceState.md)> |
| `parentToolCallId` | `string` |
| `agentToolCalls` | [`AgentToolCall`](../interfaces/AgentToolCall.md)\[] |
| `finalOutput?` | `string` |

## Returns

`void`

---

---
url: /api/utils/functions/uploadFile.md
---
[@sqlrooms/utils](../index.md) / uploadFile

# Function: uploadFile()

> **uploadFile**(`url`, `content`, `opts?`): `Promise`<`Response`>

Uploads a file to a specified URL using XMLHttpRequest

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `url` | `string` | The URL to upload the file to |
| `content` | `File` | `Blob` | `FormData` | The content to upload |
| `opts?` | { `method?`: `string`; `headers?`: `Record`<`string`, `string`>; `onProgress?`: (`info`) => `void`; } | Optional configuration for the upload |
| `opts.method?` | `string` | The HTTP method to use |
| `opts.headers?` | `Record`<`string`, `string`> | Additional headers to include in the request |
| `opts.onProgress?` | (`info`) => `void` | Callback function to track upload progress |

## Returns

`Promise`<`Response`>

The server response

## Throws

Throws an object containing status and error message if upload fails

---

---
url: /api/ai-core/functions/useAiChat.md
---
[@sqlrooms/ai-core](../index.md) / useAiChat

# Function: useAiChat()

> **useAiChat**(): `UseAiChatResult`

Custom hook that provides AI chat functionality with automatic transport setup,
message syncing, and tool call handling.

This hook encapsulates all the logic needed to integrate the AI SDK's useChat
with the AI slice state management.

## Returns

`UseAiChatResult`

An object containing messages and sendMessage from useChat

## Example

```tsx
function MyComponent() {
  const {messages, sendMessage} = useAiChat();

  const handleSubmit = () => {
    sendMessage({text: 'Hello!'});
  };

  return (
    <div>
      {messages.map(msg => <div key={msg.id}>{msg.content}</div>)}
    </div>
  );
}
```

---

---
url: /api/ai/functions/useAiChat.md
---
[@sqlrooms/ai](../index.md) / useAiChat

# Function: useAiChat()

> **useAiChat**(): `UseAiChatResult`

Custom hook that provides AI chat functionality with automatic transport setup,
message syncing, and tool call handling.

This hook encapsulates all the logic needed to integrate the AI SDK's useChat
with the AI slice state management.

## Returns

`UseAiChatResult`

An object containing messages and sendMessage from useChat

## Example

```tsx
function MyComponent() {
  const {messages, sendMessage} = useAiChat();

  const handleSubmit = () => {
    sendMessage({text: 'Hello!'});
  };

  return (
    <div>
      {messages.map(msg => <div key={msg.id}>{msg.content}</div>)}
    </div>
  );
}
```

---

---
url: /api/data-table/functions/useArrowDataTable.md
---
[@sqlrooms/data-table](../index.md) / useArrowDataTable

# Function: useArrowDataTable()

> **useArrowDataTable**(`table`, `options`): `UseArrowDataTableResult` | `undefined`

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `table` | `Table`<`any`> | `undefined` | - |
| `options` | { `fontSize?`: `string`; } | - |
| `options.fontSize?` | `string` | Custom font size for the table e.g. xs, sm, md, lg, base |

## Returns

`UseArrowDataTableResult` | `undefined`

---

---
url: /api/ui/functions/useAspectRatioDimensions.md
---
[@sqlrooms/ui](../index.md) / useAspectRatioDimensions

# Function: useAspectRatioDimensions()

> **useAspectRatioDimensions**(`props`): [`Dimensions`](../interfaces/Dimensions.md)

A hook that calculates element dimensions based on provided values and container size

This hook handles various combinations of width/height specifications:

* If both width and height are provided, uses those exact dimensions
* If only width is provided, calculates height using the aspect ratio
* If only height is provided, calculates width using the aspect ratio
* If both are 'auto', uses container width and calculates height using the aspect ratio

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`UseAspectRatioDimensionsProps`](../interfaces/UseAspectRatioDimensionsProps.md) | The input parameters for dimension calculation |

## Returns

[`Dimensions`](../interfaces/Dimensions.md)

The calculated width and height

## Example

```tsx
const containerRef = useRef<HTMLDivElement>(null);
const {width, height} = useAspectRatioDimensions({
  width: 'auto',
  height: 'auto',
  aspectRatio: 16/9,
  containerRef
});
// Returns dimensions based on container size
```

---

---
url: /api/room-shell/functions/useBaseRoomShellStore.md
---
[@sqlrooms/room-shell](../index.md) / useBaseRoomShellStore

# Function: useBaseRoomShellStore()

> **useBaseRoomShellStore**<`RS`, `T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `RS` *extends* [`RoomShellSliceState`](../type-aliases/RoomShellSliceState.md) |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/room-shell/functions/useBaseRoomStore.md
---
[@sqlrooms/room-shell](../index.md) / useBaseRoomStore

# Function: useBaseRoomStore()

> **useBaseRoomStore**<`RS`, `T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `RS` *extends* `object` |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/room-store/functions/useBaseRoomStore.md
---
[@sqlrooms/room-store](../index.md) / useBaseRoomStore

# Function: useBaseRoomStore()

> **useBaseRoomStore**<`RS`, `T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `RS` *extends* `object` |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/ui/functions/useDisclosure.md
---
[@sqlrooms/ui](../index.md) / useDisclosure

# Function: useDisclosure()

> **useDisclosure**(`initialState`): [`UseDisclosureReturnValue`](../interfaces/UseDisclosureReturnValue.md)

A custom hook for managing disclosure state (open/closed).

## Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `initialState` | `boolean` | `false` | The initial state of the disclosure (default: false) |

## Returns

[`UseDisclosureReturnValue`](../interfaces/UseDisclosureReturnValue.md)

An object containing the disclosure state and methods to control it

## Example

```tsx
import { useDisclosure } from '@your-package/ui';

function Modal() {
  const { isOpen, onOpen, onClose, onToggle } = useDisclosure();

  return (
    <>
      <button onClick={onOpen}>Open Modal</button>

      {isOpen && (
        <div className="modal">
          <div className="modal-content">
            <h2>Modal Title</h2>
            <p>Modal content goes here...</p>
            <button onClick={onClose}>Close</button>
          </div>
        </div>
      )}
    </>
  );
}
```

---

---
url: /api/duckdb/functions/useDuckDb.md
---
[@sqlrooms/duckdb](../index.md) / useDuckDb

# Function: useDuckDb()

> **useDuckDb**(): [`DuckDbConnector`](../interfaces/DuckDbConnector.md)

## Returns

[`DuckDbConnector`](../interfaces/DuckDbConnector.md)

---

---
url: /api/duckdb/functions/useExportToCsv.md
---
[@sqlrooms/duckdb](../index.md) / useExportToCsv

# Function: useExportToCsv()

> **useExportToCsv**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `exportToCsv()` | (`query`, `fileName`, `pageSize`) => `Promise`<`void`> |

---

---
url: /api/ui/functions/useFormField.md
---
[@sqlrooms/ui](../index.md) / useFormField

# Function: useFormField()

> **useFormField**(): `object`

## Returns

`object`

| Name | Type | Default value |
| ------ | ------ | ------ |
| `id` | `string` | - |
| `name` | `string` | `fieldContext.name` |
| `formItemId` | `string` | - |
| `formDescriptionId` | `string` | - |
| `formMessageId` | `string` | - |
| `invalid` | `boolean` | - |
| `isDirty` | `boolean` | - |
| `isTouched` | `boolean` | - |
| `isValidating` | `boolean` | - |
| `error?` | `FieldError` | - |

---

---
url: /api/cosmos/functions/useHoverState.md
---
[@sqlrooms/cosmos](../index.md) / useHoverState

# Function: useHoverState()

> **useHoverState**(`calcRelativeCoordinates`): `object`

A custom hook that manages hover state for graph points.

This hook provides functionality to:

* Track which point is currently being hovered
* Store the hover position coordinates
* Clear the hover state
* Provide event handlers for hover-related graph interactions

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `calcRelativeCoordinates` | (`x`, `y`) => \[`number`, `number`] | A function that converts client coordinates to container-relative coordinates |

## Returns

`object`

An object containing the hover state and event handlers for the graph

| Name | Type |
| ------ | ------ |
| `hoveredPoint` | [`HoverState`](../type-aliases/HoverState.md) |
| `eventHandlers` | { `onPointMouseOver`: (`index`, `pointPosition`, `event`) => `void`; `onPointMouseOut`: () => `void`; `onZoomStart`: () => `void`; `onDragStart`: () => `void`; } |

## Example

```tsx
const Graph = () => {
  const calcRelativeCoords = useRelativeCoordinates(containerRef);
  const { hoveredPoint, eventHandlers } = useHoverState(calcRelativeCoords);

  return (
    <div ref={containerRef}>
      <CosmosGraph
        config={eventHandlers}
      />
      {hoveredPoint && (
        <Tooltip
          x={hoveredPoint.position[0]}
          y={hoveredPoint.position[1]}
        />
      )}
    </div>
  );
};
```

---

---
url: /api/kepler/functions/useKeplerStateActions.md
---
[@sqlrooms/kepler](../index.md) / useKeplerStateActions

# Function: useKeplerStateActions()

> **useKeplerStateActions**(`__namedParameters`): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `mapId`: `string`; } |
| `__namedParameters.mapId` | `string` |

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `keplerActions` | `KeplerActions` |
| `keplerState` | `KeplerGlState` | `undefined` |

---

---
url: /api/mosaic/functions/useMosaic.md
---
[@sqlrooms/mosaic](../index.md) / useMosaic

# Function: useMosaic()

> **useMosaic**(): `object`

Hook to manage the Mosaic connector.

## Returns

`object`

An object containing the Mosaic connector and a loading state.

| Name | Type | Default value |
| ------ | ------ | ------ |
| `isMosaicLoading` | `boolean` | `isLoading` |
| `mosaicConnector` | `Connector` | `undefined` | `connector` |

---

---
url: /api/ui/functions/useRelativeCoordinates.md
---
[@sqlrooms/ui](../index.md) / useRelativeCoordinates

# Function: useRelativeCoordinates()

> **useRelativeCoordinates**(`containerRef`): (`x`, `y`) => \[`number`, `number`]

A hook that converts absolute screen coordinates to coordinates relative to a container element.

This hook is useful when you need to position elements (like tooltips, popovers, or context menus)
relative to a container, especially when dealing with mouse or touch events.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `containerRef` | `RefObject`<`HTMLElement` | `null`> | A React ref object pointing to the container HTML element |

## Returns

A callback function that converts absolute coordinates to relative ones

> (`x`, `y`): \[`number`, `number`]

### Parameters

| Parameter | Type |
| ------ | ------ |
| `x` | `number` |
| `y` | `number` |

### Returns

\[`number`, `number`]

## Examples

```typescript
const MyComponent = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const getRelativeCoords = useRelativeCoordinates(containerRef);

  const handleMouseMove = (e: React.MouseEvent) => {
    // Convert screen coordinates to container-relative coordinates
    const [relativeX, relativeY] = getRelativeCoords(e.clientX, e.clientY);

    // Use the coordinates to position a tooltip, etc.
    setTooltipPosition({ x: relativeX, y: relativeY });
  };

  return (
    <div
      ref={containerRef}
      onMouseMove={handleMouseMove}
      className="relative"
    >
      Content
    </div>
  );
};
```

```typescript
// Using with touch events
const handleTouch = (e: React.TouchEvent) => {
  const touch = e.touches[0];
  const [x, y] = getRelativeCoords(touch.clientX, touch.clientY);
  // Position elements based on touch coordinates
};
```

---

---
url: /api/ai-core/functions/useScrollToBottom.md
---
[@sqlrooms/ai-core](../index.md) / useScrollToBottom

# Function: useScrollToBottom()

> **useScrollToBottom**<`T`>(`options`): `ScrollToBottomResult`<`T`>

A React hook that provides automatic scrolling behavior for containers with dynamic content.

This hook helps manage scroll behavior in containers where content is being added dynamically,
such as chat interfaces or logs. It automatically scrolls to the bottom when new content is added
if the user was already at the bottom, and provides a function to manually scroll to the bottom.

## Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `T` *extends* `HTMLElement` | `null` | The type of HTMLElement for the container and end references |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | { `dataToObserve`: `unknown`; `containerRef`: `RefObject`<`T` | `null`>; `endRef`: `RefObject`<`T` | `null`>; `scrollOnInitialLoad?`: `boolean`; } | Configuration options |
| `options.dataToObserve` | `unknown` | The data to observe for changes (messages, items, etc.) |
| `options.containerRef` | `RefObject`<`T` | `null`> | Reference to the scrollable container element |
| `options.endRef` | `RefObject`<`T` | `null`> | Reference to an element at the end of the content |
| `options.scrollOnInitialLoad?` | `boolean` | Whether to scroll to bottom on initial load (default: true) |

## Returns

`ScrollToBottomResult`<`T`>

An object containing:

* showScrollButton: Boolean indicating if the "scroll to bottom" button should be shown
* scrollToBottom: Function to programmatically scroll to the bottom

## Example

```tsx
import { useRef } from 'react';
import { useScrollToBottom } from './use-scroll-to-bottom';

function ChatContainer({ messages }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const endRef = useRef<HTMLDivElement>(null);

  const { showScrollButton, scrollToBottom } = useScrollToBottom({
    dataToObserve: messages,
    containerRef,
    endRef,
    scrollOnInitialLoad: false // Disable scrolling on initial load
  });

  return (
    <div className="relative h-[500px]">
      <div ref={containerRef} className="h-full overflow-y-auto p-4">
        {messages.map((message) => (
          <div key={message.id} className="mb-4">
            {message.text}
          </div>
        ))}
        <div ref={endRef} />
      </div>

      {showScrollButton && (
        <button
          onClick={scrollToBottom}
          className="absolute bottom-4 right-4 rounded-full bg-blue-500 p-2"
        >
          ↓
        </button>
      )}
    </div>
  );
}
```

---

---
url: /api/ai/functions/useScrollToBottom.md
---
[@sqlrooms/ai](../index.md) / useScrollToBottom

# Function: useScrollToBottom()

> **useScrollToBottom**<`T`>(`options`): `ScrollToBottomResult`<`T`>

A React hook that provides automatic scrolling behavior for containers with dynamic content.

This hook helps manage scroll behavior in containers where content is being added dynamically,
such as chat interfaces or logs. It automatically scrolls to the bottom when new content is added
if the user was already at the bottom, and provides a function to manually scroll to the bottom.

## Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `T` *extends* `HTMLElement` | `null` | The type of HTMLElement for the container and end references |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | { `dataToObserve`: `unknown`; `containerRef`: `RefObject`<`T` | `null`>; `endRef`: `RefObject`<`T` | `null`>; `scrollOnInitialLoad?`: `boolean`; } | Configuration options |
| `options.dataToObserve` | `unknown` | The data to observe for changes (messages, items, etc.) |
| `options.containerRef` | `RefObject`<`T` | `null`> | Reference to the scrollable container element |
| `options.endRef` | `RefObject`<`T` | `null`> | Reference to an element at the end of the content |
| `options.scrollOnInitialLoad?` | `boolean` | Whether to scroll to bottom on initial load (default: true) |

## Returns

`ScrollToBottomResult`<`T`>

An object containing:

* showScrollButton: Boolean indicating if the "scroll to bottom" button should be shown
* scrollToBottom: Function to programmatically scroll to the bottom

## Example

```tsx
import { useRef } from 'react';
import { useScrollToBottom } from './use-scroll-to-bottom';

function ChatContainer({ messages }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const endRef = useRef<HTMLDivElement>(null);

  const { showScrollButton, scrollToBottom } = useScrollToBottom({
    dataToObserve: messages,
    containerRef,
    endRef,
    scrollOnInitialLoad: false // Disable scrolling on initial load
  });

  return (
    <div className="relative h-[500px]">
      <div ref={containerRef} className="h-full overflow-y-auto p-4">
        {messages.map((message) => (
          <div key={message.id} className="mb-4">
            {message.text}
          </div>
        ))}
        <div ref={endRef} />
      </div>

      {showScrollButton && (
        <button
          onClick={scrollToBottom}
          className="absolute bottom-4 right-4 rounded-full bg-blue-500 p-2"
        >
          ↓
        </button>
      )}
    </div>
  );
}
```

---

---
url: /api/duckdb/functions/useSql.md
---
[@sqlrooms/duckdb](../index.md) / useSql

# Function: useSql()

Implementation of useSql that handles both overloads

## Call Signature

> **useSql**<`Row`>(`options`): `object`

A React hook for executing SQL queries with automatic state management.
Provides two ways to ensure type safety:

1. Using TypeScript types (compile-time safety only)
2. Using Zod schemas (both compile-time and runtime validation)

### Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `Row` | The TypeScript type for each row in the result |

### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | { `query`: `string`; `enabled?`: `boolean`; } | Configuration object containing the query and execution control |
| `options.query` | `string` | - |
| `options.enabled?` | `boolean` | - |

### Returns

`object`

Object containing the query result, loading state, and any error

| Name | Type |
| ------ | ------ |
| `data` | [`UseSqlQueryResult`](../interfaces/UseSqlQueryResult.md)<`Row`> | `undefined` |
| `error` | `Error` | `null` |
| `isLoading` | `boolean` |

### Example

```typescript
// Option 1: Using TypeScript types (faster, no runtime validation)
interface User {
  id: number;
  name: string;
  email: string;
}

const {data, isLoading, error} = useSql<User>({
  query: 'SELECT id, name, email FROM users'
});

// Option 2: Using Zod schema (slower but with runtime validation)
const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  createdAt: z.string().transform(str => new Date(str)) // Transform string to Date
});

const {data: validatedData, isLoading, error} = useSql(
  userSchema,
  {query: 'SELECT id, name, email, created_at as createdAt FROM users'}
);
```

## Error Handling

```typescript
if (isLoading) return <div>Loading...</div>;
if (error) {
  // With Zod, you can catch validation errors specifically
  if (error instanceof z.ZodError) {
    return <div>Validation Error: {error.errors[0].message}</div>;
  }
  return <div>Error: {error.message}</div>;
}
if (!data) return null;
```

## Data Access Methods

There are several ways to access data with different performance characteristics:

### 1. Typed Row Access (getRow, rows(), toArray())

* Provides type safety and validation
* Converts data to JavaScript objects
* Slower for large datasets due to object creation and validation

```typescript
// Iterate through rows using the rows() iterator (recommended)
for (const user of data.rows()) {
  console.log(user.name, user.email);
}

// Traditional for loop with index access
for (let i = 0; i < data.length; i++) {
  const user = data.getRow(i);
  console.log(`User ${i}: ${user.name} (${user.email})`);
}

// Get all rows as an array
const allUsers = data.toArray();

// With Zod schema, transformed fields are available
for (const user of validatedData.rows()) {
  console.log(`Created: ${user.createdAt.toISOString()}`); // createdAt is a Date object
}
```

### 2. Direct Arrow Table Access

* Much faster for large datasets
* Columnar access is more efficient for analytics
* No type safety or validation

```typescript
// For performance-critical operations with large datasets:
const nameColumn = data.arrowTable.getChild('name');
const emailColumn = data.arrowTable.getChild('email');

// Fast columnar iteration (no object creation)
for (let i = 0; i < data.length; i++) {
  console.log(nameColumn.get(i), emailColumn.get(i));
}

// Note: For filtering data, it's most efficient to use SQL in your query
const { data } = useSql<User>({
  query: "SELECT * FROM users WHERE age > 30"
});
```

### 3. Using Flechette for Advanced Operations

For more advanced Arrow operations, consider using [Flechette](https://idl.uw.edu/flechette/),
a faster and lighter alternative to the standard Arrow JS implementation.

```typescript
// Example using Flechette with SQL query results
import { tableFromIPC } from '@uwdata/flechette';

// Convert Arrow table to Flechette table
const serializedData = data.arrowTable.serialize();
const flechetteTable = tableFromIPC(serializedData);

// Extract all columns into a { name: array, ... } object
const columns = flechetteTable.toColumns();

// Create a new table with a selected subset of columns
const subtable = flechetteTable.select(['name', 'email']);

// Convert to array of objects with customization options
const objects = flechetteTable.toArray({
  useDate: true,  // Convert timestamps to Date objects
  useMap: true    // Create Map objects for key-value pairs
});

// For large datasets, consider memory management
serializedData = null; // Allow garbage collection of the serialized data
```

Flechette provides several advantages:

* Better performance (1.3-1.6x faster value iteration, 7-11x faster row object extraction)
* Smaller footprint (~43k minified vs 163k for Arrow JS)
* Support for additional data types (including decimal-to-number conversion)
* More flexible data value conversion options

## Call Signature

> **useSql**<`Schema`>(`zodSchema`, `options`): `object`

A React hook for executing SQL queries with automatic state management.
Provides two ways to ensure type safety:

1. Using TypeScript types (compile-time safety only)
2. Using Zod schemas (both compile-time and runtime validation)

### Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `Schema` *extends* `ZodType`<`unknown`, `unknown`, `$ZodTypeInternals`<`unknown`, `unknown`>> | The Zod schema type that defines the shape and validation of each row |

### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `zodSchema` | `Schema` | A Zod schema that defines the expected shape and validation rules for each row |
| `options` | { `query`: `string`; `enabled?`: `boolean`; } | Configuration object containing the query and execution control |
| `options.query` | `string` | - |
| `options.enabled?` | `boolean` | - |

### Returns

`object`

Object containing the query result, loading state, and any error

| Name | Type |
| ------ | ------ |
| `data` | [`UseSqlQueryResult`](../interfaces/UseSqlQueryResult.md)<`output`<`Schema`>> | `undefined` |
| `error` | `Error` | `null` |
| `isLoading` | `boolean` |

### Example

```typescript
// Option 1: Using TypeScript types (faster, no runtime validation)
interface User {
  id: number;
  name: string;
  email: string;
}

const {data, isLoading, error} = useSql<User>({
  query: 'SELECT id, name, email FROM users'
});

// Option 2: Using Zod schema (slower but with runtime validation)
const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  createdAt: z.string().transform(str => new Date(str)) // Transform string to Date
});

const {data: validatedData, isLoading, error} = useSql(
  userSchema,
  {query: 'SELECT id, name, email, created_at as createdAt FROM users'}
);
```

## Error Handling

```typescript
if (isLoading) return <div>Loading...</div>;
if (error) {
  // With Zod, you can catch validation errors specifically
  if (error instanceof z.ZodError) {
    return <div>Validation Error: {error.errors[0].message}</div>;
  }
  return <div>Error: {error.message}</div>;
}
if (!data) return null;
```

## Data Access Methods

There are several ways to access data with different performance characteristics:

### 1. Typed Row Access (getRow, rows(), toArray())

* Provides type safety and validation
* Converts data to JavaScript objects
* Slower for large datasets due to object creation and validation

```typescript
// Iterate through rows using the rows() iterator (recommended)
for (const user of data.rows()) {
  console.log(user.name, user.email);
}

// Traditional for loop with index access
for (let i = 0; i < data.length; i++) {
  const user = data.getRow(i);
  console.log(`User ${i}: ${user.name} (${user.email})`);
}

// Get all rows as an array
const allUsers = data.toArray();

// With Zod schema, transformed fields are available
for (const user of validatedData.rows()) {
  console.log(`Created: ${user.createdAt.toISOString()}`); // createdAt is a Date object
}
```

### 2. Direct Arrow Table Access

* Much faster for large datasets
* Columnar access is more efficient for analytics
* No type safety or validation

```typescript
// For performance-critical operations with large datasets:
const nameColumn = data.arrowTable.getChild('name');
const emailColumn = data.arrowTable.getChild('email');

// Fast columnar iteration (no object creation)
for (let i = 0; i < data.length; i++) {
  console.log(nameColumn.get(i), emailColumn.get(i));
}

// Note: For filtering data, it's most efficient to use SQL in your query
const { data } = useSql<User>({
  query: "SELECT * FROM users WHERE age > 30"
});
```

### 3. Using Flechette for Advanced Operations

For more advanced Arrow operations, consider using [Flechette](https://idl.uw.edu/flechette/),
a faster and lighter alternative to the standard Arrow JS implementation.

```typescript
// Example using Flechette with SQL query results
import { tableFromIPC } from '@uwdata/flechette';

// Convert Arrow table to Flechette table
const serializedData = data.arrowTable.serialize();
const flechetteTable = tableFromIPC(serializedData);

// Extract all columns into a { name: array, ... } object
const columns = flechetteTable.toColumns();

// Create a new table with a selected subset of columns
const subtable = flechetteTable.select(['name', 'email']);

// Convert to array of objects with customization options
const objects = flechetteTable.toArray({
  useDate: true,  // Convert timestamps to Date objects
  useMap: true    // Create Map objects for key-value pairs
});

// For large datasets, consider memory management
serializedData = null; // Allow garbage collection of the serialized data
```

Flechette provides several advantages:

* Better performance (1.3-1.6x faster value iteration, 7-11x faster row object extraction)
* Smaller footprint (~43k minified vs 163k for Arrow JS)
* Support for additional data types (including decimal-to-number conversion)
* More flexible data value conversion options

---

---
url: /api/ai-core/functions/useStoreWithAi.md
---
[@sqlrooms/ai-core](../index.md) / useStoreWithAi

# Function: useStoreWithAi()

> **useStoreWithAi**<`T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/ai/functions/useStoreWithAi.md
---
[@sqlrooms/ai](../index.md) / useStoreWithAi

# Function: useStoreWithAi()

> **useStoreWithAi**<`T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/ai-settings/functions/useStoreWithAiSettings.md
---
[@sqlrooms/ai-settings](../index.md) / useStoreWithAiSettings

# Function: useStoreWithAiSettings()

> **useStoreWithAiSettings**<`T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/ai/functions/useStoreWithAiSettings.md
---
[@sqlrooms/ai](../index.md) / useStoreWithAiSettings

# Function: useStoreWithAiSettings()

> **useStoreWithAiSettings**<`T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/cosmos/functions/useStoreWithCosmos.md
---
[@sqlrooms/cosmos](../index.md) / useStoreWithCosmos

# Function: useStoreWithCosmos()

> **useStoreWithCosmos**<`T`>(`selector`): `T`

Hook to access the Cosmos store with proper typing.
Provides type-safe access to the combined room and Cosmos state.

## Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `T` | The type of the selected state slice |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `selector` | (`state`) => `T` | A function that selects a portion of the state |

## Returns

`T`

The selected state portion

## Example

```typescript
const graph = useStoreWithCosmos(state => state.cosmos.graph);
const isRunning = useStoreWithCosmos(state => state.cosmos.isSimulationRunning);
```

---

---
url: /api/discuss/functions/useStoreWithDiscussion.md
---
[@sqlrooms/discuss](../index.md) / useStoreWithDiscussion

# Function: useStoreWithDiscussion()

> **useStoreWithDiscussion**<`T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/duckdb/functions/useStoreWithDuckDb.md
---
[@sqlrooms/duckdb](../index.md) / useStoreWithDuckDb

# Function: useStoreWithDuckDb()

> **useStoreWithDuckDb**<`T`>(`selector`): `T`

**`Internal`**

Select values from the room store that includes the DuckDB slice.

This is a typed wrapper around `useBaseRoomStore` that narrows the
state to `RoomStateWithDuckDb` so selectors can access `db` safely.

## Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `T` | The selected slice of state returned by the selector |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `selector` | (`state`) => `T` | Function that selects a value from the store state |

## Returns

`T`

The selected value of type `T`

---

---
url: /api/kepler/functions/useStoreWithKepler.md
---
[@sqlrooms/kepler](../index.md) / useStoreWithKepler

# Function: useStoreWithKepler()

> **useStoreWithKepler**<`T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/layout/functions/useStoreWithLayout.md
---
[@sqlrooms/layout](../index.md) / useStoreWithLayout

# Function: useStoreWithLayout()

> **useStoreWithLayout**<`T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/ai-rag/functions/useStoreWithRag.md
---
[@sqlrooms/ai-rag](../index.md) / useStoreWithRag

# Function: useStoreWithRag()

> **useStoreWithRag**<`T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/ui/functions/useTheme.md
---
[@sqlrooms/ui](../index.md) / useTheme

# Function: useTheme()

> **useTheme**(): `ThemeProviderState`

Hook to access the current theme and theme setter function.
Must be used within a ThemeProvider component.

## Returns

`ThemeProviderState`

Object containing current theme and setTheme function

## Examples

```tsx
import { Button } from '@sqlrooms/ui';

function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  const isDark = theme === 'dark';

  return (
    <Button
      variant="outline"
      size="sm"
      onClick={() => setTheme(isDark ? 'light' : 'dark')}
    >
      {isDark ? '☀️ Light' : '🌙 Dark'}
    </Button>
  );
}
```

```tsx
import { ThemeSwitch } from '@sqlrooms/ui';

function AppHeader() {
  return (
    <nav className="border-b">
      <div className="flex h-16 items-center px-4">
        <div className="ml-auto">
          <ThemeSwitch />
        </div>
      </div>
    </nav>
  );
}
```

## Throws

If used outside of a ThemeProvider

---

---
url: /api/ui/functions/useToast.md
---
[@sqlrooms/ui](../index.md) / useToast

# Function: useToast()

> **useToast**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
| `toasts` | `ToasterToast`\[] |
| `toast()` | (`__namedParameters`) => `object` |
| `dismiss()` | (`toastId?`) => `void` |

---

---
url: /api/vega/functions/VegaChartToolResult.md
---
[@sqlrooms/vega](../index.md) / VegaChartToolResult

# Function: VegaChartToolResult()

> **VegaChartToolResult**(`props`): `Element`

Renders a chart tool call with visualization using Vega-Lite

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | `VegaChartToolResultProps` | The component props |

## Returns

`Element`

The rendered chart tool call

---

---
url: /api/layout/functions/visitMosaicLeafNodes.md
---
[@sqlrooms/layout](../index.md) / visitMosaicLeafNodes

# Function: visitMosaicLeafNodes()

> **visitMosaicLeafNodes**<`T`>(`root`, `visitor`, `path`): `T` | `undefined`

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `void` |

## Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `root` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `null` | `undefined` | `undefined` |
| `visitor` | (`node`, `path`) => `T` | `undefined` |
| `path` | `MosaicPath` | `[]` |

## Returns

`T` | `undefined`

---

---
url: /getting-started.md
---

# Getting Started with SQLRooms

SQLRooms is a powerful framework and a set of building blocks for creating DuckDB-backed analytics applications in React. This guide will help you integrate SQLRooms into your application. For a detailed overview of the framework's architecture and core ideas, check out the [Key Concepts](/key-concepts) and [Modular Architecture](/modular-architecture) pages.

## Try the Minimal Example

The [Minimal Example](https://github.com/sqlrooms/examples/tree/main/minimal) is the quickest way to see SQLRooms in action with the smallest possible setup. It demonstrates loading a CSV data source and running SQL queries with `useSql()` in a barebones Vite + React app.

To create a new project from the minimal example, run:

```bash
npx degit sqlrooms/examples/minimal my-minimal-app/
cd my-minimal-app
npm install
npm run dev
```

***

## Try the Get Started Example

The [Get Started Example](https://github.com/sqlrooms/examples/tree/main/get-started) is a more feature-rich starter template that demonstrates a typical SQLRooms application structure, including panels, layout, and configuration.

To create a new project from the get-started example, run:

```bash
npx degit sqlrooms/examples/get-started myapp/
cd myapp
npm install
npm run dev
```

This Vite application demonstrates loading a CSV data source and running SQL queries with `useSql()`, along with a more complete app shell and layout.

## Manual Setup

### Prerequisites

Your application should have the following dependencies:

* [React 18+](https://react.dev/) (React 19 is supported)
* [Tailwind CSS](https://tailwindcss.com/)
* [Node.js](https://nodejs.org/) >= 22

SQLRooms uses [Zustand](https://zustand.docs.pmnd.rs) for state management and [Zod](https://zod.dev) for schema validation internally, but you don't need to install them separately

### Installation

Install the required SQLRooms packages:

::: code-group

```bash [npm]
npm install @sqlrooms/room-shell @sqlrooms/duckdb @sqlrooms/ui
```

```bash [pnpm]
pnpm add @sqlrooms/room-shell @sqlrooms/duckdb @sqlrooms/ui
```

```bash [yarn]
yarn add @sqlrooms/room-shell @sqlrooms/duckdb @sqlrooms/ui
```

:::

### Configure Tailwind CSS

You can follow [this guide](https://v3.tailwindcss.com/docs/installation) to install and configure Tailwind 3 (Tailwind 4 support is still experimental).

::: code-group

```bash [npm]
npm install -D tailwindcss@3
npx tailwindcss init
```

```bash [pnpm]
pnpm add -D tailwindcss@3
npx tailwindcss init
```

```bash [yarn]
yarn add -D tailwindcss@3
npx tailwindcss init
```

:::

SQLRooms provides a Tailwind preset that includes all the necessary styles. Update your `tailwind.config.js` or `tailwind.config.ts`:

```typescript
import {sqlroomsTailwindPreset} from '@sqlrooms/ui';
import type {Config} from 'tailwindcss';

const config = {
  presets: [sqlroomsTailwindPreset()],
  content: [
    // Your content paths...
    './src/**/*.{ts,tsx}',
    // Add SQLRooms packages to content paths
    './node_modules/@sqlrooms/**/dist/**/*.js',
  ],
} satisfies Config;

export default config;
```

Make sure to import the preset Tailwind styles in your main CSS file:

```css
@import '@sqlrooms/ui/tailwind-preset.css';
```

### Setting Up the Room Store

1. Define your application state type:

```typescript
import {
  createRoomShellSlice,
  createRoomStore,
  RoomShellSliceState,
} from '@sqlrooms/room-shell';

/**
 * The whole app state.
 */
export type RoomState = RoomShellSliceState & {
  // Add your custom app state types here
  // If using additional slices:
  // & SqlEditorSliceState
};
```

2. Create your room store:

```typescript
import {LayoutTypes} from '@sqlrooms/room-shell';
import {DatabaseIcon} from 'lucide-react';
import {MainView} from './components/MainView';
import {DataSourcesPanel} from './components/DataSourcesPanel';

/**
 * Create the room store. You can combine your custom state and logic
 * with the slices from the SQLRooms modules.
 */
export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
  (set, get, store) => ({
    ...createRoomShellSlice({
      config: {
        title: 'My SQLRooms App',
        dataSources: [
          {
            tableName: 'earthquakes',
            type: 'url',
            url: 'https://pub-334685c2155547fab4287d84cae47083.r2.dev/earthquakes.parquet',
          },
        ],
      },
      layout: {
        config: {
          type: LayoutTypes.enum.mosaic,
          nodes: {
            direction: 'row',
            first: 'data-sources',
            second: 'main',
            splitPercentage: 30,
          },
        },
        panels: {
          'data-sources': {
            title: 'Data Sources',
            icon: DatabaseIcon,
            component: DataSourcesPanel,
            placement: 'sidebar',
          },
          main: {
            title: 'Main view',
            icon: () => null,
            component: MainView,
            placement: 'main',
          },
        },
      },
    })(set, get, store),

    // Add additional slices if needed
    // ...createSqlEditorSlice()(set, get, store),
  }),
);
```

3. Optionally add persistence using the `persistSliceConfigs` helper:

```typescript
import {
  BaseRoomConfig,
  LayoutConfig,
  persistSliceConfigs,
} from '@sqlrooms/room-shell';

export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
  persistSliceConfigs(
    {
      name: 'app-state-storage',
      sliceConfigSchemas: {
        room: BaseRoomConfig,
        layout: LayoutConfig,
        // Add other slice configs as needed
        // sqlEditor: SqlEditorSliceConfig,
      },
    },
    (set, get, store) => ({
      // Store configuration as shown above
      ...createRoomShellSlice({
        config: {
          title: 'My SQLRooms App',
          dataSources: [],
        },
        layout: {
          config: {
            type: LayoutTypes.enum.mosaic,
            nodes: {
              // layout configuration
            },
          },
          panels: {
            // Panel definitions
          },
        },
      })(set, get, store),
    }),
  ),
);
```

### Using the Room Store

Wrap your application with a `RoomShell` which provides the room store context:

```typescript
import {RoomShell} from '@sqlrooms/room-shell';
import {ThemeProvider} from '@sqlrooms/ui';
import {roomStore} from './store';

export const Room = () => (
  <ThemeProvider defaultTheme="light" storageKey="sqlrooms-ui-theme">
    <RoomShell className="h-screen" roomStore={roomStore}>
      <RoomShell.Sidebar />
      <RoomShell.LayoutComposer />
      <RoomShell.LoadingProgress />
    </RoomShell>
  </ThemeProvider>
);
```

Access the store in your components:

```typescript
import {useRoomStore} from './store';

function YourComponent() {
  // Access config from room
  const roomConfig = useRoomStore((state) => state.room.config);

  // Access database state
  const tables = useRoomStore((state) => state.db.tables);

  // Check if a table is ready
  const tableReady = useRoomStore((state) =>
    state.db.findTableByName('earthquakes'),
  );

  return (
    // Your component JSX
  );
}
```

### Querying Data

Use the `useSql` hook from `@sqlrooms/duckdb` to run SQL queries:

```typescript
import {useSql} from '@sqlrooms/duckdb';
import {useRoomStore} from './store';

function MainView() {
  const tableReady = useRoomStore((state) =>
    state.db.findTableByName('earthquakes'),
  );

  const {data, isLoading, error} = useSql<{
    count: number;
    maxMag: number;
  }>({
    query: `
      SELECT
        COUNT(*)::int AS count,
        max(Magnitude) AS maxMag
      FROM earthquakes
    `,
    enabled: Boolean(tableReady),
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  const row = data?.toArray()[0];
  return (
    <div>
      <div>Total records: {row?.count}</div>
      <div>Max magnitude: {row?.maxMag}</div>
    </div>
  );
}
```

The `useSql` hook automatically re-runs queries when the database state changes and provides loading/error states out of the box.

## Need Help?

* Start or join a discussion on [GitHub Discussions](https://github.com/sqlrooms/sqlrooms/discussions)
* File an issue on [GitHub](https://github.com/sqlrooms/sqlrooms/issues)

---

---
url: /custom-slice.md
---
# How Create a Custom Slice

A custom module typically bundles **state** (via a slice) with **UI** (via one or more panels) so it can be plugged into any room.

### Slice

Create a Zustand slice (e.g. `createMyModuleSlice`) that adds new state, selectors, and actions to the Room Store.\
Expose a `config` sub-object if you want part of that state to be persisted and validated.

### Panels

Build React components for the module's UI (tables, charts, wizards, etc.).\
Register them with the module so the Layout can discover them and users can open them from the sidebar or programmatically.

Combining the slice (logic/state) with the panels (presentation) lets you ship an encapsulated feature—like an AI assistant or advanced visualization toolkit—as a reusable package.

---

---
url: /api/ai-core/interfaces/AgentStreamResult.md
---
[@sqlrooms/ai-core](../index.md) / AgentStreamResult

# Interface: AgentStreamResult

Type definition for agent stream result (from ai package)
Represents the return value of Agent.stream()

## Properties

### text

> **text**: `Promise`<`string`>

## Methods

### toUIMessageStream()

> **toUIMessageStream**(): `AsyncIterable`<[`UIMessageChunk`](UIMessageChunk.md)>

#### Returns

`AsyncIterable`<[`UIMessageChunk`](UIMessageChunk.md)>

---

---
url: /api/ai/interfaces/AgentStreamResult.md
---
[@sqlrooms/ai](../index.md) / AgentStreamResult

# Interface: AgentStreamResult

Type definition for agent stream result (from ai package)
Represents the return value of Agent.stream()

## Properties

### text

> **text**: `Promise`<`string`>

## Methods

### toUIMessageStream()

> **toUIMessageStream**(): `AsyncIterable`<[`UIMessageChunk`](UIMessageChunk.md)>

#### Returns

`AsyncIterable`<[`UIMessageChunk`](UIMessageChunk.md)>

---

---
url: /api/ai-core/interfaces/AgentToolCall.md
---
[@sqlrooms/ai-core](../index.md) / AgentToolCall

# Interface: AgentToolCall

Represents the state of a single tool call made by an agent

## Properties

### toolCallId

> **toolCallId**: `string`

***

### toolName

> **toolName**: `string`

***

### output?

> `optional` **output**: `unknown`

***

### errorText?

> `optional` **errorText**: `string`

***

### state

> **state**: `"error"` | `"success"` | `"pending"`

---

---
url: /api/ai/interfaces/AgentToolCall.md
---
[@sqlrooms/ai](../index.md) / AgentToolCall

# Interface: AgentToolCall

Represents the state of a single tool call made by an agent

## Properties

### toolCallId

> **toolCallId**: `string`

***

### toolName

> **toolName**: `string`

***

### output?

> `optional` **output**: `unknown`

***

### errorText?

> `optional` **errorText**: `string`

***

### state

> **state**: `"error"` | `"pending"` | `"success"`

---

---
url: /api/ai-core/interfaces/AgentToolCallAdditionalData.md
---
[@sqlrooms/ai-core](../index.md) / AgentToolCallAdditionalData

# Interface: AgentToolCallAdditionalData

Additional data stored for an agent tool call to track progress

## Properties

### agentToolCalls

> **agentToolCalls**: [`AgentToolCall`](AgentToolCall.md)\[]

***

### finalOutput?

> `optional` **finalOutput**: `string`

***

### timestamp

> **timestamp**: `string`

---

---
url: /api/ai/interfaces/AgentToolCallAdditionalData.md
---
[@sqlrooms/ai](../index.md) / AgentToolCallAdditionalData

# Interface: AgentToolCallAdditionalData

Additional data stored for an agent tool call to track progress

## Properties

### agentToolCalls

> **agentToolCalls**: [`AgentToolCall`](AgentToolCall.md)\[]

***

### finalOutput?

> `optional` **finalOutput**: `string`

***

### timestamp

> **timestamp**: `string`

---

---
url: /api/ai-rag/interfaces/AiProvider.md
---
[@sqlrooms/ai-rag](../index.md) / AiProvider

# Interface: AiProvider

Provider instance from Vercel AI SDK (e.g., openai, google, anthropic).
This is an interface with an embedding method for v2 models.

## Methods

### embedding()

> **embedding**(`modelId`, `settings?`): `any`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `modelId` | `string` |
| `settings?` | { `dimensions?`: `number`; } |
| `settings.dimensions?` | `number` |

#### Returns

`any`

---

---
url: /api/ui/interfaces/BadgeProps.md
---
[@sqlrooms/ui](../index.md) / BadgeProps

# Interface: BadgeProps

## Extends

* `HTMLAttributes`<`HTMLDivElement`>.`VariantProps`<*typeof* [`badgeVariants`](../variables/badgeVariants.md)>

## Properties

### variant?

> `optional` **variant**: `"default"` | `"destructive"` | `"secondary"` | `"outline"` | `null`

#### Inherited from

`VariantProps.variant`

***

### children?

> `optional` **children**: `ReactNode`

#### Inherited from

`React.HTMLAttributes.children`

***

### dangerouslySetInnerHTML?

> `optional` **dangerouslySetInnerHTML**: `object`

| Name | Type |
| ------ | ------ |
| `__html` | `string` | `TrustedHTML` |

#### Inherited from

`React.HTMLAttributes.dangerouslySetInnerHTML`

***

### onCopy?

> `optional` **onCopy**: `ClipboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCopy`

***

### onCopyCapture?

> `optional` **onCopyCapture**: `ClipboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCopyCapture`

***

### onCut?

> `optional` **onCut**: `ClipboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCut`

***

### onCutCapture?

> `optional` **onCutCapture**: `ClipboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCutCapture`

***

### onPaste?

> `optional` **onPaste**: `ClipboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPaste`

***

### onPasteCapture?

> `optional` **onPasteCapture**: `ClipboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPasteCapture`

***

### onCompositionEnd?

> `optional` **onCompositionEnd**: `CompositionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCompositionEnd`

***

### onCompositionEndCapture?

> `optional` **onCompositionEndCapture**: `CompositionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCompositionEndCapture`

***

### onCompositionStart?

> `optional` **onCompositionStart**: `CompositionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCompositionStart`

***

### onCompositionStartCapture?

> `optional` **onCompositionStartCapture**: `CompositionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCompositionStartCapture`

***

### onCompositionUpdate?

> `optional` **onCompositionUpdate**: `CompositionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCompositionUpdate`

***

### onCompositionUpdateCapture?

> `optional` **onCompositionUpdateCapture**: `CompositionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCompositionUpdateCapture`

***

### onFocus?

> `optional` **onFocus**: `FocusEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onFocus`

***

### onFocusCapture?

> `optional` **onFocusCapture**: `FocusEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onFocusCapture`

***

### onBlur?

> `optional` **onBlur**: `FocusEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onBlur`

***

### onBlurCapture?

> `optional` **onBlurCapture**: `FocusEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onBlurCapture`

***

### onChange?

> `optional` **onChange**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onChange`

***

### onChangeCapture?

> `optional` **onChangeCapture**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onChangeCapture`

***

### onBeforeInput?

> `optional` **onBeforeInput**: `InputEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onBeforeInput`

***

### onBeforeInputCapture?

> `optional` **onBeforeInputCapture**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onBeforeInputCapture`

***

### onInput?

> `optional` **onInput**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onInput`

***

### onInputCapture?

> `optional` **onInputCapture**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onInputCapture`

***

### onReset?

> `optional` **onReset**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onReset`

***

### onResetCapture?

> `optional` **onResetCapture**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onResetCapture`

***

### onSubmit?

> `optional` **onSubmit**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSubmit`

***

### onSubmitCapture?

> `optional` **onSubmitCapture**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSubmitCapture`

***

### onInvalid?

> `optional` **onInvalid**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onInvalid`

***

### onInvalidCapture?

> `optional` **onInvalidCapture**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onInvalidCapture`

***

### onLoad?

> `optional` **onLoad**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoad`

***

### onLoadCapture?

> `optional` **onLoadCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoadCapture`

***

### onError?

> `optional` **onError**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onError`

***

### onErrorCapture?

> `optional` **onErrorCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onErrorCapture`

***

### onKeyDown?

> `optional` **onKeyDown**: `KeyboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onKeyDown`

***

### onKeyDownCapture?

> `optional` **onKeyDownCapture**: `KeyboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onKeyDownCapture`

***

### ~~onKeyPress?~~

> `optional` **onKeyPress**: `KeyboardEventHandler`<`HTMLDivElement`>

#### Deprecated

Use `onKeyUp` or `onKeyDown` instead

#### Inherited from

`React.HTMLAttributes.onKeyPress`

***

### ~~onKeyPressCapture?~~

> `optional` **onKeyPressCapture**: `KeyboardEventHandler`<`HTMLDivElement`>

#### Deprecated

Use `onKeyUpCapture` or `onKeyDownCapture` instead

#### Inherited from

`React.HTMLAttributes.onKeyPressCapture`

***

### onKeyUp?

> `optional` **onKeyUp**: `KeyboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onKeyUp`

***

### onKeyUpCapture?

> `optional` **onKeyUpCapture**: `KeyboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onKeyUpCapture`

***

### onAbort?

> `optional` **onAbort**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAbort`

***

### onAbortCapture?

> `optional` **onAbortCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAbortCapture`

***

### onCanPlay?

> `optional` **onCanPlay**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCanPlay`

***

### onCanPlayCapture?

> `optional` **onCanPlayCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCanPlayCapture`

***

### onCanPlayThrough?

> `optional` **onCanPlayThrough**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCanPlayThrough`

***

### onCanPlayThroughCapture?

> `optional` **onCanPlayThroughCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCanPlayThroughCapture`

***

### onDurationChange?

> `optional` **onDurationChange**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDurationChange`

***

### onDurationChangeCapture?

> `optional` **onDurationChangeCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDurationChangeCapture`

***

### onEmptied?

> `optional` **onEmptied**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onEmptied`

***

### onEmptiedCapture?

> `optional` **onEmptiedCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onEmptiedCapture`

***

### onEncrypted?

> `optional` **onEncrypted**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onEncrypted`

***

### onEncryptedCapture?

> `optional` **onEncryptedCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onEncryptedCapture`

***

### onEnded?

> `optional` **onEnded**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onEnded`

***

### onEndedCapture?

> `optional` **onEndedCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onEndedCapture`

***

### onLoadedData?

> `optional` **onLoadedData**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoadedData`

***

### onLoadedDataCapture?

> `optional` **onLoadedDataCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoadedDataCapture`

***

### onLoadedMetadata?

> `optional` **onLoadedMetadata**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoadedMetadata`

***

### onLoadedMetadataCapture?

> `optional` **onLoadedMetadataCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoadedMetadataCapture`

***

### onLoadStart?

> `optional` **onLoadStart**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoadStart`

***

### onLoadStartCapture?

> `optional` **onLoadStartCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoadStartCapture`

***

### onPause?

> `optional` **onPause**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPause`

***

### onPauseCapture?

> `optional` **onPauseCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPauseCapture`

***

### onPlay?

> `optional` **onPlay**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPlay`

***

### onPlayCapture?

> `optional` **onPlayCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPlayCapture`

***

### onPlaying?

> `optional` **onPlaying**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPlaying`

***

### onPlayingCapture?

> `optional` **onPlayingCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPlayingCapture`

***

### onProgress?

> `optional` **onProgress**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onProgress`

***

### onProgressCapture?

> `optional` **onProgressCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onProgressCapture`

***

### onRateChange?

> `optional` **onRateChange**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onRateChange`

***

### onRateChangeCapture?

> `optional` **onRateChangeCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onRateChangeCapture`

***

### onSeeked?

> `optional` **onSeeked**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSeeked`

***

### onSeekedCapture?

> `optional` **onSeekedCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSeekedCapture`

***

### onSeeking?

> `optional` **onSeeking**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSeeking`

***

### onSeekingCapture?

> `optional` **onSeekingCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSeekingCapture`

***

### onStalled?

> `optional` **onStalled**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onStalled`

***

### onStalledCapture?

> `optional` **onStalledCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onStalledCapture`

***

### onSuspend?

> `optional` **onSuspend**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSuspend`

***

### onSuspendCapture?

> `optional` **onSuspendCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSuspendCapture`

***

### onTimeUpdate?

> `optional` **onTimeUpdate**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTimeUpdate`

***

### onTimeUpdateCapture?

> `optional` **onTimeUpdateCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTimeUpdateCapture`

***

### onVolumeChange?

> `optional` **onVolumeChange**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onVolumeChange`

***

### onVolumeChangeCapture?

> `optional` **onVolumeChangeCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onVolumeChangeCapture`

***

### onWaiting?

> `optional` **onWaiting**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onWaiting`

***

### onWaitingCapture?

> `optional` **onWaitingCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onWaitingCapture`

***

### onAuxClick?

> `optional` **onAuxClick**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAuxClick`

***

### onAuxClickCapture?

> `optional` **onAuxClickCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAuxClickCapture`

***

### onClick?

> `optional` **onClick**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onClick`

***

### onClickCapture?

> `optional` **onClickCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onClickCapture`

***

### onContextMenu?

> `optional` **onContextMenu**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onContextMenu`

***

### onContextMenuCapture?

> `optional` **onContextMenuCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onContextMenuCapture`

***

### onDoubleClick?

> `optional` **onDoubleClick**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDoubleClick`

***

### onDoubleClickCapture?

> `optional` **onDoubleClickCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDoubleClickCapture`

***

### onDrag?

> `optional` **onDrag**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDrag`

***

### onDragCapture?

> `optional` **onDragCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragCapture`

***

### onDragEnd?

> `optional` **onDragEnd**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragEnd`

***

### onDragEndCapture?

> `optional` **onDragEndCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragEndCapture`

***

### onDragEnter?

> `optional` **onDragEnter**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragEnter`

***

### onDragEnterCapture?

> `optional` **onDragEnterCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragEnterCapture`

***

### onDragExit?

> `optional` **onDragExit**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragExit`

***

### onDragExitCapture?

> `optional` **onDragExitCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragExitCapture`

***

### onDragLeave?

> `optional` **onDragLeave**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragLeave`

***

### onDragLeaveCapture?

> `optional` **onDragLeaveCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragLeaveCapture`

***

### onDragOver?

> `optional` **onDragOver**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragOver`

***

### onDragOverCapture?

> `optional` **onDragOverCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragOverCapture`

***

### onDragStart?

> `optional` **onDragStart**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragStart`

***

### onDragStartCapture?

> `optional` **onDragStartCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragStartCapture`

***

### onDrop?

> `optional` **onDrop**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDrop`

***

### onDropCapture?

> `optional` **onDropCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDropCapture`

***

### onMouseDown?

> `optional` **onMouseDown**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseDown`

***

### onMouseDownCapture?

> `optional` **onMouseDownCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseDownCapture`

***

### onMouseEnter?

> `optional` **onMouseEnter**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseEnter`

***

### onMouseLeave?

> `optional` **onMouseLeave**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseLeave`

***

### onMouseMove?

> `optional` **onMouseMove**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseMove`

***

### onMouseMoveCapture?

> `optional` **onMouseMoveCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseMoveCapture`

***

### onMouseOut?

> `optional` **onMouseOut**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseOut`

***

### onMouseOutCapture?

> `optional` **onMouseOutCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseOutCapture`

***

### onMouseOver?

> `optional` **onMouseOver**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseOver`

***

### onMouseOverCapture?

> `optional` **onMouseOverCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseOverCapture`

***

### onMouseUp?

> `optional` **onMouseUp**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseUp`

***

### onMouseUpCapture?

> `optional` **onMouseUpCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseUpCapture`

***

### onSelect?

> `optional` **onSelect**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSelect`

***

### onSelectCapture?

> `optional` **onSelectCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSelectCapture`

***

### onTouchCancel?

> `optional` **onTouchCancel**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchCancel`

***

### onTouchCancelCapture?

> `optional` **onTouchCancelCapture**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchCancelCapture`

***

### onTouchEnd?

> `optional` **onTouchEnd**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchEnd`

***

### onTouchEndCapture?

> `optional` **onTouchEndCapture**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchEndCapture`

***

### onTouchMove?

> `optional` **onTouchMove**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchMove`

***

### onTouchMoveCapture?

> `optional` **onTouchMoveCapture**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchMoveCapture`

***

### onTouchStart?

> `optional` **onTouchStart**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchStart`

***

### onTouchStartCapture?

> `optional` **onTouchStartCapture**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchStartCapture`

***

### onPointerDown?

> `optional` **onPointerDown**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerDown`

***

### onPointerDownCapture?

> `optional` **onPointerDownCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerDownCapture`

***

### onPointerMove?

> `optional` **onPointerMove**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerMove`

***

### onPointerMoveCapture?

> `optional` **onPointerMoveCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerMoveCapture`

***

### onPointerUp?

> `optional` **onPointerUp**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerUp`

***

### onPointerUpCapture?

> `optional` **onPointerUpCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerUpCapture`

***

### onPointerCancel?

> `optional` **onPointerCancel**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerCancel`

***

### onPointerCancelCapture?

> `optional` **onPointerCancelCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerCancelCapture`

***

### onPointerEnter?

> `optional` **onPointerEnter**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerEnter`

***

### onPointerLeave?

> `optional` **onPointerLeave**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerLeave`

***

### onPointerOver?

> `optional` **onPointerOver**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerOver`

***

### onPointerOverCapture?

> `optional` **onPointerOverCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerOverCapture`

***

### onPointerOut?

> `optional` **onPointerOut**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerOut`

***

### onPointerOutCapture?

> `optional` **onPointerOutCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerOutCapture`

***

### onGotPointerCapture?

> `optional` **onGotPointerCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onGotPointerCapture`

***

### onGotPointerCaptureCapture?

> `optional` **onGotPointerCaptureCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onGotPointerCaptureCapture`

***

### onLostPointerCapture?

> `optional` **onLostPointerCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLostPointerCapture`

***

### onLostPointerCaptureCapture?

> `optional` **onLostPointerCaptureCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLostPointerCaptureCapture`

***

### onScroll?

> `optional` **onScroll**: `UIEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onScroll`

***

### onScrollCapture?

> `optional` **onScrollCapture**: `UIEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onScrollCapture`

***

### onScrollEnd?

> `optional` **onScrollEnd**: `UIEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onScrollEnd`

***

### onScrollEndCapture?

> `optional` **onScrollEndCapture**: `UIEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onScrollEndCapture`

***

### onWheel?

> `optional` **onWheel**: `WheelEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onWheel`

***

### onWheelCapture?

> `optional` **onWheelCapture**: `WheelEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onWheelCapture`

***

### onAnimationStart?

> `optional` **onAnimationStart**: `AnimationEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAnimationStart`

***

### onAnimationStartCapture?

> `optional` **onAnimationStartCapture**: `AnimationEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAnimationStartCapture`

***

### onAnimationEnd?

> `optional` **onAnimationEnd**: `AnimationEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAnimationEnd`

***

### onAnimationEndCapture?

> `optional` **onAnimationEndCapture**: `AnimationEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAnimationEndCapture`

***

### onAnimationIteration?

> `optional` **onAnimationIteration**: `AnimationEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAnimationIteration`

***

### onAnimationIterationCapture?

> `optional` **onAnimationIterationCapture**: `AnimationEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAnimationIterationCapture`

***

### onToggle?

> `optional` **onToggle**: `ToggleEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onToggle`

***

### onBeforeToggle?

> `optional` **onBeforeToggle**: `ToggleEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onBeforeToggle`

***

### onTransitionCancel?

> `optional` **onTransitionCancel**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionCancel`

***

### onTransitionCancelCapture?

> `optional` **onTransitionCancelCapture**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionCancelCapture`

***

### onTransitionEnd?

> `optional` **onTransitionEnd**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionEnd`

***

### onTransitionEndCapture?

> `optional` **onTransitionEndCapture**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionEndCapture`

***

### onTransitionRun?

> `optional` **onTransitionRun**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionRun`

***

### onTransitionRunCapture?

> `optional` **onTransitionRunCapture**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionRunCapture`

***

### onTransitionStart?

> `optional` **onTransitionStart**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionStart`

***

### onTransitionStartCapture?

> `optional` **onTransitionStartCapture**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionStartCapture`

***

### aria-activedescendant?

> `optional` **aria-activedescendant**: `string`

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

#### Inherited from

`React.HTMLAttributes.aria-activedescendant`

***

### aria-atomic?

> `optional` **aria-atomic**: `Booleanish`

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

#### Inherited from

`React.HTMLAttributes.aria-atomic`

***

### aria-autocomplete?

> `optional` **aria-autocomplete**: `"none"` | `"list"` | `"inline"` | `"both"`

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
presented if they are made.

#### Inherited from

`React.HTMLAttributes.aria-autocomplete`

***

### aria-braillelabel?

> `optional` **aria-braillelabel**: `string`

Defines a string value that labels the current element, which is intended to be converted into Braille.

#### See

aria-label.

#### Inherited from

`React.HTMLAttributes.aria-braillelabel`

***

### aria-brailleroledescription?

> `optional` **aria-brailleroledescription**: `string`

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

#### See

aria-roledescription.

#### Inherited from

`React.HTMLAttributes.aria-brailleroledescription`

***

### aria-busy?

> `optional` **aria-busy**: `Booleanish`

#### Inherited from

`React.HTMLAttributes.aria-busy`

***

### aria-checked?

> `optional` **aria-checked**: `boolean` | `"true"` | `"false"` | `"mixed"`

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

#### See

* aria-pressed
* aria-selected.

#### Inherited from

`React.HTMLAttributes.aria-checked`

***

### aria-colcount?

> `optional` **aria-colcount**: `number`

Defines the total number of columns in a table, grid, or treegrid.

#### See

aria-colindex.

#### Inherited from

`React.HTMLAttributes.aria-colcount`

***

### aria-colindex?

> `optional` **aria-colindex**: `number`

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

#### See

* aria-colcount
* aria-colspan.

#### Inherited from

`React.HTMLAttributes.aria-colindex`

***

### aria-colindextext?

> `optional` **aria-colindextext**: `string`

Defines a human readable text alternative of aria-colindex.

#### See

aria-rowindextext.

#### Inherited from

`React.HTMLAttributes.aria-colindextext`

***

### aria-colspan?

> `optional` **aria-colspan**: `number`

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

#### See

* aria-colindex
* aria-rowspan.

#### Inherited from

`React.HTMLAttributes.aria-colspan`

***

### aria-controls?

> `optional` **aria-controls**: `string`

Identifies the element (or elements) whose contents or presence are controlled by the current element.

#### See

aria-owns.

#### Inherited from

`React.HTMLAttributes.aria-controls`

***

### aria-current?

> `optional` **aria-current**: `boolean` | `"time"` | `"true"` | `"false"` | `"page"` | `"step"` | `"location"` | `"date"`

Indicates the element that represents the current item within a container or set of related elements.

#### Inherited from

`React.HTMLAttributes.aria-current`

***

### aria-describedby?

> `optional` **aria-describedby**: `string`

Identifies the element (or elements) that describes the object.

#### See

aria-labelledby

#### Inherited from

`React.HTMLAttributes.aria-describedby`

***

### aria-description?

> `optional` **aria-description**: `string`

Defines a string value that describes or annotates the current element.

#### See

related aria-describedby.

#### Inherited from

`React.HTMLAttributes.aria-description`

***

### aria-details?

> `optional` **aria-details**: `string`

Identifies the element that provides a detailed, extended description for the object.

#### See

aria-describedby.

#### Inherited from

`React.HTMLAttributes.aria-details`

***

### aria-disabled?

> `optional` **aria-disabled**: `Booleanish`

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

#### See

* aria-hidden
* aria-readonly.

#### Inherited from

`React.HTMLAttributes.aria-disabled`

***

### ~~aria-dropeffect?~~

> `optional` **aria-dropeffect**: `"link"` | `"none"` | `"copy"` | `"execute"` | `"move"` | `"popup"`

Indicates what functions can be performed when a dragged object is released on the drop target.

#### Deprecated

in ARIA 1.1

#### Inherited from

`React.HTMLAttributes.aria-dropeffect`

***

### aria-errormessage?

> `optional` **aria-errormessage**: `string`

Identifies the element that provides an error message for the object.

#### See

* aria-invalid
* aria-describedby.

#### Inherited from

`React.HTMLAttributes.aria-errormessage`

***

### aria-expanded?

> `optional` **aria-expanded**: `Booleanish`

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

#### Inherited from

`React.HTMLAttributes.aria-expanded`

***

### aria-flowto?

> `optional` **aria-flowto**: `string`

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
allows assistive technology to override the general default of reading in document source order.

#### Inherited from

`React.HTMLAttributes.aria-flowto`

***

### ~~aria-grabbed?~~

> `optional` **aria-grabbed**: `Booleanish`

Indicates an element's "grabbed" state in a drag-and-drop operation.

#### Deprecated

in ARIA 1.1

#### Inherited from

`React.HTMLAttributes.aria-grabbed`

***

### aria-haspopup?

> `optional` **aria-haspopup**: `boolean` | `"dialog"` | `"menu"` | `"true"` | `"false"` | `"grid"` | `"listbox"` | `"tree"`

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

#### Inherited from

`React.HTMLAttributes.aria-haspopup`

***

### aria-hidden?

> `optional` **aria-hidden**: `Booleanish`

Indicates whether the element is exposed to an accessibility API.

#### See

aria-disabled.

#### Inherited from

`React.HTMLAttributes.aria-hidden`

***

### aria-invalid?

> `optional` **aria-invalid**: `boolean` | `"true"` | `"false"` | `"grammar"` | `"spelling"`

Indicates the entered value does not conform to the format expected by the application.

#### See

aria-errormessage.

#### Inherited from

`React.HTMLAttributes.aria-invalid`

***

### aria-keyshortcuts?

> `optional` **aria-keyshortcuts**: `string`

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

#### Inherited from

`React.HTMLAttributes.aria-keyshortcuts`

***

### aria-label?

> `optional` **aria-label**: `string`

Defines a string value that labels the current element.

#### See

aria-labelledby.

#### Inherited from

`React.HTMLAttributes.aria-label`

***

### aria-labelledby?

> `optional` **aria-labelledby**: `string`

Identifies the element (or elements) that labels the current element.

#### See

aria-describedby.

#### Inherited from

`React.HTMLAttributes.aria-labelledby`

***

### aria-level?

> `optional` **aria-level**: `number`

Defines the hierarchical level of an element within a structure.

#### Inherited from

`React.HTMLAttributes.aria-level`

***

### aria-live?

> `optional` **aria-live**: `"off"` | `"assertive"` | `"polite"`

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

#### Inherited from

`React.HTMLAttributes.aria-live`

***

### aria-modal?

> `optional` **aria-modal**: `Booleanish`

Indicates whether an element is modal when displayed.

#### Inherited from

`React.HTMLAttributes.aria-modal`

***

### aria-multiline?

> `optional` **aria-multiline**: `Booleanish`

Indicates whether a text box accepts multiple lines of input or only a single line.

#### Inherited from

`React.HTMLAttributes.aria-multiline`

***

### aria-multiselectable?

> `optional` **aria-multiselectable**: `Booleanish`

Indicates that the user may select more than one item from the current selectable descendants.

#### Inherited from

`React.HTMLAttributes.aria-multiselectable`

***

### aria-orientation?

> `optional` **aria-orientation**: `"horizontal"` | `"vertical"`

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

#### Inherited from

`React.HTMLAttributes.aria-orientation`

***

### aria-owns?

> `optional` **aria-owns**: `string`

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

#### See

aria-controls.

#### Inherited from

`React.HTMLAttributes.aria-owns`

***

### aria-placeholder?

> `optional` **aria-placeholder**: `string`

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
A hint could be a sample value or a brief description of the expected format.

#### Inherited from

`React.HTMLAttributes.aria-placeholder`

***

### aria-posinset?

> `optional` **aria-posinset**: `number`

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

#### See

aria-setsize.

#### Inherited from

`React.HTMLAttributes.aria-posinset`

***

### aria-pressed?

> `optional` **aria-pressed**: `boolean` | `"true"` | `"false"` | `"mixed"`

Indicates the current "pressed" state of toggle buttons.

#### See

* aria-checked
* aria-selected.

#### Inherited from

`React.HTMLAttributes.aria-pressed`

***

### aria-readonly?

> `optional` **aria-readonly**: `Booleanish`

Indicates that the element is not editable, but is otherwise operable.

#### See

aria-disabled.

#### Inherited from

`React.HTMLAttributes.aria-readonly`

***

### aria-relevant?

> `optional` **aria-relevant**: `"text"` | `"additions"` | `"additions removals"` | `"additions text"` | `"all"` | `"removals"` | `"removals additions"` | `"removals text"` | `"text additions"` | `"text removals"`

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

#### See

aria-atomic.

#### Inherited from

`React.HTMLAttributes.aria-relevant`

***

### aria-required?

> `optional` **aria-required**: `Booleanish`

Indicates that user input is required on the element before a form may be submitted.

#### Inherited from

`React.HTMLAttributes.aria-required`

***

### aria-roledescription?

> `optional` **aria-roledescription**: `string`

Defines a human-readable, author-localized description for the role of an element.

#### Inherited from

`React.HTMLAttributes.aria-roledescription`

***

### aria-rowcount?

> `optional` **aria-rowcount**: `number`

Defines the total number of rows in a table, grid, or treegrid.

#### See

aria-rowindex.

#### Inherited from

`React.HTMLAttributes.aria-rowcount`

***

### aria-rowindex?

> `optional` **aria-rowindex**: `number`

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

#### See

* aria-rowcount
* aria-rowspan.

#### Inherited from

`React.HTMLAttributes.aria-rowindex`

***

### aria-rowindextext?

> `optional` **aria-rowindextext**: `string`

Defines a human readable text alternative of aria-rowindex.

#### See

aria-colindextext.

#### Inherited from

`React.HTMLAttributes.aria-rowindextext`

***

### aria-rowspan?

> `optional` **aria-rowspan**: `number`

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

#### See

* aria-rowindex
* aria-colspan.

#### Inherited from

`React.HTMLAttributes.aria-rowspan`

***

### aria-selected?

> `optional` **aria-selected**: `Booleanish`

Indicates the current "selected" state of various widgets.

#### See

* aria-checked
* aria-pressed.

#### Inherited from

`React.HTMLAttributes.aria-selected`

***

### aria-setsize?

> `optional` **aria-setsize**: `number`

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

#### See

aria-posinset.

#### Inherited from

`React.HTMLAttributes.aria-setsize`

***

### aria-sort?

> `optional` **aria-sort**: `"none"` | `"ascending"` | `"descending"` | `"other"`

Indicates if items in a table or grid are sorted in ascending or descending order.

#### Inherited from

`React.HTMLAttributes.aria-sort`

***

### aria-valuemax?

> `optional` **aria-valuemax**: `number`

Defines the maximum allowed value for a range widget.

#### Inherited from

`React.HTMLAttributes.aria-valuemax`

***

### aria-valuemin?

> `optional` **aria-valuemin**: `number`

Defines the minimum allowed value for a range widget.

#### Inherited from

`React.HTMLAttributes.aria-valuemin`

***

### aria-valuenow?

> `optional` **aria-valuenow**: `number`

Defines the current value for a range widget.

#### See

aria-valuetext.

#### Inherited from

`React.HTMLAttributes.aria-valuenow`

***

### aria-valuetext?

> `optional` **aria-valuetext**: `string`

Defines the human readable text alternative of aria-valuenow for a range widget.

#### Inherited from

`React.HTMLAttributes.aria-valuetext`

***

### defaultChecked?

> `optional` **defaultChecked**: `boolean`

#### Inherited from

`BadgeProps`.[`defaultChecked`](#defaultchecked)

***

### defaultValue?

> `optional` **defaultValue**: `string` | `number` | readonly `string`\[]

#### Inherited from

`BadgeProps`.[`defaultValue`](#defaultvalue)

***

### suppressContentEditableWarning?

> `optional` **suppressContentEditableWarning**: `boolean`

#### Inherited from

`BadgeProps`.[`suppressContentEditableWarning`](#suppresscontenteditablewarning)

***

### suppressHydrationWarning?

> `optional` **suppressHydrationWarning**: `boolean`

#### Inherited from

`BadgeProps`.[`suppressHydrationWarning`](#suppresshydrationwarning)

***

### accessKey?

> `optional` **accessKey**: `string`

#### Inherited from

`BadgeProps`.[`accessKey`](#accesskey)

***

### autoCapitalize?

> `optional` **autoCapitalize**: `"off"` | `"none"` | `"on"` | `"sentences"` | `"words"` | `"characters"` | `string` & `object`

#### Inherited from

`BadgeProps`.[`autoCapitalize`](#autocapitalize)

***

### autoFocus?

> `optional` **autoFocus**: `boolean`

#### Inherited from

`BadgeProps`.[`autoFocus`](#autofocus)

***

### className?

> `optional` **className**: `string`

#### Inherited from

`BadgeProps`.[`className`](#classname)

***

### contentEditable?

> `optional` **contentEditable**: `Booleanish` | `"inherit"` | `"plaintext-only"`

#### Inherited from

`BadgeProps`.[`contentEditable`](#contenteditable)

***

### contextMenu?

> `optional` **contextMenu**: `string`

#### Inherited from

`BadgeProps`.[`contextMenu`](#contextmenu)

***

### dir?

> `optional` **dir**: `string`

#### Inherited from

`BadgeProps`.[`dir`](#dir)

***

### draggable?

> `optional` **draggable**: `Booleanish`

#### Inherited from

`BadgeProps`.[`draggable`](#draggable)

***

### enterKeyHint?

> `optional` **enterKeyHint**: `"search"` | `"enter"` | `"done"` | `"go"` | `"next"` | `"previous"` | `"send"`

#### Inherited from

`BadgeProps`.[`enterKeyHint`](#enterkeyhint)

***

### hidden?

> `optional` **hidden**: `boolean`

#### Inherited from

`BadgeProps`.[`hidden`](#hidden)

***

### id?

> `optional` **id**: `string`

#### Inherited from

`BadgeProps`.[`id`](#id)

***

### lang?

> `optional` **lang**: `string`

#### Inherited from

`BadgeProps`.[`lang`](#lang)

***

### nonce?

> `optional` **nonce**: `string`

#### Inherited from

`BadgeProps`.[`nonce`](#nonce)

***

### slot?

> `optional` **slot**: `string`

#### Inherited from

`BadgeProps`.[`slot`](#slot)

***

### spellCheck?

> `optional` **spellCheck**: `Booleanish`

#### Inherited from

`BadgeProps`.[`spellCheck`](#spellcheck)

***

### style?

> `optional` **style**: `CSSProperties`

#### Inherited from

`BadgeProps`.[`style`](#style)

***

### tabIndex?

> `optional` **tabIndex**: `number`

#### Inherited from

`BadgeProps`.[`tabIndex`](#tabindex)

***

### title?

> `optional` **title**: `string`

#### Inherited from

`BadgeProps`.[`title`](#title)

***

### translate?

> `optional` **translate**: `"yes"` | `"no"`

#### Inherited from

`BadgeProps`.[`translate`](#translate)

***

### radioGroup?

> `optional` **radioGroup**: `string`

#### Inherited from

`BadgeProps`.[`radioGroup`](#radiogroup)

***

### role?

> `optional` **role**: `AriaRole`

#### Inherited from

`BadgeProps`.[`role`](#role)

***

### about?

> `optional` **about**: `string`

#### Inherited from

`BadgeProps`.[`about`](#about)

***

### content?

> `optional` **content**: `string`

#### Inherited from

`BadgeProps`.[`content`](#content)

***

### datatype?

> `optional` **datatype**: `string`

#### Inherited from

`BadgeProps`.[`datatype`](#datatype)

***

### inlist?

> `optional` **inlist**: `any`

#### Inherited from

`BadgeProps`.[`inlist`](#inlist)

***

### prefix?

> `optional` **prefix**: `string`

#### Inherited from

`BadgeProps`.[`prefix`](#prefix)

***

### property?

> `optional` **property**: `string`

#### Inherited from

`BadgeProps`.[`property`](#property)

***

### rel?

> `optional` **rel**: `string`

#### Inherited from

`BadgeProps`.[`rel`](#rel)

***

### resource?

> `optional` **resource**: `string`

#### Inherited from

`BadgeProps`.[`resource`](#resource)

***

### rev?

> `optional` **rev**: `string`

#### Inherited from

`BadgeProps`.[`rev`](#rev)

***

### typeof?

> `optional` **typeof**: `string`

#### Inherited from

`BadgeProps`.[`typeof`](#typeof)

***

### vocab?

> `optional` **vocab**: `string`

#### Inherited from

`BadgeProps`.[`vocab`](#vocab)

***

### autoCorrect?

> `optional` **autoCorrect**: `string`

#### Inherited from

`BadgeProps`.[`autoCorrect`](#autocorrect)

***

### autoSave?

> `optional` **autoSave**: `string`

#### Inherited from

`BadgeProps`.[`autoSave`](#autosave)

***

### color?

> `optional` **color**: `string`

#### Inherited from

`BadgeProps`.[`color`](#color)

***

### itemProp?

> `optional` **itemProp**: `string`

#### Inherited from

`BadgeProps`.[`itemProp`](#itemprop)

***

### itemScope?

> `optional` **itemScope**: `boolean`

#### Inherited from

`BadgeProps`.[`itemScope`](#itemscope)

***

### itemType?

> `optional` **itemType**: `string`

#### Inherited from

`BadgeProps`.[`itemType`](#itemtype)

***

### itemID?

> `optional` **itemID**: `string`

#### Inherited from

`BadgeProps`.[`itemID`](#itemid)

***

### itemRef?

> `optional` **itemRef**: `string`

#### Inherited from

`BadgeProps`.[`itemRef`](#itemref)

***

### results?

> `optional` **results**: `number`

#### Inherited from

`BadgeProps`.[`results`](#results)

***

### security?

> `optional` **security**: `string`

#### Inherited from

`BadgeProps`.[`security`](#security)

***

### unselectable?

> `optional` **unselectable**: `"off"` | `"on"`

#### Inherited from

`BadgeProps`.[`unselectable`](#unselectable)

***

### popover?

> `optional` **popover**: `""` | `"auto"` | `"manual"` | `"hint"`

#### Inherited from

`BadgeProps`.[`popover`](#popover)

***

### popoverTargetAction?

> `optional` **popoverTargetAction**: `"toggle"` | `"show"` | `"hide"`

#### Inherited from

`BadgeProps`.[`popoverTargetAction`](#popovertargetaction)

***

### popoverTarget?

> `optional` **popoverTarget**: `string`

#### Inherited from

`BadgeProps`.[`popoverTarget`](#popovertarget)

***

### inert?

> `optional` **inert**: `boolean`

#### See

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert

#### Inherited from

`BadgeProps`.[`inert`](#inert)

***

### inputMode?

> `optional` **inputMode**: `"search"` | `"text"` | `"none"` | `"tel"` | `"url"` | `"email"` | `"numeric"` | `"decimal"`

Hints at the type of data that might be entered by the user while editing the element or its contents

#### See

<https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute>

#### Inherited from

`BadgeProps`.[`inputMode`](#inputmode)

***

### is?

> `optional` **is**: `string`

Specify that a standard HTML element should behave like a defined custom built-in element

#### See

<https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is>

#### Inherited from

`BadgeProps`.[`is`](#is)

***

### exportparts?

> `optional` **exportparts**: `string`

#### See

<https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts>

#### Inherited from

`BadgeProps`.[`exportparts`](#exportparts)

***

### part?

> `optional` **part**: `string`

#### See

<https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part>

#### Inherited from

`BadgeProps`.[`part`](#part)

---

---
url: /api/duckdb-core/interfaces/BaseDuckDbConnectorImpl.md
---
[@sqlrooms/duckdb-core](../index.md) / BaseDuckDbConnectorImpl

# Interface: BaseDuckDbConnectorImpl

## Methods

### initializeInternal()?

> `optional` **initializeInternal**(): `Promise`<`void`>

#### Returns

`Promise`<`void`>

***

### destroyInternal()?

> `optional` **destroyInternal**(): `Promise`<`void`>

#### Returns

`Promise`<`void`>

***

### executeQueryInternal()

> **executeQueryInternal**<`T`>(`query`, `signal`, `queryId?`): `Promise`<`Table`<`T`>>

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `query` | `string` |
| `signal` | `AbortSignal` |
| `queryId?` | `string` |

#### Returns

`Promise`<`Table`<`T`>>

***

### cancelQueryInternal()?

> `optional` **cancelQueryInternal**(`queryId`): `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `queryId` | `string` |

#### Returns

`Promise`<`void`>

***

### loadArrowInternal()?

> `optional` **loadArrowInternal**(`file`, `tableName`, `opts?`): `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `file` | `Table`<`any`> | `Uint8Array`<`ArrayBufferLike`> |
| `tableName` | `string` |
| `opts?` | { `schema?`: `string`; } |
| `opts.schema?` | `string` |

#### Returns

`Promise`<`void`>

***

### loadObjectsInternal()?

> `optional` **loadObjectsInternal**(`file`, `tableName`, `opts?`): `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `file` | `Record`<`string`, `unknown`>\[] |
| `tableName` | `string` |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } |
| `opts.schema?` | `string` |
| `opts.select?` | `string`\[] |
| `opts.where?` | `string` |
| `opts.view?` | `boolean` |
| `opts.temp?` | `boolean` |
| `opts.replace?` | `boolean` |

#### Returns

`Promise`<`void`>

***

### loadFileInternal()?

> `optional` **loadFileInternal**(`file`, `tableName`, `opts?`): `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `file` | `string` | `File` |
| `tableName` | `string` |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } |

#### Returns

`Promise`<`void`>

---

---
url: /api/duckdb/interfaces/BaseDuckDbConnectorImpl.md
---
[@sqlrooms/duckdb](../index.md) / BaseDuckDbConnectorImpl

# Interface: BaseDuckDbConnectorImpl

## Methods

### initializeInternal()?

> `optional` **initializeInternal**(): `Promise`<`void`>

#### Returns

`Promise`<`void`>

***

### destroyInternal()?

> `optional` **destroyInternal**(): `Promise`<`void`>

#### Returns

`Promise`<`void`>

***

### executeQueryInternal()

> **executeQueryInternal**<`T`>(`query`, `signal`, `queryId?`): `Promise`<`Table`<`T`>>

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `query` | `string` |
| `signal` | `AbortSignal` |
| `queryId?` | `string` |

#### Returns

`Promise`<`Table`<`T`>>

***

### cancelQueryInternal()?

> `optional` **cancelQueryInternal**(`queryId`): `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `queryId` | `string` |

#### Returns

`Promise`<`void`>

***

### loadArrowInternal()?

> `optional` **loadArrowInternal**(`file`, `tableName`, `opts?`): `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `file` | `Table`<`any`> | `Uint8Array`<`ArrayBufferLike`> |
| `tableName` | `string` |
| `opts?` | { `schema?`: `string`; } |
| `opts.schema?` | `string` |

#### Returns

`Promise`<`void`>

***

### loadObjectsInternal()?

> `optional` **loadObjectsInternal**(`file`, `tableName`, `opts?`): `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `file` | `Record`<`string`, `unknown`>\[] |
| `tableName` | `string` |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } |
| `opts.schema?` | `string` |
| `opts.select?` | `string`\[] |
| `opts.where?` | `string` |
| `opts.view?` | `boolean` |
| `opts.temp?` | `boolean` |
| `opts.replace?` | `boolean` |

#### Returns

`Promise`<`void`>

***

### loadFileInternal()?

> `optional` **loadFileInternal**(`file`, `tableName`, `opts?`): `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `file` | `string` | `File` |
| `tableName` | `string` |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } |

#### Returns

`Promise`<`void`>

---

---
url: /api/duckdb-core/interfaces/BaseDuckDbConnectorOptions.md
---
[@sqlrooms/duckdb-core](../index.md) / BaseDuckDbConnectorOptions

# Interface: BaseDuckDbConnectorOptions

## Properties

### dbPath?

> `optional` **dbPath**: `string`

***

### initializationQuery?

> `optional` **initializationQuery**: `string`

---

---
url: /api/duckdb/interfaces/BaseDuckDbConnectorOptions.md
---
[@sqlrooms/duckdb](../index.md) / BaseDuckDbConnectorOptions

# Interface: BaseDuckDbConnectorOptions

## Properties

### dbPath?

> `optional` **dbPath**: `string`

***

### initializationQuery?

> `optional` **initializationQuery**: `string`

---

---
url: /api/ui/interfaces/ButtonProps.md
---
[@sqlrooms/ui](../index.md) / ButtonProps

# Interface: ButtonProps

## Extends

* `ButtonHTMLAttributes`<`HTMLButtonElement`>.`VariantProps`<*typeof* [`buttonVariants`](../variables/buttonVariants.md)>

## Properties

### variant?

> `optional` **variant**: `"link"` | `"default"` | `"destructive"` | `"secondary"` | `"outline"` | `"ghost"` | `null`

#### Inherited from

`VariantProps.variant`

***

### size?

> `optional` **size**: `"default"` | `"sm"` | `"lg"` | `"icon"` | `"xs"` | `null`

#### Inherited from

`VariantProps.size`

***

### asChild?

> `optional` **asChild**: `boolean`

***

### children?

> `optional` **children**: `ReactNode`

#### Inherited from

`React.ButtonHTMLAttributes.children`

***

### dangerouslySetInnerHTML?

> `optional` **dangerouslySetInnerHTML**: `object`

| Name | Type |
| ------ | ------ |
| `__html` | `string` | `TrustedHTML` |

#### Inherited from

`React.ButtonHTMLAttributes.dangerouslySetInnerHTML`

***

### onCopy?

> `optional` **onCopy**: `ClipboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCopy`

***

### onCopyCapture?

> `optional` **onCopyCapture**: `ClipboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCopyCapture`

***

### onCut?

> `optional` **onCut**: `ClipboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCut`

***

### onCutCapture?

> `optional` **onCutCapture**: `ClipboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCutCapture`

***

### onPaste?

> `optional` **onPaste**: `ClipboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPaste`

***

### onPasteCapture?

> `optional` **onPasteCapture**: `ClipboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPasteCapture`

***

### onCompositionEnd?

> `optional` **onCompositionEnd**: `CompositionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCompositionEnd`

***

### onCompositionEndCapture?

> `optional` **onCompositionEndCapture**: `CompositionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCompositionEndCapture`

***

### onCompositionStart?

> `optional` **onCompositionStart**: `CompositionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCompositionStart`

***

### onCompositionStartCapture?

> `optional` **onCompositionStartCapture**: `CompositionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCompositionStartCapture`

***

### onCompositionUpdate?

> `optional` **onCompositionUpdate**: `CompositionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCompositionUpdate`

***

### onCompositionUpdateCapture?

> `optional` **onCompositionUpdateCapture**: `CompositionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCompositionUpdateCapture`

***

### onFocus?

> `optional` **onFocus**: `FocusEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onFocus`

***

### onFocusCapture?

> `optional` **onFocusCapture**: `FocusEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onFocusCapture`

***

### onBlur?

> `optional` **onBlur**: `FocusEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onBlur`

***

### onBlurCapture?

> `optional` **onBlurCapture**: `FocusEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onBlurCapture`

***

### onChange?

> `optional` **onChange**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onChange`

***

### onChangeCapture?

> `optional` **onChangeCapture**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onChangeCapture`

***

### onBeforeInput?

> `optional` **onBeforeInput**: `InputEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onBeforeInput`

***

### onBeforeInputCapture?

> `optional` **onBeforeInputCapture**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onBeforeInputCapture`

***

### onInput?

> `optional` **onInput**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onInput`

***

### onInputCapture?

> `optional` **onInputCapture**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onInputCapture`

***

### onReset?

> `optional` **onReset**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onReset`

***

### onResetCapture?

> `optional` **onResetCapture**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onResetCapture`

***

### onSubmit?

> `optional` **onSubmit**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSubmit`

***

### onSubmitCapture?

> `optional` **onSubmitCapture**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSubmitCapture`

***

### onInvalid?

> `optional` **onInvalid**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onInvalid`

***

### onInvalidCapture?

> `optional` **onInvalidCapture**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onInvalidCapture`

***

### onLoad?

> `optional` **onLoad**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoad`

***

### onLoadCapture?

> `optional` **onLoadCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoadCapture`

***

### onError?

> `optional` **onError**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onError`

***

### onErrorCapture?

> `optional` **onErrorCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onErrorCapture`

***

### onKeyDown?

> `optional` **onKeyDown**: `KeyboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onKeyDown`

***

### onKeyDownCapture?

> `optional` **onKeyDownCapture**: `KeyboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onKeyDownCapture`

***

### ~~onKeyPress?~~

> `optional` **onKeyPress**: `KeyboardEventHandler`<`HTMLButtonElement`>

#### Deprecated

Use `onKeyUp` or `onKeyDown` instead

#### Inherited from

`React.ButtonHTMLAttributes.onKeyPress`

***

### ~~onKeyPressCapture?~~

> `optional` **onKeyPressCapture**: `KeyboardEventHandler`<`HTMLButtonElement`>

#### Deprecated

Use `onKeyUpCapture` or `onKeyDownCapture` instead

#### Inherited from

`React.ButtonHTMLAttributes.onKeyPressCapture`

***

### onKeyUp?

> `optional` **onKeyUp**: `KeyboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onKeyUp`

***

### onKeyUpCapture?

> `optional` **onKeyUpCapture**: `KeyboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onKeyUpCapture`

***

### onAbort?

> `optional` **onAbort**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAbort`

***

### onAbortCapture?

> `optional` **onAbortCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAbortCapture`

***

### onCanPlay?

> `optional` **onCanPlay**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCanPlay`

***

### onCanPlayCapture?

> `optional` **onCanPlayCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCanPlayCapture`

***

### onCanPlayThrough?

> `optional` **onCanPlayThrough**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCanPlayThrough`

***

### onCanPlayThroughCapture?

> `optional` **onCanPlayThroughCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCanPlayThroughCapture`

***

### onDurationChange?

> `optional` **onDurationChange**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDurationChange`

***

### onDurationChangeCapture?

> `optional` **onDurationChangeCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDurationChangeCapture`

***

### onEmptied?

> `optional` **onEmptied**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onEmptied`

***

### onEmptiedCapture?

> `optional` **onEmptiedCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onEmptiedCapture`

***

### onEncrypted?

> `optional` **onEncrypted**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onEncrypted`

***

### onEncryptedCapture?

> `optional` **onEncryptedCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onEncryptedCapture`

***

### onEnded?

> `optional` **onEnded**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onEnded`

***

### onEndedCapture?

> `optional` **onEndedCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onEndedCapture`

***

### onLoadedData?

> `optional` **onLoadedData**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoadedData`

***

### onLoadedDataCapture?

> `optional` **onLoadedDataCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoadedDataCapture`

***

### onLoadedMetadata?

> `optional` **onLoadedMetadata**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoadedMetadata`

***

### onLoadedMetadataCapture?

> `optional` **onLoadedMetadataCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoadedMetadataCapture`

***

### onLoadStart?

> `optional` **onLoadStart**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoadStart`

***

### onLoadStartCapture?

> `optional` **onLoadStartCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoadStartCapture`

***

### onPause?

> `optional` **onPause**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPause`

***

### onPauseCapture?

> `optional` **onPauseCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPauseCapture`

***

### onPlay?

> `optional` **onPlay**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPlay`

***

### onPlayCapture?

> `optional` **onPlayCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPlayCapture`

***

### onPlaying?

> `optional` **onPlaying**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPlaying`

***

### onPlayingCapture?

> `optional` **onPlayingCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPlayingCapture`

***

### onProgress?

> `optional` **onProgress**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onProgress`

***

### onProgressCapture?

> `optional` **onProgressCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onProgressCapture`

***

### onRateChange?

> `optional` **onRateChange**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onRateChange`

***

### onRateChangeCapture?

> `optional` **onRateChangeCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onRateChangeCapture`

***

### onSeeked?

> `optional` **onSeeked**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSeeked`

***

### onSeekedCapture?

> `optional` **onSeekedCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSeekedCapture`

***

### onSeeking?

> `optional` **onSeeking**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSeeking`

***

### onSeekingCapture?

> `optional` **onSeekingCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSeekingCapture`

***

### onStalled?

> `optional` **onStalled**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onStalled`

***

### onStalledCapture?

> `optional` **onStalledCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onStalledCapture`

***

### onSuspend?

> `optional` **onSuspend**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSuspend`

***

### onSuspendCapture?

> `optional` **onSuspendCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSuspendCapture`

***

### onTimeUpdate?

> `optional` **onTimeUpdate**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTimeUpdate`

***

### onTimeUpdateCapture?

> `optional` **onTimeUpdateCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTimeUpdateCapture`

***

### onVolumeChange?

> `optional` **onVolumeChange**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onVolumeChange`

***

### onVolumeChangeCapture?

> `optional` **onVolumeChangeCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onVolumeChangeCapture`

***

### onWaiting?

> `optional` **onWaiting**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onWaiting`

***

### onWaitingCapture?

> `optional` **onWaitingCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onWaitingCapture`

***

### onAuxClick?

> `optional` **onAuxClick**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAuxClick`

***

### onAuxClickCapture?

> `optional` **onAuxClickCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAuxClickCapture`

***

### onClick?

> `optional` **onClick**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onClick`

***

### onClickCapture?

> `optional` **onClickCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onClickCapture`

***

### onContextMenu?

> `optional` **onContextMenu**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onContextMenu`

***

### onContextMenuCapture?

> `optional` **onContextMenuCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onContextMenuCapture`

***

### onDoubleClick?

> `optional` **onDoubleClick**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDoubleClick`

***

### onDoubleClickCapture?

> `optional` **onDoubleClickCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDoubleClickCapture`

***

### onDrag?

> `optional` **onDrag**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDrag`

***

### onDragCapture?

> `optional` **onDragCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragCapture`

***

### onDragEnd?

> `optional` **onDragEnd**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragEnd`

***

### onDragEndCapture?

> `optional` **onDragEndCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragEndCapture`

***

### onDragEnter?

> `optional` **onDragEnter**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragEnter`

***

### onDragEnterCapture?

> `optional` **onDragEnterCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragEnterCapture`

***

### onDragExit?

> `optional` **onDragExit**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragExit`

***

### onDragExitCapture?

> `optional` **onDragExitCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragExitCapture`

***

### onDragLeave?

> `optional` **onDragLeave**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragLeave`

***

### onDragLeaveCapture?

> `optional` **onDragLeaveCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragLeaveCapture`

***

### onDragOver?

> `optional` **onDragOver**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragOver`

***

### onDragOverCapture?

> `optional` **onDragOverCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragOverCapture`

***

### onDragStart?

> `optional` **onDragStart**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragStart`

***

### onDragStartCapture?

> `optional` **onDragStartCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragStartCapture`

***

### onDrop?

> `optional` **onDrop**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDrop`

***

### onDropCapture?

> `optional` **onDropCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDropCapture`

***

### onMouseDown?

> `optional` **onMouseDown**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseDown`

***

### onMouseDownCapture?

> `optional` **onMouseDownCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseDownCapture`

***

### onMouseEnter?

> `optional` **onMouseEnter**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseEnter`

***

### onMouseLeave?

> `optional` **onMouseLeave**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseLeave`

***

### onMouseMove?

> `optional` **onMouseMove**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseMove`

***

### onMouseMoveCapture?

> `optional` **onMouseMoveCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseMoveCapture`

***

### onMouseOut?

> `optional` **onMouseOut**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseOut`

***

### onMouseOutCapture?

> `optional` **onMouseOutCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseOutCapture`

***

### onMouseOver?

> `optional` **onMouseOver**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseOver`

***

### onMouseOverCapture?

> `optional` **onMouseOverCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseOverCapture`

***

### onMouseUp?

> `optional` **onMouseUp**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseUp`

***

### onMouseUpCapture?

> `optional` **onMouseUpCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseUpCapture`

***

### onSelect?

> `optional` **onSelect**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSelect`

***

### onSelectCapture?

> `optional` **onSelectCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSelectCapture`

***

### onTouchCancel?

> `optional` **onTouchCancel**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchCancel`

***

### onTouchCancelCapture?

> `optional` **onTouchCancelCapture**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchCancelCapture`

***

### onTouchEnd?

> `optional` **onTouchEnd**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchEnd`

***

### onTouchEndCapture?

> `optional` **onTouchEndCapture**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchEndCapture`

***

### onTouchMove?

> `optional` **onTouchMove**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchMove`

***

### onTouchMoveCapture?

> `optional` **onTouchMoveCapture**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchMoveCapture`

***

### onTouchStart?

> `optional` **onTouchStart**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchStart`

***

### onTouchStartCapture?

> `optional` **onTouchStartCapture**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchStartCapture`

***

### onPointerDown?

> `optional` **onPointerDown**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerDown`

***

### onPointerDownCapture?

> `optional` **onPointerDownCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerDownCapture`

***

### onPointerMove?

> `optional` **onPointerMove**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerMove`

***

### onPointerMoveCapture?

> `optional` **onPointerMoveCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerMoveCapture`

***

### onPointerUp?

> `optional` **onPointerUp**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerUp`

***

### onPointerUpCapture?

> `optional` **onPointerUpCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerUpCapture`

***

### onPointerCancel?

> `optional` **onPointerCancel**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerCancel`

***

### onPointerCancelCapture?

> `optional` **onPointerCancelCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerCancelCapture`

***

### onPointerEnter?

> `optional` **onPointerEnter**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerEnter`

***

### onPointerLeave?

> `optional` **onPointerLeave**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerLeave`

***

### onPointerOver?

> `optional` **onPointerOver**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerOver`

***

### onPointerOverCapture?

> `optional` **onPointerOverCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerOverCapture`

***

### onPointerOut?

> `optional` **onPointerOut**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerOut`

***

### onPointerOutCapture?

> `optional` **onPointerOutCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerOutCapture`

***

### onGotPointerCapture?

> `optional` **onGotPointerCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onGotPointerCapture`

***

### onGotPointerCaptureCapture?

> `optional` **onGotPointerCaptureCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onGotPointerCaptureCapture`

***

### onLostPointerCapture?

> `optional` **onLostPointerCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLostPointerCapture`

***

### onLostPointerCaptureCapture?

> `optional` **onLostPointerCaptureCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLostPointerCaptureCapture`

***

### onScroll?

> `optional` **onScroll**: `UIEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onScroll`

***

### onScrollCapture?

> `optional` **onScrollCapture**: `UIEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onScrollCapture`

***

### onScrollEnd?

> `optional` **onScrollEnd**: `UIEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onScrollEnd`

***

### onScrollEndCapture?

> `optional` **onScrollEndCapture**: `UIEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onScrollEndCapture`

***

### onWheel?

> `optional` **onWheel**: `WheelEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onWheel`

***

### onWheelCapture?

> `optional` **onWheelCapture**: `WheelEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onWheelCapture`

***

### onAnimationStart?

> `optional` **onAnimationStart**: `AnimationEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAnimationStart`

***

### onAnimationStartCapture?

> `optional` **onAnimationStartCapture**: `AnimationEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAnimationStartCapture`

***

### onAnimationEnd?

> `optional` **onAnimationEnd**: `AnimationEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAnimationEnd`

***

### onAnimationEndCapture?

> `optional` **onAnimationEndCapture**: `AnimationEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAnimationEndCapture`

***

### onAnimationIteration?

> `optional` **onAnimationIteration**: `AnimationEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAnimationIteration`

***

### onAnimationIterationCapture?

> `optional` **onAnimationIterationCapture**: `AnimationEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAnimationIterationCapture`

***

### onToggle?

> `optional` **onToggle**: `ToggleEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onToggle`

***

### onBeforeToggle?

> `optional` **onBeforeToggle**: `ToggleEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onBeforeToggle`

***

### onTransitionCancel?

> `optional` **onTransitionCancel**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionCancel`

***

### onTransitionCancelCapture?

> `optional` **onTransitionCancelCapture**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionCancelCapture`

***

### onTransitionEnd?

> `optional` **onTransitionEnd**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionEnd`

***

### onTransitionEndCapture?

> `optional` **onTransitionEndCapture**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionEndCapture`

***

### onTransitionRun?

> `optional` **onTransitionRun**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionRun`

***

### onTransitionRunCapture?

> `optional` **onTransitionRunCapture**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionRunCapture`

***

### onTransitionStart?

> `optional` **onTransitionStart**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionStart`

***

### onTransitionStartCapture?

> `optional` **onTransitionStartCapture**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionStartCapture`

***

### aria-activedescendant?

> `optional` **aria-activedescendant**: `string`

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

#### Inherited from

`React.ButtonHTMLAttributes.aria-activedescendant`

***

### aria-atomic?

> `optional` **aria-atomic**: `Booleanish`

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

#### Inherited from

`React.ButtonHTMLAttributes.aria-atomic`

***

### aria-autocomplete?

> `optional` **aria-autocomplete**: `"none"` | `"list"` | `"inline"` | `"both"`

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
presented if they are made.

#### Inherited from

`React.ButtonHTMLAttributes.aria-autocomplete`

***

### aria-braillelabel?

> `optional` **aria-braillelabel**: `string`

Defines a string value that labels the current element, which is intended to be converted into Braille.

#### See

aria-label.

#### Inherited from

`React.ButtonHTMLAttributes.aria-braillelabel`

***

### aria-brailleroledescription?

> `optional` **aria-brailleroledescription**: `string`

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

#### See

aria-roledescription.

#### Inherited from

`React.ButtonHTMLAttributes.aria-brailleroledescription`

***

### aria-busy?

> `optional` **aria-busy**: `Booleanish`

#### Inherited from

`React.ButtonHTMLAttributes.aria-busy`

***

### aria-checked?

> `optional` **aria-checked**: `boolean` | `"true"` | `"false"` | `"mixed"`

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

#### See

* aria-pressed
* aria-selected.

#### Inherited from

`React.ButtonHTMLAttributes.aria-checked`

***

### aria-colcount?

> `optional` **aria-colcount**: `number`

Defines the total number of columns in a table, grid, or treegrid.

#### See

aria-colindex.

#### Inherited from

`React.ButtonHTMLAttributes.aria-colcount`

***

### aria-colindex?

> `optional` **aria-colindex**: `number`

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

#### See

* aria-colcount
* aria-colspan.

#### Inherited from

`React.ButtonHTMLAttributes.aria-colindex`

***

### aria-colindextext?

> `optional` **aria-colindextext**: `string`

Defines a human readable text alternative of aria-colindex.

#### See

aria-rowindextext.

#### Inherited from

`React.ButtonHTMLAttributes.aria-colindextext`

***

### aria-colspan?

> `optional` **aria-colspan**: `number`

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

#### See

* aria-colindex
* aria-rowspan.

#### Inherited from

`React.ButtonHTMLAttributes.aria-colspan`

***

### aria-controls?

> `optional` **aria-controls**: `string`

Identifies the element (or elements) whose contents or presence are controlled by the current element.

#### See

aria-owns.

#### Inherited from

`React.ButtonHTMLAttributes.aria-controls`

***

### aria-current?

> `optional` **aria-current**: `boolean` | `"time"` | `"true"` | `"false"` | `"page"` | `"step"` | `"location"` | `"date"`

Indicates the element that represents the current item within a container or set of related elements.

#### Inherited from

`React.ButtonHTMLAttributes.aria-current`

***

### aria-describedby?

> `optional` **aria-describedby**: `string`

Identifies the element (or elements) that describes the object.

#### See

aria-labelledby

#### Inherited from

`React.ButtonHTMLAttributes.aria-describedby`

***

### aria-description?

> `optional` **aria-description**: `string`

Defines a string value that describes or annotates the current element.

#### See

related aria-describedby.

#### Inherited from

`React.ButtonHTMLAttributes.aria-description`

***

### aria-details?

> `optional` **aria-details**: `string`

Identifies the element that provides a detailed, extended description for the object.

#### See

aria-describedby.

#### Inherited from

`React.ButtonHTMLAttributes.aria-details`

***

### aria-disabled?

> `optional` **aria-disabled**: `Booleanish`

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

#### See

* aria-hidden
* aria-readonly.

#### Inherited from

`React.ButtonHTMLAttributes.aria-disabled`

***

### ~~aria-dropeffect?~~

> `optional` **aria-dropeffect**: `"link"` | `"none"` | `"copy"` | `"execute"` | `"move"` | `"popup"`

Indicates what functions can be performed when a dragged object is released on the drop target.

#### Deprecated

in ARIA 1.1

#### Inherited from

`React.ButtonHTMLAttributes.aria-dropeffect`

***

### aria-errormessage?

> `optional` **aria-errormessage**: `string`

Identifies the element that provides an error message for the object.

#### See

* aria-invalid
* aria-describedby.

#### Inherited from

`React.ButtonHTMLAttributes.aria-errormessage`

***

### aria-expanded?

> `optional` **aria-expanded**: `Booleanish`

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

#### Inherited from

`React.ButtonHTMLAttributes.aria-expanded`

***

### aria-flowto?

> `optional` **aria-flowto**: `string`

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
allows assistive technology to override the general default of reading in document source order.

#### Inherited from

`React.ButtonHTMLAttributes.aria-flowto`

***

### ~~aria-grabbed?~~

> `optional` **aria-grabbed**: `Booleanish`

Indicates an element's "grabbed" state in a drag-and-drop operation.

#### Deprecated

in ARIA 1.1

#### Inherited from

`React.ButtonHTMLAttributes.aria-grabbed`

***

### aria-haspopup?

> `optional` **aria-haspopup**: `boolean` | `"dialog"` | `"menu"` | `"true"` | `"false"` | `"grid"` | `"listbox"` | `"tree"`

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

#### Inherited from

`React.ButtonHTMLAttributes.aria-haspopup`

***

### aria-hidden?

> `optional` **aria-hidden**: `Booleanish`

Indicates whether the element is exposed to an accessibility API.

#### See

aria-disabled.

#### Inherited from

`React.ButtonHTMLAttributes.aria-hidden`

***

### aria-invalid?

> `optional` **aria-invalid**: `boolean` | `"true"` | `"false"` | `"grammar"` | `"spelling"`

Indicates the entered value does not conform to the format expected by the application.

#### See

aria-errormessage.

#### Inherited from

`React.ButtonHTMLAttributes.aria-invalid`

***

### aria-keyshortcuts?

> `optional` **aria-keyshortcuts**: `string`

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

#### Inherited from

`React.ButtonHTMLAttributes.aria-keyshortcuts`

***

### aria-label?

> `optional` **aria-label**: `string`

Defines a string value that labels the current element.

#### See

aria-labelledby.

#### Inherited from

`React.ButtonHTMLAttributes.aria-label`

***

### aria-labelledby?

> `optional` **aria-labelledby**: `string`

Identifies the element (or elements) that labels the current element.

#### See

aria-describedby.

#### Inherited from

`React.ButtonHTMLAttributes.aria-labelledby`

***

### aria-level?

> `optional` **aria-level**: `number`

Defines the hierarchical level of an element within a structure.

#### Inherited from

`React.ButtonHTMLAttributes.aria-level`

***

### aria-live?

> `optional` **aria-live**: `"off"` | `"assertive"` | `"polite"`

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

#### Inherited from

`React.ButtonHTMLAttributes.aria-live`

***

### aria-modal?

> `optional` **aria-modal**: `Booleanish`

Indicates whether an element is modal when displayed.

#### Inherited from

`React.ButtonHTMLAttributes.aria-modal`

***

### aria-multiline?

> `optional` **aria-multiline**: `Booleanish`

Indicates whether a text box accepts multiple lines of input or only a single line.

#### Inherited from

`React.ButtonHTMLAttributes.aria-multiline`

***

### aria-multiselectable?

> `optional` **aria-multiselectable**: `Booleanish`

Indicates that the user may select more than one item from the current selectable descendants.

#### Inherited from

`React.ButtonHTMLAttributes.aria-multiselectable`

***

### aria-orientation?

> `optional` **aria-orientation**: `"horizontal"` | `"vertical"`

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

#### Inherited from

`React.ButtonHTMLAttributes.aria-orientation`

***

### aria-owns?

> `optional` **aria-owns**: `string`

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

#### See

aria-controls.

#### Inherited from

`React.ButtonHTMLAttributes.aria-owns`

***

### aria-placeholder?

> `optional` **aria-placeholder**: `string`

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
A hint could be a sample value or a brief description of the expected format.

#### Inherited from

`React.ButtonHTMLAttributes.aria-placeholder`

***

### aria-posinset?

> `optional` **aria-posinset**: `number`

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

#### See

aria-setsize.

#### Inherited from

`React.ButtonHTMLAttributes.aria-posinset`

***

### aria-pressed?

> `optional` **aria-pressed**: `boolean` | `"true"` | `"false"` | `"mixed"`

Indicates the current "pressed" state of toggle buttons.

#### See

* aria-checked
* aria-selected.

#### Inherited from

`React.ButtonHTMLAttributes.aria-pressed`

***

### aria-readonly?

> `optional` **aria-readonly**: `Booleanish`

Indicates that the element is not editable, but is otherwise operable.

#### See

aria-disabled.

#### Inherited from

`React.ButtonHTMLAttributes.aria-readonly`

***

### aria-relevant?

> `optional` **aria-relevant**: `"text"` | `"additions"` | `"additions removals"` | `"additions text"` | `"all"` | `"removals"` | `"removals additions"` | `"removals text"` | `"text additions"` | `"text removals"`

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

#### See

aria-atomic.

#### Inherited from

`React.ButtonHTMLAttributes.aria-relevant`

***

### aria-required?

> `optional` **aria-required**: `Booleanish`

Indicates that user input is required on the element before a form may be submitted.

#### Inherited from

`React.ButtonHTMLAttributes.aria-required`

***

### aria-roledescription?

> `optional` **aria-roledescription**: `string`

Defines a human-readable, author-localized description for the role of an element.

#### Inherited from

`React.ButtonHTMLAttributes.aria-roledescription`

***

### aria-rowcount?

> `optional` **aria-rowcount**: `number`

Defines the total number of rows in a table, grid, or treegrid.

#### See

aria-rowindex.

#### Inherited from

`React.ButtonHTMLAttributes.aria-rowcount`

***

### aria-rowindex?

> `optional` **aria-rowindex**: `number`

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

#### See

* aria-rowcount
* aria-rowspan.

#### Inherited from

`React.ButtonHTMLAttributes.aria-rowindex`

***

### aria-rowindextext?

> `optional` **aria-rowindextext**: `string`

Defines a human readable text alternative of aria-rowindex.

#### See

aria-colindextext.

#### Inherited from

`React.ButtonHTMLAttributes.aria-rowindextext`

***

### aria-rowspan?

> `optional` **aria-rowspan**: `number`

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

#### See

* aria-rowindex
* aria-colspan.

#### Inherited from

`React.ButtonHTMLAttributes.aria-rowspan`

***

### aria-selected?

> `optional` **aria-selected**: `Booleanish`

Indicates the current "selected" state of various widgets.

#### See

* aria-checked
* aria-pressed.

#### Inherited from

`React.ButtonHTMLAttributes.aria-selected`

***

### aria-setsize?

> `optional` **aria-setsize**: `number`

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

#### See

aria-posinset.

#### Inherited from

`React.ButtonHTMLAttributes.aria-setsize`

***

### aria-sort?

> `optional` **aria-sort**: `"none"` | `"ascending"` | `"descending"` | `"other"`

Indicates if items in a table or grid are sorted in ascending or descending order.

#### Inherited from

`React.ButtonHTMLAttributes.aria-sort`

***

### aria-valuemax?

> `optional` **aria-valuemax**: `number`

Defines the maximum allowed value for a range widget.

#### Inherited from

`React.ButtonHTMLAttributes.aria-valuemax`

***

### aria-valuemin?

> `optional` **aria-valuemin**: `number`

Defines the minimum allowed value for a range widget.

#### Inherited from

`React.ButtonHTMLAttributes.aria-valuemin`

***

### aria-valuenow?

> `optional` **aria-valuenow**: `number`

Defines the current value for a range widget.

#### See

aria-valuetext.

#### Inherited from

`React.ButtonHTMLAttributes.aria-valuenow`

***

### aria-valuetext?

> `optional` **aria-valuetext**: `string`

Defines the human readable text alternative of aria-valuenow for a range widget.

#### Inherited from

`React.ButtonHTMLAttributes.aria-valuetext`

***

### defaultChecked?

> `optional` **defaultChecked**: `boolean`

#### Inherited from

`React.ButtonHTMLAttributes.defaultChecked`

***

### defaultValue?

> `optional` **defaultValue**: `string` | `number` | readonly `string`\[]

#### Inherited from

`React.ButtonHTMLAttributes.defaultValue`

***

### suppressContentEditableWarning?

> `optional` **suppressContentEditableWarning**: `boolean`

#### Inherited from

`React.ButtonHTMLAttributes.suppressContentEditableWarning`

***

### suppressHydrationWarning?

> `optional` **suppressHydrationWarning**: `boolean`

#### Inherited from

`React.ButtonHTMLAttributes.suppressHydrationWarning`

***

### accessKey?

> `optional` **accessKey**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.accessKey`

***

### autoCapitalize?

> `optional` **autoCapitalize**: `"off"` | `"none"` | `"on"` | `"sentences"` | `"words"` | `"characters"` | `string` & `object`

#### Inherited from

`React.ButtonHTMLAttributes.autoCapitalize`

***

### autoFocus?

> `optional` **autoFocus**: `boolean`

#### Inherited from

`React.ButtonHTMLAttributes.autoFocus`

***

### className?

> `optional` **className**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.className`

***

### contentEditable?

> `optional` **contentEditable**: `Booleanish` | `"inherit"` | `"plaintext-only"`

#### Inherited from

`React.ButtonHTMLAttributes.contentEditable`

***

### contextMenu?

> `optional` **contextMenu**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.contextMenu`

***

### dir?

> `optional` **dir**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.dir`

***

### draggable?

> `optional` **draggable**: `Booleanish`

#### Inherited from

`React.ButtonHTMLAttributes.draggable`

***

### enterKeyHint?

> `optional` **enterKeyHint**: `"search"` | `"enter"` | `"done"` | `"go"` | `"next"` | `"previous"` | `"send"`

#### Inherited from

`React.ButtonHTMLAttributes.enterKeyHint`

***

### hidden?

> `optional` **hidden**: `boolean`

#### Inherited from

`React.ButtonHTMLAttributes.hidden`

***

### id?

> `optional` **id**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.id`

***

### lang?

> `optional` **lang**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.lang`

***

### nonce?

> `optional` **nonce**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.nonce`

***

### slot?

> `optional` **slot**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.slot`

***

### spellCheck?

> `optional` **spellCheck**: `Booleanish`

#### Inherited from

`React.ButtonHTMLAttributes.spellCheck`

***

### style?

> `optional` **style**: `CSSProperties`

#### Inherited from

`React.ButtonHTMLAttributes.style`

***

### tabIndex?

> `optional` **tabIndex**: `number`

#### Inherited from

`React.ButtonHTMLAttributes.tabIndex`

***

### title?

> `optional` **title**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.title`

***

### translate?

> `optional` **translate**: `"yes"` | `"no"`

#### Inherited from

`React.ButtonHTMLAttributes.translate`

***

### radioGroup?

> `optional` **radioGroup**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.radioGroup`

***

### role?

> `optional` **role**: `AriaRole`

#### Inherited from

`React.ButtonHTMLAttributes.role`

***

### about?

> `optional` **about**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.about`

***

### content?

> `optional` **content**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.content`

***

### datatype?

> `optional` **datatype**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.datatype`

***

### inlist?

> `optional` **inlist**: `any`

#### Inherited from

`React.ButtonHTMLAttributes.inlist`

***

### prefix?

> `optional` **prefix**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.prefix`

***

### property?

> `optional` **property**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.property`

***

### rel?

> `optional` **rel**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.rel`

***

### resource?

> `optional` **resource**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.resource`

***

### rev?

> `optional` **rev**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.rev`

***

### typeof?

> `optional` **typeof**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.typeof`

***

### vocab?

> `optional` **vocab**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.vocab`

***

### autoCorrect?

> `optional` **autoCorrect**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.autoCorrect`

***

### autoSave?

> `optional` **autoSave**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.autoSave`

***

### color?

> `optional` **color**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.color`

***

### itemProp?

> `optional` **itemProp**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.itemProp`

***

### itemScope?

> `optional` **itemScope**: `boolean`

#### Inherited from

`React.ButtonHTMLAttributes.itemScope`

***

### itemType?

> `optional` **itemType**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.itemType`

***

### itemID?

> `optional` **itemID**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.itemID`

***

### itemRef?

> `optional` **itemRef**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.itemRef`

***

### results?

> `optional` **results**: `number`

#### Inherited from

`React.ButtonHTMLAttributes.results`

***

### security?

> `optional` **security**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.security`

***

### unselectable?

> `optional` **unselectable**: `"off"` | `"on"`

#### Inherited from

`React.ButtonHTMLAttributes.unselectable`

***

### popover?

> `optional` **popover**: `""` | `"auto"` | `"manual"` | `"hint"`

#### Inherited from

`React.ButtonHTMLAttributes.popover`

***

### popoverTargetAction?

> `optional` **popoverTargetAction**: `"toggle"` | `"show"` | `"hide"`

#### Inherited from

`React.ButtonHTMLAttributes.popoverTargetAction`

***

### popoverTarget?

> `optional` **popoverTarget**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.popoverTarget`

***

### inert?

> `optional` **inert**: `boolean`

#### See

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert

#### Inherited from

`React.ButtonHTMLAttributes.inert`

***

### inputMode?

> `optional` **inputMode**: `"search"` | `"text"` | `"none"` | `"tel"` | `"url"` | `"email"` | `"numeric"` | `"decimal"`

Hints at the type of data that might be entered by the user while editing the element or its contents

#### See

<https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute>

#### Inherited from

`React.ButtonHTMLAttributes.inputMode`

***

### is?

> `optional` **is**: `string`

Specify that a standard HTML element should behave like a defined custom built-in element

#### See

<https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is>

#### Inherited from

`React.ButtonHTMLAttributes.is`

***

### exportparts?

> `optional` **exportparts**: `string`

#### See

<https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts>

#### Inherited from

`React.ButtonHTMLAttributes.exportparts`

***

### part?

> `optional` **part**: `string`

#### See

<https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part>

#### Inherited from

`React.ButtonHTMLAttributes.part`

***

### disabled?

> `optional` **disabled**: `boolean`

#### Inherited from

`ButtonProps`.[`disabled`](#disabled)

***

### form?

> `optional` **form**: `string`

#### Inherited from

`ButtonProps`.[`form`](#form)

***

### formAction?

> `optional` **formAction**: `string` | (`formData`) => `void` | `Promise`<`void`>

#### Inherited from

`React.ButtonHTMLAttributes.formAction`

***

### formEncType?

> `optional` **formEncType**: `string`

#### Inherited from

`ButtonProps`.[`formEncType`](#formenctype)

***

### formMethod?

> `optional` **formMethod**: `string`

#### Inherited from

`ButtonProps`.[`formMethod`](#formmethod)

***

### formNoValidate?

> `optional` **formNoValidate**: `boolean`

#### Inherited from

`ButtonProps`.[`formNoValidate`](#formnovalidate)

***

### formTarget?

> `optional` **formTarget**: `string`

#### Inherited from

`ButtonProps`.[`formTarget`](#formtarget)

***

### name?

> `optional` **name**: `string`

#### Inherited from

`ButtonProps`.[`name`](#name)

***

### type?

> `optional` **type**: `"button"` | `"submit"` | `"reset"`

#### Inherited from

`ButtonProps`.[`type`](#type)

***

### value?

> `optional` **value**: `string` | `number` | readonly `string`\[]

#### Inherited from

`ButtonProps`.[`value`](#value)

---

---
url: /api/ui/interfaces/CopyButtonProps.md
---
[@sqlrooms/ui](../index.md) / CopyButtonProps

# Interface: CopyButtonProps

## Properties

### text

> **text**: `string`

***

### variant?

> `optional` **variant**: `"link"` | `"default"` | `"destructive"` | `"secondary"` | `"outline"` | `"ghost"` | `null`

***

### size?

> `optional` **size**: `"default"` | `"sm"` | `"lg"` | `"icon"` | `"xs"` | `null`

***

### className?

> `optional` **className**: `string`

***

### ariaLabel?

> `optional` **ariaLabel**: `string`

***

### durationMs?

> `optional` **durationMs**: `number`

***

### disabled?

> `optional` **disabled**: `boolean`

***

### onCopied()?

> `optional` **onCopied**: () => `void`

#### Returns

`void`

---

---
url: /api/recharts/interfaces/DefaultTooltipContentProps.md
---
[@sqlrooms/recharts](../index.md) / DefaultTooltipContentProps

# Interface: DefaultTooltipContentProps\<TValue, TName>

## Type Parameters

| Type Parameter |
| ------ |
| `TValue` *extends* `ValueType` |
| `TName` *extends* `NameType` |

## Properties

### separator?

> `optional` **separator**: `string`

***

### wrapperClassName?

> `optional` **wrapperClassName**: `string`

***

### labelClassName?

> `optional` **labelClassName**: `string`

***

### formatter?

> `optional` **formatter**: `Formatter`<`TValue`, `TName`>

***

### contentStyle?

> `optional` **contentStyle**: `CSSProperties`

***

### itemStyle?

> `optional` **itemStyle**: `CSSProperties`

***

### labelStyle?

> `optional` **labelStyle**: `CSSProperties`

***

### labelFormatter()?

> `optional` **labelFormatter**: (`label`, `payload`) => `ReactNode`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `label` | `any` |
| `payload` | `Payload`<`TValue`, `TName`>\[] |

#### Returns

`ReactNode`

***

### label?

> `optional` **label**: `any`

***

### payload?

> `optional` **payload**: `Payload`<`TValue`, `TName`>\[]

***

### itemSorter()?

> `optional` **itemSorter**: (`item`) => `string` | `number`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `Payload`<`TValue`, `TName`> |

#### Returns

`string` | `number`

***

### accessibilityLayer?

> `optional` **accessibilityLayer**: `boolean`

---

---
url: /api/ui/interfaces/Dimensions.md
---
[@sqlrooms/ui](../index.md) / Dimensions

# Interface: Dimensions

Represents the dimensions of an element
Dimensions

## Properties

### width

> **width**: `number`

The width in pixels

***

### height

> **height**: `number`

The height in pixels

---

---
url: /api/duckdb/interfaces/DuckDBBundles.md
---
[@sqlrooms/duckdb](../index.md) / DuckDBBundles

# Interface: DuckDBBundles

Bundles have different characteristics:

* MVP: minimum viable product (uses features from first stable version of WebAssembly standard)
* EH: exception handling
* COI: cross origin isolation

## Properties

### mvp

> **mvp**: `object`

| Name | Type |
| ------ | ------ |
| `mainModule` | `string` |
| `mainWorker` | `string` |

***

### eh?

> `optional` **eh**: `object`

| Name | Type |
| ------ | ------ |
| `mainModule` | `string` |
| `mainWorker` | `string` |

***

### coi?

> `optional` **coi**: `object`

| Name | Type |
| ------ | ------ |
| `mainModule` | `string` |
| `mainWorker` | `string` |
| `pthreadWorker` | `string` |

---

---
url: /api/duckdb/interfaces/DuckDBConfig.md
---
[@sqlrooms/duckdb](../index.md) / DuckDBConfig

# Interface: DuckDBConfig

## Properties

### path?

> `optional` **path**: `string`

The database path

***

### accessMode?

> `optional` **accessMode**: [`DuckDBAccessMode`](../enumerations/DuckDBAccessMode.md)

The access mode

***

### maximumThreads?

> `optional` **maximumThreads**: `number`

The maximum number of threads.
Note that this will only work with cross-origin isolated sites since it requires SharedArrayBuffers.

***

### useDirectIO?

> `optional` **useDirectIO**: `boolean`

The direct io flag

***

### query?

> `optional` **query**: `DuckDBQueryConfig`

The query config

***

### filesystem?

> `optional` **filesystem**: `DuckDBFilesystemConfig`

The filesystem config

***

### allowUnsignedExtensions?

> `optional` **allowUnsignedExtensions**: `boolean`

Whether to allow unsigned extensions

***

### arrowLosslessConversion?

> `optional` **arrowLosslessConversion**: `boolean`

Whether to use alternate Arrow conversion that preserves full range and precision of data.

***

### customUserAgent?

> `optional` **customUserAgent**: `string`

Custom user agent string

***

### opfs?

> `optional` **opfs**: `DuckDBOPFSConfig`

opfs string

---

---
url: /api/duckdb-core/interfaces/DuckDbConnector.md
---
[@sqlrooms/duckdb-core](../index.md) / DuckDbConnector

# Interface: DuckDbConnector

DuckDB connector interface with advanced query cancellation support

This interface provides a hybrid approach that combines the simplicity of method-based
cancellation with the composability of Web Standards (AbortController/AbortSignal).

## Key Benefits of This Design

### 🔗 Composability

Cancel multiple queries with a single controller:

```typescript
const controller = new AbortController();
const query1 = connector.query('SELECT * FROM table1', { signal: controller.signal });
const query2 = connector.query('SELECT * FROM table2', { signal: controller.signal });
controller.abort(); // Cancels both queries
```

### 🌐 Integration with Web APIs

Use the same signal for queries and HTTP requests:

```typescript
const controller = new AbortController();
const queryHandle = connector.query('SELECT * FROM table', { signal: controller.signal });
const response = await fetch('/api/data', { signal: controller.signal });
// controller.abort() cancels both the query and the HTTP request
```

### 🎛️ Flexibility

Simple usage when you don't need external control, advanced when you do:

```typescript
// Simple - internal cancellation management
const handle = connector.query('SELECT * FROM table');
handle.cancel();

// Advanced - external cancellation control
const controller = new AbortController();
const handle = connector.query('SELECT * FROM table', { signal: controller.signal });
controller.abort();
```

### 📡 Event-Driven

React to cancellation events for better UX:

```typescript
handle.signal.addEventListener('abort', () => {
  showNotification('Query cancelled');
  hideLoadingSpinner();
});
```

### ⏱️ Timeout Support

Built-in timeout capability with manual override:

```typescript
const timeoutController = new AbortController();
setTimeout(() => timeoutController.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM large_table', {
  signal: timeoutController.signal
});

// User can still cancel manually
cancelButton.onclick = () => timeoutController.abort();
```

### 🏗️ Signal Composition

Combine multiple cancellation sources:

```typescript
function combineSignals(...signals: AbortSignal[]): AbortSignal {
  const controller = new AbortController();
  signals.forEach(signal => {
    if (signal.aborted) controller.abort();
    else signal.addEventListener('abort', () => controller.abort());
  });
  return controller.signal;
}

const userSignal = userController.signal;
const timeoutSignal = createTimeoutSignal(30000);
const combinedSignal = combineSignals(userSignal, timeoutSignal);

const handle = connector.query('SELECT * FROM table', { signal: combinedSignal });
```

## Methods

### initialize()

> **initialize**(): `Promise`<`void`>

Initialize the connector.
The function returns a promise that resolves when the connector is initialized.
Calling the initialize() function multiple times should not restart the initialization.
See BaseDuckDbConnector for an implementation example.

#### Returns

`Promise`<`void`>

***

### destroy()

> **destroy**(): `Promise`<`void`>

Destroy the connector and clean up resources

#### Returns

`Promise`<`void`>

***

### execute()

> **execute**(`sql`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)

Execute a SQL query without returning a result

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `sql` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)

QueryHandle containing:

* result: Promise that resolves when execution completes
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple execution
const handle = connector.execute('CREATE TABLE test AS SELECT * FROM source');
await handle.result;

// With external cancellation control
const controller = new AbortController();
const handle = connector.execute('DROP TABLE large_table', {
  signal: controller.signal
});

// Cancel if it takes too long
setTimeout(() => controller.abort(), 5000);
```

***

### query()

> **query**<`T`>(`query`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

Execute a SQL query and return the result as an Arrow table

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

QueryHandle containing:

* result: Promise that resolves with Arrow table
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Basic query
const handle = await connector.query('SELECT * FROM users WHERE active = true');
console.log(`Found ${table.numRows} active users`);

// Query with timeout
const controller = new AbortController();
setTimeout(() => controller.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM very_large_table', {
  signal: controller.signal
});

try {
  const result = await handle;
  console.log('Query completed within timeout');
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Query timed out');
  }
}
```

***

### queryJson()

> **queryJson**<`T`>(`query`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

Execute a SQL query and return the result as a JSON object

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `Record`<`string`, `any`> |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

QueryHandle containing:

* result: Promise that resolves with iterable of JSON objects
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple JSON query
const users = await connector.queryJson('SELECT name, email FROM users LIMIT 10');
for (const user of users) {
  console.log(`${user.name}: ${user.email}`);
}

// Coordinated cancellation with multiple operations
const operationController = new AbortController();

const usersHandle = connector.queryJson('SELECT * FROM users', {
  signal: operationController.signal
});

const ordersHandle = connector.queryJson('SELECT * FROM orders', {
  signal: operationController.signal
});

// Cancel both queries if user navigates away
window.addEventListener('beforeunload', () => {
  operationController.abort();
});
```

***

### loadFile()

> **loadFile**(`fileName`, `tableName`, `opts?`): `Promise`<`void`>

Load a file into DuckDB and create a table

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `fileName` | `string` | `File` | Path to the file to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | Load options |

#### Returns

`Promise`<`void`>

***

### loadArrow()

> **loadArrow**(`table`, `tableName`, `opts?`): `Promise`<`void`>

Load an arrow table or an arrow IPC stream into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `table` | `Table`<`any`> | `Uint8Array`<`ArrayBufferLike`> | Arrow table or arrow IPC stream to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | { `schema?`: `string`; } | - |
| `opts.schema?` | `string` | - |

#### Returns

`Promise`<`void`>

***

### loadObjects()

> **loadObjects**(`data`, `tableName`, `opts?`): `Promise`<`void`>

Load JavaScript objects into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `Record`<`string`, `unknown`>\[] | Array of objects to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options |
| `opts.schema?` | `string` | - |
| `opts.select?` | `string`\[] | - |
| `opts.where?` | `string` | - |
| `opts.view?` | `boolean` | - |
| `opts.temp?` | `boolean` | - |
| `opts.replace?` | `boolean` | - |

#### Returns

`Promise`<`void`>

---

---
url: /api/duckdb-node/interfaces/DuckDbConnector.md
---
[@sqlrooms/duckdb-node](../index.md) / DuckDbConnector

# Interface: DuckDbConnector

DuckDB connector interface with advanced query cancellation support

This interface provides a hybrid approach that combines the simplicity of method-based
cancellation with the composability of Web Standards (AbortController/AbortSignal).

## Key Benefits of This Design

### 🔗 Composability

Cancel multiple queries with a single controller:

```typescript
const controller = new AbortController();
const query1 = connector.query('SELECT * FROM table1', { signal: controller.signal });
const query2 = connector.query('SELECT * FROM table2', { signal: controller.signal });
controller.abort(); // Cancels both queries
```

### 🌐 Integration with Web APIs

Use the same signal for queries and HTTP requests:

```typescript
const controller = new AbortController();
const queryHandle = connector.query('SELECT * FROM table', { signal: controller.signal });
const response = await fetch('/api/data', { signal: controller.signal });
// controller.abort() cancels both the query and the HTTP request
```

### 🎛️ Flexibility

Simple usage when you don't need external control, advanced when you do:

```typescript
// Simple - internal cancellation management
const handle = connector.query('SELECT * FROM table');
handle.cancel();

// Advanced - external cancellation control
const controller = new AbortController();
const handle = connector.query('SELECT * FROM table', { signal: controller.signal });
controller.abort();
```

### 📡 Event-Driven

React to cancellation events for better UX:

```typescript
handle.signal.addEventListener('abort', () => {
  showNotification('Query cancelled');
  hideLoadingSpinner();
});
```

### ⏱️ Timeout Support

Built-in timeout capability with manual override:

```typescript
const timeoutController = new AbortController();
setTimeout(() => timeoutController.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM large_table', {
  signal: timeoutController.signal
});

// User can still cancel manually
cancelButton.onclick = () => timeoutController.abort();
```

### 🏗️ Signal Composition

Combine multiple cancellation sources:

```typescript
function combineSignals(...signals: AbortSignal[]): AbortSignal {
  const controller = new AbortController();
  signals.forEach(signal => {
    if (signal.aborted) controller.abort();
    else signal.addEventListener('abort', () => controller.abort());
  });
  return controller.signal;
}

const userSignal = userController.signal;
const timeoutSignal = createTimeoutSignal(30000);
const combinedSignal = combineSignals(userSignal, timeoutSignal);

const handle = connector.query('SELECT * FROM table', { signal: combinedSignal });
```

## Extended by

* [`NodeDuckDbConnector`](NodeDuckDbConnector.md)

## Methods

### initialize()

> **initialize**(): `Promise`<`void`>

Initialize the connector.
The function returns a promise that resolves when the connector is initialized.
Calling the initialize() function multiple times should not restart the initialization.
See BaseDuckDbConnector for an implementation example.

#### Returns

`Promise`<`void`>

***

### destroy()

> **destroy**(): `Promise`<`void`>

Destroy the connector and clean up resources

#### Returns

`Promise`<`void`>

***

### execute()

> **execute**(`sql`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)

Execute a SQL query without returning a result

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `sql` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)

QueryHandle containing:

* result: Promise that resolves when execution completes
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple execution
const handle = connector.execute('CREATE TABLE test AS SELECT * FROM source');
await handle.result;

// With external cancellation control
const controller = new AbortController();
const handle = connector.execute('DROP TABLE large_table', {
  signal: controller.signal
});

// Cancel if it takes too long
setTimeout(() => controller.abort(), 5000);
```

***

### query()

> **query**<`T`>(`query`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

Execute a SQL query and return the result as an Arrow table

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

QueryHandle containing:

* result: Promise that resolves with Arrow table
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Basic query
const handle = await connector.query('SELECT * FROM users WHERE active = true');
console.log(`Found ${table.numRows} active users`);

// Query with timeout
const controller = new AbortController();
setTimeout(() => controller.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM very_large_table', {
  signal: controller.signal
});

try {
  const result = await handle;
  console.log('Query completed within timeout');
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Query timed out');
  }
}
```

***

### queryJson()

> **queryJson**<`T`>(`query`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

Execute a SQL query and return the result as a JSON object

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `Record`<`string`, `any`> |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

QueryHandle containing:

* result: Promise that resolves with iterable of JSON objects
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple JSON query
const users = await connector.queryJson('SELECT name, email FROM users LIMIT 10');
for (const user of users) {
  console.log(`${user.name}: ${user.email}`);
}

// Coordinated cancellation with multiple operations
const operationController = new AbortController();

const usersHandle = connector.queryJson('SELECT * FROM users', {
  signal: operationController.signal
});

const ordersHandle = connector.queryJson('SELECT * FROM orders', {
  signal: operationController.signal
});

// Cancel both queries if user navigates away
window.addEventListener('beforeunload', () => {
  operationController.abort();
});
```

***

### loadFile()

> **loadFile**(`fileName`, `tableName`, `opts?`): `Promise`<`void`>

Load a file into DuckDB and create a table

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `fileName` | `string` | `File` | Path to the file to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | Load options |

#### Returns

`Promise`<`void`>

***

### loadArrow()

> **loadArrow**(`table`, `tableName`, `opts?`): `Promise`<`void`>

Load an arrow table or an arrow IPC stream into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `table` | `Table`<`any`> | `Uint8Array`<`ArrayBufferLike`> | Arrow table or arrow IPC stream to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | { `schema?`: `string`; } | - |
| `opts.schema?` | `string` | - |

#### Returns

`Promise`<`void`>

***

### loadObjects()

> **loadObjects**(`data`, `tableName`, `opts?`): `Promise`<`void`>

Load JavaScript objects into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `Record`<`string`, `unknown`>\[] | Array of objects to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options |
| `opts.schema?` | `string` | - |
| `opts.select?` | `string`\[] | - |
| `opts.where?` | `string` | - |
| `opts.view?` | `boolean` | - |
| `opts.temp?` | `boolean` | - |
| `opts.replace?` | `boolean` | - |

#### Returns

`Promise`<`void`>

---

---
url: /api/duckdb/interfaces/DuckDbConnector.md
---
[@sqlrooms/duckdb](../index.md) / DuckDbConnector

# Interface: DuckDbConnector

DuckDB connector interface with advanced query cancellation support

This interface provides a hybrid approach that combines the simplicity of method-based
cancellation with the composability of Web Standards (AbortController/AbortSignal).

## Key Benefits of This Design

### 🔗 Composability

Cancel multiple queries with a single controller:

```typescript
const controller = new AbortController();
const query1 = connector.query('SELECT * FROM table1', { signal: controller.signal });
const query2 = connector.query('SELECT * FROM table2', { signal: controller.signal });
controller.abort(); // Cancels both queries
```

### 🌐 Integration with Web APIs

Use the same signal for queries and HTTP requests:

```typescript
const controller = new AbortController();
const queryHandle = connector.query('SELECT * FROM table', { signal: controller.signal });
const response = await fetch('/api/data', { signal: controller.signal });
// controller.abort() cancels both the query and the HTTP request
```

### 🎛️ Flexibility

Simple usage when you don't need external control, advanced when you do:

```typescript
// Simple - internal cancellation management
const handle = connector.query('SELECT * FROM table');
handle.cancel();

// Advanced - external cancellation control
const controller = new AbortController();
const handle = connector.query('SELECT * FROM table', { signal: controller.signal });
controller.abort();
```

### 📡 Event-Driven

React to cancellation events for better UX:

```typescript
handle.signal.addEventListener('abort', () => {
  showNotification('Query cancelled');
  hideLoadingSpinner();
});
```

### ⏱️ Timeout Support

Built-in timeout capability with manual override:

```typescript
const timeoutController = new AbortController();
setTimeout(() => timeoutController.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM large_table', {
  signal: timeoutController.signal
});

// User can still cancel manually
cancelButton.onclick = () => timeoutController.abort();
```

### 🏗️ Signal Composition

Combine multiple cancellation sources:

```typescript
function combineSignals(...signals: AbortSignal[]): AbortSignal {
  const controller = new AbortController();
  signals.forEach(signal => {
    if (signal.aborted) controller.abort();
    else signal.addEventListener('abort', () => controller.abort());
  });
  return controller.signal;
}

const userSignal = userController.signal;
const timeoutSignal = createTimeoutSignal(30000);
const combinedSignal = combineSignals(userSignal, timeoutSignal);

const handle = connector.query('SELECT * FROM table', { signal: combinedSignal });
```

## Extended by

* [`WasmDuckDbConnector`](WasmDuckDbConnector.md)
* [`WebSocketDuckDbConnector`](WebSocketDuckDbConnector.md)

## Methods

### initialize()

> **initialize**(): `Promise`<`void`>

Initialize the connector.
The function returns a promise that resolves when the connector is initialized.
Calling the initialize() function multiple times should not restart the initialization.
See BaseDuckDbConnector for an implementation example.

#### Returns

`Promise`<`void`>

***

### destroy()

> **destroy**(): `Promise`<`void`>

Destroy the connector and clean up resources

#### Returns

`Promise`<`void`>

***

### execute()

> **execute**(`sql`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)

Execute a SQL query without returning a result

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `sql` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)

QueryHandle containing:

* result: Promise that resolves when execution completes
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple execution
const handle = connector.execute('CREATE TABLE test AS SELECT * FROM source');
await handle.result;

// With external cancellation control
const controller = new AbortController();
const handle = connector.execute('DROP TABLE large_table', {
  signal: controller.signal
});

// Cancel if it takes too long
setTimeout(() => controller.abort(), 5000);
```

***

### query()

> **query**<`T`>(`query`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

Execute a SQL query and return the result as an Arrow table

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

QueryHandle containing:

* result: Promise that resolves with Arrow table
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Basic query
const handle = await connector.query('SELECT * FROM users WHERE active = true');
console.log(`Found ${table.numRows} active users`);

// Query with timeout
const controller = new AbortController();
setTimeout(() => controller.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM very_large_table', {
  signal: controller.signal
});

try {
  const result = await handle;
  console.log('Query completed within timeout');
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Query timed out');
  }
}
```

***

### queryJson()

> **queryJson**<`T`>(`query`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

Execute a SQL query and return the result as a JSON object

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `Record`<`string`, `any`> |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

QueryHandle containing:

* result: Promise that resolves with iterable of JSON objects
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple JSON query
const users = await connector.queryJson('SELECT name, email FROM users LIMIT 10');
for (const user of users) {
  console.log(`${user.name}: ${user.email}`);
}

// Coordinated cancellation with multiple operations
const operationController = new AbortController();

const usersHandle = connector.queryJson('SELECT * FROM users', {
  signal: operationController.signal
});

const ordersHandle = connector.queryJson('SELECT * FROM orders', {
  signal: operationController.signal
});

// Cancel both queries if user navigates away
window.addEventListener('beforeunload', () => {
  operationController.abort();
});
```

***

### loadFile()

> **loadFile**(`fileName`, `tableName`, `opts?`): `Promise`<`void`>

Load a file into DuckDB and create a table

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `fileName` | `string` | `File` | Path to the file to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | Load options |

#### Returns

`Promise`<`void`>

***

### loadArrow()

> **loadArrow**(`table`, `tableName`, `opts?`): `Promise`<`void`>

Load an arrow table or an arrow IPC stream into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `table` | `Table`<`any`> | `Uint8Array`<`ArrayBufferLike`> | Arrow table or arrow IPC stream to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | { `schema?`: `string`; } | - |
| `opts.schema?` | `string` | - |

#### Returns

`Promise`<`void`>

***

### loadObjects()

> **loadObjects**(`data`, `tableName`, `opts?`): `Promise`<`void`>

Load JavaScript objects into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `Record`<`string`, `unknown`>\[] | Array of objects to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options |
| `opts.schema?` | `string` | - |
| `opts.select?` | `string`\[] | - |
| `opts.where?` | `string` | - |
| `opts.view?` | `boolean` | - |
| `opts.temp?` | `boolean` | - |
| `opts.replace?` | `boolean` | - |

#### Returns

`Promise`<`void`>

---

---
url: /api/monaco-editor/interfaces/JsonMonacoEditorProps.md
---
[@sqlrooms/monaco-editor](../index.md) / JsonMonacoEditorProps

# Interface: JsonMonacoEditorProps

## Extends

* `Omit`<[`MonacoEditorProps`](MonacoEditorProps.md), `"language"` | `"value"`>

## Properties

### defaultValue?

> `optional` **defaultValue**: `string`

Default value of the current model

#### Inherited from

`Omit.defaultValue`

***

### defaultLanguage?

> `optional` **defaultLanguage**: `string`

Default language of the current model

#### Inherited from

`Omit.defaultLanguage`

***

### defaultPath?

> `optional` **defaultPath**: `string`

Default path of the current model
Will be passed as the third argument to `.createModel` method
`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`

#### Inherited from

`Omit.defaultPath`

***

### path?

> `optional` **path**: `string`

Path of the current model
Will be passed as the third argument to `.createModel` method
`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`

#### Inherited from

`Omit.path`

***

### line?

> `optional` **line**: `number`

The line to jump on it

#### Inherited from

`Omit.line`

***

### loading?

> `optional` **loading**: `ReactNode`

The loading screen before the editor will be mounted

#### Default

```ts
"Loading..."
```

#### Inherited from

`Omit.loading`

***

### overrideServices?

> `optional` **overrideServices**: `IEditorOverrideServices`

IEditorOverrideServices

#### Inherited from

`Omit.overrideServices`

***

### saveViewState?

> `optional` **saveViewState**: `boolean`

Indicator whether to save the models' view states between model changes or not
Defaults to true

#### Inherited from

`Omit.saveViewState`

***

### keepCurrentModel?

> `optional` **keepCurrentModel**: `boolean`

Indicator whether to dispose the current model when the Editor is unmounted or not

#### Default

```ts
false
```

#### Inherited from

`Omit.keepCurrentModel`

***

### width?

> `optional` **width**: `string` | `number`

Width of the editor wrapper

#### Default

```ts
"100%"
```

#### Inherited from

`Omit.width`

***

### height?

> `optional` **height**: `string` | `number`

Height of the editor wrapper

#### Default

```ts
"100%"
```

#### Inherited from

`Omit.height`

***

### wrapperProps?

> `optional` **wrapperProps**: `object`

Props applied to the wrapper element

#### Inherited from

`Omit.wrapperProps`

***

### beforeMount?

> `optional` **beforeMount**: `BeforeMount`

Signature: function(monaco: Monaco) => void
An event is emitted before the editor is mounted
It gets the monaco instance as a first argument
Defaults to "noop"

#### Inherited from

`Omit.beforeMount`

***

### onValidate?

> `optional` **onValidate**: `OnValidate`

Signature: function(markers: monaco.editor.IMarker\[]) => void
An event is emitted when the content of the current model is changed
and the current model markers are ready
Defaults to "noop"

#### Inherited from

`Omit.onValidate`

***

### schema?

> `optional` **schema**: `object`

The JSON schema to validate against

***

### value?

> `optional` **value**: `string` | `object`

The JSON value to edit

***

### onMount?

> `optional` **onMount**: `OnMount`

Callback when the editor is mounted

#### Inherited from

[`MonacoEditorProps`](MonacoEditorProps.md).[`onMount`](MonacoEditorProps.md#onmount)

***

### onChange?

> `optional` **onChange**: `OnChange`

Callback when the editor content changes

#### Inherited from

[`MonacoEditorProps`](MonacoEditorProps.md).[`onChange`](MonacoEditorProps.md#onchange)

***

### className?

> `optional` **className**: `string`

CSS class name for the editor container

#### Default

```ts
''
```

#### Inherited from

[`MonacoEditorProps`](MonacoEditorProps.md).[`className`](MonacoEditorProps.md#classname)

***

### theme?

> `optional` **theme**: `"vs-dark"` | `"light"`

The theme of the editor
Can be explicitly set or will automatically use the app theme if not provided

#### Default

```ts
'vs-dark'
```

#### Inherited from

[`MonacoEditorProps`](MonacoEditorProps.md).[`theme`](MonacoEditorProps.md#theme)

***

### readOnly?

> `optional` **readOnly**: `boolean`

Whether the editor is read-only

#### Default

```ts
false
```

#### Inherited from

[`MonacoEditorProps`](MonacoEditorProps.md).[`readOnly`](MonacoEditorProps.md#readonly)

***

### options?

> `optional` **options**: `IStandaloneEditorConstructionOptions`

Additional options for the editor

#### Inherited from

[`MonacoEditorProps`](MonacoEditorProps.md).[`options`](MonacoEditorProps.md#options)

---

---
url: /api/monaco-editor/interfaces/LoaderWorkers.md
---
[@sqlrooms/monaco-editor](../index.md) / LoaderWorkers

# Interface: LoaderWorkers

## Indexable

\[`label`: `string`]: () => `Worker` | `undefined`

## Properties

### default()?

> `optional` **default**: () => `Worker`

worker used when label does not match other workers

#### Returns

`Worker`

---

---
url: /api/ai-settings/interfaces/ModelUsageData.md
---
[@sqlrooms/ai-settings](../index.md) / ModelUsageData

# Interface: ModelUsageData

## Properties

### totalSpend

> **totalSpend**: `number`

***

### maxBudget

> **maxBudget**: `number`

***

### isLoadingSpend

> **isLoadingSpend**: `boolean`

***

### weeklySpend?

> `optional` **weeklySpend**: `object`\[]

| Name | Type |
| ------ | ------ |
| `date` | `string` |
| `spend` | `number` |

***

### isLoadingWeeklySpend?

> `optional` **isLoadingWeeklySpend**: `boolean`

---

---
url: /api/ai/interfaces/ModelUsageData.md
---
[@sqlrooms/ai](../index.md) / ModelUsageData

# Interface: ModelUsageData

## Properties

### totalSpend

> **totalSpend**: `number`

***

### maxBudget

> **maxBudget**: `number`

***

### isLoadingSpend

> **isLoadingSpend**: `boolean`

***

### weeklySpend?

> `optional` **weeklySpend**: `object`\[]

| Name | Type |
| ------ | ------ |
| `date` | `string` |
| `spend` | `number` |

***

### isLoadingWeeklySpend?

> `optional` **isLoadingWeeklySpend**: `boolean`

---

---
url: /api/monaco-editor/interfaces/MonacoEditorProps.md
---
[@sqlrooms/monaco-editor](../index.md) / MonacoEditorProps

# Interface: MonacoEditorProps

## Extends

* `Omit`<`EditorProps`, `"onMount"`>

## Properties

### defaultValue?

> `optional` **defaultValue**: `string`

Default value of the current model

#### Inherited from

`Omit.defaultValue`

***

### defaultLanguage?

> `optional` **defaultLanguage**: `string`

Default language of the current model

#### Inherited from

`Omit.defaultLanguage`

***

### defaultPath?

> `optional` **defaultPath**: `string`

Default path of the current model
Will be passed as the third argument to `.createModel` method
`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`

#### Inherited from

`Omit.defaultPath`

***

### path?

> `optional` **path**: `string`

Path of the current model
Will be passed as the third argument to `.createModel` method
`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`

#### Inherited from

`Omit.path`

***

### line?

> `optional` **line**: `number`

The line to jump on it

#### Inherited from

`Omit.line`

***

### loading?

> `optional` **loading**: `ReactNode`

The loading screen before the editor will be mounted

#### Default

```ts
"Loading..."
```

#### Inherited from

`Omit.loading`

***

### overrideServices?

> `optional` **overrideServices**: `IEditorOverrideServices`

IEditorOverrideServices

#### Inherited from

`Omit.overrideServices`

***

### saveViewState?

> `optional` **saveViewState**: `boolean`

Indicator whether to save the models' view states between model changes or not
Defaults to true

#### Inherited from

`Omit.saveViewState`

***

### keepCurrentModel?

> `optional` **keepCurrentModel**: `boolean`

Indicator whether to dispose the current model when the Editor is unmounted or not

#### Default

```ts
false
```

#### Inherited from

`Omit.keepCurrentModel`

***

### width?

> `optional` **width**: `string` | `number`

Width of the editor wrapper

#### Default

```ts
"100%"
```

#### Inherited from

`Omit.width`

***

### height?

> `optional` **height**: `string` | `number`

Height of the editor wrapper

#### Default

```ts
"100%"
```

#### Inherited from

`Omit.height`

***

### wrapperProps?

> `optional` **wrapperProps**: `object`

Props applied to the wrapper element

#### Inherited from

`Omit.wrapperProps`

***

### beforeMount?

> `optional` **beforeMount**: `BeforeMount`

Signature: function(monaco: Monaco) => void
An event is emitted before the editor is mounted
It gets the monaco instance as a first argument
Defaults to "noop"

#### Inherited from

`Omit.beforeMount`

***

### onValidate?

> `optional` **onValidate**: `OnValidate`

Signature: function(markers: monaco.editor.IMarker\[]) => void
An event is emitted when the content of the current model is changed
and the current model markers are ready
Defaults to "noop"

#### Inherited from

`Omit.onValidate`

***

### onMount?

> `optional` **onMount**: `OnMount`

Callback when the editor is mounted

***

### onChange?

> `optional` **onChange**: `OnChange`

Callback when the editor content changes

#### Overrides

`Omit.onChange`

***

### className?

> `optional` **className**: `string`

CSS class name for the editor container

#### Default

```ts
''
```

#### Overrides

`Omit.className`

***

### language?

> `optional` **language**: `string`

The language of the editor

#### Default

```ts
'javascript'
```

#### Overrides

`Omit.language`

***

### theme?

> `optional` **theme**: `"vs-dark"` | `"light"`

The theme of the editor
Can be explicitly set or will automatically use the app theme if not provided

#### Default

```ts
'vs-dark'
```

#### Overrides

`Omit.theme`

***

### value?

> `optional` **value**: `string`

The value of the editor

#### Overrides

`Omit.value`

***

### readOnly?

> `optional` **readOnly**: `boolean`

Whether the editor is read-only

#### Default

```ts
false
```

***

### options?

> `optional` **options**: `IStandaloneEditorConstructionOptions`

Additional options for the editor

#### Overrides

`Omit.options`

---

---
url: /api/monaco-editor/interfaces/MonacoLoaderOptions.md
---
[@sqlrooms/monaco-editor](../index.md) / MonacoLoaderOptions

# Interface: MonacoLoaderOptions

## Extends

* [`LoaderConfig`](../type-aliases/LoaderConfig.md)

## Properties

### paths?

> `optional` **paths**: `object`

| Name | Type |
| ------ | ------ |
| `vs?` | `string` |

#### Inherited from

`LoaderConfig.paths`

***

### vs/nls?

> `optional` **vs/nls**: `object`

| Name | Type |
| ------ | ------ |
| `availableLanguages?` | `object` |

#### Inherited from

`LoaderConfig.vs/nls`

***

### monaco?

> `optional` **monaco**: `any`

Pass the Monaco instance to bundle the editor instead of using a CDN

#### Overrides

`LoaderConfig.monaco`

***

### workers?

> `optional` **workers**: [`LoaderWorkers`](LoaderWorkers.md)

Provide worker constructors mapped by label to automatically set
`self.MonacoEnvironment.getWorker`

---

---
url: /api/duckdb-node/interfaces/NodeDuckDbConnector.md
---
[@sqlrooms/duckdb-node](../index.md) / NodeDuckDbConnector

# Interface: NodeDuckDbConnector

Extended DuckDB connector for Node.js environments.
Includes access to the underlying DuckDB instance and connection.

## Extends

* [`DuckDbConnector`](DuckDbConnector.md)

## Methods

### initialize()

> **initialize**(): `Promise`<`void`>

Initialize the connector.
The function returns a promise that resolves when the connector is initialized.
Calling the initialize() function multiple times should not restart the initialization.
See BaseDuckDbConnector for an implementation example.

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`initialize`](DuckDbConnector.md#initialize)

***

### destroy()

> **destroy**(): `Promise`<`void`>

Destroy the connector and clean up resources

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`destroy`](DuckDbConnector.md#destroy)

***

### execute()

> **execute**(`sql`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)

Execute a SQL query without returning a result

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `sql` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)

QueryHandle containing:

* result: Promise that resolves when execution completes
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple execution
const handle = connector.execute('CREATE TABLE test AS SELECT * FROM source');
await handle.result;

// With external cancellation control
const controller = new AbortController();
const handle = connector.execute('DROP TABLE large_table', {
  signal: controller.signal
});

// Cancel if it takes too long
setTimeout(() => controller.abort(), 5000);
```

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`execute`](DuckDbConnector.md#execute)

***

### query()

> **query**<`T`>(`query`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

Execute a SQL query and return the result as an Arrow table

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

QueryHandle containing:

* result: Promise that resolves with Arrow table
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Basic query
const handle = await connector.query('SELECT * FROM users WHERE active = true');
console.log(`Found ${table.numRows} active users`);

// Query with timeout
const controller = new AbortController();
setTimeout(() => controller.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM very_large_table', {
  signal: controller.signal
});

try {
  const result = await handle;
  console.log('Query completed within timeout');
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Query timed out');
  }
}
```

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`query`](DuckDbConnector.md#query)

***

### queryJson()

> **queryJson**<`T`>(`query`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

Execute a SQL query and return the result as a JSON object

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `Record`<`string`, `any`> |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

QueryHandle containing:

* result: Promise that resolves with iterable of JSON objects
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple JSON query
const users = await connector.queryJson('SELECT name, email FROM users LIMIT 10');
for (const user of users) {
  console.log(`${user.name}: ${user.email}`);
}

// Coordinated cancellation with multiple operations
const operationController = new AbortController();

const usersHandle = connector.queryJson('SELECT * FROM users', {
  signal: operationController.signal
});

const ordersHandle = connector.queryJson('SELECT * FROM orders', {
  signal: operationController.signal
});

// Cancel both queries if user navigates away
window.addEventListener('beforeunload', () => {
  operationController.abort();
});
```

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`queryJson`](DuckDbConnector.md#queryjson)

***

### loadFile()

> **loadFile**(`fileName`, `tableName`, `opts?`): `Promise`<`void`>

Load a file into DuckDB and create a table

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `fileName` | `string` | `File` | Path to the file to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | Load options |

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`loadFile`](DuckDbConnector.md#loadfile)

***

### loadArrow()

> **loadArrow**(`table`, `tableName`, `opts?`): `Promise`<`void`>

Load an arrow table or an arrow IPC stream into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `table` | `Table`<`any`> | `Uint8Array`<`ArrayBufferLike`> | Arrow table or arrow IPC stream to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | { `schema?`: `string`; } | - |
| `opts.schema?` | `string` | - |

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`loadArrow`](DuckDbConnector.md#loadarrow)

***

### loadObjects()

> **loadObjects**(`data`, `tableName`, `opts?`): `Promise`<`void`>

Load JavaScript objects into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `Record`<`string`, `unknown`>\[] | Array of objects to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options |
| `opts.schema?` | `string` | - |
| `opts.select?` | `string`\[] | - |
| `opts.where?` | `string` | - |
| `opts.view?` | `boolean` | - |
| `opts.temp?` | `boolean` | - |
| `opts.replace?` | `boolean` | - |

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`loadObjects`](DuckDbConnector.md#loadobjects)

***

### getInstance()

> **getInstance**(): `DuckDBInstance`

Get the underlying DuckDB instance

#### Returns

`DuckDBInstance`

***

### getConnection()

> **getConnection**(): `DuckDBConnection`

Get the underlying DuckDB connection

#### Returns

`DuckDBConnection`

---

---
url: /api/duckdb-node/interfaces/NodeDuckDbConnectorOptions.md
---
[@sqlrooms/duckdb-node](../index.md) / NodeDuckDbConnectorOptions

# Interface: NodeDuckDbConnectorOptions

Options for the Node.js DuckDB connector.

## Properties

### dbPath?

> `optional` **dbPath**: `string`

Path to the database file, or ':memory:' for in-memory database.

#### Default

```ts
':memory:'
```

***

### initializationQuery?

> `optional` **initializationQuery**: `string`

SQL to run after initialization.

***

### config?

> `optional` **config**: `Record`<`string`, `string`>

Configuration options passed to DuckDB instance.

---

---
url: /api/recharts/interfaces/PieLabelRenderProps.md
---
[@sqlrooms/recharts](../index.md) / PieLabelRenderProps

# Interface: PieLabelRenderProps

## Extends

* `PieDef`

## Indexable

\[`key`: `string`]: `any`

## Properties

### cx?

> `optional` **cx**: `string` | `number`

The abscissa of pole in polar coordinate

#### Inherited from

`PieDef.cx`

***

### cy?

> `optional` **cy**: `string` | `number`

The ordinate of pole in polar coordinate

#### Inherited from

`PieDef.cy`

***

### startAngle?

> `optional` **startAngle**: `number`

The start angle of first sector

#### Inherited from

`PieDef.startAngle`

***

### endAngle?

> `optional` **endAngle**: `number`

The end angle of last sector

#### Inherited from

`PieDef.endAngle`

***

### paddingAngle?

> `optional` **paddingAngle**: `number`

#### Inherited from

`PieDef.paddingAngle`

***

### innerRadius?

> `optional` **innerRadius**: `string` | `number`

The inner radius of sectors

#### Inherited from

`PieDef.innerRadius`

***

### outerRadius?

> `optional` **outerRadius**: `string` | `number`

The outer radius of sectors

#### Inherited from

`PieDef.outerRadius`

***

### cornerRadius?

> `optional` **cornerRadius**: `string` | `number`

#### Inherited from

`PieDef.cornerRadius`

***

### name

> **name**: `string`

***

### percent?

> `optional` **percent**: `number`

***

### stroke

> **stroke**: `string`

***

### index?

> `optional` **index**: `number`

***

### textAnchor

> **textAnchor**: `string`

***

### x

> **x**: `number`

***

### y

> **y**: `number`

---

---
url: /api/sql-editor/interfaces/QueryEditorPanelProps.md
---
[@sqlrooms/sql-editor](../index.md) / QueryEditorPanelProps

# Interface: QueryEditorPanelProps

## Properties

### className?

> `optional` **className**: `string`

Custom class name for styling

---

---
url: /api/duckdb-core/interfaces/QueryOptions.md
---
[@sqlrooms/duckdb-core](../index.md) / QueryOptions

# Interface: QueryOptions

Options for query execution

## Properties

### signal?

> `optional` **signal**: `AbortSignal`

Optional external abort signal for coordinated cancellation.
When provided, the query will be cancelled if this signal is aborted.
This enables powerful composition patterns like cancelling multiple
queries together or integrating with other cancellable operations.

---

---
url: /api/duckdb-node/interfaces/QueryOptions.md
---
[@sqlrooms/duckdb-node](../index.md) / QueryOptions

# Interface: QueryOptions

Options for query execution

## Properties

### signal?

> `optional` **signal**: `AbortSignal`

Optional external abort signal for coordinated cancellation.
When provided, the query will be cancelled if this signal is aborted.
This enables powerful composition patterns like cancelling multiple
queries together or integrating with other cancellable operations.

---

---
url: /api/duckdb/interfaces/QueryOptions.md
---
[@sqlrooms/duckdb](../index.md) / QueryOptions

# Interface: QueryOptions

Options for query execution

## Properties

### signal?

> `optional` **signal**: `AbortSignal`

Optional external abort signal for coordinated cancellation.
When provided, the query will be cancelled if this signal is aborted.
This enables powerful composition patterns like cancelling multiple
queries together or integrating with other cancellable operations.

---

---
url: /api/sql-editor/interfaces/QueryResultPanelProps.md
---
[@sqlrooms/sql-editor](../index.md) / QueryResultPanelProps

# Interface: QueryResultPanelProps

## Properties

### className?

> `optional` **className**: `string`

Custom class name for styling

***

### renderActions()?

> `optional` **renderActions**: (`query`) => `ReactNode`

Custom actions to render in the query result panel

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `query` | `string` |

#### Returns

`ReactNode`

***

### fontSize?

> `optional` **fontSize**: `string`

Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base

***

### onRowClick()?

> `optional` **onRowClick**: (`args`) => `void`

Called when a row in the results table is clicked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `args` | { `row`: `Row`<`any`>; `event`: `MouseEvent`<`HTMLTableRowElement`>; } |
| `args.row` | `Row`<`any`> |
| `args.event` | `MouseEvent`<`HTMLTableRowElement`> |

#### Returns

`void`

***

### onRowDoubleClick()?

> `optional` **onRowDoubleClick**: (`args`) => `void`

Called when a row in the results table is double-clicked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `args` | { `row`: `Row`<`any`>; `event`: `MouseEvent`<`HTMLTableRowElement`>; } |
| `args.row` | `Row`<`any`> |
| `args.event` | `MouseEvent`<`HTMLTableRowElement`> |

#### Returns

`void`

***

### onAskAiAboutError()?

> `optional` **onAskAiAboutError**: (`query`, `error`) => `void`

Called when the "Ask AI" button is clicked on an error message.
Receives the current query and error text.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `query` | `string` |
| `error` | `string` |

#### Returns

`void`

---

---
url: /api/recharts/interfaces/ResponsiveContainerProps.md
---
[@sqlrooms/recharts](../index.md) / ResponsiveContainerProps

# Interface: ResponsiveContainerProps

## Properties

### aspect?

> `optional` **aspect**: `number`

***

### width?

> `optional` **width**: `string` | `number`

***

### height?

> `optional` **height**: `string` | `number`

***

### minWidth?

> `optional` **minWidth**: `string` | `number`

***

### minHeight?

> `optional` **minHeight**: `string` | `number`

***

### initialDimension?

> `optional` **initialDimension**: `object`

| Name | Type |
| ------ | ------ |
| `width` | `number` |
| `height` | `number` |

***

### maxHeight?

> `optional` **maxHeight**: `number`

***

### children

> **children**: `ReactElement`

***

### debounce?

> `optional` **debounce**: `number`

***

### id?

> `optional` **id**: `string` | `number`

***

### className?

> `optional` **className**: `string` | `number`

***

### style?

> `optional` **style**: `Omit`<`CSSProperties`, keyof `Props`>

***

### onResize()?

> `optional` **onResize**: (`width`, `height`) => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `width` | `number` |
| `height` | `number` |

#### Returns

`void`

---

---
url: /api/sql-editor/interfaces/SqlMonacoEditorProps.md
---
[@sqlrooms/sql-editor](../index.md) / SqlMonacoEditorProps

# Interface: SqlMonacoEditorProps

## Extends

* `Omit`<`MonacoEditorProps`, `"language"`>

## Properties

### defaultValue?

> `optional` **defaultValue**: `string`

Default value of the current model

#### Inherited from

`Omit.defaultValue`

***

### defaultLanguage?

> `optional` **defaultLanguage**: `string`

Default language of the current model

#### Inherited from

`Omit.defaultLanguage`

***

### defaultPath?

> `optional` **defaultPath**: `string`

Default path of the current model
Will be passed as the third argument to `.createModel` method
`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`

#### Inherited from

`Omit.defaultPath`

***

### path?

> `optional` **path**: `string`

Path of the current model
Will be passed as the third argument to `.createModel` method
`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`

#### Inherited from

`Omit.path`

***

### line?

> `optional` **line**: `number`

The line to jump on it

#### Inherited from

`Omit.line`

***

### loading?

> `optional` **loading**: `ReactNode`

The loading screen before the editor will be mounted

#### Default

```ts
"Loading..."
```

#### Inherited from

`Omit.loading`

***

### overrideServices?

> `optional` **overrideServices**: `IEditorOverrideServices`

IEditorOverrideServices

#### Inherited from

`Omit.overrideServices`

***

### saveViewState?

> `optional` **saveViewState**: `boolean`

Indicator whether to save the models' view states between model changes or not
Defaults to true

#### Inherited from

`Omit.saveViewState`

***

### keepCurrentModel?

> `optional` **keepCurrentModel**: `boolean`

Indicator whether to dispose the current model when the Editor is unmounted or not

#### Default

```ts
false
```

#### Inherited from

`Omit.keepCurrentModel`

***

### width?

> `optional` **width**: `string` | `number`

Width of the editor wrapper

#### Default

```ts
"100%"
```

#### Inherited from

`Omit.width`

***

### height?

> `optional` **height**: `string` | `number`

Height of the editor wrapper

#### Default

```ts
"100%"
```

#### Inherited from

`Omit.height`

***

### wrapperProps?

> `optional` **wrapperProps**: `object`

Props applied to the wrapper element

#### Inherited from

`Omit.wrapperProps`

***

### beforeMount?

> `optional` **beforeMount**: `BeforeMount`

Signature: function(monaco: Monaco) => void
An event is emitted before the editor is mounted
It gets the monaco instance as a first argument
Defaults to "noop"

#### Inherited from

`Omit.beforeMount`

***

### onValidate?

> `optional` **onValidate**: `OnValidate`

Signature: function(markers: monaco.editor.IMarker\[]) => void
An event is emitted when the content of the current model is changed
and the current model markers are ready
Defaults to "noop"

#### Inherited from

`Omit.onValidate`

***

### onMount?

> `optional` **onMount**: `OnMount`

Callback when the editor is mounted

#### Inherited from

`Omit.onMount`

***

### onChange?

> `optional` **onChange**: `OnChange`

Callback when the editor content changes

#### Inherited from

`Omit.onChange`

***

### className?

> `optional` **className**: `string`

CSS class name for the editor container

#### Default

```ts
''
```

#### Inherited from

`Omit.className`

***

### theme?

> `optional` **theme**: `"vs-dark"` | `"light"`

The theme of the editor
Can be explicitly set or will automatically use the app theme if not provided

#### Default

```ts
'vs-dark'
```

#### Inherited from

`Omit.theme`

***

### value?

> `optional` **value**: `string`

The value of the editor

#### Inherited from

`Omit.value`

***

### readOnly?

> `optional` **readOnly**: `boolean`

Whether the editor is read-only

#### Default

```ts
false
```

#### Inherited from

`Omit.readOnly`

***

### options?

> `optional` **options**: `IStandaloneEditorConstructionOptions`

Additional options for the editor

#### Inherited from

`Omit.options`

***

### connector?

> `optional` **connector**: `DuckDbConnector`

***

### customKeywords?

> `optional` **customKeywords**: `string`\[]

Custom SQL keywords to add to the completion provider

***

### customFunctions?

> `optional` **customFunctions**: `string`\[]

Custom SQL functions to add to the completion provider

***

### tableSchemas?

> `optional` **tableSchemas**: `DataTable`\[]

Table schemas for autocompletion

***

### getLatestSchemas()?

> `optional` **getLatestSchemas**: () => `object`

Callback to get the latest table schemas
This is called from within provideCompletionItems to ensure we have the latest data

#### Returns

`object`

| Name | Type |
| ------ | ------ |
| `tableSchemas` | `DataTable`\[] |

---

---
url: /api/room-shell/interfaces/StoreApi.md
---
[@sqlrooms/room-shell](../index.md) / StoreApi

# Interface: StoreApi\<T>

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Properties

### setState()

> **setState**: {(`partial`, `replace?`): `void`; (`state`, `replace`): `void`; }

#### Call Signature

> (`partial`, `replace?`): `void`

##### Parameters

| Parameter | Type |
| ------ | ------ |
| `partial` | `T` | `Partial`<`T`> | (`state`) => `T` | `Partial`<`T`> |
| `replace?` | `false` |

##### Returns

`void`

#### Call Signature

> (`state`, `replace`): `void`

##### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `T` | (`state`) => `T` |
| `replace` | `true` |

##### Returns

`void`

***

### getState()

> **getState**: () => `T`

#### Returns

`T`

***

### getInitialState()

> **getInitialState**: () => `T`

#### Returns

`T`

***

### subscribe()

> **subscribe**: (`listener`) => () => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`state`, `prevState`) => `void` |

#### Returns

> (): `void`

##### Returns

`void`

---

---
url: /api/room-store/interfaces/StoreApi.md
---
[@sqlrooms/room-store](../index.md) / StoreApi

# Interface: StoreApi\<T>

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Properties

### setState()

> **setState**: {(`partial`, `replace?`): `void`; (`state`, `replace`): `void`; }

#### Call Signature

> (`partial`, `replace?`): `void`

##### Parameters

| Parameter | Type |
| ------ | ------ |
| `partial` | `T` | `Partial`<`T`> | (`state`) => `T` | `Partial`<`T`> |
| `replace?` | `false` |

##### Returns

`void`

#### Call Signature

> (`state`, `replace`): `void`

##### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `T` | (`state`) => `T` |
| `replace` | `true` |

##### Returns

`void`

***

### getState()

> **getState**: () => `T`

#### Returns

`T`

***

### getInitialState()

> **getInitialState**: () => `T`

#### Returns

`T`

***

### subscribe()

> **subscribe**: (`listener`) => () => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`state`, `prevState`) => `void` |

#### Returns

> (): `void`

##### Returns

`void`

---

---
url: /api/ui/interfaces/TabDescriptor.md
---
[@sqlrooms/ui](../index.md) / TabDescriptor

# Interface: TabDescriptor

## Indexable

\[`key`: `string`]: `unknown`

## Properties

### id

> **id**: `string`

***

### name

> **name**: `string`

---

---
url: /api/sql-editor/interfaces/TableStructurePanelProps.md
---
[@sqlrooms/sql-editor](../index.md) / TableStructurePanelProps

# Interface: TableStructurePanelProps

## Properties

### className?

> `optional` **className**: `string`

Custom class name for styling

***

### schema?

> `optional` **schema**: `string` | (`name`) => `boolean`

The database schema to use. Defaults to '*'.
If '*' is provided, all tables will be shown.
If a function is provided, it will be used to filter the tables.

***

### onTableSelect()?

> `optional` **onTableSelect**: (`table`) => `void`

Callback when a table is selected

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `table` | `string` | `undefined` |

#### Returns

`void`

---

---
url: /api/ui/interfaces/TabStripProps.md
---
[@sqlrooms/ui](../index.md) / TabStripProps

# Interface: TabStripProps

## Properties

### className?

> `optional` **className**: `string`

***

### tabsListClassName?

> `optional` **tabsListClassName**: `string`

***

### children?

> `optional` **children**: `ReactNode`

***

### tabs

> **tabs**: [`TabDescriptor`](TabDescriptor.md)\[]

All available tabs.

***

### openTabs

> **openTabs**: `string`\[]

IDs of tabs that are currently open.

***

### selectedTabId?

> `optional` **selectedTabId**: `string` | `null`

ID of the currently selected tab.

***

### preventCloseLastTab?

> `optional` **preventCloseLastTab**: `boolean`

If true, hides the close button when only one tab remains open.

***

### onClose()?

> `optional` **onClose**: (`tabId`) => `void`

Called when a tab is closed (hidden, can be reopened).

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `tabId` | `string` |

#### Returns

`void`

***

### onOpenTabsChange()?

> `optional` **onOpenTabsChange**: (`tabIds`) => `void`

Called when the list of open tabs changes (open from dropdown or reorder).

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `tabIds` | `string`\[] |

#### Returns

`void`

***

### onSelect()?

> `optional` **onSelect**: (`tabId`) => `void`

Called when a tab is selected.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `tabId` | `string` |

#### Returns

`void`

***

### onCreate()?

> `optional` **onCreate**: () => `void`

Called when a new tab should be created.

#### Returns

`void`

***

### onRename()?

> `optional` **onRename**: (`tabId`, `newName`) => `void`

Called when a tab is renamed inline.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `tabId` | `string` |
| `newName` | `string` |

#### Returns

`void`

***

### renderTabMenu()?

> `optional` **renderTabMenu**: (`tab`) => `ReactNode`

Render function for the tab's dropdown menu. Use TabStrip.MenuItem and TabStrip.MenuSeparator.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `tab` | [`TabDescriptor`](TabDescriptor.md) |

#### Returns

`ReactNode`

***

### renderSearchItemActions()?

> `optional` **renderSearchItemActions**: (`tab`) => `ReactNode`

Render function for search dropdown item actions. Use TabStrip.SearchItemAction.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `tab` | [`TabDescriptor`](TabDescriptor.md) |

#### Returns

`ReactNode`

---

---
url: /api/recharts/interfaces/TreemapProps.md
---
[@sqlrooms/recharts](../index.md) / TreemapProps

# Interface: TreemapProps

## Properties

### width?

> `optional` **width**: `number`

***

### height?

> `optional` **height**: `number`

***

### data?

> `optional` **data**: `any`\[]

***

### animationId?

> `optional` **animationId**: `number`

***

### style?

> `optional` **style**: `any`

***

### aspectRatio?

> `optional` **aspectRatio**: `number`

***

### content?

> `optional` **content**: `ReactElement`<`unknown`, `string` | `JSXElementConstructor`<`any`>>

***

### fill?

> `optional` **fill**: `string`

***

### stroke?

> `optional` **stroke**: `string`

***

### className?

> `optional` **className**: `string`

***

### nameKey?

> `optional` **nameKey**: `DataKey`<`any`>

***

### dataKey?

> `optional` **dataKey**: `DataKey`<`any`>

***

### children?

> `optional` **children**: `any`

***

### type?

> `optional` **type**: `"flat"` | `"nest"`

***

### colorPanel?

> `optional` **colorPanel**: \[]

***

### nestIndexContent?

> `optional` **nestIndexContent**: `ReactElement`<`unknown`, `string` | `JSXElementConstructor`<`any`>> | (`item`, `i`) => `any`

***

### onAnimationStart()?

> `optional` **onAnimationStart**: () => `void`

#### Returns

`void`

***

### onAnimationEnd()?

> `optional` **onAnimationEnd**: () => `void`

#### Returns

`void`

***

### onMouseEnter()?

> `optional` **onMouseEnter**: (`node`, `e`) => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `TreemapNode` |
| `e` | `any` |

#### Returns

`void`

***

### onMouseLeave()?

> `optional` **onMouseLeave**: (`node`, `e`) => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `TreemapNode` |
| `e` | `any` |

#### Returns

`void`

***

### onClick()?

> `optional` **onClick**: (`node`) => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `TreemapNode` |

#### Returns

`void`

***

### isAnimationActive?

> `optional` **isAnimationActive**: `boolean`

***

### isUpdateAnimationActive?

> `optional` **isUpdateAnimationActive**: `boolean`

***

### animationBegin?

> `optional` **animationBegin**: `number`

***

### animationDuration?

> `optional` **animationDuration**: `number`

***

### animationEasing?

> `optional` **animationEasing**: `AnimationTiming`

---

---
url: /api/duckdb-core/interfaces/TypedRowAccessor.md
---
[@sqlrooms/duckdb-core](../index.md) / TypedRowAccessor

# Interface: TypedRowAccessor\<T>

## Extends

* `Iterable`<`T`>

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Properties

### length

> **length**: `number`

Number of rows in the table

## Methods

### getRow()

> **getRow**(`index`): `T`

Returns a typed row at the specified index by converting on demand

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `index` | `number` |

#### Returns

`T`

***

### rows()

> **rows**(): `IterableIterator`<`T`>

Returns an iterator that yields each row in the table

#### Returns

`IterableIterator`<`T`>

***

### toArray()

> **toArray**(): `T`\[]

Returns an array containing all rows in the table. The array is cached and reused.

#### Returns

`T`\[]

***

### \[iterator]\()

> **\[iterator]**(): `Iterator`<`T`, `any`, `any`>

#### Returns

`Iterator`<`T`, `any`, `any`>

#### Inherited from

`Iterable.[iterator]`

---

---
url: /api/duckdb/interfaces/TypedRowAccessor.md
---
[@sqlrooms/duckdb](../index.md) / TypedRowAccessor

# Interface: TypedRowAccessor\<T>

## Extends

* `Iterable`<`T`>

## Extended by

* [`UseSqlQueryResult`](UseSqlQueryResult.md)

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Properties

### length

> **length**: `number`

Number of rows in the table

## Methods

### getRow()

> **getRow**(`index`): `T`

Returns a typed row at the specified index by converting on demand

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `index` | `number` |

#### Returns

`T`

***

### rows()

> **rows**(): `IterableIterator`<`T`>

Returns an iterator that yields each row in the table

#### Returns

`IterableIterator`<`T`>

***

### toArray()

> **toArray**(): `T`\[]

Returns an array containing all rows in the table. The array is cached and reused.

#### Returns

`T`\[]

***

### \[iterator]\()

> **\[iterator]**(): `Iterator`<`T`, `any`, `any`>

#### Returns

`Iterator`<`T`, `any`, `any`>

#### Inherited from

`Iterable.[iterator]`

---

---
url: /api/ai-core/interfaces/UIMessageChunk.md
---
[@sqlrooms/ai-core](../index.md) / UIMessageChunk

# Interface: UIMessageChunk

Represents a chunk from the UI message stream

## Properties

### type

> **type**: `string`

***

### toolCallId?

> `optional` **toolCallId**: `string`

***

### toolName?

> `optional` **toolName**: `string`

***

### output?

> `optional` **output**: `unknown`

***

### errorText?

> `optional` **errorText**: `string`

***

### delta?

> `optional` **delta**: `string`

***

### id?

> `optional` **id**: `string`

***

### providerMetadata?

> `optional` **providerMetadata**: `unknown`

---

---
url: /api/ai/interfaces/UIMessageChunk.md
---
[@sqlrooms/ai](../index.md) / UIMessageChunk

# Interface: UIMessageChunk

Represents a chunk from the UI message stream

## Properties

### type

> **type**: `string`

***

### toolCallId?

> `optional` **toolCallId**: `string`

***

### toolName?

> `optional` **toolName**: `string`

***

### output?

> `optional` **output**: `unknown`

***

### errorText?

> `optional` **errorText**: `string`

***

### delta?

> `optional` **delta**: `string`

***

### id?

> `optional` **id**: `string`

***

### providerMetadata?

> `optional` **providerMetadata**: `unknown`

---

---
url: /api/ui/interfaces/UseAspectRatioDimensionsProps.md
---
[@sqlrooms/ui](../index.md) / UseAspectRatioDimensionsProps

# Interface: UseAspectRatioDimensionsProps

Props for the useAspectRatioDimensions hook
UseAspectRatioDimensionsProps

## Properties

### width

> **width**: `number` | `"auto"`

The explicitly provided width, or 'auto' for container-based width

***

### height

> **height**: `number` | `"auto"`

The explicitly provided height, or 'auto' for aspect ratio-based height

***

### aspectRatio

> **aspectRatio**: `number`

The desired width-to-height ratio when dimensions are auto-calculated

***

### containerRef

> **containerRef**: `RefObject`<`HTMLElement` | `null`>

Reference to the container element

---

---
url: /api/ui/interfaces/UseDisclosureReturnValue.md
---
[@sqlrooms/ui](../index.md) / UseDisclosureReturnValue

# Interface: UseDisclosureReturnValue

## Properties

### isOpen

> **isOpen**: `boolean`

***

### onOpen()

> **onOpen**: () => `void`

#### Returns

`void`

***

### onClose()

> **onClose**: () => `void`

#### Returns

`void`

***

### onToggle()

> **onToggle**: () => `void`

#### Returns

`void`

---

---
url: /api/duckdb/interfaces/UseSqlQueryResult.md
---
[@sqlrooms/duckdb](../index.md) / UseSqlQueryResult

# Interface: UseSqlQueryResult\<T>

A wrapper interface that exposes the underlying Arrow table,
a typed row accessor, and the number of rows.

## Extends

* [`TypedRowAccessor`](TypedRowAccessor.md)<`T`>

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Properties

### arrowTable

> **arrowTable**: `Table`

The underlying Arrow table

***

### length

> **length**: `number`

Number of rows in the table

#### Inherited from

[`TypedRowAccessor`](TypedRowAccessor.md).[`length`](TypedRowAccessor.md#length)

## Methods

### getRow()

> **getRow**(`index`): `T`

Returns a typed row at the specified index by converting on demand

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `index` | `number` |

#### Returns

`T`

#### Inherited from

[`TypedRowAccessor`](TypedRowAccessor.md).[`getRow`](TypedRowAccessor.md#getrow)

***

### rows()

> **rows**(): `IterableIterator`<`T`>

Returns an iterator that yields each row in the table

#### Returns

`IterableIterator`<`T`>

#### Inherited from

[`TypedRowAccessor`](TypedRowAccessor.md).[`rows`](TypedRowAccessor.md#rows)

***

### toArray()

> **toArray**(): `T`\[]

Returns an array containing all rows in the table. The array is cached and reused.

#### Returns

`T`\[]

#### Inherited from

[`TypedRowAccessor`](TypedRowAccessor.md).[`toArray`](TypedRowAccessor.md#toarray)

***

### \[iterator]\()

> **\[iterator]**(): `Iterator`<`T`, `any`, `any`>

#### Returns

`Iterator`<`T`, `any`, `any`>

#### Inherited from

[`TypedRowAccessor`](TypedRowAccessor.md).[`[iterator]`](TypedRowAccessor.md#iterator)

---

---
url: /api/duckdb/interfaces/WasmDuckDbConnector.md
---
[@sqlrooms/duckdb](../index.md) / WasmDuckDbConnector

# Interface: WasmDuckDbConnector

DuckDB connector interface with advanced query cancellation support

This interface provides a hybrid approach that combines the simplicity of method-based
cancellation with the composability of Web Standards (AbortController/AbortSignal).

## Key Benefits of This Design

### 🔗 Composability

Cancel multiple queries with a single controller:

```typescript
const controller = new AbortController();
const query1 = connector.query('SELECT * FROM table1', { signal: controller.signal });
const query2 = connector.query('SELECT * FROM table2', { signal: controller.signal });
controller.abort(); // Cancels both queries
```

### 🌐 Integration with Web APIs

Use the same signal for queries and HTTP requests:

```typescript
const controller = new AbortController();
const queryHandle = connector.query('SELECT * FROM table', { signal: controller.signal });
const response = await fetch('/api/data', { signal: controller.signal });
// controller.abort() cancels both the query and the HTTP request
```

### 🎛️ Flexibility

Simple usage when you don't need external control, advanced when you do:

```typescript
// Simple - internal cancellation management
const handle = connector.query('SELECT * FROM table');
handle.cancel();

// Advanced - external cancellation control
const controller = new AbortController();
const handle = connector.query('SELECT * FROM table', { signal: controller.signal });
controller.abort();
```

### 📡 Event-Driven

React to cancellation events for better UX:

```typescript
handle.signal.addEventListener('abort', () => {
  showNotification('Query cancelled');
  hideLoadingSpinner();
});
```

### ⏱️ Timeout Support

Built-in timeout capability with manual override:

```typescript
const timeoutController = new AbortController();
setTimeout(() => timeoutController.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM large_table', {
  signal: timeoutController.signal
});

// User can still cancel manually
cancelButton.onclick = () => timeoutController.abort();
```

### 🏗️ Signal Composition

Combine multiple cancellation sources:

```typescript
function combineSignals(...signals: AbortSignal[]): AbortSignal {
  const controller = new AbortController();
  signals.forEach(signal => {
    if (signal.aborted) controller.abort();
    else signal.addEventListener('abort', () => controller.abort());
  });
  return controller.signal;
}

const userSignal = userController.signal;
const timeoutSignal = createTimeoutSignal(30000);
const combinedSignal = combineSignals(userSignal, timeoutSignal);

const handle = connector.query('SELECT * FROM table', { signal: combinedSignal });
```

## Extends

* [`DuckDbConnector`](DuckDbConnector.md)

## Properties

### type

> `readonly` **type**: `"wasm"`

## Methods

### getDb()

> **getDb**(): `AsyncDuckDB`

#### Returns

`AsyncDuckDB`

***

### getConnection()

> **getConnection**(): `AsyncDuckDBConnection`

#### Returns

`AsyncDuckDBConnection`

***

### initialize()

> **initialize**(): `Promise`<`void`>

Initialize the connector.
The function returns a promise that resolves when the connector is initialized.
Calling the initialize() function multiple times should not restart the initialization.
See BaseDuckDbConnector for an implementation example.

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`initialize`](DuckDbConnector.md#initialize)

***

### destroy()

> **destroy**(): `Promise`<`void`>

Destroy the connector and clean up resources

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`destroy`](DuckDbConnector.md#destroy)

***

### execute()

> **execute**(`sql`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)

Execute a SQL query without returning a result

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `sql` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)

QueryHandle containing:

* result: Promise that resolves when execution completes
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple execution
const handle = connector.execute('CREATE TABLE test AS SELECT * FROM source');
await handle.result;

// With external cancellation control
const controller = new AbortController();
const handle = connector.execute('DROP TABLE large_table', {
  signal: controller.signal
});

// Cancel if it takes too long
setTimeout(() => controller.abort(), 5000);
```

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`execute`](DuckDbConnector.md#execute)

***

### query()

> **query**<`T`>(`query`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

Execute a SQL query and return the result as an Arrow table

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

QueryHandle containing:

* result: Promise that resolves with Arrow table
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Basic query
const handle = await connector.query('SELECT * FROM users WHERE active = true');
console.log(`Found ${table.numRows} active users`);

// Query with timeout
const controller = new AbortController();
setTimeout(() => controller.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM very_large_table', {
  signal: controller.signal
});

try {
  const result = await handle;
  console.log('Query completed within timeout');
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Query timed out');
  }
}
```

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`query`](DuckDbConnector.md#query)

***

### queryJson()

> **queryJson**<`T`>(`query`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

Execute a SQL query and return the result as a JSON object

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `Record`<`string`, `any`> |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

QueryHandle containing:

* result: Promise that resolves with iterable of JSON objects
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple JSON query
const users = await connector.queryJson('SELECT name, email FROM users LIMIT 10');
for (const user of users) {
  console.log(`${user.name}: ${user.email}`);
}

// Coordinated cancellation with multiple operations
const operationController = new AbortController();

const usersHandle = connector.queryJson('SELECT * FROM users', {
  signal: operationController.signal
});

const ordersHandle = connector.queryJson('SELECT * FROM orders', {
  signal: operationController.signal
});

// Cancel both queries if user navigates away
window.addEventListener('beforeunload', () => {
  operationController.abort();
});
```

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`queryJson`](DuckDbConnector.md#queryjson)

***

### loadFile()

> **loadFile**(`fileName`, `tableName`, `opts?`): `Promise`<`void`>

Load a file into DuckDB and create a table

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `fileName` | `string` | `File` | Path to the file to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | Load options |

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`loadFile`](DuckDbConnector.md#loadfile)

***

### loadArrow()

> **loadArrow**(`table`, `tableName`, `opts?`): `Promise`<`void`>

Load an arrow table or an arrow IPC stream into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `table` | `Table`<`any`> | `Uint8Array`<`ArrayBufferLike`> | Arrow table or arrow IPC stream to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | { `schema?`: `string`; } | - |
| `opts.schema?` | `string` | - |

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`loadArrow`](DuckDbConnector.md#loadarrow)

***

### loadObjects()

> **loadObjects**(`data`, `tableName`, `opts?`): `Promise`<`void`>

Load JavaScript objects into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `Record`<`string`, `unknown`>\[] | Array of objects to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options |
| `opts.schema?` | `string` | - |
| `opts.select?` | `string`\[] | - |
| `opts.where?` | `string` | - |
| `opts.view?` | `boolean` | - |
| `opts.temp?` | `boolean` | - |
| `opts.replace?` | `boolean` | - |

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`loadObjects`](DuckDbConnector.md#loadobjects)

---

---
url: /api/motherduck/interfaces/WasmMotherDuckDbConnector.md
---
[@sqlrooms/motherduck](../index.md) / WasmMotherDuckDbConnector

# Interface: WasmMotherDuckDbConnector

## Extends

* `DuckDbConnector`

## Properties

### type

> `readonly` **type**: `"wasm-motherduck"`

## Methods

### initialize()

> **initialize**(): `Promise`<`void`>

Initialize the connector.
The function returns a promise that resolves when the connector is initialized.
Calling the initialize() function multiple times should not restart the initialization.
See BaseDuckDbConnector for an implementation example.

#### Returns

`Promise`<`void`>

#### Inherited from

`DuckDbConnector.initialize`

***

### destroy()

> **destroy**(): `Promise`<`void`>

Destroy the connector and clean up resources

#### Returns

`Promise`<`void`>

#### Inherited from

`DuckDbConnector.destroy`

***

### execute()

> **execute**(`sql`, `options?`): `QueryHandle`

Execute a SQL query without returning a result

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `sql` | `string` | SQL query to execute |
| `options?` | `QueryOptions` | Optional query options including abort signal for coordinated cancellation |

#### Returns

`QueryHandle`

QueryHandle containing:

* result: Promise that resolves when execution completes
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple execution
const handle = connector.execute('CREATE TABLE test AS SELECT * FROM source');
await handle.result;

// With external cancellation control
const controller = new AbortController();
const handle = connector.execute('DROP TABLE large_table', {
  signal: controller.signal
});

// Cancel if it takes too long
setTimeout(() => controller.abort(), 5000);
```

#### Inherited from

`DuckDbConnector.execute`

***

### query()

> **query**<`T`>(`query`, `options?`): `QueryHandle`<`Table`<`T`>>

Execute a SQL query and return the result as an Arrow table

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options?` | `QueryOptions` | Optional query options including abort signal for coordinated cancellation |

#### Returns

`QueryHandle`<`Table`<`T`>>

QueryHandle containing:

* result: Promise that resolves with Arrow table
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Basic query
const handle = await connector.query('SELECT * FROM users WHERE active = true');
console.log(`Found ${table.numRows} active users`);

// Query with timeout
const controller = new AbortController();
setTimeout(() => controller.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM very_large_table', {
  signal: controller.signal
});

try {
  const result = await handle;
  console.log('Query completed within timeout');
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Query timed out');
  }
}
```

#### Inherited from

`DuckDbConnector.query`

***

### queryJson()

> **queryJson**<`T`>(`query`, `options?`): `QueryHandle`<`Iterable`<`T`, `any`, `any`>>

Execute a SQL query and return the result as a JSON object

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `Record`<`string`, `any`> |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options?` | `QueryOptions` | Optional query options including abort signal for coordinated cancellation |

#### Returns

`QueryHandle`<`Iterable`<`T`, `any`, `any`>>

QueryHandle containing:

* result: Promise that resolves with iterable of JSON objects
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple JSON query
const users = await connector.queryJson('SELECT name, email FROM users LIMIT 10');
for (const user of users) {
  console.log(`${user.name}: ${user.email}`);
}

// Coordinated cancellation with multiple operations
const operationController = new AbortController();

const usersHandle = connector.queryJson('SELECT * FROM users', {
  signal: operationController.signal
});

const ordersHandle = connector.queryJson('SELECT * FROM orders', {
  signal: operationController.signal
});

// Cancel both queries if user navigates away
window.addEventListener('beforeunload', () => {
  operationController.abort();
});
```

#### Inherited from

`DuckDbConnector.queryJson`

***

### loadFile()

> **loadFile**(`fileName`, `tableName`, `opts?`): `Promise`<`void`>

Load a file into DuckDB and create a table

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `fileName` | `string` | `File` | Path to the file to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | Load options |

#### Returns

`Promise`<`void`>

#### Inherited from

`DuckDbConnector.loadFile`

***

### loadArrow()

> **loadArrow**(`table`, `tableName`, `opts?`): `Promise`<`void`>

Load an arrow table or an arrow IPC stream into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `table` | `Table`<`any`> | `Uint8Array`<`ArrayBufferLike`> | Arrow table or arrow IPC stream to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | { `schema?`: `string`; } | - |
| `opts.schema?` | `string` | - |

#### Returns

`Promise`<`void`>

#### Inherited from

`DuckDbConnector.loadArrow`

***

### loadObjects()

> **loadObjects**(`data`, `tableName`, `opts?`): `Promise`<`void`>

Load JavaScript objects into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `Record`<`string`, `unknown`>\[] | Array of objects to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options |
| `opts.schema?` | `string` | - |
| `opts.select?` | `string`\[] | - |
| `opts.where?` | `string` | - |
| `opts.view?` | `boolean` | - |
| `opts.temp?` | `boolean` | - |
| `opts.replace?` | `boolean` | - |

#### Returns

`Promise`<`void`>

#### Inherited from

`DuckDbConnector.loadObjects`

***

### getConnection()

> **getConnection**(): `MDConnection`

#### Returns

`MDConnection`

---

---
url: /api/motherduck/interfaces/WasmMotherDuckDbConnectorOptions.md
---
[@sqlrooms/motherduck](../index.md) / WasmMotherDuckDbConnectorOptions

# Interface: WasmMotherDuckDbConnectorOptions

## Extends

* `MDConnectionParams`

## Properties

### mdToken

> **mdToken**: `string`

#### Inherited from

`MDConnectionParams.mdToken`

***

### mdServerURL?

> `optional` **mdServerURL**: `string`

#### Inherited from

`MDConnectionParams.mdServerURL`

***

### duckDBAssetsURLPrefix?

> `optional` **duckDBAssetsURLPrefix**: `string`

#### Inherited from

`MDConnectionParams.duckDBAssetsURLPrefix`

***

### useDuckDBWasmCOI?

> `optional` **useDuckDBWasmCOI**: `boolean`

#### Inherited from

`MDConnectionParams.useDuckDBWasmCOI`

***

### logger?

> `optional` **logger**: `ConsoleLike`

#### Inherited from

`MDConnectionParams.logger`

***

### version?

> `optional` **version**: `string`

#### Inherited from

`MDConnectionParams.version`

***

### extensionVersion?

> `optional` **extensionVersion**: `string`

#### Inherited from

`MDConnectionParams.extensionVersion`

***

### enableDebugLogging?

> `optional` **enableDebugLogging**: `boolean`

#### Inherited from

`MDConnectionParams.enableDebugLogging`

***

### customUserAgent?

> `optional` **customUserAgent**: `string`

#### Inherited from

`MDConnectionParams.customUserAgent`

***

### attachMode?

> `optional` **attachMode**: `"single"` | `"workspace"`

#### Inherited from

`MDConnectionParams.attachMode`

***

### skipWelcomePack?

> `optional` **skipWelcomePack**: `boolean`

#### Inherited from

`MDConnectionParams.skipWelcomePack`

***

### initializationQuery?

> `optional` **initializationQuery**: `string`

---

---
url: /api/duckdb/interfaces/WebSocketDuckDbConnector.md
---
[@sqlrooms/duckdb](../index.md) / WebSocketDuckDbConnector

# Interface: WebSocketDuckDbConnector

DuckDB connector interface with advanced query cancellation support

This interface provides a hybrid approach that combines the simplicity of method-based
cancellation with the composability of Web Standards (AbortController/AbortSignal).

## Key Benefits of This Design

### 🔗 Composability

Cancel multiple queries with a single controller:

```typescript
const controller = new AbortController();
const query1 = connector.query('SELECT * FROM table1', { signal: controller.signal });
const query2 = connector.query('SELECT * FROM table2', { signal: controller.signal });
controller.abort(); // Cancels both queries
```

### 🌐 Integration with Web APIs

Use the same signal for queries and HTTP requests:

```typescript
const controller = new AbortController();
const queryHandle = connector.query('SELECT * FROM table', { signal: controller.signal });
const response = await fetch('/api/data', { signal: controller.signal });
// controller.abort() cancels both the query and the HTTP request
```

### 🎛️ Flexibility

Simple usage when you don't need external control, advanced when you do:

```typescript
// Simple - internal cancellation management
const handle = connector.query('SELECT * FROM table');
handle.cancel();

// Advanced - external cancellation control
const controller = new AbortController();
const handle = connector.query('SELECT * FROM table', { signal: controller.signal });
controller.abort();
```

### 📡 Event-Driven

React to cancellation events for better UX:

```typescript
handle.signal.addEventListener('abort', () => {
  showNotification('Query cancelled');
  hideLoadingSpinner();
});
```

### ⏱️ Timeout Support

Built-in timeout capability with manual override:

```typescript
const timeoutController = new AbortController();
setTimeout(() => timeoutController.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM large_table', {
  signal: timeoutController.signal
});

// User can still cancel manually
cancelButton.onclick = () => timeoutController.abort();
```

### 🏗️ Signal Composition

Combine multiple cancellation sources:

```typescript
function combineSignals(...signals: AbortSignal[]): AbortSignal {
  const controller = new AbortController();
  signals.forEach(signal => {
    if (signal.aborted) controller.abort();
    else signal.addEventListener('abort', () => controller.abort());
  });
  return controller.signal;
}

const userSignal = userController.signal;
const timeoutSignal = createTimeoutSignal(30000);
const combinedSignal = combineSignals(userSignal, timeoutSignal);

const handle = connector.query('SELECT * FROM table', { signal: combinedSignal });
```

## Extends

* [`DuckDbConnector`](DuckDbConnector.md)

## Properties

### type

> `readonly` **type**: `"ws"`

## Methods

### initialize()

> **initialize**(): `Promise`<`void`>

Initialize the connector.
The function returns a promise that resolves when the connector is initialized.
Calling the initialize() function multiple times should not restart the initialization.
See BaseDuckDbConnector for an implementation example.

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`initialize`](DuckDbConnector.md#initialize)

***

### destroy()

> **destroy**(): `Promise`<`void`>

Destroy the connector and clean up resources

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`destroy`](DuckDbConnector.md#destroy)

***

### execute()

> **execute**(`sql`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)

Execute a SQL query without returning a result

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `sql` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)

QueryHandle containing:

* result: Promise that resolves when execution completes
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple execution
const handle = connector.execute('CREATE TABLE test AS SELECT * FROM source');
await handle.result;

// With external cancellation control
const controller = new AbortController();
const handle = connector.execute('DROP TABLE large_table', {
  signal: controller.signal
});

// Cancel if it takes too long
setTimeout(() => controller.abort(), 5000);
```

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`execute`](DuckDbConnector.md#execute)

***

### query()

> **query**<`T`>(`query`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

Execute a SQL query and return the result as an Arrow table

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

QueryHandle containing:

* result: Promise that resolves with Arrow table
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Basic query
const handle = await connector.query('SELECT * FROM users WHERE active = true');
console.log(`Found ${table.numRows} active users`);

// Query with timeout
const controller = new AbortController();
setTimeout(() => controller.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM very_large_table', {
  signal: controller.signal
});

try {
  const result = await handle;
  console.log('Query completed within timeout');
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Query timed out');
  }
}
```

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`query`](DuckDbConnector.md#query)

***

### queryJson()

> **queryJson**<`T`>(`query`, `options?`): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

Execute a SQL query and return the result as a JSON object

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `Record`<`string`, `any`> |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options?` | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

QueryHandle containing:

* result: Promise that resolves with iterable of JSON objects
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple JSON query
const users = await connector.queryJson('SELECT name, email FROM users LIMIT 10');
for (const user of users) {
  console.log(`${user.name}: ${user.email}`);
}

// Coordinated cancellation with multiple operations
const operationController = new AbortController();

const usersHandle = connector.queryJson('SELECT * FROM users', {
  signal: operationController.signal
});

const ordersHandle = connector.queryJson('SELECT * FROM orders', {
  signal: operationController.signal
});

// Cancel both queries if user navigates away
window.addEventListener('beforeunload', () => {
  operationController.abort();
});
```

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`queryJson`](DuckDbConnector.md#queryjson)

***

### loadFile()

> **loadFile**(`fileName`, `tableName`, `opts?`): `Promise`<`void`>

Load a file into DuckDB and create a table

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `fileName` | `string` | `File` | Path to the file to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | Load options |

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`loadFile`](DuckDbConnector.md#loadfile)

***

### loadArrow()

> **loadArrow**(`table`, `tableName`, `opts?`): `Promise`<`void`>

Load an arrow table or an arrow IPC stream into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `table` | `Table`<`any`> | `Uint8Array`<`ArrayBufferLike`> | Arrow table or arrow IPC stream to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | { `schema?`: `string`; } | - |
| `opts.schema?` | `string` | - |

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`loadArrow`](DuckDbConnector.md#loadarrow)

***

### loadObjects()

> **loadObjects**(`data`, `tableName`, `opts?`): `Promise`<`void`>

Load JavaScript objects into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `Record`<`string`, `unknown`>\[] | Array of objects to load |
| `tableName` | `string` | Name of the table to create |
| `opts?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; } | Load options |
| `opts.schema?` | `string` | - |
| `opts.select?` | `string`\[] | - |
| `opts.where?` | `string` | - |
| `opts.view?` | `boolean` | - |
| `opts.temp?` | `boolean` | - |
| `opts.replace?` | `boolean` | - |

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`loadObjects`](DuckDbConnector.md#loadobjects)

---

---
url: /api/duckdb/interfaces/WebSocketDuckDbConnectorOptions.md
---
[@sqlrooms/duckdb](../index.md) / WebSocketDuckDbConnectorOptions

# Interface: WebSocketDuckDbConnectorOptions

Options for the WebSocket DuckDB connector.

## Properties

### wsUrl?

> `optional` **wsUrl**: `string`

WebSocket endpoint of the DuckDB server.

***

### initializationQuery?

> `optional` **initializationQuery**: `string`

SQL to run after initialization

***

### onNotification()?

> `optional` **onNotification**: (`payload`) => `void`

Optional handler for server notifications `{ type: 'notify', payload }`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `payload` | `any` |

#### Returns

`void`

***

### subscribeChannels?

> `optional` **subscribeChannels**: `string`\[]

Optional list of channels to subscribe to upon (re)connect

***

### authToken?

> `optional` **authToken**: `string`

Optional bearer token to authenticate with the server

---

---
url: /api/recharts/interfaces/ZAxisProps.md
---
[@sqlrooms/recharts](../index.md) / ZAxisProps

# Interface: ZAxisProps

## Properties

### type?

> `optional` **type**: `"number"` | `"category"`

***

### name?

> `optional` **name**: `string` | `number`

The name of data displayed in the axis

***

### unit?

> `optional` **unit**: `string` | `number`

The unit of data displayed in the axis

***

### zAxisId?

> `optional` **zAxisId**: `string` | `number`

The unique id of z-axis

***

### dataKey?

> `optional` **dataKey**: `DataKey`<`any`>

The key of data displayed in the axis

***

### range?

> `optional` **range**: `number`\[]

The range of axis

***

### scale?

> `optional` **scale**: `Function` | `ScaleType`

***

### domain?

> `optional` **domain**: `AxisDomain`

The domain of scale in this axis

---

---
url: /join-slack.md
description: Join the SQLRooms community on the OpenVis Slack.
---

# Join Slack

Join the `#sqlrooms` channel in the Slack workspace, hosted by the [OpenJS Foundation](https://www.openvisualization.org/), to discuss SQLRooms development, share examples, get help with integration questions, and connect with the community.

Follow these steps:

1. Join the OpenJS Foundation Slack workspace: https://slack-invite.openjsf.org/
2. In Slack, search and join the `#sqlrooms` channel

See you there!

---

---
url: /key-concepts.md
---
# Key Concepts

## What's a Room?

A **Room** is a self-contained workspace where users can explore datasets, run queries, and view results. The term comes from [collaborative tools](https://en.wikipedia.org/wiki/Collaborative_software)—where users work in shared spaces—and SQLRooms is built with future real-time collaboration in mind.

A Room consists of:

* `<RoomShell>`: a React component that renders the Room UI
* `roomStore`: a Zustand-based state store for the Room

***

![SQLRooms example RoomShell diagram](/assets/room-shell.DC43Wwic.png)

***

## Room Store

The `roomStore` is a [composable](#composing-store-from-slices) [`Zustand`](/state-management#why-zustand) store created by calling `createRoomStore()`. The store holds:

* `config`: the persistable part of the state that captures a Room's saveable settings and can be serialized to JSON for storage or sharing including:
  * the view configuration and the layout state
  * the user preferences
* `room`: non-persistable state that holds runtime information like:
  * loaded DuckDB tables
  * transient UI state (like "query running")

```tsx
const {roomStore, useRoomStore} = createRoomStore<RoomState>(
  (set, get, store) => ({
    ...createRoomShellSlice({
      config: {
        dataSources: [
          {
            type: 'url',
            url: 'https://.../earthquakes.parquet',
            tableName: 'earthquakes',
          },
        ],
      },
      layout: {
        config: {
          // Layout configuration
        },
        panels: {
          // Panel definitions
        },
      },
    })(set, get, store),
  }),
);
```

Check the [minimal example](https://github.com/sqlrooms/examples/blob/main/minimal/src/app.tsx) for the complete implementation.

***

## RoomShell

`<RoomShell>` is a React component that wraps your Room UI

* It injects the `roomStore` into React context, accessible via the `useRoomStore()` hook
* It sets up essential UI infrastructure including error boundaries, toast notifications, and tooltips, making it easy to use components from `@sqlrooms/ui` out of the box
* It provides slots for the optional `LayoutComposer` (see [Layout](#layout-optional) section below), `Sidebar`, and `LoadingProgress` components

```tsx
const App = () => (
  <RoomShell roomStore={roomStore}>
    <MyComponent />
  </RoomShell>
);
```

***

## SQL and DuckDB Access

SQLRooms includes a built-in DuckDB integration via the [`DuckDbSlice`](/api/duckdb/).
The `DuckDbSlice` provides helper functions for managing and querying tables:

* `findTableByName()` - Look up a table by name in the current schema
* `addTable()` - Add a new table from Arrow data or records
* `dropTable()` - Remove a table from the database
* `refreshTableSchemas()` - Update the cached table schemas
* `tables` - The cached list of tables from the last refreshTableSchemas() call
* `getConnector()` - Access the underlying DuckDB connector

You can query your datasets using the `useSql(query)` hook and work directly with Arrow tables in React.

```tsx
function MyComponent() {
  const isTableReady = useRoomStore((state) =>
    Boolean(state.db.findTableByName('earthquakes')),
  );
  const queryResult = useSql<{maxMagnitude: number}>({
    query: `SELECT max(Magnitude) AS maxMagnitude FROM earthquakes`,
    enabled: isTableReady,
  });
  const row = queryResult.data?.toArray()[0];
  return row ? `Max earthquake magnitude: ${row.maxMagnitude}` : <Spinner />;
}
```

For more details on DuckDB integration and available methods, see the [DuckDB API Reference](/api/duckdb/).

***

## Composing Store from Slices

The store can be enhanced with **slices**—modular pieces of state and logic that can be added to your Room. You can use slices from the `@sqlrooms/*` packages or create your own custom slices. Each slice is a function that returns a partial state object along with methods to modify that state.

Here's an example showing how to combine the default room shell with SQL editor functionality:

```tsx
const {roomStore, useRoomStore} = createRoomStore<RoomState>(
  (set, get, store) => ({
    // Default slice
    ...createRoomShellSlice({
      config: {
        // Room configuration
      },
      layout: {
        config: {
          // Layout configuration
        },
        panels: {
          // Panel definitions
        },
      },
    })(set, get, store),

    // Mix in sql editor slice
    ...createSqlEditorSlice()(set, get, store),
  }),
);
```

You can access slices' namespaced config, state and functions in the store using selectors, for example:

```tsx
const queries = useRoomStore((state) => state.sqlEditor.config.queries);
const runQuery = useRoomStore((state) => state.sqlEditor.parseAndRunQuery);
```

Learn more about store and slices in [State Management](/state-management).

***

## Layout (Optional)

The `LayoutComposer` provides a flexible panel layout for your Room's UI.

* Panels are React components that can be plugged into the layout. They include metadata (`id`, `title`, `icon`) and a `component` to render.
* Panels can be moved, resized, or hidden
* Developers can add panels by registering them in the `roomStore`.
* Layout state is persisted in the `roomStore`

Configure the room layout and panels during store initialization:

```tsx
const {roomStore, useRoomStore} = createRoomStore<RoomState>(
  (set, get, store) => ({
    ...createRoomShellSlice({
      config: {
        dataSources: [],
      },
      layout: {
        config: {
          type: LayoutTypes.enum.mosaic,
          nodes: {
            // Data panel on left (30%) and main view on right
            direction: 'row',
            first: 'data-panel',
            second: MAIN_VIEW,
            splitPercentage: 30,
          },
        },
        panels: {
          'data-panel': {
            title: 'Data Sources',
            icon: DatabaseIcon,
            component: DataSourcesPanel,
            placement: 'sidebar',
          },
          main: {
            title: 'Main view',
            icon: () => null,
            component: MainView,
            placement: 'main',
          },
        },
      },
    })(set, get, store),
  }),
);
```

Layout composer renders the mosaic layout with panels:

```tsx
function App() {
  return (
    <RoomShell className="h-screen" roomStore={roomStore}>
      <RoomShell.Sidebar />
      <RoomShell.LayoutComposer />
    </RoomShell>
  );
}
```

For more details on layout configuration and customization, see the [Layout API Reference](/api/layout/).

---

---
url: /api/recharts/recharts/namespaces/Label.md
---
[@sqlrooms/recharts](../../../index.md) / Label

# Label

## Variables

* [displayName](variables/displayName.md)
* [parseViewBox](variables/parseViewBox.md)
* [renderCallByParent](variables/renderCallByParent.md)

---

---
url: /api/recharts/recharts/namespaces/LabelList.md
---
[@sqlrooms/recharts](../../../index.md) / LabelList

# LabelList

## Variables

* [displayName](variables/displayName.md)
* [renderCallByParent](variables/renderCallByParent.md)

---

---
url: /modular-architecture.md
---
# Modular Architecture

SQLRooms is designed with a modular architecture that allows developers to pick and choose exactly the functionality they need for their data analytics applications. This approach enables you to build custom solutions tailored to your specific requirements.

![SQLRooms Architecture](/assets/architecture.C4KQpP4R.svg)

The diagram above illustrates how SQLRooms is structured for composability and extensibility:

* **Core packages** (green) provide the foundation: `roomShellStore` manages configuration and data sources, while `<RoomShell>` offers a flexible UI shell and panel layout. DuckDB-WASM and utilities enable fast, in-browser analytics.
* **Feature packages** (purple) are plug-and-play modules you can add as needed—such as DataTable views, SQL query editors, AI integration, Vega charts, S3 browser, and more. These integrate seamlessly with the core, letting you extend your app with popular data visualization and analytics tools.
* **Custom App Code** (blue) is where you bring it all together: use `roomStore` to compose base and custom store logic, and build your own custom views and panels. You can mix and match core and feature packages, or add your own, to create a tailored analytics experience.

A key part of SQLRooms' modularity is **store composability via slices**. Slices are modular pieces of state and logic that can be added to your Room. You can use slices from the `@sqlrooms/*` packages or create your own custom slices. Each slice is a function that returns a partial state object along with methods to modify that state. This makes it easy to extend and customize your Room's behavior.

Learn more and see an example in [Composing Store from Slices](/key-concepts#composing-store-from-slices).

This modular approach means you can start simple and grow your app as your needs evolve—adding only the components you want, and integrating with the libraries and tools your users need.

---

---
url: /offline-use.md
---

# Offline Use with SQLRooms

SQLRooms can be integrated into a [Progressive Web App (PWA)](https://web.dev/progressive-web-apps/) capable of working offline:

![SQLRooms Query Workbench progressive web app](/assets/sqlrooms-query-pwa.CQpq4wOb.png)

All computation happens on your device, whether in the browser or a desktop app, with no backend required. This enables privacy, speed, and user control, even when you're completely offline.

Here's how you can implement an offline-first experience with SQLRooms:

## 1. Persisting State in localStorage

SQLRooms uses [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction) for state management. You can persist your app's state in the browser's `localStorage` using the `persistSliceConfigs` helper. This ensures user settings, layouts, and other state survive reloads and work offline.

**Example:**

```ts
import {
  createRoomStore,
  createRoomShellSlice,
  RoomShellSliceState,
  BaseRoomConfig,
  LayoutConfig,
  persistSliceConfigs,
} from '@sqlrooms/room-shell';

type RoomState = RoomShellSliceState;

const {roomStore, useRoomStore} = createRoomStore<RoomState>(
  persistSliceConfigs(
    {
      name: 'sql-editor-example-app-state-storage', // localStorage key
      sliceConfigSchemas: {
        room: BaseRoomConfig,
        layout: LayoutConfig,
      },
    },
    (set, get, store) => ({
      ...createRoomShellSlice({
        config: {
          // Room configuration
        },
        layout: {
          config: {
            // Layout configuration
          },
          panels: {
            // Panel definitions
          },
        },
      })(set, get, store),
    }),
  ),
);
```

See [`examples/query/src/store.ts`](https://github.com/sqlrooms/examples/blob/main/query/src/store.ts) for a full example.

## 2. Using OPFS for DuckDB Storage

SQLRooms leverages [DuckDB-Wasm](https://duckdb.org/docs/wasm/overview.html) for in-browser SQL analytics. To persist your database between sessions, use the `opfs://` path, which stores the DuckDB database in the browser's [Origin Private File System (OPFS)](https://web.dev/origin-private-file-system/).

**Example:**

```ts
import {createWasmDuckDbConnector, DuckDBAccessMode} from '@sqlrooms/duckdb';

const connector = createWasmDuckDbConnector({
  path: 'opfs://database.db',
  accessMode: DuckDBAccessMode.READ_WRITE,
});
```

This allows users to keep their data local, persistent, and private.

## 3. Enabling Offline Support with PWA

To make your app work offline and provide a native-like experience, enable PWA support using [`vite-plugin-pwa`](https://vite-pwa-org.netlify.app/).

**Example vite.config.ts:**

```ts
import {VitePWA} from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'SQLRooms Query Workbench',
        short_name: 'SQLRooms',
        start_url: '.',
        display: 'standalone',
        background_color: '#ffffff',
        description: 'Query Workbench example for SQLRooms',
        icons: [
          {src: 'icon.png', sizes: '192x192', type: 'image/png'},
          {src: 'icon.png', sizes: '512x512', type: 'image/png'},
        ],
      },
    }),
  ],
});
```

See [`examples/query/vite.config.ts`](https://github.com/sqlrooms/examples/blob/main/query/vite.config.ts) for a real-world config.

## 4. Example: SQL Query Editor

The [PWA SQL Query Editor example](https://github.com/sqlrooms/examples/tree/main/query-pwa) demonstrates all of these offline techniques in a real app. It persists state, stores data in OPFS, and works offline as a PWA.

***

By combining these techniques, you can build analytics applications with SQLRooms that are fast, private, and fully offline—empowering your users to own their data and work anywhere, anytime.

---

---
url: /overview.md
---

# Overview

SQLRooms provides a comprehensive foundation and rich set of building blocks for creating modern, interactive data-analytics applications that can run entirely in the browser.
At its core is the concept of a ***Room*** — a self‑contained workspace where data lives, analysis happens, and (soon) collaborators meet. It combines essential components like a SQL query engine (DuckDB), data visualization tools, state management, and UI components into a cohesive toolkit, making it significantly easier to create powerful analytics tools with or without a backend.

![SQLRooms example apps](/assets/collage.DKGrBvB9.webp)

## Why SQLRooms?

SQLRooms is designed to empower developers and users with a modern, modular analytics toolkit that runs entirely in the browser. Here's what sets it apart:

* **Performance & Scale:** Every user gets a dedicated in-browser DuckDB instance, delivering columnar analytics speed with zero backend load.
* **Modular Architecture:** Mix and match packages, and combine state *slices* to include only the features you need—no bloat, just what your app requires.
* **AI‑Powered Analytics:** Built-in support for agents that can write and execute SQL queries, and generate insights directly in your browser—no server roundtrips required.
* **Developer Experience:** A composable, React-based framework with ready-to-use components, state management, and visualization tools, making it easy to build custom analytics solutions.

## Why Single-Node?

SQLRooms is designed for single-node analytics: all computation happens on your device, whether in the browser or a desktop app (e.g. via [Electron](https://www.electronjs.org/)), with no backend required. Data can remain local if you choose, or be loaded from external sources like S3—always giving you full control over how and where your data is processed.

* **Privacy:** All data remains on your device for simplified compliance and peace of mind—nothing leaves your browser unless you choose.
* **Own Your Data:** You control your files and data, with no vendor lock-in or forced cloud storage. Your work is portable and future-proof.
* **Offline Use:** SQLRooms [supports offline work](/offline-use)—query, analyze, and visualize your data even without an internet connection.
* **Fast Local Querying:** Queries run instantly in your browser, with no network roundtrip or server lag—results are available as soon as you ask.
* **Private AI Insights:** AI agents generate insights and run queries locally, so your data is never shared with external model providers. You get the power of AI-driven analytics without sacrificing privacy.

## Local-First Foundations

This approach draws on [Local-First principles](https://www.inkandswitch.com/essay/local-first), which emphasize user ownership and seamless collaboration. In Local-First apps, users retain full control of their data — it lives on their device, remains accessible offline, and isn’t locked behind a remote server. By contrast, traditional cloud apps centralize both computation and storage, often reducing user agency. If the service goes down or is discontinued, the app may stop working entirely, and user data can become inaccessible.

While SQLRooms does not yet implement sync or collaboration, it is already capable of delivering some of the key benefits of local-first software — your data and computation can stay private and accessible on your device.

## Next Steps

* **Review the [Key Concepts](/key-concepts)** to understand the core ideas and architecture.

* **Explore the [Modular Architecture](/modular-architecture)** to see how you can compose and extend your app.

* **Check the [Example Applications](/examples)** to see what can be built with the framework.

---

---
url: /query-cancellation.md
---
# Query Cancellation in DuckDbConnector

The DuckDbConnector now supports query cancellation through a unified `QueryHandle` interface with full composability support. All query methods (`execute`, `query`, `queryJson`) now return a `QueryHandle` that provides immediate access to cancellation functionality and signal composability.

## QueryHandle Interface

```typescript
interface QueryOptions {
  signal?: AbortSignal; // Optional external abort signal
}

// Promise-like intersection – can be awaited directly *or* via .result
type QueryHandle<T = any> = PromiseLike<T> & {
  result: Promise<T>; // Underlying promise (kept for backwards-compatibility)
  cancel: () => Promise<void>; // Method to cancel the query
  signal: AbortSignal; // Read-only abort signal for composability
};
```

## Usage Examples

### Basic Query with Cancellation

```typescript
import {createWasmDuckDbConnector} from './connectors/createDuckDbConnector';

const connector = createWasmDuckDbConnector();
await connector.initialize();

// Start a query and get immediate access to cancellation
const queryHandle = connector.query('SELECT * FROM large_table');
console.log('Query started');

// Cancel the query if needed (e.g., user clicks cancel button)
setTimeout(() => {
  queryHandle.cancel();
}, 5000);

try {
  const result = await queryHandle;
  console.log('Query completed:', result.numRows);
} catch (error) {
  console.log('Query was cancelled or failed:', error.message);
}
```

### Composable Cancellation - Multiple Queries with Shared Controller

```typescript
// Create a master abort controller for a series of operations
const masterController = new AbortController();

// Start multiple queries that can all be cancelled together
const query1 = connector.query('SELECT COUNT(*) FROM table1', {
  signal: masterController.signal,
});
const query2 = connector.query('SELECT AVG(price) FROM products', {
  signal: masterController.signal,
});
const query3 = connector.queryJson('SELECT * FROM users LIMIT 100', {
  signal: masterController.signal,
});

// Cancel all queries at once
setTimeout(() => {
  console.log('Cancelling all queries...');
  masterController.abort(); // This cancels all three queries
}, 3000);

try {
  const results = await Promise.allSettled([query1, query2, query3]);

  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`Query ${index + 1} completed`);
    } else {
      console.log(`Query ${index + 1} failed:`, result.reason.message);
    }
  });
} catch (error) {
  console.log('Error in query execution:', error.message);
}
```

### Integration with Other Cancellable Operations

```typescript
// Create a shared abort controller for the entire operation
const operationController = new AbortController();

async function performComplexOperation() {
  try {
    // Step 1: Run a query
    const queryHandle = connector.query(
      'SELECT id, data FROM source_table WHERE condition = ?',
      {signal: operationController.signal},
    );

    const queryResult = await queryHandle;

    // Step 2: Make HTTP requests using the same signal
    const response = await fetch('/api/process-data', {
      method: 'POST',
      body: JSON.stringify(queryResult),
      signal: operationController.signal, // Same signal!
    });

    // Step 3: Another query with the same cancellation
    const finalQuery = connector.execute(
      'INSERT INTO results SELECT * FROM processed_data',
      {signal: operationController.signal},
    );

    await finalQuery;
    console.log('Complex operation completed');
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Operation was cancelled');
    } else {
      console.log('Operation failed:', error.message);
    }
  }
}

// Start the operation
performComplexOperation();

// Cancel the entire operation (queries + HTTP requests) after 10 seconds
setTimeout(() => {
  operationController.abort();
}, 10000);
```

### Advanced Signal Composition

```typescript
// Create timeout-based cancellation
function createTimeoutSignal(ms: number): AbortSignal {
  const controller = new AbortController();
  setTimeout(() => controller.abort(), ms);
  return controller.signal;
}

// Combine multiple signals
function combineSignals(...signals: AbortSignal[]): AbortSignal {
  const controller = new AbortController();

  signals.forEach((signal) => {
    if (signal.aborted) {
      controller.abort();
    } else {
      signal.addEventListener('abort', () => controller.abort());
    }
  });

  return controller.signal;
}

// Usage: Query with both user cancellation and timeout
const userController = new AbortController();
const timeoutSignal = createTimeoutSignal(30000); // 30 second timeout
const combinedSignal = combineSignals(userController.signal, timeoutSignal);

const queryHandle = connector.query('SELECT * FROM very_large_table', {
  signal: combinedSignal,
});

// User can still cancel manually
document.getElementById('cancel-btn').onclick = () => {
  userController.abort();
};

try {
  const result = await queryHandle;
  console.log('Query completed within timeout');
} catch (error) {
  console.log('Query cancelled or timed out:', error.message);
}
```

### Listening to Cancellation Events

```typescript
const queryHandle = connector.query('SELECT * FROM table');

// Listen for cancellation
queryHandle.signal.addEventListener('abort', () => {
  console.log('Query was cancelled');
  // Update UI, clean up resources, etc.
});

// Check if already cancelled
if (queryHandle.signal.aborted) {
  console.log('Query was already cancelled');
}

// Cancel after some condition
if (someCondition) {
  await queryHandle.cancel();
}
```

## Migration from Old API

### Before (Old API)

```typescript
const {data, qid} = await connector.query('SELECT * FROM table');
console.log('Query ID:', qid);
console.log('Results:', data.numRows);
```

### After (New API)

```typescript
// Simple usage (no external signal)
const queryHandle = connector.query('SELECT * FROM table');
console.log('Query started');
const data = await queryHandle;
console.log('Results:', data.numRows);

// With external cancellation control
const controller = new AbortController();
const queryHandle = connector.query('SELECT * FROM table', {
  signal: controller.signal,
});
// controller.abort() to cancel
const data = await queryHandle;
```

## Implementation Notes

* **Hybrid Approach**: Combines the simplicity of `.cancel()` with the composability of `AbortSignal`
* **Optional External Control**: Pass your own `AbortSignal` for coordinated cancellation across multiple operations
* **Automatic Internal Management**: If no signal is provided, one is created internally
* **Signal Chaining**: External signals are chained to internal controllers for proper cleanup
* **Web Standards Compliant**: Uses standard `AbortController`/`AbortSignal` APIs
* **Composable**: Signals can be shared across queries, HTTP requests, and other cancellable operations
* **Event-Driven**: Listen for abort events to update UI or perform cleanup

---

---
url: /api/ai-rag/_media/README.md
---
# SQLRooms RAG

A Python package for preparing and querying vector embeddings stored in DuckDB for RAG (Retrieval Augmented Generation) applications. The was meant primarily for use with the [SQLRooms](https://sqlrooms.org) framework, but can be used independently as well.

## Overview

This tool follows the approach outlined in [Developing a RAG Knowledge Base with DuckDB](https://motherduck.com/blog/search-using-duckdb-part-2/) to:

1. Load markdown files from a specified directory
2. Split them into chunks (default 512 tokens)
3. Generate vector embeddings using HuggingFace models
4. Store the embeddings in a DuckDB database for efficient retrieval

## Installation

### From PyPI

The easiest way to use the package is with `uvx` (no install needed):

```bash
# Generate embeddings (uses local HuggingFace model by default - free)
uvx --from sqlrooms-rag prepare-embeddings /path/to/docs -o embeddings.duckdb

# Or use OpenAI embeddings (requires OPENAI_API_KEY env var)
OPENAI_API_KEY=your-key uvx --from sqlrooms-rag prepare-embeddings /path/to/docs -o embeddings.duckdb --provider openai

# Generate UMAP visualization
uvx --from sqlrooms-rag generate-umap-embeddings embeddings.duckdb
```

Or install with pip/uv:

```bash
pip install sqlrooms-rag
# or
uv pip install sqlrooms-rag
```

### From source with uv

This project uses [uv](https://github.com/astral-sh/uv) for development.

```bash
# Install uv if not already installed
curl -LsSf https://astral.sh/uv/install.sh | sh

# Install from source
cd python/rag-embedding
uv sync
```

### Dependencies

**Core dependencies** (always installed):

* llama-index (core RAG framework)
* llama-index-embeddings-huggingface (HuggingFace embeddings)
* llama-index-vector-stores-duckdb (DuckDB vector store)
* sentence-transformers (embedding models)
* torch (ML framework)
* duckdb (database)

**Optional dependencies:**

For OpenAI embeddings:

```bash
pip install llama-index-embeddings-openai
# or with uv
uv pip install llama-index-embeddings-openai
```

## Usage

### Basic Usage

Process markdown files from a directory and create a DuckDB knowledge base:

```bash
uv run prepare-embeddings /path/to/docs -o generated-embeddings/knowledge_base.duckdb
```

Or use the Python API:

```python
from sqlrooms_rag import prepare_embeddings

# Using local HuggingFace embeddings (default, free)
prepare_embeddings(
    input_dir="/path/to/docs",
    output_db="generated-embeddings/knowledge_base.duckdb",
    embedding_provider="huggingface",  # default
    embed_model_name="BAAI/bge-small-en-v1.5",  # default
    chunk_size=512,
)

# Using OpenAI embeddings (requires API key, paid)
prepare_embeddings(
    input_dir="/path/to/docs",
    output_db="generated-embeddings/knowledge_base.duckdb",
    embedding_provider="openai",
    api_key="your-openai-api-key",  # or set OPENAI_API_KEY env var
    # embed_model_name defaults to "text-embedding-3-small"
    # embed_dim defaults to 1536 for OpenAI models
)
```

### Examples

#### Process documentation files

```bash
# Process all .md files in the docs directory
uv run prepare-embeddings ../../docs -o generated-embeddings/sqlrooms_docs.duckdb
```

#### Use custom chunk size

```bash
# Use smaller chunks for more granular retrieval
uv run prepare-embeddings docs -o generated-embeddings/kb.duckdb --chunk-size 256
```

#### Use a different embedding model

```bash
# Use all-MiniLM-L6-v2 (dimension: 384)
uv run prepare-embeddings docs -o generated-embeddings/kb.duckdb \
  --model "sentence-transformers/all-MiniLM-L6-v2" \
  --embed-dim 384
```

### Command-Line Options

```
positional arguments:
  input_dir             Directory containing markdown (.md) files to process

options:
  -h, --help            Show this help message and exit
  -o OUTPUT, --output OUTPUT
                        Output DuckDB database file path (default: knowledge_base.duckdb)
  --chunk-size CHUNK_SIZE
                        Max token size for text chunks (default: 512)
  --model EMBED_MODEL_NAME
                        HuggingFace embedding model name (default: BAAI/bge-small-en-v1.5)
  --embed-dim EMBED_DIM
                        Embedding dimension size (default: 384 for bge-small-en-v1.5)
  --no-markdown-chunking
                        Disable markdown-aware chunking (use size-based instead)
  -q, --quiet           Suppress progress messages
```

## How It Works

1. **Document Loading**: The tool recursively scans the input directory for `.md` files
2. **Embedding Model**: Downloads and initializes the HuggingFace embedding model (cached locally after first run)
3. **Smart Chunking**: By default, splits documents by markdown headers (##, ###) to preserve section context. Section titles are stored in metadata for better retrieval. Falls back to size-based chunking for large sections.
4. **Embedding Generation**: Generates vector embeddings for each chunk
5. **Storage**: Stores embeddings in DuckDB with metadata (including section titles) for efficient retrieval

### Chunking Strategy

**Markdown-Aware Chunking** (default):

* ✅ Splits by markdown headers (`##`, `###`, etc.)
* ✅ Preserves section context and hierarchy
* ✅ Stores section titles in metadata (`Header_1`, `Header_2`, etc.)
* ✅ Produces semantically coherent chunks

**Size-Based Chunking** (with `--no-markdown-chunking`):

* Simple token-based splitting
* May break sections mid-content
* Use only if your docs lack clear structure

See [CHUNKING.md](./docs/CHUNKING.md) for detailed comparison and best practices.

## Output

The tool creates **two files**:

### 1. DuckDB Database (`.duckdb`)

Contains:

* **Chunks**: Text split by markdown sections with embeddings
* **Source documents**: Original full documents before chunking
* **Embeddings**: Vector embeddings (384-1536 dimensional)
* **FTS index**: Full-text search index for hybrid retrieval
* **Metadata table**: Model info, settings, statistics
* **Metadata** per chunk:
  * File paths
  * Section titles (`Header_1`, `Header_2`, etc.)
  * Document structure information

### 2. Metadata YAML (`.yaml`)

Human-readable file documenting:

* Embedding model used (provider, name, dimensions)
* Chunking strategy and parameters
* Document and chunk statistics
* Available capabilities
* Creation timestamp

**Why?** The metadata ensures:

* ✓ Query-time uses the same model
* ✓ Easy debugging of poor results
* ✓ Reproducible builds
* ✓ Version compatibility checks

See [METADATA.md](./docs/METADATA.md) for details.

## Using the Generated Database

### Python API

You can use the package programmatically:

```python
from sqlrooms_rag import prepare_embeddings

# Create embeddings
index = prepare_embeddings(
    input_dir="../../docs",
    output_db="generated-embeddings/my_docs.duckdb"
)
```

### Query Examples

#### Hybrid Search (Recommended)

Combines vector similarity with full-text search for better results:

```python
from sqlrooms_rag import hybrid_query, print_results, get_source_documents

# Query using both vector similarity and keyword matching
# FTS index is created automatically during prepare_embeddings()
results = hybrid_query(
    "What is the ARRAY_AGG function in DuckDB?",
    db_path="generated-embeddings/knowledge_base.duckdb",
    top_k=5,
    use_rrf=True,  # Reciprocal Rank Fusion
)

print_results(results, query_text)

# Optionally retrieve full source documents for context
chunk_ids = [r['node_id'] for r in results]
source_docs = get_source_documents(chunk_ids, db_path)
for doc in source_docs:
    print(f"Full document: {doc['file_name']}")
```

**Why hybrid?** Combines semantic understanding (vector search) with exact keyword matching (FTS). Best for technical queries with specific terms, function names, or acronyms. See [HYBRID\_SEARCH.md](./docs/HYBRID_SEARCH.md) for details.

**New features:**

* Full source documents stored alongside chunks for complete context
* Comprehensive metadata tracking (model, settings, stats)
* Automatic model validation at query time

#### Vector-Only Search

Using llama-index (see `examples/example_query.py`):

```python
from llama_index.core import VectorStoreIndex, StorageContext, Settings
from llama_index.embeddings.huggingface import HuggingFaceEmbedding
from llama_index.vector_stores.duckdb import DuckDBVectorStore

# Load the embedding model
embed_model = HuggingFaceEmbedding(model_name="BAAI/bge-small-en-v1.5")
Settings.embed_model = embed_model

# Connect to the existing database
vector_store = DuckDBVectorStore(
    database_name="knowledge_base",
    persist_dir="./",
    embed_dim=384,
)

# Load the index
index = VectorStoreIndex.from_vector_store(vector_store)

# Create retriever and search
retriever = index.as_retriever(similarity_top_k=3)
results = retriever.retrieve("Your question here")

for result in results:
    print(f"Score: {result.score:.4f}")
    print(f"Text: {result.text[:200]}...")
```

### Running the Examples

**Prepare DuckDB documentation embeddings:**

```bash
# Using Python script (recommended)
uv run python examples/prepare_duckdb_docs.py

# Or using bash script
chmod +x examples/prepare_duckdb_docs.sh
./examples/prepare_duckdb_docs.sh

# Custom paths
uv run python examples/prepare_duckdb_docs.py \
  --docs-dir ./my-docs \
  --output ./embeddings/duckdb.duckdb
```

**Query embeddings using llama-index:**

```bash
uv run python examples/example_query.py
```

**Query embeddings using DuckDB directly:**

```bash
# Run predefined queries
uv run python examples/query_duckdb_direct.py

# Query with your own question
uv run python examples/query_duckdb_direct.py "Your question here"
```

**Hybrid search (vector + full-text):**

```bash
# Run hybrid search examples
uv run python examples/hybrid_search_example.py

# Compare methods side-by-side
uv run python examples/hybrid_search_example.py --compare
```

**Inspect metadata:**

```bash
# View database metadata
uv run python examples/inspect_metadata.py --inspect kb.duckdb

# Validate model compatibility
uv run python examples/inspect_metadata.py --validate kb.duckdb "BAAI/bge-small-en-v1.5"
```

See [QUERYING.md](./docs/QUERYING.md) for detailed documentation on querying the database directly with SQL, [HYBRID\_SEARCH.md](./docs/HYBRID_SEARCH.md) for hybrid retrieval details, and [METADATA.md](./docs/METADATA.md) for metadata tracking.

## Visualization

Generate 2D UMAP embeddings for visualization:

```bash
# Install visualization dependencies
uv pip install -e ".[viz]"

# Generate UMAP visualization
uv run generate-umap-embeddings generated-embeddings/duckdb_docs.duckdb

# Output: generated-embeddings/duckdb_docs_umap.parquet
```

The output includes two Parquet files:

**Main file (`*_umap.parquet`):**

* `node_id` - Unique node identifier (e.g., "node\_0001")
* `title` - Document title (from markdown frontmatter)
* `fileName` - File name extracted from metadata (e.g., "window\_functions")
* `file_path` - Full file path (e.g., "/path/to/docs/window\_functions.md")
* `text` - Full document text
* `x`, `y` - UMAP coordinates for 2D plotting
* `topic` - Automatically detected topic/cluster name (e.g., "Window Functions / Aggregate / SQL")
* `outdegree` - Number of documents this document links TO
* `indegree` - Number of documents linking TO this document

**Links file (`*_umap_links.parquet`):**

* `source_id` - Source node ID
* `target_id` - Target node ID

**Features:**

* **Topic Detection:** Automatically clusters documents and assigns descriptive topic names using TF-IDF keyword extraction. Disable with `--no-topics`.
* **Link Extraction:** Parses markdown links to build a chunk-level graph. Source chunks keep individual outdegree values; target documents expand to all chunks. Disable with `--no-links`.

See [VISUALIZATION\_GUIDE.md](./docs/VISUALIZATION_GUIDE.md) for complete visualization examples and usage details.

See [CHUNKING.md](./docs/CHUNKING.md) for information about markdown-aware chunking.

## Package Structure

```
sqlrooms-rag/
├── sqlrooms_rag/           # Main package (installed)
│   ├── __init__.py        # Public API
│   ├── prepare.py         # Core embedding preparation
│   ├── query.py           # Hybrid retrieval (vector + FTS)
│   ├── generate_umap.py   # UMAP visualization
│   └── cli.py             # Command-line interface
├── examples/               # Example scripts (not installed)
│   ├── prepare_duckdb_docs.py   # Download & prepare DuckDB docs
│   ├── prepare_duckdb_docs.sh   # Bash version of above
│   ├── prepare_with_openai.py   # Using OpenAI API for embeddings
│   ├── test_duckdb_docs_query.py  # Test DuckDB docs queries
│   ├── example_query.py         # Query using llama-index
│   ├── query_duckdb_direct.py   # Direct DuckDB queries (including hybrid)
│   ├── hybrid_search_example.py # Hybrid search examples
│   └── inspect_metadata.py      # Inspect and validate metadata
├── scripts/                # Documentation for utility scripts
├── generated-embeddings/   # Output directory
├── pyproject.toml         # Package configuration
├── README.md
├── HYBRID_SEARCH.md       # Hybrid retrieval documentation
├── EXTERNAL_APIS.md       # Using external embedding APIs (OpenAI, etc.)
├── ARCHITECTURE.md        # System architecture and design decisions
├── QUERYING.md            # Query documentation
├── CHUNKING.md            # Chunking strategies
└── VISUALIZATION_GUIDE.md # UMAP visualization guide
```

## Example: DuckDB Documentation

The package includes a ready-to-use script for preparing DuckDB documentation embeddings:

```bash
# Download DuckDB docs and create embeddings
cd python/rag
uv run python examples/prepare_duckdb_docs.py
```

This will:

1. Download the latest DuckDB documentation from GitHub (~600+ files)
2. Process all markdown files
3. Generate embeddings using BAAI/bge-small-en-v1.5
4. Create `generated-embeddings/duckdb_docs.duckdb`

Test the embeddings:

```bash
# Run interactive test queries
uv run python examples/test_duckdb_docs_query.py

# Or test a specific query
uv run python examples/test_duckdb_docs_query.py "What is a window function?"
```

Then use it in your SQLRooms app:

```typescript
import {createRagSlice} from '@sqlrooms/ai-rag';

const store = createRoomStore({
  slices: [
    createDuckDbSlice(),
    createRagSlice({
      embeddingsDatabases: [
        {
          databaseFilePathOrUrl: './embeddings/duckdb_docs.duckdb',
          databaseName: 'duckdb_docs',
        },
      ],
    }),
  ],
});

// Search DuckDB documentation
const results = await store.getState().rag.queryEmbeddings(embedding);
```

## Embedding Providers

### HuggingFace (Local, Free)

Uses local sentence-transformer models. No API costs, works offline.

| Model                                   | Dimension | Max Tokens | Description           |
| --------------------------------------- | --------- | ---------- | --------------------- |
| BAAI/bge-small-en-v1.5                  | 384       | 512        | Default, good balance |
| sentence-transformers/all-MiniLM-L6-v2  | 384       | 256        | Fast, lightweight     |
| BAAI/bge-base-en-v1.5                   | 768       | 512        | Better accuracy       |
| sentence-transformers/all-mpnet-base-v2 | 768       | 384        | High quality          |

**Pros:** Free, fast for large datasets, works offline, data stays local
**Cons:** Requires model download (~150MB), slower on CPU-only machines

### OpenAI (API, Paid)

Uses OpenAI's embedding API. Requires API key and internet connection.

| Model                  | Dimension      | Cost (per 1M tokens) | Description                  |
| ---------------------- | -------------- | -------------------- | ---------------------------- |
| text-embedding-3-small | 1536 (or less) | $0.02                | Best value, high quality     |
| text-embedding-3-large | 3072 (or less) | $0.13                | Highest quality              |
| text-embedding-ada-002 | 1536           | $0.10                | Legacy (use 3-small instead) |

**Pros:** High quality, no local storage, consistent results
**Cons:** Costs money, requires internet, API latency, data sent to OpenAI

**Note:** OpenAI's v3 models support dimension reduction (e.g., 512 dims) while maintaining quality.

**Usage:**

```bash
# Using HuggingFace (default)
uv run prepare-embeddings docs -o kb.duckdb

# Using OpenAI
export OPENAI_API_KEY=your_key_here
uv run prepare-embeddings docs -o kb.duckdb --provider openai

# OpenAI with custom model and dimensions
uv run prepare-embeddings docs -o kb.duckdb \
  --provider openai \
  --model text-embedding-3-large \
  --embed-dim 1024
```

See `examples/prepare_with_openai.py` for detailed examples and cost estimates.

**Complete guide:** See [EXTERNAL\_APIS.md](./docs/EXTERNAL_APIS.md) for full documentation on using external embedding APIs.

## Notes

* The embedding model is downloaded and cached on first run (~100-500MB depending on model)
* Processing time depends on the number and size of documents
* The generated DuckDB file can be reused and updated with additional documents
* Ensure the `--embed-dim` matches your chosen model's output dimension

## Requirements

* Python >=3.10
* 2-4GB RAM (depending on model and document size)
* \~500MB-2GB disk space for models and generated database

## Troubleshooting

### OpenAI Token Limit Errors

**The system automatically validates and splits chunks** that exceed OpenAI's 8192 token limit.

**If you still get token limit errors**, use more conservative settings:

```bash
# Recommended: small chunks + minimal header weight
uv run prepare-embeddings docs -o kb.duckdb \
  --provider openai \
  --chunk-size 256 \
  --header-weight 1

# If that fails: disable header weighting entirely
uv run prepare-embeddings docs -o kb.duckdb \
  --provider openai \
  --chunk-size 256 \
  --no-header-weighting

# Last resort: disable markdown chunking
uv run prepare-embeddings docs -o kb.duckdb \
  --provider openai \
  --chunk-size 256 \
  --no-markdown-chunking
```

**Why this happens:**

* Markdown-aware chunking can create very large chunks from huge document sections
* Header weighting multiplies chunk size (3x weight = 3x tokens)
* Token estimation isn't perfect
* Technical text has higher token density

See [EXTERNAL\_APIS.md](./docs/EXTERNAL_APIS.md#openai-token-limits) for details.

### Out of Memory

If you run out of memory with large document sets, try:

* Using a smaller embedding model
* Processing documents in batches
* Reducing chunk size

### Slow Processing

* First run downloads the embedding model (one-time operation)
* Subsequent runs use the cached model
* Consider using a smaller/faster model for large document sets
* OpenAI API has higher latency but doesn't need local models

## Publishing

### Bumping the Version

Edit the `version` field in `pyproject.toml`:

```toml
[project]
name = "sqlrooms-rag"
version = "0.1.0a2"  # bump this
```

### Building and Publishing

1. Run checks: `pnpm prerelease`
2. Build: `uv build`
3. Publish: `pnpm release`

We publish using tokens so when asked, set the username to `__token__` and use your PyPI token as the password. Alternatively, create a [`.pypirc` file](https://packaging.python.org/en/latest/guides/distributing-packages-using-setuptools/#create-an-account).

## License

MIT, Part of the SQLRooms project.

---

---
url: /state-management.md
---
# State Management

SQLRooms uses a slice-based architecture powered by [Zustand](http://zustand.docs.pmnd.rs/) for state management. This approach allows you to compose different functionality slices into a unified application state.

## Why Zustand?

[Zustand](https://zustand.docs.pmnd.rs/) is a small, fast, and scalable state management solution for React applications. SQLRooms chose Zustand for several key reasons:

* **Simplicity**: Zustand has a minimal API that's easy to learn and use, with no boilerplate code.
* **Performance**: It uses the React concurrent renderer and only re-renders components when their specific slice of state changes.
* **Flexibility**: Zustand works well with TypeScript, supports middleware, and can be used outside of React components.
* **Composability**: The slices pattern allows for modular state management that scales with application complexity.

Unlike other state management libraries, Zustand doesn't require providers or context wrappers, making it lightweight and straightforward to integrate into any component.

## Understanding Slices

A [slice](https://zustand.docs.pmnd.rs/guides/slices-pattern) is a modular piece of state and associated actions that can be combined with other slices to form a complete application state. Feature packages which manage their own state typically provide a slice that can be integrated into your application store.

### How to Combine Slices

Slices are combined in the store creation process. Here's an example from the AI example application:

```typescript
import {AiSliceState} from '@sqlrooms/ai';
import {RoomShellSliceState} from '@sqlrooms/room-shell';
import {SqlEditorSliceState} from '@sqlrooms/sql-editor';

// Combining multiple slices into a unified application state type
export type RoomState = RoomShellSliceState &
  AiSliceState &
  SqlEditorSliceState & {
    // Custom application state types
  };

// Creating a store with multiple slices
export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
  (set, get, store) => ({
    // Base room state
    ...createRoomShellSlice({
      config: {
        // Room configuration
      },
      layout: {
        config: {
          // Layout configuration
        },
        panels: {
          // Panel definitions
        },
      },
    })(set, get, store),

    // SQL editor slice
    ...createSqlEditorSlice()(set, get, store),

    // AI slice with custom configuration
    ...createAiSlice({
      // AI slice configuration
    })(set, get, store),

    // Custom application state
    // ...
  }),
);
```

This approach allows you to:

1. Include only the slices you need
2. Customize each slice with your own configuration
3. Extend slices with additional functionality
4. Create custom slices for application-specific features

### How to Access Store Data

Once you've combined slices into a unified store, you can access different parts of the store using selectors. Here's an example:

```typescript
// Import the store hook (returned from `createRoomStore`)
import {useRoomStore} from '../store';

export const MyCustomView: React.FC = () => {
  // Access room slice data
  const isDataAvailable = useRoomStore((state) => state.room.isDataAvailable);

  // Access AI slice config (persistable state)
  const currentSessionId = useRoomStore((s) => s.ai.config.currentSessionId);

  // Access custom app state
  const apiKey = useRoomStore((s) => s.apiKey);
  // Access actions from custom app state
  const setApiKey = useRoomStore((s) => s.setApiKey);

  // Rest of component...
};
```

Each selector function receives the entire store state and returns only the specific piece of data needed, which helps optimize rendering performance by preventing unnecessary re-renders.

### Defining Configuration Types with Zod

SQLRooms uses [Zod](https://zod.dev/) for runtime type validation. When combining slices, you'll often need to combine their configuration types as well. The `.merge` method from Zod makes this process straightforward.

Here's an example from the AI example application showing how to combine configuration types:

```typescript
import {BaseRoomConfig} from '@sqlrooms/room-config';
import {SqlEditorSliceConfig} from '@sqlrooms/sql-editor';
import {z} from 'zod';

/**
 * Room config for saving - combining multiple slice configs
 */
export const RoomConfig = BaseRoomConfig.merge(SqlEditorSliceConfig).merge(
  z.object({
    // Custom app config
  }),
);
export type RoomConfig = z.infer<typeof RoomConfig>;
```

This approach offers several benefits:

1. **Type Safety**: The combined type is fully type-safe, with TypeScript inferring the correct type from the Zod schema.
2. **Runtime Validation**: The schema can validate data at runtime, ensuring configuration objects match the expected structure.
3. **Modularity**: Each slice provides its own configuration schema that can be combined with others.
4. **Documentation**: The schema serves as self-documenting code, clearly showing what configuration options are available.

When using the combined configuration type in your store, you can ensure that all required configuration properties from each slice are properly included:

```typescript
// Using the combined RoomConfig in the store
...createRoomShellSlice({
  config: {
    // SQL Editor slice configuration
    ...createDefaultSqlEditorConfig(),
    // Other configuration properties...
  },
  layout: {
    config: {
      // Layout configuration
    },
    panels: {
      // Panel definitions
    },
  },
})(set, get, store)
```

This pattern ensures that your application's configuration is both type-safe at compile time and validated at runtime.

---

---
url: /theming.md
---
# Theming

SQLRooms uses [shadcn's](https://ui.shadcn.com/) CSS variables approach for theming, providing a flexible and maintainable way to manage color schemes and design tokens across the application.

## Theme Provider

The application uses `ThemeProvider` to manage theme state:

```tsx
<ThemeProvider defaultTheme="dark" storageKey="sqlrooms-ui-theme">
  <App />
</ThemeProvider>
```

### Props

* `defaultTheme`: Initial theme ("light" or "dark")
* `storageKey`: localStorage key for persisting theme preference

## Using Themes in Components

You can either use the pre-built `ThemeSwitch` component or implement one yourself like here:

```tsx
import {ThemeSwitch} from '@sqlrooms/ui';

function MyNavBarComponent() {
  return (
    <div>
      ...
      <ThemeSwitch />
    </div>
  );
}
```

Or with a custom implementation using `Button` and `useTheme`:

```tsx
import {useTheme, Button} from '@sqlrooms/ui';

function ThemeToggle() {
  const {theme, setTheme} = useTheme();

  return (
    <Button
      variant="outline"
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
    >
      Toggle theme
    </Button>
  );
}
```

## CSS Variables

The theming system uses CSS custom properties in HSL format. These variables are defined in the global CSS:

```css
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}
```

### Variable Categories

* **Base Colors**

  * `--background` / `--foreground`: Main background and text colors
  * `--card` / `--card-foreground`: Card component colors
  * `--popover` / `--popover-foreground`: Popover/dropdown colors

* **Semantic Colors**

  * `--primary` / `--primary-foreground`: Primary action colors
  * `--secondary` / `--secondary-foreground`: Secondary action colors
  * `--muted` / `--muted-foreground`: Subdued UI elements
  * `--accent` / `--accent-foreground`: Emphasis and highlights
  * `--destructive` / `--destructive-foreground`: Error and deletion actions

* **UI Elements**

  * `--border`: Border colors
  * `--input`: Form input borders
  * `--ring`: Focus ring color
  * `--radius`: Border radius for components

* **Chart Colors**
  * `--chart-1` through `--chart-5`: Data visualization colors

### Using Variables in CSS

To use these variables in your components:

```css
.my-component {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}
```

#### Using with Tailwind Classes

The theme variables are mapped to Tailwind's color system, allowing you to use them directly in className props:

```tsx
import { Button, Input } from '@sqlrooms/ui';

// Basic usage
<div className="bg-background text-foreground">
  <Button className="bg-primary text-primary-foreground">
    Click me
  </Button>
</div>

// With hover states
<Button
  variant="secondary"
  className="hover:bg-secondary/90 text-secondary-foreground"
>
  Hover me
</Button>

// With opacity modifiers
<div className="bg-muted/50 text-muted-foreground">
  Semi-transparent background
</div>

// Border and ring utilities
<Input className="focus:ring-2 ring-ring" />

// Destructive actions
<Button
  variant="destructive"
  className="hover:bg-destructive/90"
>
  Delete
</Button>
```

These class names automatically adapt to the current theme, switching between light and dark mode values as appropriate.

#### Dark Mode Variants

You can explicitly specify different styles for light and dark modes using Tailwind's `dark:` modifier:

```tsx
import { Button } from '@sqlrooms/ui';

// Basic dark mode override
<div className="bg-white dark:bg-slate-950">
  Light and dark specific background
</div>

// Combining with theme variables
<div className="bg-background text-foreground">
  <div className="bg-card dark:bg-card/90 dark:text-card-foreground/90">
    Card with dark mode opacity
  </div>
</div>

// Complex component example
<Button
  variant="primary"
  className="
    hover:bg-primary/90
    dark:bg-primary/80
    dark:text-primary-foreground/90
    dark:hover:bg-primary/70
  "
>
  Adaptive Button
</Button>

// Multiple dark mode modifiers
<div className="
  bg-background
  text-foreground/80 dark:text-foreground/70
  border-border dark:border-border/50
  shadow-md dark:shadow-xl
">
  Complex Container
</div>
```

Note: The `dark:` modifier works automatically with our theme system - it will apply when the theme is set to "dark" through the ThemeProvider.

## Customizing Themes

To create or modify themes:

1. Visit the [shadcn theme generator](https://ui.shadcn.com/themes)
2. Customize colors interactively
3. Copy the generated CSS
4. Update your global CSS file with the new variables

## API Reference

For detailed API documentation, refer to:

* [ThemeProvider API](/api/ui/functions/ThemeProvider)
* [ThemeSwitch API](/api/ui/functions/ThemeSwitch)
* [useTheme Hook API](/api/ui/functions/useTheme)

---

---
url: /api/ai-core/type-aliases/AddToolResult.md
---
[@sqlrooms/ai-core](../index.md) / AddToolResult

# Type Alias: AddToolResult()

> **AddToolResult** = (`options`) => `void`

Type for adding tool results to the chat.
Extracted to a separate file to avoid circular dependencies.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `options` | { `tool`: `string`; `toolCallId`: `string`; `output`: `unknown`; } | { `tool`: `string`; `toolCallId`: `string`; `state`: `"output-error"`; `errorText`: `string`; } |

## Returns

`void`

---

---
url: /api/ai-rag/type-aliases/AiProviderFactory.md
---
[@sqlrooms/ai-rag](../index.md) / AiProviderFactory

# Type Alias: AiProviderFactory()

> **AiProviderFactory** = (`apiKey?`) => [`AiProvider`](../interfaces/AiProvider.md)

Factory function that creates a provider instance, optionally with an API key.
This allows creating providers dynamically at runtime with user-provided API keys.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `apiKey?` | `string` |

## Returns

[`AiProvider`](../interfaces/AiProvider.md)

---

---
url: /api/ai-config/type-aliases/AiSettingsSliceConfig.md
---
[@sqlrooms/ai-config](../index.md) / AiSettingsSliceConfig

# Type Alias: AiSettingsSliceConfig

> **AiSettingsSliceConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `providers` | `Record`<`string`, { `baseUrl`: `string`; `apiKey`: `string`; `models`: `object`\[]; }> |
|  `customModels` | `object`\[] |
|  `modelParameters` | { `maxSteps`: `number`; `additionalInstruction`: `string`; } |

---

---
url: /api/ai-settings/type-aliases/AiSettingsSliceConfig.md
---
[@sqlrooms/ai-settings](../index.md) / AiSettingsSliceConfig

# Type Alias: AiSettingsSliceConfig

> **AiSettingsSliceConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `providers` | `z.ZodRecord`<`z.ZodString`, `z.ZodObject`<{ `baseUrl`: `z.ZodString`; `apiKey`: `z.ZodString`; `models`: `z.ZodArray`<`z.ZodObject`<{ `modelName`: `z.ZodString`; }, `z.core.$strip`>>; }, `z.core.$strip`>> |
|  `customModels` | `object`\[] |
|  `modelParameters` | { `maxSteps`: `number`; `additionalInstruction`: `string`; } |

---

---
url: /api/ai/type-aliases/AiSettingsSliceConfig.md
---
[@sqlrooms/ai](../index.md) / AiSettingsSliceConfig

# Type Alias: AiSettingsSliceConfig

> **AiSettingsSliceConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `providers` | `z.ZodRecord`<`z.ZodString`, `z.ZodObject`<{ `baseUrl`: `z.ZodString`; `apiKey`: `z.ZodString`; `models`: `z.ZodArray`<`z.ZodObject`<{ `modelName`: `z.ZodString`; }, `z.core.$strip`>>; }, `z.core.$strip`>> |
|  `customModels` | `object`\[] |
|  `modelParameters` | { `maxSteps`: `number`; `additionalInstruction`: `string`; } |

---

---
url: /api/ai-settings/type-aliases/AiSettingsSliceState.md
---
[@sqlrooms/ai-settings](../index.md) / AiSettingsSliceState

# Type Alias: AiSettingsSliceState

> **AiSettingsSliceState** = `object`

## Properties

### aiSettings

> **aiSettings**: `object`

| Name | Type |
| ------ | ------ |
| `config` | [`AiSettingsSliceConfig`](AiSettingsSliceConfig.md) |
| `setConfig()` | (`config`) => `void` |
| `setMaxSteps()` | (`maxSteps`) => `void` |
| `setAdditionalInstruction()` | (`additionalInstruction`) => `void` |
| `updateProvider()` | (`provider`, `updates`) => `void` |
| `addProvider()` | (`provider`, `baseUrl`, `apiKey`) => `void` |
| `addModelToProvider()` | (`provider`, `modelName`) => `void` |
| `removeModelFromProvider()` | (`provider`, `modelName`) => `void` |
| `removeProvider()` | (`provider`) => `void` |
| `addCustomModel()` | (`baseUrl`, `apiKey`, `modelName`) => `void` |
| `updateCustomModel()` | (`oldModelName`, `baseUrl`, `apiKey`, `newModelName`) => `void` |
| `removeCustomModel()` | (`modelName`) => `void` |

---

---
url: /api/ai/type-aliases/AiSettingsSliceState.md
---
[@sqlrooms/ai](../index.md) / AiSettingsSliceState

# Type Alias: AiSettingsSliceState

> **AiSettingsSliceState** = `object`

## Properties

### aiSettings

> **aiSettings**: `object`

| Name | Type |
| ------ | ------ |
| `config` | [`AiSettingsSliceConfig`](AiSettingsSliceConfig.md) |
| `setConfig()` | (`config`) => `void` |
| `setMaxSteps()` | (`maxSteps`) => `void` |
| `setAdditionalInstruction()` | (`additionalInstruction`) => `void` |
| `updateProvider()` | (`provider`, `updates`) => `void` |
| `addProvider()` | (`provider`, `baseUrl`, `apiKey`) => `void` |
| `addModelToProvider()` | (`provider`, `modelName`) => `void` |
| `removeModelFromProvider()` | (`provider`, `modelName`) => `void` |
| `removeProvider()` | (`provider`) => `void` |
| `addCustomModel()` | (`baseUrl`, `apiKey`, `modelName`) => `void` |
| `updateCustomModel()` | (`oldModelName`, `baseUrl`, `apiKey`, `newModelName`) => `void` |
| `removeCustomModel()` | (`modelName`) => `void` |

---

---
url: /api/ai-config/type-aliases/AiSliceConfig.md
---
[@sqlrooms/ai-config](../index.md) / AiSliceConfig

# Type Alias: AiSliceConfig

> **AiSliceConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `sessions` | `object`\[] |
|  `currentSessionId?` | `string` |

---

---
url: /api/ai-core/type-aliases/AiSliceConfig.md
---
[@sqlrooms/ai-core](../index.md) / AiSliceConfig

# Type Alias: AiSliceConfig

> **AiSliceConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `sessions` | `object`\[] |
|  `currentSessionId?` | `string` |

---

---
url: /api/ai/type-aliases/AiSliceConfig.md
---
[@sqlrooms/ai](../index.md) / AiSliceConfig

# Type Alias: AiSliceConfig

> **AiSliceConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `sessions` | `object`\[] |
|  `currentSessionId?` | `string` |

---

---
url: /api/ai-core/type-aliases/AiSliceState.md
---
[@sqlrooms/ai-core](../index.md) / AiSliceState

# Type Alias: AiSliceState

> **AiSliceState** = `object`

## Properties

### ai

> **ai**: `object`

| Name | Type | Description |
| ------ | ------ | ------ |
| `config` | [`AiSliceConfig`](AiSliceConfig.md) | - |
| `analysisPrompt` | `string` | - |
| `isRunningAnalysis` | `boolean` | - |
| `promptSuggestionsVisible` | `boolean` | - |
| `tools` | `OpenAssistantToolSet` | - |
| `analysisAbortController?` | `AbortController` | - |
| `setConfig()` | (`config`) => `void` | - |
| `setPromptSuggestionsVisible()` | (`visible`) => `void` | - |
| `chatStop()?` | () => `void` | Latest stop function from useChat to immediately halt local streaming |
| `setChatStop()` | (`stop`) => `void` | Register/replace the current chat stop function |
| `chatSendMessage()?` | (`message`) => `void` | Latest sendMessage function from useChat to send messages |
| `setChatSendMessage()` | (`sendMessage`) => `void` | Register/replace the current chat sendMessage function |
| `addToolResult?` | [`AddToolResult`](AddToolResult.md) | Latest addToolResult function from useChat to add tool results |
| `setAddToolResult()` | (`addToolResult`) => `void` | Register/replace the current addToolResult function |
| `waitForToolResult()` | (`toolCallId`, `abortSignal?`) => `Promise`<`void`> | Wait for a tool result to be added by UI component |
| `setAnalysisPrompt()` | (`prompt`) => `void` | - |
| `addAnalysisResult()` | (`message`) => `void` | - |
| `sendPrompt()` | (`prompt`, `options?`) => `Promise`<`string`> | - |
| `startAnalysis()` | (`sendMessage`) => `Promise`<`void`> | - |
| `cancelAnalysis()` | () => `void` | - |
| `setAiModel()` | (`modelProvider`, `model`) => `void` | - |
| `createSession()` | (`name?`, `modelProvider?`, `model?`) => `void` | - |
| `switchSession()` | (`sessionId`) => `void` | - |
| `renameSession()` | (`sessionId`, `name`) => `void` | - |
| `deleteSession()` | (`sessionId`) => `void` | - |
| `getCurrentSession()` | () => `AnalysisSessionSchema` | `undefined` | - |
| `setSessionUiMessages()` | (`sessionId`, `uiMessages`) => `void` | - |
| `setSessionToolAdditionalData()` | (`sessionId`, `toolCallId`, `additionalData`) => `void` | - |
| `getAnalysisResults()` | () => `AnalysisResultSchema`\[] | `undefined` | - |
| `deleteAnalysisResult()` | (`sessionId`, `resultId`) => `void` | - |
| `getAssistantMessageParts()` | (`analysisResultId`) => `UIMessage`\[`"parts"`] | - |
| `findToolComponent()` | (`toolName`) => `React.ComponentType` | `undefined` | - |
| `getApiKeyFromSettings()` | () => `string` | - |
| `getBaseUrlFromSettings()` | () => `string` | `undefined` | - |
| `getMaxStepsFromSettings()` | () => `number` | - |
| `getFullInstructions()` | () => `string` | - |
| `getLocalChatTransport()` | () => `DefaultChatTransport`<`UIMessage`> | - |
| `chatEndPoint` | `string` | Optional remote endpoint to use for chat; if empty, local transport is used |
| `chatHeaders` | `Record`<`string`, `string`> | - |
| `getRemoteChatTransport()` | (`endpoint`, `headers?`) => `DefaultChatTransport`<`UIMessage`> | - |
| `onChatToolCall` | `ExtendedChatOnToolCallCallback` | - |
| `onChatData` | `ChatOnDataCallback`<`UIMessage`<`unknown`, `UIDataTypes`, `UITools`>> | - |
| `onChatFinish()` | (`args`) => `void` | - |
| `onChatError()` | (`error`) => `void` | - |

---

---
url: /api/ai/type-aliases/AiSliceState.md
---
[@sqlrooms/ai](../index.md) / AiSliceState

# Type Alias: AiSliceState

> **AiSliceState** = `object`

## Properties

### ai

> **ai**: `object`

| Name | Type | Description |
| ------ | ------ | ------ |
| `config` | [`AiSliceConfig`](AiSliceConfig.md) | - |
| `analysisPrompt` | `string` | - |
| `isRunningAnalysis` | `boolean` | - |
| `promptSuggestionsVisible` | `boolean` | - |
| `tools` | `OpenAssistantToolSet` | - |
| `analysisAbortController?` | `AbortController` | - |
| `setConfig()` | (`config`) => `void` | - |
| `setPromptSuggestionsVisible()` | (`visible`) => `void` | - |
| `chatStop()?` | () => `void` | Latest stop function from useChat to immediately halt local streaming |
| `setChatStop()` | (`stop`) => `void` | Register/replace the current chat stop function |
| `chatSendMessage()?` | (`message`) => `void` | Latest sendMessage function from useChat to send messages |
| `setChatSendMessage()` | (`sendMessage`) => `void` | Register/replace the current chat sendMessage function |
| `addToolResult?` | `AddToolResult` | Latest addToolResult function from useChat to add tool results |
| `setAddToolResult()` | (`addToolResult`) => `void` | Register/replace the current addToolResult function |
| `waitForToolResult()` | (`toolCallId`, `abortSignal?`) => `Promise`<`void`> | Wait for a tool result to be added by UI component |
| `setAnalysisPrompt()` | (`prompt`) => `void` | - |
| `addAnalysisResult()` | (`message`) => `void` | - |
| `sendPrompt()` | (`prompt`, `options?`) => `Promise`<`string`> | - |
| `startAnalysis()` | (`sendMessage`) => `Promise`<`void`> | - |
| `cancelAnalysis()` | () => `void` | - |
| `setAiModel()` | (`modelProvider`, `model`) => `void` | - |
| `createSession()` | (`name?`, `modelProvider?`, `model?`) => `void` | - |
| `switchSession()` | (`sessionId`) => `void` | - |
| `renameSession()` | (`sessionId`, `name`) => `void` | - |
| `deleteSession()` | (`sessionId`) => `void` | - |
| `getCurrentSession()` | () => [`AnalysisSessionSchema`](AnalysisSessionSchema.md) | `undefined` | - |
| `setSessionUiMessages()` | (`sessionId`, `uiMessages`) => `void` | - |
| `setSessionToolAdditionalData()` | (`sessionId`, `toolCallId`, `additionalData`) => `void` | - |
| `getAnalysisResults()` | () => [`AnalysisResultSchema`](AnalysisResultSchema.md)\[] | `undefined` | - |
| `deleteAnalysisResult()` | (`sessionId`, `resultId`) => `void` | - |
| `getAssistantMessageParts()` | (`analysisResultId`) => `UIMessage`\[`"parts"`] | - |
| `findToolComponent()` | (`toolName`) => `React.ComponentType` | `undefined` | - |
| `getApiKeyFromSettings()` | () => `string` | - |
| `getBaseUrlFromSettings()` | () => `string` | `undefined` | - |
| `getMaxStepsFromSettings()` | () => `number` | - |
| `getFullInstructions()` | () => `string` | - |
| `getLocalChatTransport()` | () => `DefaultChatTransport`<`UIMessage`> | - |
| `chatEndPoint` | `string` | Optional remote endpoint to use for chat; if empty, local transport is used |
| `chatHeaders` | `Record`<`string`, `string`> | - |
| `getRemoteChatTransport()` | (`endpoint`, `headers?`) => `DefaultChatTransport`<`UIMessage`> | - |
| `onChatToolCall` | `ExtendedChatOnToolCallCallback` | - |
| `onChatData` | `ChatOnDataCallback`<`UIMessage`<`unknown`, `UIDataTypes`, `UITools`>> | - |
| `onChatFinish()` | (`args`) => `void` | - |
| `onChatError()` | (`error`) => `void` | - |

---

---
url: /api/ai-config/type-aliases/AnalysisResultSchema.md
---
[@sqlrooms/ai-config](../index.md) / AnalysisResultSchema

# Type Alias: AnalysisResultSchema

> **AnalysisResultSchema** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `id` | `string` |
|  `prompt` | `string` |
|  `errorMessage?` | { `error`: `string`; } |
|  `isCompleted` | `boolean` |

---

---
url: /api/ai/type-aliases/AnalysisResultSchema.md
---
[@sqlrooms/ai](../index.md) / AnalysisResultSchema

# Type Alias: AnalysisResultSchema

> **AnalysisResultSchema** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `id` | `string` |
|  `prompt` | `string` |
|  `errorMessage?` | { `error`: `string`; } |
|  `isCompleted` | `boolean` |

---

---
url: /api/ai-config/type-aliases/AnalysisSessionSchema.md
---
[@sqlrooms/ai-config](../index.md) / AnalysisSessionSchema

# Type Alias: AnalysisSessionSchema

> **AnalysisSessionSchema** = `object`

## Type Declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `id` | `string` | - |
|  `name` | `string` | - |
|  `modelProvider` | `string` | - |
|  `model` | `string` | - |
|  `customModelName?` | `string` | - |
|  `baseUrl?` | `string` | - |
|  `analysisResults` | `object`\[] | - |
|  `createdAt?` | `Date` | - |
|  `uiMessages` | `object`\[] | - |
|  `toolAdditionalData?` | `Record`<`string`, `unknown`> | - |
|  `messagesRevision` | `number` | Revision counter that increments when messages are deleted, used to force useChat reset |

---

---
url: /api/ai/type-aliases/AnalysisSessionSchema.md
---
[@sqlrooms/ai](../index.md) / AnalysisSessionSchema

# Type Alias: AnalysisSessionSchema

> **AnalysisSessionSchema** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `id` | `string` |
|  `name` | `string` |
|  `modelProvider` | `string` |
|  `model` | `string` |
|  `customModelName?` | `string` |
|  `baseUrl?` | `string` |
|  `analysisResults` | `object`\[] |
|  `createdAt?` | `Date` |
|  `uiMessages` | `object`\[] |
|  `toolAdditionalData?` | `Record`<`string`, `unknown`> |
|  `messagesRevision` | `number` |

---

---
url: /api/recharts/type-aliases/AreaProps.md
---
[@sqlrooms/recharts](../index.md) / AreaProps

# Type Alias: AreaProps

> **AreaProps** = `Omit`<`SVGProps`<`SVGElement`>, `"type"` | `"points"`> & `AreaProps`

---

---
url: /api/data-table/type-aliases/ArrowColumnMeta.md
---
[@sqlrooms/data-table](../index.md) / ArrowColumnMeta

# Type Alias: ArrowColumnMeta

> **ArrowColumnMeta** = `object`

## Properties

### type

> **type**: `arrow.DataType`

***

### isNumeric

> **isNumeric**: `boolean`

---

---
url: /api/recharts/type-aliases/BarProps.md
---
[@sqlrooms/recharts](../index.md) / BarProps

# Type Alias: BarProps

> **BarProps** = `Omit`<`PresentationAttributesAdaptChildEvent`<`any`, `SVGPathElement`>, `"radius"` | `"name"`> & `BarProps`

---

---
url: /api/room-config/type-aliases/BaseDataSource.md
---
[@sqlrooms/room-config](../index.md) / BaseDataSource

# Type Alias: BaseDataSource

> **BaseDataSource** = `object`

**`Interface`**

Base interface for all data source configurations
BaseDataSource

## Type Declaration

| Name | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
|  `type` | `"file"` | `"url"` | `"sql"` | `DataSourceTypes` | Type of the data source |
|  `tableName` | `string` | - | Unique table name used to store the data loaded from the data source. This name will be used to reference the data in SQL queries. |

---

---
url: /api/room-shell/type-aliases/BaseDataSource.md
---
[@sqlrooms/room-shell](../index.md) / BaseDataSource

# Type Alias: BaseDataSource

> **BaseDataSource** = `object`

**`Interface`**

Base interface for all data source configurations
BaseDataSource

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"file"` | `"url"` | `"sql"` |
|  `tableName` | `string` |

---

---
url: /api/room-store/type-aliases/BaseDataSource.md
---
[@sqlrooms/room-store](../index.md) / BaseDataSource

# Type Alias: BaseDataSource

> **BaseDataSource** = `object`

**`Interface`**

Base interface for all data source configurations
BaseDataSource

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"file"` | `"url"` | `"sql"` |
|  `tableName` | `string` |

---

---
url: /api/room-config/type-aliases/BaseRoomConfig.md
---
[@sqlrooms/room-config](../index.md) / BaseRoomConfig

# Type Alias: BaseRoomConfig

> **BaseRoomConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `title` | `string` |
|  `description?` | `string` | `null` |
|  `dataSources` | ({ `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; })\[] |

---

---
url: /api/room-shell/type-aliases/BaseRoomConfig.md
---
[@sqlrooms/room-shell](../index.md) / BaseRoomConfig

# Type Alias: BaseRoomConfig

> **BaseRoomConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `title` | `string` |
|  `description?` | `string` | `null` |
|  `dataSources` | ({ `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; })\[] |

---

---
url: /api/room-store/type-aliases/BaseRoomConfig.md
---
[@sqlrooms/room-store](../index.md) / BaseRoomConfig

# Type Alias: BaseRoomConfig

> **BaseRoomConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `title` | `string` |
|  `description?` | `string` | `null` |
|  `dataSources` | ({ `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; })\[] |

---

---
url: /api/room-shell/type-aliases/BaseRoomStore.md
---
[@sqlrooms/room-shell](../index.md) / BaseRoomStore

# Type Alias: BaseRoomStore\<RS>

> **BaseRoomStore**<`RS`> = [`StoreApi`](../interfaces/StoreApi.md)<`RS`>

## Type Parameters

| Type Parameter |
| ------ |
| `RS` *extends* [`BaseRoomStoreState`](BaseRoomStoreState.md) |

---

---
url: /api/room-store/type-aliases/BaseRoomStore.md
---
[@sqlrooms/room-store](../index.md) / BaseRoomStore

# Type Alias: BaseRoomStore\<RS>

> **BaseRoomStore**<`RS`> = [`StoreApi`](../interfaces/StoreApi.md)<`RS`>

## Type Parameters

| Type Parameter |
| ------ |
| `RS` *extends* [`BaseRoomStoreState`](BaseRoomStoreState.md) |

---

---
url: /api/room-shell/type-aliases/BaseRoomStoreState.md
---
[@sqlrooms/room-shell](../index.md) / BaseRoomStoreState

# Type Alias: BaseRoomStoreState

> **BaseRoomStoreState** = `object`

## Properties

### room

> **room**: `object`

| Name | Type |
| ------ | ------ |
| `initialized` | `boolean` |
| `initialize()` | () => `Promise`<`void`> |
| `destroy()` | () => `Promise`<`void`> |
| `captureException()` | (`exception`, `captureContext?`) => `void` |

---

---
url: /api/room-store/type-aliases/BaseRoomStoreState.md
---
[@sqlrooms/room-store](../index.md) / BaseRoomStoreState

# Type Alias: BaseRoomStoreState

> **BaseRoomStoreState** = `object`

## Properties

### room

> **room**: `object`

| Name | Type |
| ------ | ------ |
| `initialized` | `boolean` |
| `initialize()` | () => `Promise`<`void`> |
| `destroy()` | () => `Promise`<`void`> |
| `captureException()` | (`exception`, `captureContext?`) => `void` |

---

---
url: /api/recharts/type-aliases/BrushProps.md
---
[@sqlrooms/recharts](../index.md) / BrushProps

# Type Alias: BrushProps

> **BrushProps** = `Omit`<`SVGProps`<`SVGElement`>, `"onChange"`> & `BrushProps`

---

---
url: /api/ui/type-aliases/CalendarProps.md
---
[@sqlrooms/ui](../index.md) / CalendarProps

# Type Alias: CalendarProps

> **CalendarProps** = `React.ComponentProps`<*typeof* `DayPicker`>

---

---
url: /api/canvas/type-aliases/CanvasSliceConfig.md
---
[@sqlrooms/canvas](../index.md) / CanvasSliceConfig

# Type Alias: CanvasSliceConfig

> **CanvasSliceConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `viewport` | { `x`: `number`; `y`: `number`; `zoom`: `number`; } |
|  `nodes` | `object`\[] |
|  `edges` | `object`\[] |

---

---
url: /api/canvas/type-aliases/CanvasSliceState.md
---
[@sqlrooms/canvas](../index.md) / CanvasSliceState

# Type Alias: CanvasSliceState

> **CanvasSliceState** = `AiSliceState` & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `canvas` | { `config`: [`CanvasSliceConfig`](CanvasSliceConfig.md); `isAssistantOpen`: `boolean`; `sqlResults`: `Record`<`string`, `SqlNodeQueryResult`>; `initialize`: () => `Promise`<`void`>; `setConfig`: (`config`) => `void`; `setViewport`: (`viewport`) => `void`; `setAssistantOpen`: (`isAssistantOpen`) => `void`; `addNode`: (`params`) => `string`; `executeDownstreamFrom`: (`nodeId`) => `Promise`<`void`>; `renameNode`: (`nodeId`, `newTitle`) => `Promise`<`void`>; `updateNode`: (`nodeId`, `updater`) => `void`; `deleteNode`: (`nodeId`) => `void`; `applyNodeChanges`: (`changes`) => `void`; `applyEdgeChanges`: (`changes`) => `void`; `addEdge`: (`edge`) => `void`; `executeSqlNodeQuery`: (`nodeId`, `opts?`) => `Promise`<`void`>; } |

---

---
url: /api/recharts/type-aliases/CartesianAxisProps.md
---
[@sqlrooms/recharts](../index.md) / CartesianAxisProps

# Type Alias: CartesianAxisProps

> **CartesianAxisProps** = `Omit`<`PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`>, `"viewBox"`> & `CartesianAxisProps`

---

---
url: /api/recharts/type-aliases/CartesianGridProps.md
---
[@sqlrooms/recharts](../index.md) / CartesianGridProps

# Type Alias: CartesianGridProps

> **CartesianGridProps** = `AcceptedSvgProps` & `CartesianGridProps`

---

---
url: /api/recharts/type-aliases/CellProps.md
---
[@sqlrooms/recharts](../index.md) / CellProps

# Type Alias: CellProps

> **CellProps** = `SVGProps`<`SVGElement`>

---

---
url: /api/recharts/type-aliases/ChartConfig.md
---
[@sqlrooms/recharts](../index.md) / ChartConfig

# Type Alias: ChartConfig

> **ChartConfig** = { \[k in string]: { label?: React.ReactNode; icon?: React.ComponentType } & ({ color?: string; theme?: never } | { color?: never; theme: Record\<keyof typeof THEMES, string> }) }

---

---
url: /api/duckdb-core/type-aliases/ColumnNodeObject.md
---
[@sqlrooms/duckdb-core](../index.md) / ColumnNodeObject

# Type Alias: ColumnNodeObject

> **ColumnNodeObject** = `BaseNodeObject` & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `type` | `"column"` |
| `columnType` | `string` |
| `columnTypeCategory?` | [`ColumnTypeCategory`](ColumnTypeCategory.md) |

---

---
url: /api/duckdb/type-aliases/ColumnNodeObject.md
---
[@sqlrooms/duckdb](../index.md) / ColumnNodeObject

# Type Alias: ColumnNodeObject

> **ColumnNodeObject** = `BaseNodeObject` & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `type` | `"column"` |
| `columnType` | `string` |
| `columnTypeCategory?` | [`ColumnTypeCategory`](ColumnTypeCategory.md) |

---

---
url: /api/duckdb-core/type-aliases/ColumnTypeCategory.md
---
[@sqlrooms/duckdb-core](../index.md) / ColumnTypeCategory

# Type Alias: ColumnTypeCategory

> **ColumnTypeCategory** = `"number"` | `"string"` | `"datetime"` | `"boolean"` | `"binary"` | `"json"` | `"struct"` | `"geometry"`

---

---
url: /api/duckdb/type-aliases/ColumnTypeCategory.md
---
[@sqlrooms/duckdb](../index.md) / ColumnTypeCategory

# Type Alias: ColumnTypeCategory

> **ColumnTypeCategory** = `"number"` | `"string"` | `"datetime"` | `"boolean"` | `"binary"` | `"json"` | `"struct"` | `"geometry"`

---

---
url: /api/discuss/type-aliases/Comment.md
---
[@sqlrooms/discuss](../index.md) / Comment

# Type Alias: Comment

> **Comment** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `id` | `string` |
|  `userId` | `string` |
|  `text` | `string` |
|  `timestamp` | `Date` |
|  `parentId?` | `string` |

---

---
url: /api/cosmos/type-aliases/CosmosGraphProps.md
---
[@sqlrooms/cosmos](../index.md) / CosmosGraphProps

# Type Alias: CosmosGraphProps

> **CosmosGraphProps** = `object`

Props for the CosmosGraph component.

## Properties

### config

> **config**: `GraphConfigInterface`

Configuration object for the graph's visual and behavioral properties

***

### pointPositions

> **pointPositions**: `Float32Array`

Float32Array containing x,y coordinates for each point (2 values per point)

***

### pointSizes

> **pointSizes**: `Float32Array`

Float32Array containing size values for each point (1 value per point)

***

### pointColors

> **pointColors**: `Float32Array`

Float32Array containing RGBA values for each point (4 values per point)

***

### linkIndexes?

> `optional` **linkIndexes**: `Float32Array`

Optional Float32Array containing pairs of point indices defining links

***

### linkColors?

> `optional` **linkColors**: `Float32Array`

Optional Float32Array containing RGBA values for each link (4 values per link)

***

### focusedPointIndex?

> `optional` **focusedPointIndex**: `number`

Optional index of the point to focus on

***

### renderPointTooltip()?

> `optional` **renderPointTooltip**: (`index`) => `React.ReactNode`

Optional function to render custom tooltip content for a point

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `index` | `number` |

#### Returns

`React.ReactNode`

***

### children?

> `optional` **children**: `React.ReactNode`

Optional child elements to render inside the graph container

---

---
url: /api/cosmos/type-aliases/CosmosSliceConfig.md
---
[@sqlrooms/cosmos](../index.md) / CosmosSliceConfig

# Type Alias: CosmosSliceConfig

> **CosmosSliceConfig** = `object`

Zod schema for validating and configuring the Cosmos graph visualization.
This schema defines all available configuration options and their types.

The configuration is divided into several categories:

Node Appearance:

* `pointSizeScale`: Controls the size of nodes
* `scalePointsOnZoom`: Enables dynamic node sizing based on zoom level

Link Appearance:

* `renderLinks`: Toggles link visibility
* `linkWidthScale`: Controls link thickness
* `linkArrows`: Toggles directional arrows
* `linkArrowsSizeScale`: Controls arrow size
* `curvedLinks`: Toggles curved/straight links

Physics Simulation:

* `simulationGravity`: Central gravitational force (0.25)
* `simulationRepulsion`: Node repulsion force (1.0)
* `simulationLinkSpring`: Link spring force (1.0)
* `simulationLinkDistance`: Natural link length (10)
* `simulationFriction`: Movement damping (0.85)
* `simulationDecay`: Simulation cooling rate (1000)

## Type Declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `pointSizeScale` | `number` | Scale factor for point (node) sizes in the graph. Values > 1 make nodes larger, values < 1 make them smaller. **Default** `1.1` |
|  `scalePointsOnZoom` | `boolean` | When true, nodes will dynamically resize based on the current zoom level. This helps maintain visual clarity at different zoom levels. **Default** `true` |
|  `renderLinks` | `boolean` | Controls whether links (edges) between nodes are displayed. **Default** `true` |
|  `linkWidthScale` | `number` | Scale factor for link (edge) width. Values > 1 make links thicker, values < 1 make them thinner. **Default** `1` |
|  `linkArrowsSizeScale` | `number` | Scale factor for the size of directional arrows on links. Only applies when linkArrows is true. **Default** `1` |
|  `linkArrows` | `boolean` | When true, displays arrows indicating link direction. Useful for directed graphs. **Default** `false` |
|  `curvedLinks` | `boolean` | When true, links are rendered as curved Bezier paths. When false, links are straight lines. **Default** `false` |
|  `simulationGravity` | `number` | Controls the strength of the central gravitational force. Higher values pull nodes more strongly toward the center. **Default** `0.25` |
|  `simulationRepulsion` | `number` | Controls how strongly nodes repel each other. Higher values create more space between unconnected nodes. **Default** `1.0` |
|  `simulationLinkSpring` | `number` | Controls the strength of the spring force between linked nodes. Higher values pull connected nodes more tightly together. **Default** `1.0` |
|  `simulationLinkDistance` | `number` | The natural or resting length of links between nodes. Higher values create more spacing between connected nodes. **Default** `10` |
|  `simulationFriction` | `number` | Controls how quickly node movement decays. Higher values (closer to 1) create more damped movement. **Default** `0.85` |
|  `simulationDecay` | `number` | Controls how quickly the simulation stabilizes. Lower values result in longer, smoother transitions. **Default** `1000` |

## Examples

```typescript
const config: CosmosSliceConfig = {
  cosmos: {
    pointSizeScale: 1.2,
    scalePointsOnZoom: true,
    renderLinks: true,
    linkWidthScale: 1.5,
    simulationGravity: 0.25
  }
};
```

```typescript
const directedGraphConfig: CosmosSliceConfig = {
  cosmos: {
    linkArrows: true,
    linkArrowsSizeScale: 1.2,
    curvedLinks: true,
    simulationLinkDistance: 15,
    simulationLinkSpring: 1.2
  }
};
```

```typescript
const largeGraphConfig: CosmosSliceConfig = {
  cosmos: {
    simulationGravity: 0.1,
    simulationRepulsion: 0.8,
    simulationFriction: 0.9,
    simulationDecay: 2000,
    scalePointsOnZoom: false
  }
};
```

---

---
url: /api/cosmos/type-aliases/CosmosSliceState.md
---
[@sqlrooms/cosmos](../index.md) / CosmosSliceState

# Type Alias: CosmosSliceState

> **CosmosSliceState** = `object`

Core state interface for the Cosmos graph visualization.
Contains the graph instance, simulation state, and all control functions.

## Properties

### cosmos

> **cosmos**: `object`

| Name | Type | Description |
| ------ | ------ | ------ |
| `config` | [`CosmosSliceConfig`](CosmosSliceConfig.md) | - |
| `graph` | `Graph` | `null` | The current graph instance |
| `isSimulationRunning` | `boolean` | Whether the physics simulation is currently running |
| `setConfig()` | (`config`) => `void` | Sets the config for the cosmos slice |
| `createGraph()` | (`container`) => `void` | Creates a new graph instance in the specified container |
| `toggleSimulation()` | () => `void` | Toggles the physics simulation on/off |
| `fitView()` | () => `void` | Adjusts the view to fit all nodes |
| `startWithEnergy()` | () => `void` | Starts the simulation with initial energy |
| `destroyGraph()` | () => `void` | Cleans up and removes the current graph |
| `updateSimulationConfig()` | (`config`) => `void` | Updates the simulation configuration parameters |
| `updateGraphConfig()` | (`config`) => `void` | Updates the graph's visual configuration |
| `updateGraphData()` | (`data`) => `void` | Updates the graph's data (points, links, colors, etc.) |
| `setFocusedPoint()` | (`index`) => `void` | Sets the currently focused point by its index |
| `setZoomLevel()` | (`level`) => `void` | Sets the zoom level of the graph view |

---

---
url: /api/room-shell/type-aliases/CreateBaseRoomSliceProps.md
---
[@sqlrooms/room-shell](../index.md) / CreateBaseRoomSliceProps

# Type Alias: CreateBaseRoomSliceProps

> **CreateBaseRoomSliceProps** = `object`

## Properties

### captureException?

> `optional` **captureException**: [`BaseRoomStoreState`](BaseRoomStoreState.md)\[`"room"`]\[`"captureException"`]

---

---
url: /api/room-store/type-aliases/CreateBaseRoomSliceProps.md
---
[@sqlrooms/room-store](../index.md) / CreateBaseRoomSliceProps

# Type Alias: CreateBaseRoomSliceProps

> **CreateBaseRoomSliceProps** = `object`

## Properties

### captureException?

> `optional` **captureException**: [`BaseRoomStoreState`](BaseRoomStoreState.md)\[`"room"`]\[`"captureException"`]

---

---
url: /api/layout/type-aliases/CreateLayoutSliceProps.md
---
[@sqlrooms/layout](../index.md) / CreateLayoutSliceProps

# Type Alias: CreateLayoutSliceProps

> **CreateLayoutSliceProps** = `object`

## Properties

### config?

> `optional` **config**: [`LayoutSliceConfig`](LayoutSliceConfig.md)

***

### panels?

> `optional` **panels**: `Record`<`string`, [`RoomPanelInfo`](RoomPanelInfo.md)>

---

---
url: /api/sql-editor/type-aliases/CreateTableFormInitialValues.md
---
[@sqlrooms/sql-editor](../index.md) / CreateTableFormInitialValues

# Type Alias: CreateTableFormInitialValues

> **CreateTableFormInitialValues** = `Partial`<{ `tableName`: `string`; `replace`: `boolean`; `temp`: `boolean`; `view`: `boolean`; `schema`: `string`; `database`: `string`; }>

Initial values for the create table form.

---

---
url: /api/sql-editor/type-aliases/CreateTableModalProps.md
---
[@sqlrooms/sql-editor](../index.md) / CreateTableModalProps

# Type Alias: CreateTableModalProps

> **CreateTableModalProps** = `object`

## Properties

### query

> **query**: `string`

***

### isOpen

> **isOpen**: `boolean`

***

### onClose()

> **onClose**: () => `void`

#### Returns

`void`

***

### editDataSource?

> `optional` **editDataSource**: `SqlQueryDataSource`

***

### allowMultipleStatements?

> `optional` **allowMultipleStatements**: `boolean`

Allow multiple statements in the query. When true, preceding statements
will be executed before the final SELECT is wrapped in CREATE TABLE/VIEW.

***

### showSchemaSelection?

> `optional` **showSchemaSelection**: `boolean`

Show schema/database selection UI.

#### Default

```ts
false
```

***

### ~~onAddOrUpdateSqlQuery()?~~

> `optional` **onAddOrUpdateSqlQuery**: (`tableName`, `query`, `oldTableName?`) => `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `tableName` | `string` |
| `query` | `string` |
| `oldTableName?` | `string` |

#### Returns

`Promise`<`void`>

#### Deprecated

Use createTableFromQuery directly instead.
When not provided, the modal will call createTableFromQuery directly.

***

### className?

> `optional` **className**: `string`

Additional class name for the dialog content.

***

### initialValues?

> `optional` **initialValues**: [`CreateTableFormInitialValues`](CreateTableFormInitialValues.md)

Initial values for the form fields.

---

---
url: /api/recharts/type-aliases/CrossProps.md
---
[@sqlrooms/recharts](../index.md) / CrossProps

# Type Alias: CrossProps

> **CrossProps** = `SVGProps`<`SVGPathElement`> & `CrossProps`

---

---
url: /api/recharts/type-aliases/CurveProps.md
---
[@sqlrooms/recharts](../index.md) / CurveProps

# Type Alias: CurveProps

> **CurveProps** = `Omit`<`PresentationAttributesWithProps`<`CurveProps`, `SVGPathElement`>, `"type"` | `"points"`> & `CurveProps`

---

---
url: /api/recharts/type-aliases/CustomizedProps.md
---
[@sqlrooms/recharts](../index.md) / CustomizedProps

# Type Alias: CustomizedProps\<P, C>

> **CustomizedProps**<`P`, `C`> = `P` & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `component` | `C` |

## Type Parameters

| Type Parameter |
| ------ |
| `P` |
| `C` *extends* `Comp`<`P`> |

---

---
url: /api/ai-rag/type-aliases/DatabaseMetadata.md
---
[@sqlrooms/ai-rag](../index.md) / DatabaseMetadata

# Type Alias: DatabaseMetadata

> **DatabaseMetadata** = `object`

## Properties

### provider

> **provider**: `string`

***

### model

> **model**: `string`

***

### dimensions

> **dimensions**: `number`

***

### chunkingStrategy

> **chunkingStrategy**: `string`

---

---
url: /api/duckdb-core/type-aliases/DatabaseNodeObject.md
---
[@sqlrooms/duckdb-core](../index.md) / DatabaseNodeObject

# Type Alias: DatabaseNodeObject

> **DatabaseNodeObject** = `BaseNodeObject` & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `type` | `"database"` |

---

---
url: /api/duckdb/type-aliases/DatabaseNodeObject.md
---
[@sqlrooms/duckdb](../index.md) / DatabaseNodeObject

# Type Alias: DatabaseNodeObject

> **DatabaseNodeObject** = `BaseNodeObject` & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `type` | `"database"` |

---

---
url: /api/room-config/type-aliases/DataSource.md
---
[@sqlrooms/room-config](../index.md) / DataSource

# Type Alias: DataSource

> **DataSource** = { `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; }

Union type representing all possible data source configurations
Discriminated union based on the 'type' field

## Type Declaration

{ `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }; }

| Name | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Unique table name used to store the data loaded from the data source. This name will be used to reference the data in SQL queries. |
| `type` | `"file"` | - |
| `fileName` | `string` | Path to the data file |
| `loadOptions?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | Optional configuration for file loading |

{ `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; }

| Name | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Unique table name used to store the data loaded from the data source. This name will be used to reference the data in SQL queries. |
| `type` | `"url"` | - |
| `url` | `string` | URL from which to fetch the data |
| `loadOptions?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | Optional configuration for file loading |
| `httpMethod?` | `string` | Optional HTTP method to use for the request |
| `headers?` | `Record`<`string`, `string`> | Optional headers to include in the request |

{ `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; }

| Name | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Unique table name used to store the data loaded from the data source. This name will be used to reference the data in SQL queries. |
| `type` | `"sql"` | - |
| `sqlQuery` | `string` | SQL query to execute for data retrieval |

---

---
url: /api/room-shell/type-aliases/DataSource.md
---
[@sqlrooms/room-shell](../index.md) / DataSource

# Type Alias: DataSource

> **DataSource** = { `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; }

Union type representing all possible data source configurations
Discriminated union based on the 'type' field

---

---
url: /api/room-store/type-aliases/DataSource.md
---
[@sqlrooms/room-store](../index.md) / DataSource

# Type Alias: DataSource

> **DataSource** = { `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions?`: {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }; `httpMethod?`: `string`; `headers?`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; }

Union type representing all possible data source configurations
Discriminated union based on the 'type' field

---

---
url: /api/room-shell/type-aliases/DataSourceState.md
---
[@sqlrooms/room-shell](../index.md) / DataSourceState

# Type Alias: DataSourceState

> **DataSourceState** = `object`

## Properties

### status

> **status**: [`DataSourceStatus`](../enumerations/DataSourceStatus.md)

***

### message?

> `optional` **message**: `string`

---

---
url: /api/room-config/type-aliases/DataSourceTypes.md
---
[@sqlrooms/room-config](../index.md) / DataSourceTypes

# Type Alias: DataSourceTypes

> **DataSourceTypes** = `"file"` | `"url"` | `"sql"`

Enum representing the supported types of data sources

---

---
url: /api/room-shell/type-aliases/DataSourceTypes.md
---
[@sqlrooms/room-shell](../index.md) / DataSourceTypes

# Type Alias: DataSourceTypes

> **DataSourceTypes** = `"file"` | `"url"` | `"sql"`

Enum representing the supported types of data sources

---

---
url: /api/room-store/type-aliases/DataSourceTypes.md
---
[@sqlrooms/room-store](../index.md) / DataSourceTypes

# Type Alias: DataSourceTypes

> **DataSourceTypes** = `"file"` | `"url"` | `"sql"`

Enum representing the supported types of data sources

---

---
url: /api/duckdb-core/type-aliases/DataTable.md
---
[@sqlrooms/duckdb-core](../index.md) / DataTable

# Type Alias: DataTable

> **DataTable** = `object`

## Properties

### table

> **table**: [`QualifiedTableName`](QualifiedTableName.md)

***

### isView

> **isView**: `boolean`

***

### ~~database?~~

> `optional` **database**: `string`

#### Deprecated

Use table.database instead

***

### ~~schema~~

> **schema**: `string`

#### Deprecated

Use table.schema instead

***

### ~~tableName~~

> **tableName**: `string`

#### Deprecated

Use table.table instead

***

### columns

> **columns**: [`TableColumn`](TableColumn.md)\[]

***

### rowCount?

> `optional` **rowCount**: `number`

***

### inputFileName?

> `optional` **inputFileName**: `string`

***

### sql?

> `optional` **sql**: `string`

***

### comment?

> `optional` **comment**: `string`

---

---
url: /api/duckdb/type-aliases/DataTable.md
---
[@sqlrooms/duckdb](../index.md) / DataTable

# Type Alias: DataTable

> **DataTable** = `object`

## Properties

### table

> **table**: [`QualifiedTableName`](QualifiedTableName.md)

***

### isView

> **isView**: `boolean`

***

### ~~database?~~

> `optional` **database**: `string`

#### Deprecated

Use table.database instead

***

### ~~schema~~

> **schema**: `string`

#### Deprecated

Use table.schema instead

***

### ~~tableName~~

> **tableName**: `string`

#### Deprecated

Use table.table instead

***

### columns

> **columns**: [`TableColumn`](TableColumn.md)\[]

***

### rowCount?

> `optional` **rowCount**: `number`

***

### inputFileName?

> `optional` **inputFileName**: `string`

***

### sql?

> `optional` **sql**: `string`

***

### comment?

> `optional` **comment**: `string`

---

---
url: /api/data-table/type-aliases/DataTablePaginatedProps.md
---
[@sqlrooms/data-table](../index.md) / DataTablePaginatedProps

# Type Alias: DataTablePaginatedProps\<Data>

> **DataTablePaginatedProps**<`Data`> = `object`

## Type Parameters

| Type Parameter |
| ------ |
| `Data` *extends* `object` |

## Properties

### className?

> `optional` **className**: `string`

***

### fontSize?

> `optional` **fontSize**: `string`

Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base

***

### data?

> `optional` **data**: `ArrayLike`<`Data`>

***

### columns?

> `optional` **columns**: `ColumnDef`<`Data`, `any`>\[]

***

### pageCount?

> `optional` **pageCount**: `number`

***

### numRows?

> `optional` **numRows**: `number`

***

### isFetching?

> `optional` **isFetching**: `boolean`

***

### pagination?

> `optional` **pagination**: `PaginationState`

***

### sorting?

> `optional` **sorting**: `SortingState`

***

### footerActions?

> `optional` **footerActions**: `React.ReactNode`

***

### onPaginationChange()?

> `optional` **onPaginationChange**: (`pagination`) => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `pagination` | `PaginationState` |

#### Returns

`void`

***

### onSortingChange()?

> `optional` **onSortingChange**: (`sorting`) => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `sorting` | `SortingState` |

#### Returns

`void`

***

### onRowClick()?

> `optional` **onRowClick**: (`args`) => `void`

Called when a row is clicked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `args` | { `row`: `Row`<`Data`>; `event`: `React.MouseEvent`<`HTMLTableRowElement`>; } |
| `args.row` | `Row`<`Data`> |
| `args.event` | `React.MouseEvent`<`HTMLTableRowElement`> |

#### Returns

`void`

***

### onRowDoubleClick()?

> `optional` **onRowDoubleClick**: (`args`) => `void`

Called when a row is double-clicked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `args` | { `row`: `Row`<`Data`>; `event`: `React.MouseEvent`<`HTMLTableRowElement`>; } |
| `args.row` | `Row`<`Data`> |
| `args.event` | `React.MouseEvent`<`HTMLTableRowElement`> |

#### Returns

`void`

---

---
url: /api/data-table/type-aliases/DataTableProps.md
---
[@sqlrooms/data-table](../index.md) / DataTableProps

# Type Alias: DataTableProps\<Data>

> **DataTableProps**<`Data`> = `object`

## Type Parameters

| Type Parameter |
| ------ |
| `Data` *extends* `object` |

## Properties

### data

> **data**: `ArrayLike`<`Data`>

***

### columns

> **columns**: `ColumnDef`<`Data`, `any`>\[]

***

### isPreview?

> `optional` **isPreview**: `boolean`

---

---
url: /api/data-table/type-aliases/DataTableVirtualizedProps.md
---
[@sqlrooms/data-table](../index.md) / DataTableVirtualizedProps

# Type Alias: DataTableVirtualizedProps\<Data>

> **DataTableVirtualizedProps**<`Data`> = `object`

## Type Parameters

| Type Parameter |
| ------ |
| `Data` *extends* `object` |

## Properties

### data?

> `optional` **data**: `ArrayLike`<`Data`>

***

### columns?

> `optional` **columns**: `ColumnDef`<`Data`, `any`>\[]

***

### isFetching?

> `optional` **isFetching**: `boolean`

***

### error?

> `optional` **error**: `any`

***

### isPreview?

> `optional` **isPreview**: `boolean`

---

---
url: /api/duckdb-core/type-aliases/DbSchemaNode.md
---
[@sqlrooms/duckdb-core](../index.md) / DbSchemaNode

# Type Alias: DbSchemaNode\<T>

> **DbSchemaNode**<`T`> = `object`

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* [`NodeObject`](NodeObject.md) | [`NodeObject`](NodeObject.md) |

## Properties

### key

> **key**: `string`

***

### object

> **object**: `T`

***

### children?

> `optional` **children**: `DbSchemaNode`\[]

***

### isInitialOpen?

> `optional` **isInitialOpen**: `boolean`

---

---
url: /api/duckdb/type-aliases/DbSchemaNode.md
---
[@sqlrooms/duckdb](../index.md) / DbSchemaNode

# Type Alias: DbSchemaNode\<T>

> **DbSchemaNode**<`T`> = `object`

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* [`NodeObject`](NodeObject.md) | [`NodeObject`](NodeObject.md) |

## Properties

### key

> **key**: `string`

***

### object

> **object**: `T`

***

### children?

> `optional` **children**: `DbSchemaNode`\[]

***

### isInitialOpen?

> `optional` **isInitialOpen**: `boolean`

---

---
url: /api/recharts/type-aliases/DefaultLegendContentProps.md
---
[@sqlrooms/recharts](../index.md) / DefaultLegendContentProps

# Type Alias: DefaultLegendContentProps

> **DefaultLegendContentProps** = `InternalProps` & `Omit`<`PresentationAttributesAdaptChildEvent`<`any`, `ReactElement`>, keyof `InternalProps`>

---

---
url: /api/ai/type-aliases/DefaultToolsOptions.md
---
[@sqlrooms/ai](../index.md) / DefaultToolsOptions

# Type Alias: DefaultToolsOptions

> **DefaultToolsOptions** = `object`

## Properties

### query?

> `optional` **query**: [`QueryToolOptions`](QueryToolOptions.md)

---

---
url: /api/discuss/type-aliases/Discussion.md
---
[@sqlrooms/discuss](../index.md) / Discussion

# Type Alias: Discussion

> **Discussion** = `object`

## Type Declaration

| Name | Type | Default value |
| ------ | ------ | ------ |
|  `id` | `string` | - |
|  `anchorId?` | `string` | - |
|  `rootComment` | { `id`: `string`; `userId`: `string`; `text`: `string`; `timestamp`: `Date`; `parentId?`: `string`; } | `Comment` |
|  `comments` | `object`\[] | - |

---

---
url: /api/discuss/type-aliases/DiscussSliceConfig.md
---
[@sqlrooms/discuss](../index.md) / DiscussSliceConfig

# Type Alias: DiscussSliceConfig

> **DiscussSliceConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `discussions` | `object`\[] |

---

---
url: /api/discuss/type-aliases/DiscussSliceState.md
---
[@sqlrooms/discuss](../index.md) / DiscussSliceState

# Type Alias: DiscussSliceState

> **DiscussSliceState** = `object`

## Properties

### discuss

> **discuss**: `object`

| Name | Type | Description |
| ------ | ------ | ------ |
| `userId` | `string` | - |
| `config` | [`DiscussSliceConfig`](DiscussSliceConfig.md) | - |
| `submitEdit()` | (`text`) => `void` | Submit content based on current UI state (add discussion, reply to discussion/comment, or edit). This automatically handles state management and is the preferred way to submit content. |
| `replyToItem` | `ReplyToItem` | `undefined` | Current discussion or comment being replied to. Used by the form to determine context when submitting. |
| `setReplyToItem()` | (`replyToItem`) => `void` | Sets the discussion or comment being replied to. Will clear editing state if set. |
| `editingItem` | `EditingItem` | `undefined` | Current discussion or comment being edited. Used by the form to determine context when submitting. |
| `setEditingItem()` | (`editingItem`) => `void` | Sets the discussion or comment being edited. Will clear replyTo state if set. |
| `itemToDelete` | `DeleteItem` | `undefined` | Item currently targeted for deletion. Used by the delete confirmation dialog. |
| `setItemToDelete()` | (`item`) => `void` | Sets the discussion or comment to be deleted. Should be used before showing the confirmation dialog. |
| `highlightedDiscussionId` | `string` | `undefined` | Currently highlighted discussion. Used to visually highlight a discussion in the UI. |
| `setHighlightedDiscussionId()` | (`discussionId`) => `void` | Sets the highlighted discussion. |
| `handleDeleteConfirm()` | () => `void` | Handles the confirmation of a delete operation. Should be called after the user confirms deletion in the UI. |
| `setConfig()` | (`config`) => `void` | Sets the config for the discuss slice. |
| `getReplyToUserId()` | () => `string` | Helper function to get the user ID of the entity being replied to. Returns '' if no reply context is set, or the user ID if a valid reply context exists. |
| `getEditingItemText()` | () => `string` | Helper function to get the text of the item being edited. Returns '' if no editing context is set, or the text content if a valid editing context exists. |
| `addDiscussion()` | (`text`, `anchorId?`) => `void` | - |
| `editDiscussion()` | (`id`, `text`) => `void` | - |
| `removeDiscussion()` | (`id`) => `void` | - |
| `addComment()` | (`discussionId`, `text`, `parentId?`) => `void` | - |
| `editComment()` | (`discussionId`, `commentId`, `text`) => `void` | - |
| `removeComment()` | (`discussionId`, `commentId`) => `void` | - |

---

---
url: /api/recharts/type-aliases/DotProps.md
---
[@sqlrooms/recharts](../index.md) / DotProps

# Type Alias: DotProps

> **DotProps** = `PresentationAttributesWithProps`<`DotProps`, `SVGCircleElement`> & `DotProps`

---

---
url: /api/duckdb/type-aliases/DuckDbConnectorType.md
---
[@sqlrooms/duckdb](../index.md) / DuckDbConnectorType

# Type Alias: DuckDbConnectorType

> **DuckDbConnectorType** = `"wasm"` | `"ws"`

---

---
url: /api/duckdb/type-aliases/DuckDbSliceState.md
---
[@sqlrooms/duckdb](../index.md) / DuckDbSliceState

# Type Alias: DuckDbSliceState

> **DuckDbSliceState** = `object`

State and actions for the DuckDB slice

## Properties

### db

> **db**: `object`

| Name | Type | Description |
| ------ | ------ | ------ |
| `connector` | [`DuckDbConnector`](../interfaces/DuckDbConnector.md) | The DuckDB connector instance |
| `schema` | `string` | **Deprecated** We shouldn't limit the schema to a single one. |
| `currentSchema` | `string` | `undefined` | - |
| `currentDatabase` | `string` | `undefined` | - |
| `tables` | [`DataTable`](DataTable.md)\[] | Cache of refreshed table schemas |
| `tableRowCounts` | {\[`tableName`: `string`]: `number`; } | Cache of row counts for tables |
| `schemaTrees?` | [`DbSchemaNode`](DbSchemaNode.md)\[] | Cache of schema trees for tables |
| `queryCache` | {\[`key`: `string`]: [`QueryHandle`](QueryHandle.md); } | Cache of currently running query handles. This is only used for running queries to deduplicate them (especially for useSql), the cache is cleared when the query is completed. |
| `isRefreshingTableSchemas` | `boolean` | Whether the table schemas are being refreshed |
| `setConnector()` | (`connector`) => `void` | Set a new DuckDB connector |
| `initialize()` | () => `Promise`<`void`> | Initialize the connector (creates a WasmDuckDbConnector if none exists) |
| `destroy()` | () => `Promise`<`void`> | Close and clean up the connector |
| `addTable()` | (`tableName`, `data`) => | - |
| `loadTableSchemas()` | (`filter?`) => | - |
| `getTable()` | (`tableName`) => | - |
| `setTableRowCount()` | (`tableName`, `rowCount`) => | - |
| `findTableByName()` | (`tableName`) => | - |
| `refreshTableSchemas()` | () => | - |
| `getConnector()` | () => `Promise`<[`DuckDbConnector`](../interfaces/DuckDbConnector.md)> | Get the connector. If it's not initialized, it will be initialized. |
| `getTableRowCount()` | (`table`, `schema?`) => `Promise`<`number`> | **Deprecated** Use .loadTableRowCount() instead |
| `loadTableRowCount()` | (`tableName`) => `Promise`<`number`> | Load the row count of a table |
| `executeSql()` | (`query`) => `Promise`<[`QueryHandle`](QueryHandle.md) | `null`> | Execute a query with query handle (not result) caching and deduplication |
| `getTables()` | (`schema?`) => `Promise`<`string`\[]> | **Deprecated** Use .tables or .loadTableSchemas() instead |
| `getTableSchema()` | (`tableName`, `schema?`) => `Promise`<[`DataTable`](DataTable.md) | `undefined`> | **Deprecated** Use .loadTableSchemas() instead |
| `getTableSchemas()` | (`schema?`) => `Promise`<[`DataTable`](DataTable.md)\[]> | **Deprecated** Use .tables or .loadTableSchemas() instead |
| `checkTableExists()` | (`tableName`) => `Promise`<`boolean`> | Check if a table exists |
| `dropTable()` | (`tableName`) => `Promise`<`void`> | Delete a table with optional schema and database |
| `createTableFromQuery()` | (`tableName`, `query`, `options?`) => `Promise`<{ `tableName`: `string` | [`QualifiedTableName`](QualifiedTableName.md); `rowCount`: `number` | `undefined`; }> | Create a table or view from a query. |
| `sqlSelectToJson()` | (`sql`) => `Promise`<{ `error`: `true`; `error_type`: `string`; `error_message`: `string`; `error_subtype`: `string`; `position`: `string`; } | { `error`: `false`; `statements`: `object`\[]; }> | Parse a SQL SELECT statement to JSON |

---

---
url: /api/ai-rag/type-aliases/EmbeddingDatabase.md
---
[@sqlrooms/ai-rag](../index.md) / EmbeddingDatabase

# Type Alias: EmbeddingDatabase

> **EmbeddingDatabase** = `object`

## Properties

### databaseFilePathOrUrl

> **databaseFilePathOrUrl**: `string`

Path or URL to the DuckDB embedding database file

***

### databaseName

> **databaseName**: `string`

Name to use when attaching the database

***

### embeddingProvider

> **embeddingProvider**: [`EmbeddingProvider`](EmbeddingProvider.md)

Embedding provider for this database.
MUST match the model used during database preparation.
Example: If database was prepared with OpenAI text-embedding-3-small,
provide an OpenAI embedding function here.

Note: API key management (if needed) should be configured during provider
creation using `createAiEmbeddingProvider` with a `getApiKey` function.

***

### embeddingDimensions?

> `optional` **embeddingDimensions**: `number`

Expected embedding dimensions (for validation).
Should match the model used during preparation.
Will be validated against database metadata.

---

---
url: /api/ai-rag/type-aliases/EmbeddingProvider.md
---
[@sqlrooms/ai-rag](../index.md) / EmbeddingProvider

# Type Alias: EmbeddingProvider()

> **EmbeddingProvider** = (`text`) => `Promise`<`number`\[]>

Function that generates an embedding vector from text.
This can be implemented using:

* OpenAI API (e.g., text-embedding-3-small)
* Transformers.js (client-side, e.g., BAAI/bge-small-en-v1.5)
* Custom embedding service
* Cohere, Anthropic, etc.

IMPORTANT: The embedding provider MUST match the model used during database preparation.
Check the database metadata to ensure compatibility.

API key management (if needed) should be handled during provider creation,
not at call time. See `createAiEmbeddingProvider` for examples.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `text` | `string` |

## Returns

`Promise`<`number`\[]>

---

---
url: /api/ai-rag/type-aliases/EmbeddingResult.md
---
[@sqlrooms/ai-rag](../index.md) / EmbeddingResult

# Type Alias: EmbeddingResult

> **EmbeddingResult** = `object`

## Properties

### score

> **score**: `number`

***

### text

> **text**: `string`

***

### nodeId

> **nodeId**: `string`

***

### metadata?

> `optional` **metadata**: `Record`<`string`, `unknown`>

---

---
url: /api/recharts/type-aliases/ErrorBarProps.md
---
[@sqlrooms/recharts](../index.md) / ErrorBarProps

# Type Alias: ErrorBarProps

> **ErrorBarProps** = `SVGProps`<`SVGLineElement`> & `ErrorBarProps`

---

---
url: /api/ai-config/type-aliases/ErrorMessageSchema.md
---
[@sqlrooms/ai-config](../index.md) / ErrorMessageSchema

# Type Alias: ErrorMessageSchema

> **ErrorMessageSchema** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `error` | `string` |

---

---
url: /api/ai/type-aliases/ErrorMessageSchema.md
---
[@sqlrooms/ai](../index.md) / ErrorMessageSchema

# Type Alias: ErrorMessageSchema

> **ErrorMessageSchema** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `error` | `string` |

---

---
url: /api/room-config/type-aliases/FileDataSource.md
---
[@sqlrooms/room-config](../index.md) / FileDataSource

# Type Alias: FileDataSource

> **FileDataSource** = `object`

**`Interface`**

Configuration for file-based data sources
FileDataSource

## Type Declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `tableName` | `string` | Unique table name used to store the data loaded from the data source. This name will be used to reference the data in SQL queries. |
|  `type` | `"file"` | - |
|  `fileName` | `string` | Path to the data file |
|  `loadOptions?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | Optional configuration for file loading |

---

---
url: /api/room-shell/type-aliases/FileDataSource.md
---
[@sqlrooms/room-shell](../index.md) / FileDataSource

# Type Alias: FileDataSource

> **FileDataSource** = `object`

**`Interface`**

Configuration for file-based data sources
FileDataSource

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `tableName` | `string` |
|  `type` | `"file"` |
|  `fileName` | `string` |
|  `loadOptions?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } |

---

---
url: /api/room-store/type-aliases/FileDataSource.md
---
[@sqlrooms/room-store](../index.md) / FileDataSource

# Type Alias: FileDataSource

> **FileDataSource** = `object`

**`Interface`**

Configuration for file-based data sources
FileDataSource

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `tableName` | `string` |
|  `type` | `"file"` |
|  `fileName` | `string` |
|  `loadOptions?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } |

---

---
url: /api/recharts/type-aliases/FunnelProps.md
---
[@sqlrooms/recharts](../index.md) / FunnelProps

# Type Alias: FunnelProps

> **FunnelProps** = `PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`> & [`TrapezoidProps`](TrapezoidProps.md) & `InternalFunnelProps`

---

---
url: /api/cosmos/type-aliases/HoverState.md
---
[@sqlrooms/cosmos](../index.md) / HoverState

# Type Alias: HoverState

> **HoverState** = { `index`: `number`; `position`: \[`number`, `number`]; } | `null`

Represents the state of a hovered point in the graph.
When a point is hovered, contains its index and position coordinates.
When no point is hovered, the state is null.

## Type Declaration

{ `index`: `number`; `position`: \[`number`, `number`]; }

| Name | Type | Description |
| ------ | ------ | ------ |
| `index` | `number` | The index of the hovered point in the graph data array |
| `position` | \[`number`, `number`] | The \[x, y] coordinates of the hovered point relative to the container |

`null`

---

---
url: /api/kepler/type-aliases/KeplerAddDataDialogProps.md
---
[@sqlrooms/kepler](../index.md) / KeplerAddDataDialogProps

# Type Alias: KeplerAddDataDialogProps

> **KeplerAddDataDialogProps** = `object` & [`KeplerS3BrowserProps`](KeplerS3BrowserProps.md)

## Type Declaration

| Name | Type |
| ------ | ------ |
| `addDataModal` | `Pick`<`UseDisclosureReturnValue`, `"isOpen"` | `"onClose"`> |
| `loadTileSet` | `LoadTileSet` |
| `loadFiles()` | (`files`) => `Promise`<`void`> |
| `method?` | [`AddDataMethods`](../enumerations/AddDataMethods.md) |
| `acceptedFormats?` | `string`\[] |

---

---
url: /api/kepler-config/type-aliases/KeplerMapSchema.md
---
[@sqlrooms/kepler-config](../index.md) / KeplerMapSchema

# Type Alias: KeplerMapSchema

> **KeplerMapSchema** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `id` | `string` |
|  `name` | `string` |
|  `config?` | { `version`: `"v1"`; `config`: { `visState`: {\[`key`: `string`]: `unknown`; }; `mapState`: {\[`key`: `string`]: `unknown`; }; `mapStyle`: {\[`key`: `string`]: `unknown`; }; `uiState`: {\[`key`: `string`]: `unknown`; }; }; } |

---

---
url: /api/kepler/type-aliases/KeplerMapSchema.md
---
[@sqlrooms/kepler](../index.md) / KeplerMapSchema

# Type Alias: KeplerMapSchema

> **KeplerMapSchema** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `id` | `string` |
|  `name` | `string` |
|  `config?` | { `version`: `"v1"`; `config`: { `visState`: {\[`key`: `string`]: `unknown`; }; `mapState`: {\[`key`: `string`]: `unknown`; }; `mapStyle`: {\[`key`: `string`]: `unknown`; }; `uiState`: {\[`key`: `string`]: `unknown`; }; }; } |

---

---
url: /api/kepler/type-aliases/KeplerS3BrowserProps.md
---
[@sqlrooms/kepler](../index.md) / KeplerS3BrowserProps

# Type Alias: KeplerS3BrowserProps

> **KeplerS3BrowserProps** = `object`

## Properties

### listS3Files()

> **listS3Files**: (`args`) => `Promise`<`S3FileOrDirectory`\[]>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `args` | { `s3Config`: `S3Config`; `prefix`: `string`; } |
| `args.s3Config` | `S3Config` |
| `args.prefix` | `string` |

#### Returns

`Promise`<`S3FileOrDirectory`\[]>

***

### loadS3Files()

> **loadS3Files**: (`args`) => `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `args` | { `s3Config`: `S3Config`; `prefix`: `string`; `files`: `string`\[]; } |
| `args.s3Config` | `S3Config` |
| `args.prefix` | `string` |
| `args.files` | `string`\[] |

#### Returns

`Promise`<`void`>

***

### s3Browser

> **s3Browser**: `S3BrowserState`\[`"s3Browser"`]

***

### saveS3Credentials()

> **saveS3Credentials**: (`s3Config`) => `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `s3Config` | `S3Config` |

#### Returns

`Promise`<`void`>

***

### loadS3Credentials()

> **loadS3Credentials**: () => `Promise`<`S3Credentials`\[]>

#### Returns

`Promise`<`S3Credentials`\[]>

***

### deleteS3Credentials()

> **deleteS3Credentials**: (`id`) => `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `id` | `string` |

#### Returns

`Promise`<`void`>

---

---
url: /api/kepler-config/type-aliases/KeplerSliceConfig.md
---
[@sqlrooms/kepler-config](../index.md) / KeplerSliceConfig

# Type Alias: KeplerSliceConfig

> **KeplerSliceConfig** = `object`

## Type Declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `currentMapId` | `string` | - |
|  `maps` | `object`\[] | - |
|  `openTabs` | `string`\[] | IDs of maps that are currently open (visible in tab strip). |

---

---
url: /api/kepler/type-aliases/KeplerSliceConfig.md
---
[@sqlrooms/kepler](../index.md) / KeplerSliceConfig

# Type Alias: KeplerSliceConfig

> **KeplerSliceConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `currentMapId` | `string` |
|  `maps` | `object`\[] |
|  `openTabs` | `string`\[] |

---

---
url: /api/kepler/type-aliases/KeplerSliceState.md
---
[@sqlrooms/kepler](../index.md) / KeplerSliceState

# Type Alias: KeplerSliceState

> **KeplerSliceState** = `object`

## Properties

### kepler

> **kepler**: `object`

| Name | Type | Description |
| ------ | ------ | ------ |
| `config` | [`KeplerSliceConfig`](KeplerSliceConfig.md) | - |
| `map` | `KeplerGlReduxState` | - |
| `basicKeplerProps?` | `Partial`<`KeplerGLBasicProps`> | - |
| `forwardDispatch` | {\[`mapId`: `string`]: `Dispatch`<`AnyAction`>; } | - |
| `initialize()` | () => `Promise`<`void`> | - |
| `setConfig()` | (`config`) => `void` | - |
| `syncKeplerDatasets()` | () => `Promise`<`void`> | Update the datasets in all the kepler map so that they correspond to the latest table schemas in the database |
| `addLayer()` | (`mapId`, `layer`, `datasetId`) => `void` | - |
| `addTableToMap()` | (`mapId`, `tableName`, `options?`) => `Promise`<`void`> | - |
| `addTileSetToMap()` | (`mapId`, `tableName`, `tileset`, `tileMetadata`) => `void` | - |
| `addConfigToMap()` | (`mapId`, `config`) => `void` | - |
| `removeDatasetFromMaps()` | (`datasetId`) => `void` | - |
| `dispatchAction()` | (`mapId`, `action`) => `void` | - |
| `setCurrentMapId()` | (`mapId`) => `void` | - |
| `createMap()` | (`name?`) => `string` | Create a new map and return the map id |
| `deleteMap()` | (`mapId`) => `void` | - |
| `renameMap()` | (`mapId`, `name`) => `void` | - |
| `closeMap()` | (`mapId`) => `void` | - |
| `setOpenTabs()` | (`tabIds`) => `void` | - |
| `getCurrentMap()` | () => [`KeplerMapSchema`](KeplerMapSchema.md) | `undefined` | - |
| `registerKeplerMapIfNotExists()` | (`mapId`) => `void` | - |
| `__reduxProviderStore` | `ReduxStore`<`KeplerGlReduxState`, `AnyAction`> | `undefined` | - |

---

---
url: /api/recharts/type-aliases/LabelListProps.md
---
[@sqlrooms/recharts](../index.md) / LabelListProps

# Type Alias: LabelListProps\<T>

> **LabelListProps**<`T`> = `SVGProps`<`SVGTextElement`> & `LabelListProps`<`T`>

## Type Parameters

| Type Parameter |
| ------ |
| `T` *extends* `Data` |

---

---
url: /api/recharts/type-aliases/LabelProps.md
---
[@sqlrooms/recharts](../index.md) / LabelProps

# Type Alias: LabelProps

> **LabelProps** = `Omit`<`SVGProps`<`SVGTextElement`>, `"viewBox"`> & `LabelProps`

---

---
url: /api/recharts/type-aliases/LayerProps.md
---
[@sqlrooms/recharts](../index.md) / LayerProps

# Type Alias: LayerProps

> **LayerProps** = `SVGAttributes`<`SVGGElement`> & `LayerProps`

---

---
url: /api/layout-config/type-aliases/LayoutConfig.md
---
[@sqlrooms/layout-config](../index.md) / LayoutConfig

# Type Alias: LayoutConfig

> **LayoutConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) | `null` |
|  `pinned?` | `string`\[] |
|  `fixed?` | `string`\[] |

---

---
url: /api/layout/type-aliases/LayoutConfig.md
---
[@sqlrooms/layout](../index.md) / LayoutConfig

# Type Alias: LayoutConfig

> **LayoutConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) | `null` |
|  `pinned?` | `string`\[] |
|  `fixed?` | `string`\[] |

---

---
url: /api/room-config/type-aliases/LayoutConfig.md
---
[@sqlrooms/room-config](../index.md) / LayoutConfig

# Type Alias: LayoutConfig

> **LayoutConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) | `null` |
|  `pinned?` | `string`\[] |
|  `fixed?` | `string`\[] |

---

---
url: /api/room-shell/type-aliases/LayoutConfig.md
---
[@sqlrooms/room-shell](../index.md) / LayoutConfig

# Type Alias: LayoutConfig

> **LayoutConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) | `null` |
|  `pinned?` | `string`\[] |
|  `fixed?` | `string`\[] |

---

---
url: /api/room-store/type-aliases/LayoutConfig.md
---
[@sqlrooms/room-store](../index.md) / LayoutConfig

# Type Alias: LayoutConfig

> **LayoutConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) | `null` |
|  `pinned?` | `string`\[] |
|  `fixed?` | `string`\[] |

---

---
url: /api/layout/type-aliases/LayoutSliceConfig.md
---
[@sqlrooms/layout](../index.md) / LayoutSliceConfig

# Type Alias: LayoutSliceConfig

> **LayoutSliceConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) | `null` |
|  `pinned?` | `string`\[] |
|  `fixed?` | `string`\[] |

---

---
url: /api/layout/type-aliases/LayoutSliceState.md
---
[@sqlrooms/layout](../index.md) / LayoutSliceState

# Type Alias: LayoutSliceState

> **LayoutSliceState** = `object`

## Properties

### layout

> **layout**: `object`

| Name | Type |
| ------ | ------ |
| `config` | [`LayoutSliceConfig`](LayoutSliceConfig.md) |
| `panels` | `Record`<`string`, [`RoomPanelInfo`](RoomPanelInfo.md)> |
| `setConfig()` | (`layout`) => |
| `setLayout()` | (`layout`) => |
| `togglePanel()` | (`panel`, `show?`) => `void` |
| `togglePanelPin()` | (`panel`) => `void` |

---

---
url: /api/layout-config/type-aliases/LayoutTypes.md
---
[@sqlrooms/layout-config](../index.md) / LayoutTypes

# Type Alias: LayoutTypes

> **LayoutTypes** = `"row"` | `"column"`

---

---
url: /api/layout/type-aliases/LayoutTypes.md
---
[@sqlrooms/layout](../index.md) / LayoutTypes

# Type Alias: LayoutTypes

> **LayoutTypes** = `"row"` | `"column"`

---

---
url: /api/room-config/type-aliases/LayoutTypes.md
---
[@sqlrooms/room-config](../index.md) / LayoutTypes

# Type Alias: LayoutTypes

> **LayoutTypes** = `"row"` | `"column"`

---

---
url: /api/room-shell/type-aliases/LayoutTypes.md
---
[@sqlrooms/room-shell](../index.md) / LayoutTypes

# Type Alias: LayoutTypes

> **LayoutTypes** = `"row"` | `"column"`

---

---
url: /api/room-store/type-aliases/LayoutTypes.md
---
[@sqlrooms/room-store](../index.md) / LayoutTypes

# Type Alias: LayoutTypes

> **LayoutTypes** = `"row"` | `"column"`

---

---
url: /api/recharts/type-aliases/LegendProps.md
---
[@sqlrooms/recharts](../index.md) / LegendProps

# Type Alias: LegendProps

> **LegendProps** = [`DefaultLegendContentProps`](DefaultLegendContentProps.md) & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `wrapperStyle?` | `CSSProperties` |
| `chartWidth?` | `number` |
| `chartHeight?` | `number` |
| `width?` | `number` |
| `height?` | `number` |
| `margin?` | { `top?`: `number`; `left?`: `number`; `bottom?`: `number`; `right?`: `number`; } |
| `payloadUniqBy?` | `UniqueOption`<`Payload`> |
| `onBBoxUpdate()?` | (`box`) => `void` |

---

---
url: /api/recharts/type-aliases/LegendType.md
---
[@sqlrooms/recharts](../index.md) / LegendType

# Type Alias: LegendType

> **LegendType** = `"plainline"` | `"line"` | `"square"` | `"rect"` | `"circle"` | `"cross"` | `"diamond"` | `"star"` | `"triangle"` | `"wye"` | `"none"`

---

---
url: /api/recharts/type-aliases/LineProps.md
---
[@sqlrooms/recharts](../index.md) / LineProps

# Type Alias: LineProps

> **LineProps** = `Omit`<[`CurveProps`](CurveProps.md), `"points"` | `"pathRef"`> & `LineProps`

---

---
url: /api/monaco-editor/type-aliases/LoaderConfig.md
---
[@sqlrooms/monaco-editor](../index.md) / LoaderConfig

# Type Alias: LoaderConfig

> **LoaderConfig** = `Parameters`<*typeof* `loader.config`>\[`0`]

---

---
url: /api/room-config/type-aliases/LoadFile.md
---
[@sqlrooms/room-config](../index.md) / LoadFile

# Type Alias: LoadFile

> **LoadFile** = `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"` | `"st_read"`

Enum representing supported file loading methods

---

---
url: /api/room-shell/type-aliases/LoadFile.md
---
[@sqlrooms/room-shell](../index.md) / LoadFile

# Type Alias: LoadFile

> **LoadFile** = `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"` | `"st_read"`

Enum representing supported file loading methods

---

---
url: /api/room-store/type-aliases/LoadFile.md
---
[@sqlrooms/room-store](../index.md) / LoadFile

# Type Alias: LoadFile

> **LoadFile** = `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"` | `"st_read"`

Enum representing supported file loading methods

---

---
url: /api/duckdb/type-aliases/LoadFileOptions.md
---
[@sqlrooms/duckdb](../index.md) / LoadFileOptions

# Type Alias: LoadFileOptions

> **LoadFileOptions** = {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }

Union type of all possible file loading options
Discriminated union based on the 'method' field

---

---
url: /api/room-config/type-aliases/LoadFileOptions.md
---
[@sqlrooms/room-config](../index.md) / LoadFileOptions

# Type Alias: LoadFileOptions

> **LoadFileOptions** = {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }

Union type of all possible file loading options
Discriminated union based on the 'method' field

## Type Declaration

{\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }

## Index Signature

\[`key`: `string`]: `unknown`

| Name | Type | Description |
| ------ | ------ | ------ |
| `schema?` | `string` | Schema to load the table into |
| `select?` | `string`\[] | Columns to select, defaults to \['\*'] |
| `where?` | `string` | WHERE clause filter condition |
| `view?` | `boolean` | Whether to create as a view |
| `temp?` | `boolean` | Whether to create as a temporary table |
| `replace?` | `boolean` | Whether to replace existing table |
| `options?` | `string` | `Record`<`string`, `unknown`> | `string`\[] | Additional options for spatial data loading |
| `method` | `"st_read"` | - |

{\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; }

## Index Signature

\[`key`: `string`]: `unknown`

| Name | Type | Description |
| ------ | ------ | ------ |
| `schema?` | `string` | Schema to load the table into |
| `select?` | `string`\[] | Columns to select, defaults to \['\*'] |
| `where?` | `string` | WHERE clause filter condition |
| `view?` | `boolean` | Whether to create as a view |
| `temp?` | `boolean` | Whether to create as a temporary table |
| `replace?` | `boolean` | Whether to replace existing table |
| `method` | `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"` | - |

---

---
url: /api/room-shell/type-aliases/LoadFileOptions.md
---
[@sqlrooms/room-shell](../index.md) / LoadFileOptions

# Type Alias: LoadFileOptions

> **LoadFileOptions** = {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }

Union type of all possible file loading options
Discriminated union based on the 'method' field

---

---
url: /api/room-store/type-aliases/LoadFileOptions.md
---
[@sqlrooms/room-store](../index.md) / LoadFileOptions

# Type Alias: LoadFileOptions

> **LoadFileOptions** = {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; }

Union type of all possible file loading options
Discriminated union based on the 'method' field

---

---
url: /api/kepler/type-aliases/LoadTileSet.md
---
[@sqlrooms/kepler](../index.md) / LoadTileSet

# Type Alias: LoadTileSet()

> **LoadTileSet** = (`args`) => `Promise`<`void`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `args` | { `tileset`: { `name`: `string`; `type`: `string`; `metadata`: `Record`<`string`, `any`>; }; `metadata?`: `Record`<`string`, `any`>; } |
| `args.tileset` | { `name`: `string`; `type`: `string`; `metadata`: `Record`<`string`, `any`>; } |
| `args.tileset.name` | `string` |
| `args.tileset.type` | `string` |
| `args.tileset.metadata` | `Record`<`string`, `any`> |
| `args.metadata?` | `Record`<`string`, `any`> |

## Returns

`Promise`<`void`>

---

---
url: /api/layout-config/type-aliases/MosaicLayoutConfig.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutConfig

# Type Alias: MosaicLayoutConfig

> **MosaicLayoutConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) | `null` |
|  `pinned?` | `string`\[] |
|  `fixed?` | `string`\[] |

---

---
url: /api/layout/type-aliases/MosaicLayoutConfig.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutConfig

# Type Alias: MosaicLayoutConfig

> **MosaicLayoutConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) | `null` |
|  `pinned?` | `string`\[] |
|  `fixed?` | `string`\[] |

---

---
url: /api/room-config/type-aliases/MosaicLayoutConfig.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutConfig

# Type Alias: MosaicLayoutConfig

> **MosaicLayoutConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) | `null` |
|  `pinned?` | `string`\[] |
|  `fixed?` | `string`\[] |

---

---
url: /api/room-shell/type-aliases/MosaicLayoutConfig.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutConfig

# Type Alias: MosaicLayoutConfig

> **MosaicLayoutConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) | `null` |
|  `pinned?` | `string`\[] |
|  `fixed?` | `string`\[] |

---

---
url: /api/room-store/type-aliases/MosaicLayoutConfig.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutConfig

# Type Alias: MosaicLayoutConfig

> **MosaicLayoutConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) | `null` |
|  `pinned?` | `string`\[] |
|  `fixed?` | `string`\[] |

---

---
url: /api/layout-config/type-aliases/MosaicLayoutDirection.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutDirection

# Type Alias: MosaicLayoutDirection

> **MosaicLayoutDirection** = `"row"` | `"column"`

---

---
url: /api/layout/type-aliases/MosaicLayoutDirection.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutDirection

# Type Alias: MosaicLayoutDirection

> **MosaicLayoutDirection** = `"row"` | `"column"`

---

---
url: /api/room-config/type-aliases/MosaicLayoutDirection.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutDirection

# Type Alias: MosaicLayoutDirection

> **MosaicLayoutDirection** = `"row"` | `"column"`

---

---
url: /api/room-shell/type-aliases/MosaicLayoutDirection.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutDirection

# Type Alias: MosaicLayoutDirection

> **MosaicLayoutDirection** = `"row"` | `"column"`

---

---
url: /api/room-store/type-aliases/MosaicLayoutDirection.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutDirection

# Type Alias: MosaicLayoutDirection

> **MosaicLayoutDirection** = `"row"` | `"column"`

---

---
url: /api/layout-config/type-aliases/MosaicLayoutNode.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutNode

# Type Alias: MosaicLayoutNode

> **MosaicLayoutNode** = `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md)

---

---
url: /api/layout/type-aliases/MosaicLayoutNode.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutNode

# Type Alias: MosaicLayoutNode

> **MosaicLayoutNode** = `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md)

---

---
url: /api/room-config/type-aliases/MosaicLayoutNode.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutNode

# Type Alias: MosaicLayoutNode

> **MosaicLayoutNode** = `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md)

---

---
url: /api/room-shell/type-aliases/MosaicLayoutNode.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutNode

# Type Alias: MosaicLayoutNode

> **MosaicLayoutNode** = `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md)

---

---
url: /api/room-store/type-aliases/MosaicLayoutNode.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutNode

# Type Alias: MosaicLayoutNode

> **MosaicLayoutNode** = `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md)

---

---
url: /api/layout-config/type-aliases/MosaicLayoutNodeKey.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutNodeKey

# Type Alias: MosaicLayoutNodeKey

> **MosaicLayoutNodeKey** = `string`

---

---
url: /api/layout/type-aliases/MosaicLayoutNodeKey.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutNodeKey

# Type Alias: MosaicLayoutNodeKey

> **MosaicLayoutNodeKey** = `string`

---

---
url: /api/room-config/type-aliases/MosaicLayoutNodeKey.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutNodeKey

# Type Alias: MosaicLayoutNodeKey

> **MosaicLayoutNodeKey** = `string`

---

---
url: /api/room-shell/type-aliases/MosaicLayoutNodeKey.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutNodeKey

# Type Alias: MosaicLayoutNodeKey

> **MosaicLayoutNodeKey** = `string`

---

---
url: /api/room-store/type-aliases/MosaicLayoutNodeKey.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutNodeKey

# Type Alias: MosaicLayoutNodeKey

> **MosaicLayoutNodeKey** = `string`

---

---
url: /api/layout-config/type-aliases/MosaicLayoutParent.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutParent

# Type Alias: MosaicLayoutParent

> **MosaicLayoutParent** = `z.infer`<*typeof* `BaseMosaicLayoutParent`> & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `first` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |
| `second` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |

---

---
url: /api/layout/type-aliases/MosaicLayoutParent.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutParent

# Type Alias: MosaicLayoutParent

> **MosaicLayoutParent** = `z.infer`<*typeof* `BaseMosaicLayoutParent`> & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `first` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |
| `second` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |

---

---
url: /api/room-config/type-aliases/MosaicLayoutParent.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutParent

# Type Alias: MosaicLayoutParent

> **MosaicLayoutParent** = `z.infer`<*typeof* `BaseMosaicLayoutParent`> & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `first` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |
| `second` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |

---

---
url: /api/room-shell/type-aliases/MosaicLayoutParent.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutParent

# Type Alias: MosaicLayoutParent

> **MosaicLayoutParent** = `z.infer`<*typeof* `BaseMosaicLayoutParent`> & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `first` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |
| `second` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |

---

---
url: /api/room-store/type-aliases/MosaicLayoutParent.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutParent

# Type Alias: MosaicLayoutParent

> **MosaicLayoutParent** = `z.infer`<*typeof* `BaseMosaicLayoutParent`> & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `first` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |
| `second` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |

---

---
url: /api/duckdb-core/type-aliases/NodeObject.md
---
[@sqlrooms/duckdb-core](../index.md) / NodeObject

# Type Alias: NodeObject

> **NodeObject** = [`ColumnNodeObject`](ColumnNodeObject.md) | [`TableNodeObject`](TableNodeObject.md) | [`SchemaNodeObject`](SchemaNodeObject.md) | [`DatabaseNodeObject`](DatabaseNodeObject.md)

---

---
url: /api/duckdb/type-aliases/NodeObject.md
---
[@sqlrooms/duckdb](../index.md) / NodeObject

# Type Alias: NodeObject

> **NodeObject** = [`ColumnNodeObject`](ColumnNodeObject.md) | [`TableNodeObject`](TableNodeObject.md) | [`SchemaNodeObject`](SchemaNodeObject.md) | [`DatabaseNodeObject`](DatabaseNodeObject.md)

---

---
url: /api/recharts/type-aliases/PieLabel.md
---
[@sqlrooms/recharts](../index.md) / PieLabel

# Type Alias: PieLabel\<P>

> **PieLabel**<`P`> = `ReactElement`<`SVGElement`> | (`props`) => `ReactNode` | `ReactElement`<`SVGElement`> | `SVGProps`<`SVGTextElement`> & `object` | `boolean`

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `P` | `any` |

---

---
url: /api/recharts/type-aliases/PieProps.md
---
[@sqlrooms/recharts](../index.md) / PieProps

# Type Alias: PieProps

> **PieProps** = `PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`> & `PieProps`

---

---
url: /api/recharts/type-aliases/PolarAngleAxisProps.md
---
[@sqlrooms/recharts](../index.md) / PolarAngleAxisProps

# Type Alias: PolarAngleAxisProps

> **PolarAngleAxisProps** = `PresentationAttributesAdaptChildEvent`<`any`, `SVGTextElement`> & `PolarAngleAxisProps`

---

---
url: /api/recharts/type-aliases/PolarGridProps.md
---
[@sqlrooms/recharts](../index.md) / PolarGridProps

# Type Alias: PolarGridProps

> **PolarGridProps** = `SVGProps`<`SVGPathElement`> & `PolarGridProps`

---

---
url: /api/recharts/type-aliases/PolarRadiusAxisProps.md
---
[@sqlrooms/recharts](../index.md) / PolarRadiusAxisProps

# Type Alias: PolarRadiusAxisProps

> **PolarRadiusAxisProps** = `PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`> & `PolarRadiusAxisProps`

---

---
url: /api/recharts/type-aliases/PolygonProps.md
---
[@sqlrooms/recharts](../index.md) / PolygonProps

# Type Alias: PolygonProps

> **PolygonProps** = `Omit`<`SVGProps`<`SVGPolygonElement`>, `"points"`> & `PolygonProps`

---

---
url: /api/utils/type-aliases/ProgressInfo.md
---
[@sqlrooms/utils](../index.md) / ProgressInfo

# Type Alias: ProgressInfo

> **ProgressInfo** = `object`

Represents progress information for file operations

## Properties

### loaded

> **loaded**: `number`

***

### total

> **total**: `number`

***

### ratio

> **ratio**: `number`

---

---
url: /api/duckdb-core/type-aliases/QualifiedTableName.md
---
[@sqlrooms/duckdb-core](../index.md) / QualifiedTableName

# Type Alias: QualifiedTableName

> **QualifiedTableName** = `object`

## Properties

### database?

> `optional` **database**: `string`

***

### schema?

> `optional` **schema**: `string`

***

### table

> **table**: `string`

***

### toString()

> **toString**: () => `string`

#### Returns

`string`

---

---
url: /api/duckdb/type-aliases/QualifiedTableName.md
---
[@sqlrooms/duckdb](../index.md) / QualifiedTableName

# Type Alias: QualifiedTableName

> **QualifiedTableName** = `object`

## Properties

### database?

> `optional` **database**: `string`

***

### schema?

> `optional` **schema**: `string`

***

### table

> **table**: `string`

***

### toString()

> **toString**: () => `string`

#### Returns

`string`

---

---
url: /api/data-table/type-aliases/QueryDataTableProps.md
---
[@sqlrooms/data-table](../index.md) / QueryDataTableProps

# Type Alias: QueryDataTableProps

> **QueryDataTableProps** = `object`

## Properties

### className?

> `optional` **className**: `string`

***

### fontSize?

> `optional` **fontSize**: [`DataTablePaginatedProps`](DataTablePaginatedProps.md)<`any`>\[`"fontSize"`]

Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base

***

### query

> **query**: `string`

***

### queryKeyComponents?

> `optional` **queryKeyComponents**: `unknown`\[]

***

### renderActions()?

> `optional` **renderActions**: (`query`) => `React.ReactNode`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `query` | `string` |

#### Returns

`React.ReactNode`

---

---
url: /api/duckdb-core/type-aliases/QueryHandle.md
---
[@sqlrooms/duckdb-core](../index.md) / QueryHandle

# Type Alias: QueryHandle\<T>

> **QueryHandle**<`T`> = `PromiseLike`<`T`> & `object`

Handle for managing query execution and cancellation.

It is **Promise-like**, so you can either:

• `await handle` – the most ergonomic form, or
• `await handle.result` – kept for backwards-compatibility.

Additional capabilities:
• Standard Promise API: `.then()`, `.catch()`, `.finally()`
• `handle.cancel()` – cancel the running query.
• `handle.signal` – `AbortSignal` that fires when the query is cancelled.

## Type Declaration

| Name | Type | Description |
| ------ | ------ | ------ |
| `result` | `Promise`<`T`> | Promise that resolves with query results |
| `cancel()` | () => `Promise`<`void`> | Method to cancel the query with optional cleanup. This provides a clean abstraction over the underlying cancellation mechanism. |
| `signal` | `AbortSignal` | Read-only access to the abort signal for composability. Key benefits: - **Event-driven**: Listen for abort events to update UI or perform cleanup - **Integration**: Use with other Web APIs like fetch() that accept AbortSignal - **Status checking**: Check if query is already cancelled with signal.aborted **Example** `// Listen for cancellation events handle.signal.addEventListener('abort', () => { console.log('Query cancelled'); updateUI('Operation cancelled'); }); // Check cancellation status if (handle.signal.aborted) { console.log('Query was already cancelled'); } // Use with other APIs const response = await fetch('/api/data', { signal: handle.signal });` |
| `catch` | `Promise`<`T`>\[`"catch"`] | Attach a callback for only the rejection of the Promise |
| `finally` | `Promise`<`T`>\[`"finally"`] | Attach a callback that's invoked when the Promise is settled (fulfilled or rejected) |

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `any` |

## Example

```typescript
// Simple usage
const handle = connector.query('SELECT * FROM table');
const table = await handle; // no .result needed

// With cancellation
const controller = new AbortController();
const handle = connector.query('SELECT * FROM large_table', { signal: controller.signal });
setTimeout(() => controller.abort(), 5000);

// Manual cancel via the handle
const h = connector.query('SELECT * FROM table');
await someCondition;
await h.cancel();

// Composable cancellation (multiple queries, one controller)
const controller = new AbortController();
const h1 = connector.query('SELECT * FROM table1', { signal: controller.signal });
const h2 = connector.query('SELECT * FROM table2', { signal: controller.signal });
// Later...
controller.abort(); // Cancels h1 and h2 together

// Using Promise utilities
const [t1, t2] = await Promise.all([
  connector.query('select 1'),
  connector.query('select 2')
]);
```

---

---
url: /api/duckdb-node/type-aliases/QueryHandle.md
---
[@sqlrooms/duckdb-node](../index.md) / QueryHandle

# Type Alias: QueryHandle\<T>

> **QueryHandle**<`T`> = `PromiseLike`<`T`> & `object`

Handle for managing query execution and cancellation.

It is **Promise-like**, so you can either:

• `await handle` – the most ergonomic form, or
• `await handle.result` – kept for backwards-compatibility.

Additional capabilities:
• Standard Promise API: `.then()`, `.catch()`, `.finally()`
• `handle.cancel()` – cancel the running query.
• `handle.signal` – `AbortSignal` that fires when the query is cancelled.

## Type Declaration

| Name | Type | Description |
| ------ | ------ | ------ |
| `result` | `Promise`<`T`> | Promise that resolves with query results |
| `cancel()` | () => `Promise`<`void`> | Method to cancel the query with optional cleanup. This provides a clean abstraction over the underlying cancellation mechanism. |
| `signal` | `AbortSignal` | Read-only access to the abort signal for composability. Key benefits: - **Event-driven**: Listen for abort events to update UI or perform cleanup - **Integration**: Use with other Web APIs like fetch() that accept AbortSignal - **Status checking**: Check if query is already cancelled with signal.aborted **Example** `// Listen for cancellation events handle.signal.addEventListener('abort', () => { console.log('Query cancelled'); updateUI('Operation cancelled'); }); // Check cancellation status if (handle.signal.aborted) { console.log('Query was already cancelled'); } // Use with other APIs const response = await fetch('/api/data', { signal: handle.signal });` |
| `catch` | `Promise`<`T`>\[`"catch"`] | Attach a callback for only the rejection of the Promise |
| `finally` | `Promise`<`T`>\[`"finally"`] | Attach a callback that's invoked when the Promise is settled (fulfilled or rejected) |

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `any` |

## Example

```typescript
// Simple usage
const handle = connector.query('SELECT * FROM table');
const table = await handle; // no .result needed

// With cancellation
const controller = new AbortController();
const handle = connector.query('SELECT * FROM large_table', { signal: controller.signal });
setTimeout(() => controller.abort(), 5000);

// Manual cancel via the handle
const h = connector.query('SELECT * FROM table');
await someCondition;
await h.cancel();

// Composable cancellation (multiple queries, one controller)
const controller = new AbortController();
const h1 = connector.query('SELECT * FROM table1', { signal: controller.signal });
const h2 = connector.query('SELECT * FROM table2', { signal: controller.signal });
// Later...
controller.abort(); // Cancels h1 and h2 together

// Using Promise utilities
const [t1, t2] = await Promise.all([
  connector.query('select 1'),
  connector.query('select 2')
]);
```

---

---
url: /api/duckdb/type-aliases/QueryHandle.md
---
[@sqlrooms/duckdb](../index.md) / QueryHandle

# Type Alias: QueryHandle\<T>

> **QueryHandle**<`T`> = `PromiseLike`<`T`> & `object`

Handle for managing query execution and cancellation.

It is **Promise-like**, so you can either:

• `await handle` – the most ergonomic form, or
• `await handle.result` – kept for backwards-compatibility.

Additional capabilities:
• Standard Promise API: `.then()`, `.catch()`, `.finally()`
• `handle.cancel()` – cancel the running query.
• `handle.signal` – `AbortSignal` that fires when the query is cancelled.

## Type Declaration

| Name | Type | Description |
| ------ | ------ | ------ |
| `result` | `Promise`<`T`> | Promise that resolves with query results |
| `cancel()` | () => `Promise`<`void`> | Method to cancel the query with optional cleanup. This provides a clean abstraction over the underlying cancellation mechanism. |
| `signal` | `AbortSignal` | Read-only access to the abort signal for composability. Key benefits: - **Event-driven**: Listen for abort events to update UI or perform cleanup - **Integration**: Use with other Web APIs like fetch() that accept AbortSignal - **Status checking**: Check if query is already cancelled with signal.aborted **Example** `// Listen for cancellation events handle.signal.addEventListener('abort', () => { console.log('Query cancelled'); updateUI('Operation cancelled'); }); // Check cancellation status if (handle.signal.aborted) { console.log('Query was already cancelled'); } // Use with other APIs const response = await fetch('/api/data', { signal: handle.signal });` |
| `catch` | `Promise`<`T`>\[`"catch"`] | Attach a callback for only the rejection of the Promise |
| `finally` | `Promise`<`T`>\[`"finally"`] | Attach a callback that's invoked when the Promise is settled (fulfilled or rejected) |

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `any` |

## Example

```typescript
// Simple usage
const handle = connector.query('SELECT * FROM table');
const table = await handle; // no .result needed

// With cancellation
const controller = new AbortController();
const handle = connector.query('SELECT * FROM large_table', { signal: controller.signal });
setTimeout(() => controller.abort(), 5000);

// Manual cancel via the handle
const h = connector.query('SELECT * FROM table');
await someCondition;
await h.cancel();

// Composable cancellation (multiple queries, one controller)
const controller = new AbortController();
const h1 = connector.query('SELECT * FROM table1', { signal: controller.signal });
const h2 = connector.query('SELECT * FROM table2', { signal: controller.signal });
// Later...
controller.abort(); // Cancels h1 and h2 together

// Using Promise utilities
const [t1, t2] = await Promise.all([
  connector.query('select 1'),
  connector.query('select 2')
]);
```

---

---
url: /api/ai-rag/type-aliases/QueryOptions.md
---
[@sqlrooms/ai-rag](../index.md) / QueryOptions

# Type Alias: QueryOptions

> **QueryOptions** = `object`

## Properties

### topK?

> `optional` **topK**: `number`

Number of results to return (default: 5)

***

### database?

> `optional` **database**: `string`

Database to search (defaults to first database)

***

### hybrid?

> `optional` **hybrid**: `boolean` | `number`

Enable hybrid search combining vector similarity with full-text search (BM25).

* true: Use hybrid search with default settings (k=60)
* false: Use pure vector search only
* number: Use hybrid search with custom k value for RRF
  Default: true

---

---
url: /api/sql-editor/type-aliases/QueryResult.md
---
[@sqlrooms/sql-editor](../index.md) / QueryResult

# Type Alias: QueryResult

> **QueryResult** = { `status`: `"loading"`; `isBeingAborted?`: `boolean`; `controller`: `AbortController`; } | { `status`: `"aborted"`; } | { `status`: `"error"`; `error`: `string`; } | { `status`: `"success"`; `type`: `"pragma"` | `"explain"` | `"select"`; `result`: `arrow.Table` | `undefined`; `query`: `string`; `lastQueryStatement`: `string`; } | { `status`: `"success"`; `type`: `"exec"`; `query`: `string`; `lastQueryStatement`: `string`; }

---

---
url: /api/ai/type-aliases/QueryToolAdditionalData.md
---
[@sqlrooms/ai](../index.md) / QueryToolAdditionalData

# Type Alias: QueryToolAdditionalData

> **QueryToolAdditionalData** = `object`

## Properties

### title

> **title**: `string`

***

### sqlQuery

> **sqlQuery**: `string`

---

---
url: /api/ai/type-aliases/QueryToolLlmResult.md
---
[@sqlrooms/ai](../index.md) / QueryToolLlmResult

# Type Alias: QueryToolLlmResult

> **QueryToolLlmResult** = `object`

## Properties

### success

> **success**: `boolean`

***

### data?

> `optional` **data**: `object`

| Name | Type |
| ------ | ------ |
| `type` | `"query"` |
| `summary` | `Record`<`string`, `unknown`>\[] | `null` |
| `firstRows?` | `Record`<`string`, `unknown`>\[] |

***

### details?

> `optional` **details**: `string`

***

### errorMessage?

> `optional` **errorMessage**: `string`

---

---
url: /api/ai/type-aliases/QueryToolOptions.md
---
[@sqlrooms/ai](../index.md) / QueryToolOptions

# Type Alias: QueryToolOptions

> **QueryToolOptions** = `object`

## Properties

### readOnly?

> `optional` **readOnly**: `boolean`

***

### autoSummary?

> `optional` **autoSummary**: `boolean`

***

### numberOfRowsToShareWithLLM?

> `optional` **numberOfRowsToShareWithLLM**: `number`

---

---
url: /api/ai/type-aliases/QueryToolParameters.md
---
[@sqlrooms/ai](../index.md) / QueryToolParameters

# Type Alias: QueryToolParameters

> **QueryToolParameters** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"query"` |
|  `sqlQuery` | `string` |
|  `reasoning` | `string` |

---

---
url: /api/recharts/type-aliases/RadarProps.md
---
[@sqlrooms/recharts](../index.md) / RadarProps

# Type Alias: RadarProps

> **RadarProps** = `Omit`<`SVGProps`<`SVGElement`>, `"onMouseEnter"` | `"onMouseLeave"` | `"points"`> & `RadarProps`

---

---
url: /api/recharts/type-aliases/RadialBarProps.md
---
[@sqlrooms/recharts](../index.md) / RadialBarProps

# Type Alias: RadialBarProps

> **RadialBarProps** = `PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`> & `InternalRadialBarProps`

---

---
url: /api/ai-rag/type-aliases/RagSliceState.md
---
[@sqlrooms/ai-rag](../index.md) / RagSliceState

# Type Alias: RagSliceState

> **RagSliceState** = `object`

## Properties

### rag

> **rag**: `object`

| Name | Type | Description |
| ------ | ------ | ------ |
| `initialize()` | () => `Promise`<`void`> | Initialize RAG by attaching all embedding databases and validating metadata |
| `queryEmbeddings()` | (`queryEmbedding`, `options?`) => `Promise`<[`EmbeddingResult`](EmbeddingResult.md)\[]> | Query embeddings using a pre-computed embedding vector |
| `queryByText()` | (`queryText`, `options?`) => `Promise`<[`EmbeddingResult`](EmbeddingResult.md)\[]> | Query embeddings using text. Uses the embedding provider configured for the specified database. By default, performs hybrid search combining vector similarity with full-text search. **Throws** Error if database not found or no embedding provider configured |
| `getMetadata()` | (`databaseName`) => `Promise`<[`DatabaseMetadata`](DatabaseMetadata.md) | `null`> | Get metadata for a specific database |
| `listDatabases()` | () => `string`\[] | List all attached embedding databases |

---

---
url: /api/ai-rag/type-aliases/RagToolAdditionalData.md
---
[@sqlrooms/ai-rag](../index.md) / RagToolAdditionalData

# Type Alias: RagToolAdditionalData

> **RagToolAdditionalData** = `Record`<`string`, `never`>

---

---
url: /api/ai-rag/type-aliases/RagToolContext.md
---
[@sqlrooms/ai-rag](../index.md) / RagToolContext

# Type Alias: RagToolContext

> **RagToolContext** = `unknown`

---

---
url: /api/ai-rag/type-aliases/RagToolLlmResult.md
---
[@sqlrooms/ai-rag](../index.md) / RagToolLlmResult

# Type Alias: RagToolLlmResult

> **RagToolLlmResult** = `object`

## Properties

### success

> **success**: `boolean`

***

### error?

> `optional` **error**: `string`

***

### query?

> `optional` **query**: `string`

***

### database?

> `optional` **database**: `string`

***

### results?

> `optional` **results**: `object`\[]

| Name | Type |
| ------ | ------ |
| `text` | `string` |
| `score` | `number` |
| `metadata?` | `Record`<`string`, `unknown`> |

***

### context?

> `optional` **context**: `string`

***

### details?

> `optional` **details**: `string`

---

---
url: /api/ai-rag/type-aliases/RagToolParameters.md
---
[@sqlrooms/ai-rag](../index.md) / RagToolParameters

# Type Alias: RagToolParameters

> **RagToolParameters** = `object`

Zod schema for the RAG tool parameters

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `query` | `string` |
|  `database?` | `string` |
|  `topK` | `number` |

---

---
url: /api/recharts/type-aliases/RectangleProps.md
---
[@sqlrooms/recharts](../index.md) / RectangleProps

# Type Alias: RectangleProps

> **RectangleProps** = `Omit`<`SVGProps`<`SVGPathElement`>, `"radius"`> & `RectangleProps`

---

---
url: /api/recharts/type-aliases/ReferenceAreaProps.md
---
[@sqlrooms/recharts](../index.md) / ReferenceAreaProps

# Type Alias: ReferenceAreaProps

> **ReferenceAreaProps** = [`RectangleProps`](RectangleProps.md) & `ReferenceAreaProps`

---

---
url: /api/recharts/type-aliases/ReferenceDotProps.md
---
[@sqlrooms/recharts](../index.md) / ReferenceDotProps

# Type Alias: ReferenceDotProps

> **ReferenceDotProps** = [`DotProps`](DotProps.md) & `ReferenceDotProps`

---

---
url: /api/recharts/type-aliases/ReferenceLineProps.md
---
[@sqlrooms/recharts](../index.md) / ReferenceLineProps

# Type Alias: ReferenceLineProps

> **ReferenceLineProps** = `Omit`<`SVGProps`<`SVGLineElement`>, `"viewBox"`> & `ReferenceLineProps`

This excludes `viewBox` prop from svg for two reasons:

1. The components wants viewBox of object type, and svg wants string
   * so there's a conflict, and the component will throw if it gets string
2. Internally the component calls `filterProps` which filters the viewBox away anyway

---

---
url: /api/room-shell/type-aliases/RoomFileInfo.md
---
[@sqlrooms/room-shell](../index.md) / RoomFileInfo

# Type Alias: RoomFileInfo

> **RoomFileInfo** = `object`

## Properties

### pathname

> **pathname**: `string`

***

### duckdbFileName?

> `optional` **duckdbFileName**: `string`

***

### file?

> `optional` **file**: `File`

***

### size?

> `optional` **size**: `number`

***

### numRows?

> `optional` **numRows**: `number`

---

---
url: /api/room-shell/type-aliases/RoomFileState.md
---
[@sqlrooms/room-shell](../index.md) / RoomFileState

# Type Alias: RoomFileState

> **RoomFileState** = { `status`: `"download"` | `"upload"` | `"done"`; `progress?`: `ProgressInfo`; } | { `status`: `"error"`; `message?`: `string`; }

---

---
url: /api/layout/type-aliases/RoomPanelInfo.md
---
[@sqlrooms/layout](../index.md) / RoomPanelInfo

# Type Alias: RoomPanelInfo

> **RoomPanelInfo** = `object`

## Properties

### title?

> `optional` **title**: `string`

***

### icon?

> `optional` **icon**: `React.ComponentType`<{ `className?`: `string`; }>

***

### component

> **component**: `React.ComponentType`

***

### placement

> **placement**: `"sidebar"` | `"sidebar-bottom"` | `"main"` | `"top-bar"`

---

---
url: /api/room-shell/type-aliases/RoomPanelInfo.md
---
[@sqlrooms/room-shell](../index.md) / RoomPanelInfo

# Type Alias: RoomPanelInfo

> **RoomPanelInfo** = `object`

## Properties

### title?

> `optional` **title**: `string`

***

### icon?

> `optional` **icon**: `React.ComponentType`<{ `className?`: `string`; }>

***

### component

> **component**: `React.ComponentType`

***

### placement

> **placement**: `"sidebar"` | `"sidebar-bottom"` | `"main"` | `"top-bar"`

---

---
url: /api/room-shell/type-aliases/RoomShellSliceState.md
---
[@sqlrooms/room-shell](../index.md) / RoomShellSliceState

# Type Alias: RoomShellSliceState

> **RoomShellSliceState** = `object` & `DuckDbSliceState` & `LayoutSliceState`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `initialize()?` | () => `Promise`<`void`> |
| `room` | [`BaseRoomStoreState`](BaseRoomStoreState.md)\[`"room"`] & `object` |

---

---
url: /api/room-shell/type-aliases/RoomStateProviderProps.md
---
[@sqlrooms/room-shell](../index.md) / RoomStateProviderProps

# Type Alias: RoomStateProviderProps\<RS>

> **RoomStateProviderProps**<`RS`> = `React.PropsWithChildren`<{ `roomStore?`: [`BaseRoomStore`](BaseRoomStore.md)<`RS`>; }>

## Type Parameters

| Type Parameter |
| ------ |
| `RS` *extends* [`BaseRoomStoreState`](BaseRoomStoreState.md) |

---

---
url: /api/room-store/type-aliases/RoomStateProviderProps.md
---
[@sqlrooms/room-store](../index.md) / RoomStateProviderProps

# Type Alias: RoomStateProviderProps\<RS>

> **RoomStateProviderProps**<`RS`> = `React.PropsWithChildren`<{ `roomStore?`: [`BaseRoomStore`](BaseRoomStore.md)<`RS`>; }>

## Type Parameters

| Type Parameter |
| ------ |
| `RS` *extends* [`BaseRoomStoreState`](BaseRoomStoreState.md) |

---

---
url: /api/cosmos/type-aliases/RoomStateWithCosmos.md
---
[@sqlrooms/cosmos](../index.md) / RoomStateWithCosmos

# Type Alias: RoomStateWithCosmos

> **RoomStateWithCosmos** = `RoomShellSliceState` & [`CosmosSliceState`](CosmosSliceState.md)

Combined type representing the full room state including Cosmos functionality.
Merges the base room state with Cosmos-specific state and configuration.

---

---
url: /api/discuss/type-aliases/RoomStateWithDiscussion.md
---
[@sqlrooms/discuss](../index.md) / RoomStateWithDiscussion

# Type Alias: RoomStateWithDiscussion

> **RoomStateWithDiscussion** = `RoomShellSliceState` & [`DiscussSliceState`](DiscussSliceState.md)

---

---
url: /api/s3-browser/type-aliases/S3BrowserState.md
---
[@sqlrooms/s3-browser](../index.md) / S3BrowserState

# Type Alias: S3BrowserState

> **S3BrowserState** = `object`

## Properties

### s3Browser

> **s3Browser**: `object`

| Name | Type |
| ------ | ------ |
| `currentS3Config` | [`S3Config`](S3Config.md) | `null` |
| `setCurrentS3Config()` | (`s3Config`) => `void` |
| `clearCurrentS3Config()` | () => `void` |

---

---
url: /api/s3-browser-config/type-aliases/S3Config.md
---
[@sqlrooms/s3-browser-config](../index.md) / S3Config

# Type Alias: S3Config

> **S3Config** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `accessKeyId` | `string` |
|  `secretAccessKey` | `string` |
|  `region` | `string` |
|  `bucket` | `string` |
|  `name?` | `string` |
|  `sessionToken?` | `string` |

---

---
url: /api/s3-browser/type-aliases/S3Config.md
---
[@sqlrooms/s3-browser](../index.md) / S3Config

# Type Alias: S3Config

> **S3Config** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `accessKeyId` | `string` |
|  `secretAccessKey` | `string` |
|  `region` | `string` |
|  `bucket` | `string` |
|  `name?` | `string` |
|  `sessionToken?` | `string` |

---

---
url: /api/s3-browser-config/type-aliases/S3Credentials.md
---
[@sqlrooms/s3-browser-config](../index.md) / S3Credentials

# Type Alias: S3Credentials

> **S3Credentials** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `name` | `string` |
|  `accessKeyId` | `string` |
|  `secretAccessKey` | `string` |
|  `region` | `string` |
|  `bucket` | `string` |
|  `sessionToken?` | `string` |
|  `id` | `string` |
|  `createdAt` | `string` |
|  `updatedAt` | `string` |

---

---
url: /api/s3-browser/type-aliases/S3Credentials.md
---
[@sqlrooms/s3-browser](../index.md) / S3Credentials

# Type Alias: S3Credentials

> **S3Credentials** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `name` | `string` |
|  `accessKeyId` | `string` |
|  `secretAccessKey` | `string` |
|  `region` | `string` |
|  `bucket` | `string` |
|  `sessionToken?` | `string` |
|  `id` | `string` |
|  `createdAt` | `string` |
|  `updatedAt` | `string` |

---

---
url: /api/s3-browser-config/type-aliases/S3FileOrDirectory.md
---
[@sqlrooms/s3-browser-config](../index.md) / S3FileOrDirectory

# Type Alias: S3FileOrDirectory

> **S3FileOrDirectory** = { `key`: `string`; `isDirectory`: `true`; } | { `key`: `string`; `isDirectory`: `false`; `lastModified?`: `Date`; `size?`: `number`; `contentType?`: `string`; }

---

---
url: /api/s3-browser/type-aliases/S3FileOrDirectory.md
---
[@sqlrooms/s3-browser](../index.md) / S3FileOrDirectory

# Type Alias: S3FileOrDirectory

> **S3FileOrDirectory** = { `key`: `string`; `isDirectory`: `true`; } | { `key`: `string`; `isDirectory`: `false`; `lastModified?`: `Date`; `size?`: `number`; `contentType?`: `string`; }

---

---
url: /api/recharts/type-aliases/ScatterProps.md
---
[@sqlrooms/recharts](../index.md) / ScatterProps

# Type Alias: ScatterProps

> **ScatterProps** = `PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`> & `ScatterProps`

---

---
url: /api/duckdb/type-aliases/SchemaAndDatabase.md
---
[@sqlrooms/duckdb](../index.md) / SchemaAndDatabase

# Type Alias: SchemaAndDatabase

> **SchemaAndDatabase** = `object`

## Properties

### schema?

> `optional` **schema**: `string`

***

### database?

> `optional` **database**: `string`

---

---
url: /api/duckdb-core/type-aliases/SchemaNodeObject.md
---
[@sqlrooms/duckdb-core](../index.md) / SchemaNodeObject

# Type Alias: SchemaNodeObject

> **SchemaNodeObject** = `BaseNodeObject` & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `type` | `"schema"` |

---

---
url: /api/duckdb/type-aliases/SchemaNodeObject.md
---
[@sqlrooms/duckdb](../index.md) / SchemaNodeObject

# Type Alias: SchemaNodeObject

> **SchemaNodeObject** = `BaseNodeObject` & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `type` | `"schema"` |

---

---
url: /api/recharts/type-aliases/SectorProps.md
---
[@sqlrooms/recharts](../index.md) / SectorProps

# Type Alias: SectorProps

> **SectorProps** = `SVGProps`<`SVGPathElement`> & `SectorProps`

---

---
url: /api/duckdb-core/type-aliases/SeparatedStatements.md
---
[@sqlrooms/duckdb-core](../index.md) / SeparatedStatements

# Type Alias: SeparatedStatements

> **SeparatedStatements** = `object`

Result of separating the last SQL statement from preceding ones.

## Properties

### precedingStatements

> **precedingStatements**: `string`\[]

All statements except the last one

***

### lastStatement

> **lastStatement**: `string`

The last statement

---

---
url: /api/duckdb/type-aliases/SeparatedStatements.md
---
[@sqlrooms/duckdb](../index.md) / SeparatedStatements

# Type Alias: SeparatedStatements

> **SeparatedStatements** = `object`

Result of separating the last SQL statement from preceding ones.

## Properties

### precedingStatements

> **precedingStatements**: `string`\[]

All statements except the last one

***

### lastStatement

> **lastStatement**: `string`

The last statement

---

---
url: /api/ai-core/type-aliases/SessionType.md
---
[@sqlrooms/ai-core](../index.md) / SessionType

# Type Alias: SessionType

> **SessionType** = `object`

Represents a session in the AI system.

## Example

```typescript
const session: SessionType = {
  id: "session_123",
  name: "My Analysis Session",
  modelProvider: "openai",
  model: "gpt-4o-mini"
};
```

## Properties

### id

> **id**: `string`

Unique identifier for the session

***

### name

> **name**: `string`

Display name of the session

***

### modelProvider?

> `optional` **modelProvider**: `string`

Provider of the AI model (e.g., "openai")

***

### model?

> `optional` **model**: `string`

Name of the AI model being used (e.g., "gpt-4o-mini")

---

---
url: /api/ai/type-aliases/SessionType.md
---
[@sqlrooms/ai](../index.md) / SessionType

# Type Alias: SessionType

> **SessionType** = `object`

Represents a session in the AI system.

## Example

```typescript
const session: SessionType = {
  id: "session_123",
  name: "My Analysis Session",
  modelProvider: "openai",
  model: "gpt-4o-mini"
};
```

## Properties

### id

> **id**: `string`

Unique identifier for the session

***

### name

> **name**: `string`

Display name of the session

***

### modelProvider?

> `optional` **modelProvider**: `string`

Provider of the AI model (e.g., "openai")

***

### model?

> `optional` **model**: `string`

Name of the AI model being used (e.g., "gpt-4o-mini")

---

---
url: /api/duckdb/type-aliases/SpatialLoadFileOptions.md
---
[@sqlrooms/duckdb](../index.md) / SpatialLoadFileOptions

# Type Alias: SpatialLoadFileOptions

> **SpatialLoadFileOptions** = `object`

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

## Type Declaration

## Index Signature

\[`key`: `string`]: `unknown`

| Name | Type |
| ------ | ------ |
|  `schema?` | `string` |
|  `select?` | `string`\[] |
|  `where?` | `string` |
|  `view?` | `boolean` |
|  `temp?` | `boolean` |
|  `replace?` | `boolean` |
|  `options?` | `string` | `Record`<`string`, `unknown`> | `string`\[] |
|  `method` | `"st_read"` |

---

---
url: /api/room-config/type-aliases/SpatialLoadFileOptions.md
---
[@sqlrooms/room-config](../index.md) / SpatialLoadFileOptions

# Type Alias: SpatialLoadFileOptions

> **SpatialLoadFileOptions** = `object`

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

## Type Declaration

## Index Signature

\[`key`: `string`]: `unknown`

| Name | Type | Description |
| ------ | ------ | ------ |
|  `schema?` | `string` | Schema to load the table into |
|  `select?` | `string`\[] | Columns to select, defaults to \['\*'] |
|  `where?` | `string` | WHERE clause filter condition |
|  `view?` | `boolean` | Whether to create as a view |
|  `temp?` | `boolean` | Whether to create as a temporary table |
|  `replace?` | `boolean` | Whether to replace existing table |
|  `options?` | `string` | `Record`<`string`, `unknown`> | `string`\[] | Additional options for spatial data loading |
|  `method` | `"st_read"` | - |

---

---
url: /api/room-shell/type-aliases/SpatialLoadFileOptions.md
---
[@sqlrooms/room-shell](../index.md) / SpatialLoadFileOptions

# Type Alias: SpatialLoadFileOptions

> **SpatialLoadFileOptions** = `object`

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

## Type Declaration

## Index Signature

\[`key`: `string`]: `unknown`

| Name | Type |
| ------ | ------ |
|  `schema?` | `string` |
|  `select?` | `string`\[] |
|  `where?` | `string` |
|  `view?` | `boolean` |
|  `temp?` | `boolean` |
|  `replace?` | `boolean` |
|  `options?` | `string` | `Record`<`string`, `unknown`> | `string`\[] |
|  `method` | `"st_read"` |

---

---
url: /api/room-store/type-aliases/SpatialLoadFileOptions.md
---
[@sqlrooms/room-store](../index.md) / SpatialLoadFileOptions

# Type Alias: SpatialLoadFileOptions

> **SpatialLoadFileOptions** = `object`

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

## Type Declaration

## Index Signature

\[`key`: `string`]: `unknown`

| Name | Type |
| ------ | ------ |
|  `schema?` | `string` |
|  `select?` | `string`\[] |
|  `where?` | `string` |
|  `view?` | `boolean` |
|  `temp?` | `boolean` |
|  `replace?` | `boolean` |
|  `options?` | `string` | `Record`<`string`, `unknown`> | `string`\[] |
|  `method` | `"st_read"` |

---

---
url: /api/room-config/type-aliases/SpatialLoadOptions.md
---
[@sqlrooms/room-config](../index.md) / SpatialLoadOptions

# Type Alias: SpatialLoadOptions

> **SpatialLoadOptions** = `object`

**`Interface`**

Extended options specifically for spatial data loading
Includes all standard options plus spatial-specific parameters
SpatialLoadOptions

## Type Declaration

## Index Signature

\[`key`: `string`]: `unknown`

| Name | Type | Description |
| ------ | ------ | ------ |
|  `schema?` | `string` | Schema to load the table into |
|  `select?` | `string`\[] | Columns to select, defaults to \['\*'] |
|  `where?` | `string` | WHERE clause filter condition |
|  `view?` | `boolean` | Whether to create as a view |
|  `temp?` | `boolean` | Whether to create as a temporary table |
|  `replace?` | `boolean` | Whether to replace existing table |
|  `options?` | `string` | `Record`<`string`, `unknown`> | `string`\[] | Additional options for spatial data loading |

---

---
url: /api/room-shell/type-aliases/SpatialLoadOptions.md
---
[@sqlrooms/room-shell](../index.md) / SpatialLoadOptions

# Type Alias: SpatialLoadOptions

> **SpatialLoadOptions** = `object`

**`Interface`**

Extended options specifically for spatial data loading
Includes all standard options plus spatial-specific parameters
SpatialLoadOptions

## Type Declaration

## Index Signature

\[`key`: `string`]: `unknown`

| Name | Type |
| ------ | ------ |
|  `schema?` | `string` |
|  `select?` | `string`\[] |
|  `where?` | `string` |
|  `view?` | `boolean` |
|  `temp?` | `boolean` |
|  `replace?` | `boolean` |
|  `options?` | `string` | `Record`<`string`, `unknown`> | `string`\[] |

---

---
url: /api/room-store/type-aliases/SpatialLoadOptions.md
---
[@sqlrooms/room-store](../index.md) / SpatialLoadOptions

# Type Alias: SpatialLoadOptions

> **SpatialLoadOptions** = `object`

**`Interface`**

Extended options specifically for spatial data loading
Includes all standard options plus spatial-specific parameters
SpatialLoadOptions

## Type Declaration

## Index Signature

\[`key`: `string`]: `unknown`

| Name | Type |
| ------ | ------ |
|  `schema?` | `string` |
|  `select?` | `string`\[] |
|  `where?` | `string` |
|  `view?` | `boolean` |
|  `temp?` | `boolean` |
|  `replace?` | `boolean` |
|  `options?` | `string` | `Record`<`string`, `unknown`> | `string`\[] |

---

---
url: /api/mosaic/type-aliases/Spec.md
---
[@sqlrooms/mosaic](../index.md) / Spec

# Type Alias: Spec

> **Spec** = `Spec`

A Mosaic declarative specification.

---

---
url: /api/sql-editor/type-aliases/SqlEditorHeaderProps.md
---
[@sqlrooms/sql-editor](../index.md) / SqlEditorHeaderProps

# Type Alias: SqlEditorHeaderProps

> **SqlEditorHeaderProps** = `PropsWithChildren`<{ `className?`: `string`; `title?`: `string`; `showDocs?`: `boolean`; `documentationPanel?`: `React.ReactNode`; `onToggleDocs?`: (`show`) => `void`; }>

---

---
url: /api/sql-editor/type-aliases/SqlEditorProps.md
---
[@sqlrooms/sql-editor](../index.md) / SqlEditorProps

# Type Alias: SqlEditorProps

> **SqlEditorProps** = `object`

## Properties

### schema?

> `optional` **schema**: [`TableStructurePanelProps`](../interfaces/TableStructurePanelProps.md)\[`"schema"`]

The database schema to use. Defaults to '*'.
If '*' is provided, all tables will be shown.
If a function is provided, it will be used to filter the tables.

***

### isOpen

> **isOpen**: `boolean`

Whether the SQL editor is currently visible

***

### documentationPanel?

> `optional` **documentationPanel**: `React.ReactNode`

Optional component to render SQL documentation in the side panel

***

### queryResultProps?

> `optional` **queryResultProps**: `Pick`<`React.ComponentProps`<*typeof* [`QueryResultPanel`](../variables/QueryResultPanel.md)>, `"onRowClick"` | `"onRowDoubleClick"`>

Props forwarded to `QueryResultPanel` to configure result behavior.
This provides a single entry point for table interactions.

***

### onClose()

> **onClose**: () => `void`

Callback fired when the SQL editor should be closed

#### Returns

`void`

---

---
url: /api/sql-editor/type-aliases/SqlEditorSliceConfig.md
---
[@sqlrooms/sql-editor](../index.md) / SqlEditorSliceConfig

# Type Alias: SqlEditorSliceConfig

> **SqlEditorSliceConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `queries` | `object`\[] |
|  `selectedQueryId` | `string` |
|  `lastExecutedQuery?` | `string` |
|  `openTabs` | `string`\[] |

---

---
url: /api/sql-editor-config/type-aliases/SqlEditorSliceConfig.md
---
[@sqlrooms/sql-editor-config](../index.md) / SqlEditorSliceConfig

# Type Alias: SqlEditorSliceConfig

> **SqlEditorSliceConfig** = `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `queries` | `object`\[] |
|  `selectedQueryId` | `string` |
|  `lastExecutedQuery?` | `string` |
|  `openTabs` | `string`\[] |

---

---
url: /api/sql-editor/type-aliases/SqlEditorSliceState.md
---
[@sqlrooms/sql-editor](../index.md) / SqlEditorSliceState

# Type Alias: SqlEditorSliceState

> **SqlEditorSliceState** = `object`

## Properties

### sqlEditor

> **sqlEditor**: `object`

| Name | Type | Description |
| ------ | ------ | ------ |
| `config` | [`SqlEditorSliceConfig`](SqlEditorSliceConfig.md) | - |
| `queryResult?` | [`QueryResult`](QueryResult.md) | - |
| `selectedTable?` | `string` | **Deprecated** |
| `isTablesLoading` | `boolean` | **Deprecated** Use `useStoreWithSqlEditor((s) => s.db.isRefreshingTableSchemas)` instead. |
| `tablesError?` | `string` | **Deprecated** |
| `queryResultLimit` | `number` | - |
| `queryResultLimitOptions` | `number`\[] | Options for the result limit dropdown |
| `setConfig()` | (`config`) => | - |
| `parseAndRunQuery()` | (`query`) => | - |
| `parseAndRunCurrentQuery()` | () => | - |
| `abortCurrentQuery()` | () => | - |
| `exportResultsToCsv()` | (`results`, `filename?`) => | - |
| `createQueryTab()` | (`initialQuery?`) => | - |
| `deleteQueryTab()` | (`queryId`) => | - |
| `renameQueryTab()` | (`queryId`, `newName`) => | - |
| `closeQueryTab()` | (`queryId`) => | - |
| `openQueryTab()` | (`queryId`) => | - |
| `setOpenTabs()` | (`tabIds`) => | - |
| `updateQueryText()` | (`queryId`, `queryText`) => | - |
| `setSelectedQueryId()` | (`queryId`) => | - |
| `getCurrentQuery()` | () => | - |
| `selectTable()` | (`table`) => | - |
| `clearQueryResults()` | () => | - |
| `setQueryResultLimit()` | (`limit`) => | - |

---

---
url: /api/room-config/type-aliases/SqlQueryDataSource.md
---
[@sqlrooms/room-config](../index.md) / SqlQueryDataSource

# Type Alias: SqlQueryDataSource

> **SqlQueryDataSource** = `object`

**`Interface`**

Configuration for SQL query-based data sources
SqlQueryDataSource

## Type Declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `tableName` | `string` | Unique table name used to store the data loaded from the data source. This name will be used to reference the data in SQL queries. |
|  `type` | `"sql"` | - |
|  `sqlQuery` | `string` | SQL query to execute for data retrieval |

---

---
url: /api/room-shell/type-aliases/SqlQueryDataSource.md
---
[@sqlrooms/room-shell](../index.md) / SqlQueryDataSource

# Type Alias: SqlQueryDataSource

> **SqlQueryDataSource** = `object`

**`Interface`**

Configuration for SQL query-based data sources
SqlQueryDataSource

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `tableName` | `string` |
|  `type` | `"sql"` |
|  `sqlQuery` | `string` |

---

---
url: /api/room-store/type-aliases/SqlQueryDataSource.md
---
[@sqlrooms/room-store](../index.md) / SqlQueryDataSource

# Type Alias: SqlQueryDataSource

> **SqlQueryDataSource** = `object`

**`Interface`**

Configuration for SQL query-based data sources
SqlQueryDataSource

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `tableName` | `string` |
|  `type` | `"sql"` |
|  `sqlQuery` | `string` |

---

---
url: /api/room-config/type-aliases/StandardLoadFileOptions.md
---
[@sqlrooms/room-config](../index.md) / StandardLoadFileOptions

# Type Alias: StandardLoadFileOptions

> **StandardLoadFileOptions** = `object`

**`Interface`**

Standard file loading options excluding spatial methods
StandardLoadFileOptions

## Type Declaration

## Index Signature

\[`key`: `string`]: `unknown`

| Name | Type | Description |
| ------ | ------ | ------ |
|  `schema?` | `string` | Schema to load the table into |
|  `select?` | `string`\[] | Columns to select, defaults to \['\*'] |
|  `where?` | `string` | WHERE clause filter condition |
|  `view?` | `boolean` | Whether to create as a view |
|  `temp?` | `boolean` | Whether to create as a temporary table |
|  `replace?` | `boolean` | Whether to replace existing table |
|  `method` | `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"` | - |

---

---
url: /api/room-shell/type-aliases/StandardLoadFileOptions.md
---
[@sqlrooms/room-shell](../index.md) / StandardLoadFileOptions

# Type Alias: StandardLoadFileOptions

> **StandardLoadFileOptions** = `object`

**`Interface`**

Standard file loading options excluding spatial methods
StandardLoadFileOptions

## Type Declaration

## Index Signature

\[`key`: `string`]: `unknown`

| Name | Type |
| ------ | ------ |
|  `schema?` | `string` |
|  `select?` | `string`\[] |
|  `where?` | `string` |
|  `view?` | `boolean` |
|  `temp?` | `boolean` |
|  `replace?` | `boolean` |
|  `method` | `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"` |

---

---
url: /api/room-store/type-aliases/StandardLoadFileOptions.md
---
[@sqlrooms/room-store](../index.md) / StandardLoadFileOptions

# Type Alias: StandardLoadFileOptions

> **StandardLoadFileOptions** = `object`

**`Interface`**

Standard file loading options excluding spatial methods
StandardLoadFileOptions

## Type Declaration

## Index Signature

\[`key`: `string`]: `unknown`

| Name | Type |
| ------ | ------ |
|  `schema?` | `string` |
|  `select?` | `string`\[] |
|  `where?` | `string` |
|  `view?` | `boolean` |
|  `temp?` | `boolean` |
|  `replace?` | `boolean` |
|  `method` | `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"` |

---

---
url: /api/room-config/type-aliases/StandardLoadOptions.md
---
[@sqlrooms/room-config](../index.md) / StandardLoadOptions

# Type Alias: StandardLoadOptions

> **StandardLoadOptions** = `object`

**`Interface`**

Standard options for loading data files
StandardLoadOptions

## Type Declaration

## Index Signature

\[`key`: `string`]: `unknown`

| Name | Type | Description |
| ------ | ------ | ------ |
|  `schema?` | `string` | Schema to load the table into |
|  `select?` | `string`\[] | Columns to select, defaults to \['\*'] |
|  `where?` | `string` | WHERE clause filter condition |
|  `view?` | `boolean` | Whether to create as a view |
|  `temp?` | `boolean` | Whether to create as a temporary table |
|  `replace?` | `boolean` | Whether to replace existing table |

---

---
url: /api/room-shell/type-aliases/StandardLoadOptions.md
---
[@sqlrooms/room-shell](../index.md) / StandardLoadOptions

# Type Alias: StandardLoadOptions

> **StandardLoadOptions** = `object`

**`Interface`**

Standard options for loading data files
StandardLoadOptions

## Type Declaration

## Index Signature

\[`key`: `string`]: `unknown`

| Name | Type |
| ------ | ------ |
|  `schema?` | `string` |
|  `select?` | `string`\[] |
|  `where?` | `string` |
|  `view?` | `boolean` |
|  `temp?` | `boolean` |
|  `replace?` | `boolean` |

---

---
url: /api/room-store/type-aliases/StandardLoadOptions.md
---
[@sqlrooms/room-store](../index.md) / StandardLoadOptions

# Type Alias: StandardLoadOptions

> **StandardLoadOptions** = `object`

**`Interface`**

Standard options for loading data files
StandardLoadOptions

## Type Declaration

## Index Signature

\[`key`: `string`]: `unknown`

| Name | Type |
| ------ | ------ |
|  `schema?` | `string` |
|  `select?` | `string`\[] |
|  `where?` | `string` |
|  `view?` | `boolean` |
|  `temp?` | `boolean` |
|  `replace?` | `boolean` |

---

---
url: /api/room-shell/type-aliases/StateCreator.md
---
[@sqlrooms/room-shell](../index.md) / StateCreator

# Type Alias: StateCreator\<T, Mis, Mos, U>

> **StateCreator**<`T`, `Mis`, `Mos`, `U`> = (`setState`, `getState`, `store`) => `U` & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `$$storeMutators?` | `Mos` |

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | - |
| `Mis` *extends* \[`StoreMutatorIdentifier`, `unknown`]\[] | \[] |
| `Mos` *extends* \[`StoreMutatorIdentifier`, `unknown`]\[] | \[] |
| `U` | `T` |

---

---
url: /api/room-store/type-aliases/StateCreator.md
---
[@sqlrooms/room-store](../index.md) / StateCreator

# Type Alias: StateCreator\<T, Mis, Mos, U>

> **StateCreator**<`T`, `Mis`, `Mos`, `U`> = (`setState`, `getState`, `store`) => `U` & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `$$storeMutators?` | `Mos` |

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | - |
| `Mis` *extends* \[`StoreMutatorIdentifier`, `unknown`]\[] | \[] |
| `Mos` *extends* \[`StoreMutatorIdentifier`, `unknown`]\[] | \[] |
| `U` | `T` |

---

---
url: /api/recharts/type-aliases/SurfaceProps.md
---
[@sqlrooms/recharts](../index.md) / SurfaceProps

# Type Alias: SurfaceProps

> **SurfaceProps** = `Omit`<`SVGProps`<`SVGSVGElement`>, `"viewBox"`> & `SurfaceProps`

---

---
url: /api/recharts/type-aliases/SymbolsProps.md
---
[@sqlrooms/recharts](../index.md) / SymbolsProps

# Type Alias: SymbolsProps

> **SymbolsProps** = `SVGProps`<`SVGPathElement`> & `InnerSymbolsProp`

---

---
url: /api/room-shell/type-aliases/TableAction.md
---
[@sqlrooms/room-shell](../index.md) / TableAction

# Type Alias: TableAction

> **TableAction** = `object`

## Properties

### icon

> **icon**: `React.FC`<{ `className`: `string`; }>

***

### label

> **label**: `string`

***

### onClick()

> **onClick**: (`tableName`) => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `tableName` | `string` |

#### Returns

`void`

---

---
url: /api/duckdb-core/type-aliases/TableColumn.md
---
[@sqlrooms/duckdb-core](../index.md) / TableColumn

# Type Alias: TableColumn

> **TableColumn** = `object`

## Properties

### name

> **name**: `string`

***

### type

> **type**: `string`

---

---
url: /api/duckdb/type-aliases/TableColumn.md
---
[@sqlrooms/duckdb](../index.md) / TableColumn

# Type Alias: TableColumn

> **TableColumn** = `object`

## Properties

### name

> **name**: `string`

***

### type

> **type**: `string`

---

---
url: /api/duckdb-core/type-aliases/TableNodeObject.md
---
[@sqlrooms/duckdb-core](../index.md) / TableNodeObject

# Type Alias: TableNodeObject

> **TableNodeObject** = `BaseNodeObject` & `object` & [`DataTable`](DataTable.md)

## Type Declaration

| Name | Type |
| ------ | ------ |
| `type` | `"table"` |

---

---
url: /api/duckdb/type-aliases/TableNodeObject.md
---
[@sqlrooms/duckdb](../index.md) / TableNodeObject

# Type Alias: TableNodeObject

> **TableNodeObject** = `BaseNodeObject` & `object` & [`DataTable`](DataTable.md)

## Type Declaration

| Name | Type |
| ------ | ------ |
| `type` | `"table"` |

---

---
url: /api/recharts/type-aliases/TextProps.md
---
[@sqlrooms/recharts](../index.md) / TextProps

# Type Alias: TextProps

> **TextProps** = `Omit`<`SVGProps`<`SVGTextElement`>, `"textAnchor"` | `"verticalAnchor"`> & `TextProps`

---

---
url: /api/ui/type-aliases/ToastActionElement.md
---
[@sqlrooms/ui](../index.md) / ToastActionElement

# Type Alias: ToastActionElement

> **ToastActionElement** = `React.ReactElement`<*typeof* [`ToastAction`](../variables/ToastAction.md)>

---

---
url: /api/ui/type-aliases/ToastProps.md
---
[@sqlrooms/ui](../index.md) / ToastProps

# Type Alias: ToastProps

> **ToastProps** = `React.ComponentPropsWithoutRef`<*typeof* [`Toast`](../variables/Toast.md)>

---

---
url: /api/recharts/type-aliases/TooltipProps.md
---
[@sqlrooms/recharts](../index.md) / TooltipProps

# Type Alias: TooltipProps\<TValue, TName>

> **TooltipProps**<`TValue`, `TName`> = [`DefaultTooltipContentProps`](../interfaces/DefaultTooltipContentProps.md)<`TValue`, `TName`> & `object`

## Type Declaration

| Name | Type | Description |
| ------ | ------ | ------ |
| `accessibilityLayer?` | `boolean` | - |
| `active?` | `boolean` | If true, then Tooltip is always displayed, once an activeIndex is set by mouse over, or programmatically. If false, then Tooltip is never displayed. If active is undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls. |
| `includeHidden?` | `boolean` | If true, then Tooltip will information about hidden series (defaults to false). Interacting with the hide property of Area, Bar, Line, Scatter. |
| `allowEscapeViewBox?` | `AllowInDimension` | - |
| `animationDuration?` | `AnimationDuration` | - |
| `animationEasing?` | `AnimationTiming` | - |
| `content?` | `ContentType`<`TValue`, `TName`> | - |
| `coordinate?` | `Partial`<`Coordinate`> | - |
| `cursor?` | `boolean` | `ReactElement` | `SVGProps`<`SVGElement`> | - |
| `filterNull?` | `boolean` | - |
| `defaultIndex?` | `number` | - |
| `isAnimationActive?` | `boolean` | - |
| `offset?` | `number` | - |
| `payloadUniqBy?` | `UniqueOption`<`Payload`<`TValue`, `TName`>> | - |
| `position?` | `Partial`<`Coordinate`> | - |
| `reverseDirection?` | `AllowInDimension` | - |
| `shared?` | `boolean` | - |
| `trigger?` | `"hover"` | `"click"` | - |
| `useTranslate3d?` | `boolean` | - |
| `viewBox?` | `CartesianViewBox` | - |
| `wrapperStyle?` | `CSSProperties` | - |

## Type Parameters

| Type Parameter |
| ------ |
| `TValue` *extends* `ValueType` |
| `TName` *extends* `NameType` |

---

---
url: /api/ai-config/type-aliases/ToolUIPart.md
---
[@sqlrooms/ai-config](../index.md) / ToolUIPart

# Type Alias: ToolUIPart

> **ToolUIPart** = { `type`: `string`; `toolCallId`: `string`; `state`: `"input-streaming"`; `input?`: `unknown`; `providerExecuted?`: `boolean`; } | { `type`: `string`; `toolCallId`: `string`; `state`: `"input-available"`; `input`: `unknown`; `providerExecuted?`: `boolean`; `callProviderMetadata?`: `unknown`; } | { `type`: `string`; `toolCallId`: `string`; `state`: `"output-available"`; `input`: `unknown`; `output`: `unknown`; `providerExecuted?`: `boolean`; `callProviderMetadata?`: `unknown`; `preliminary?`: `boolean`; } | { `type`: `string`; `toolCallId`: `string`; `state`: `"output-error"`; `input?`: `unknown`; `rawInput?`: `unknown`; `errorText`: `string`; `providerExecuted?`: `boolean`; `callProviderMetadata?`: `unknown`; }

---

---
url: /api/ai/type-aliases/ToolUIPart.md
---
[@sqlrooms/ai](../index.md) / ToolUIPart

# Type Alias: ToolUIPart

> **ToolUIPart** = { `type`: `string`; `toolCallId`: `string`; `state`: `"input-streaming"`; `input?`: `unknown`; `providerExecuted?`: `boolean`; } | { `type`: `string`; `toolCallId`: `string`; `state`: `"input-available"`; `input`: `unknown`; `providerExecuted?`: `boolean`; `callProviderMetadata?`: `unknown`; } | { `type`: `string`; `toolCallId`: `string`; `state`: `"output-available"`; `input`: `unknown`; `output`: `unknown`; `providerExecuted?`: `boolean`; `callProviderMetadata?`: `unknown`; `preliminary?`: `boolean`; } | { `type`: `string`; `toolCallId`: `string`; `state`: `"output-error"`; `input?`: `unknown`; `rawInput?`: `unknown`; `errorText`: `string`; `providerExecuted?`: `boolean`; `callProviderMetadata?`: `unknown`; }

---

---
url: /api/recharts/type-aliases/TrapezoidProps.md
---
[@sqlrooms/recharts](../index.md) / TrapezoidProps

# Type Alias: TrapezoidProps

> **TrapezoidProps** = `SVGProps`<`SVGPathElement`> & `TrapezoidProps`

---

---
url: /api/ui/type-aliases/TreeNodeData.md
---
[@sqlrooms/ui](../index.md) / TreeNodeData

# Type Alias: TreeNodeData\<T>

> **TreeNodeData**<`T`> = `object`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Properties

### key

> **key**: `string`

***

### object

> **object**: `T`

***

### children?

> `optional` **children**: `TreeNodeData`<`T`>\[]

***

### isInitialOpen?

> `optional` **isInitialOpen**: `boolean`

---

---
url: /api/ai-config/type-aliases/UIMessagePart.md
---
[@sqlrooms/ai-config](../index.md) / UIMessagePart

# Type Alias: UIMessagePart

> **UIMessagePart** = { `type`: `string`; `toolCallId`: `string`; `state`: `"input-streaming"`; `input?`: `unknown`; `providerExecuted?`: `boolean`; } | { `type`: `string`; `toolCallId`: `string`; `state`: `"input-available"`; `input`: `unknown`; `providerExecuted?`: `boolean`; `callProviderMetadata?`: `unknown`; } | { `type`: `string`; `toolCallId`: `string`; `state`: `"output-available"`; `input`: `unknown`; `output`: `unknown`; `providerExecuted?`: `boolean`; `callProviderMetadata?`: `unknown`; `preliminary?`: `boolean`; } | { `type`: `string`; `toolCallId`: `string`; `state`: `"output-error"`; `input?`: `unknown`; `rawInput?`: `unknown`; `errorText`: `string`; `providerExecuted?`: `boolean`; `callProviderMetadata?`: `unknown`; } | { `type`: `"text"`; `text`: `string`; `state?`: `"streaming"` | `"done"`; `providerMetadata?`: `unknown`; } | { `type`: `"reasoning"`; `text`: `string`; `state?`: `"streaming"` | `"done"`; `providerMetadata?`: `unknown`; } | { `type`: `"dynamic-tool"`; `toolName`: `string`; `toolCallId`: `string`; `state`: `"input-streaming"`; `input?`: `unknown`; } | { `type`: `"dynamic-tool"`; `toolName`: `string`; `toolCallId`: `string`; `state`: `"input-available"`; `input`: `unknown`; `callProviderMetadata?`: `unknown`; } | { `type`: `"dynamic-tool"`; `toolName`: `string`; `toolCallId`: `string`; `state`: `"output-available"`; `input`: `unknown`; `output`: `unknown`; `callProviderMetadata?`: `unknown`; `preliminary?`: `boolean`; } | { `type`: `"dynamic-tool"`; `toolName`: `string`; `toolCallId`: `string`; `state`: `"output-error"`; `input`: `unknown`; `errorText`: `string`; } | { `type`: `"step-start"`; } | { `type`: `"source-url"`; `sourceId`: `string`; `url`: `string`; `title?`: `string`; `providerMetadata?`: `unknown`; } | { `type`: `"source-document"`; `sourceId`: `string`; `mediaType`: `string`; `title`: `string`; `filename?`: `string`; `providerMetadata?`: `unknown`; } | { `type`: `"file"`; `mediaType`: `string`; `filename?`: `string`; `url?`: `string`; `data?`: `string`; `providerMetadata?`: `unknown`; } | { `type`: `string`; `id?`: `string`; `data`: `unknown`; }

---

---
url: /api/ai/type-aliases/UIMessagePart.md
---
[@sqlrooms/ai](../index.md) / UIMessagePart

# Type Alias: UIMessagePart

> **UIMessagePart** = { `type`: `"text"`; `text`: `string`; `state?`: `"streaming"` | `"done"`; `providerMetadata?`: `unknown`; } | { `type`: `"reasoning"`; `text`: `string`; `state?`: `"streaming"` | `"done"`; `providerMetadata?`: `unknown`; } | { `type`: `string`; `toolCallId`: `string`; `state`: `"input-streaming"`; `input?`: `unknown`; `providerExecuted?`: `boolean`; } | { `type`: `string`; `toolCallId`: `string`; `state`: `"input-available"`; `input`: `unknown`; `providerExecuted?`: `boolean`; `callProviderMetadata?`: `unknown`; } | { `type`: `string`; `toolCallId`: `string`; `state`: `"output-available"`; `input`: `unknown`; `output`: `unknown`; `providerExecuted?`: `boolean`; `callProviderMetadata?`: `unknown`; `preliminary?`: `boolean`; } | { `type`: `string`; `toolCallId`: `string`; `state`: `"output-error"`; `input?`: `unknown`; `rawInput?`: `unknown`; `errorText`: `string`; `providerExecuted?`: `boolean`; `callProviderMetadata?`: `unknown`; } | { `type`: `"dynamic-tool"`; `toolName`: `string`; `toolCallId`: `string`; `state`: `"input-streaming"`; `input?`: `unknown`; } | { `type`: `"dynamic-tool"`; `toolName`: `string`; `toolCallId`: `string`; `state`: `"input-available"`; `input`: `unknown`; `callProviderMetadata?`: `unknown`; } | { `type`: `"dynamic-tool"`; `toolName`: `string`; `toolCallId`: `string`; `state`: `"output-available"`; `input`: `unknown`; `output`: `unknown`; `callProviderMetadata?`: `unknown`; `preliminary?`: `boolean`; } | { `type`: `"dynamic-tool"`; `toolName`: `string`; `toolCallId`: `string`; `state`: `"output-error"`; `input`: `unknown`; `errorText`: `string`; } | { `type`: `"step-start"`; } | { `type`: `"source-url"`; `sourceId`: `string`; `url`: `string`; `title?`: `string`; `providerMetadata?`: `unknown`; } | { `type`: `"source-document"`; `sourceId`: `string`; `mediaType`: `string`; `title`: `string`; `filename?`: `string`; `providerMetadata?`: `unknown`; } | { `type`: `"file"`; `mediaType`: `string`; `filename?`: `string`; `url?`: `string`; `data?`: `string`; `providerMetadata?`: `unknown`; } | { `type`: `string`; `id?`: `string`; `data`: `unknown`; }

---

---
url: /api/room-config/type-aliases/UrlDataSource.md
---
[@sqlrooms/room-config](../index.md) / UrlDataSource

# Type Alias: UrlDataSource

> **UrlDataSource** = `object`

**`Interface`**

Configuration for URL-based data sources
UrlDataSource

## Type Declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `tableName` | `string` | Unique table name used to store the data loaded from the data source. This name will be used to reference the data in SQL queries. |
|  `type` | `"url"` | - |
|  `url` | `string` | URL from which to fetch the data |
|  `loadOptions?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | Optional configuration for file loading |
|  `httpMethod?` | `string` | Optional HTTP method to use for the request |
|  `headers?` | `Record`<`string`, `string`> | Optional headers to include in the request |

---

---
url: /api/room-shell/type-aliases/UrlDataSource.md
---
[@sqlrooms/room-shell](../index.md) / UrlDataSource

# Type Alias: UrlDataSource

> **UrlDataSource** = `object`

**`Interface`**

Configuration for URL-based data sources
UrlDataSource

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `tableName` | `string` |
|  `type` | `"url"` |
|  `url` | `string` |
|  `loadOptions?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } |
|  `httpMethod?` | `string` |
|  `headers?` | `Record`<`string`, `string`> |

---

---
url: /api/room-store/type-aliases/UrlDataSource.md
---
[@sqlrooms/room-store](../index.md) / UrlDataSource

# Type Alias: UrlDataSource

> **UrlDataSource** = `object`

**`Interface`**

Configuration for URL-based data sources
UrlDataSource

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `tableName` | `string` |
|  `type` | `"url"` |
|  `url` | `string` |
|  `loadOptions?` | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `method`: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`; } | {\[`key`: `string`]: `unknown`; `schema?`: `string`; `select?`: `string`\[]; `where?`: `string`; `view?`: `boolean`; `temp?`: `boolean`; `replace?`: `boolean`; `options?`: `string` | `Record`<`string`, `unknown`> | `string`\[]; `method`: `"st_read"`; } |
|  `httpMethod?` | `string` |
|  `headers?` | `Record`<`string`, `string`> |

---

---
url: /api/vega/type-aliases/VegaChartToolParameters.md
---
[@sqlrooms/vega](../index.md) / VegaChartToolParameters

# Type Alias: VegaChartToolParameters

> **VegaChartToolParameters** = `object`

Zod schema for the VegaChart tool parameters

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `sqlQuery` | `string` |
|  `vegaLiteSpec` | `string` |
|  `reasoning` | `string` |

---

---
url: /api/vega/type-aliases/VisualizationSpec.md
---
[@sqlrooms/vega](../index.md) / VisualizationSpec

# Type Alias: VisualizationSpec

> **VisualizationSpec** = `VlSpec` | `VgSpec`

---

---
url: /api/recharts/type-aliases/XAxisProps.md
---
[@sqlrooms/recharts](../index.md) / XAxisProps

# Type Alias: XAxisProps

> **XAxisProps** = `Omit`<`PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`>, `"scale"` | `"ref"`> & `XAxisProps`

---

---
url: /api/recharts/type-aliases/YAxisProps.md
---
[@sqlrooms/recharts](../index.md) / YAxisProps

# Type Alias: YAxisProps

> **YAxisProps** = `Omit`<`PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`>, `"scale"` | `"ref"`> & `YAxisProps`

---

---
url: /api/ai-rag/_media/ai/README.md
---
### [AI-Powered Analytics](https://ai.sqlrooms.org/)

[Try live](https://ai.sqlrooms.org/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/ai)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/ai?embed=1\&file=components/app-shell.tsx)

[![Netlify Status](https://api.netlify.com/api/v1/badges/031f0d4f-c2a3-44f8-adf1-6429164bb0c7/deploy-status)](https://app.netlify.com/projects/sqlrooms-ai/deploys)

An advanced example showing how to build an AI-powered analytics application with SQLRooms. Features include:

* Natural language data exploration
* AI-driven data analysis
* Integration with [SQLRooms AI assistant](/api/ai/)
* Custom visualization components
* Room state persistence

To create a new project from the AI example run this:

```bash
npx degit sqlrooms/examples/ai my-new-app/
```

#### Running locally

```sh
npm install
npm run dev
```

---

---
url: /packages.md
---

## Package Structure

Below is a full breakdown of all **Core**, **Feature**, and **Utility** packages available in SQLRooms.\
Each package can be installed independently via `pnpm add @sqlrooms/<name>` and mixed‑and‑matched to suit your app's needs.

### Core Packages

* **[@sqlrooms/room-shell](/api/room-shell/)** — Central application shell and Zustand‑based state manager with panel system and DuckDB integration.
* **[@sqlrooms/room-store](/api/core/)** — Core state management utilities, RoomStore, and React context providers.
* **[@sqlrooms/duckdb](/api/duckdb/)** — WebAssembly build of DuckDB plus helper hooks for query execution and data import.
* **[@sqlrooms/ui](/api/ui/)** — Tailwind‑powered component library and theme manager used across all other packages.
* **[@sqlrooms/ai](/api/ai/)** — Natural‑language querying and AI‑assisted analytics tools.
* **[@sqlrooms/layout](/api/layout/)** — Panel layout management built on react‑mosaic.

### Feature Packages

* **[@sqlrooms/cosmos](/api/cosmos/)** — High‑performance WebGL graph visualization with Cosmos.
* **[@sqlrooms/data-table](/api/data-table/)** — Interactive data grid for SQL results with sorting and pagination.
* **[@sqlrooms/discuss](/api/discuss/)** — Threaded discussion system with anchor links to data points.
* **[@sqlrooms/dropzone](/api/dropzone/)** — Drag‑and‑drop file uploads with type validation and progress tracking.
* **[@sqlrooms/monaco-editor](/api/monaco-editor/)** — VS Code's Monaco editor with SQL‑aware autocompletion.
* **[@sqlrooms/mosaic](/api/mosaic/)** — Declarative charting powered by UW IDL's Mosaic library.
* **[@sqlrooms/motherduck](/api/motherduck/)** — MotherDuck connector using the WASM client
* **[@sqlrooms/recharts](/api/recharts/)** — Responsive charts via Recharts (line, bar, pie, etc.).
* **[@sqlrooms/s3-browser](/api/s3-browser/)** — S3‑compatible storage browser with uploads and directory management.
* **[@sqlrooms/schema-tree](/api/schema-tree/)** — Interactive database‑schema explorer.
* **[@sqlrooms/sql-editor](/api/sql-editor/)** — SQL editor with history, syntax highlighting, and result docking.
* **[@sqlrooms/vega](/api/vega/)** — Vega‑Lite visualization components for sophisticated interactive charts.

### Utility Packages

* **[@sqlrooms/utils](/api/utils/)** — Shared helper functions for colors, formatting, random IDs, and string utilities.

## Extension Points

---

---
url: /upgrade-guide.md
---

# Upgrade Guide

This document provides detailed guidance for upgrading between different versions of SQLRooms packages. Each section outlines breaking changes, required code modifications, and implementation examples to ensure a smooth upgrade process.

When upgrading, please follow the version-specific instructions below that apply to your project. If you encounter any issues during the upgrade process, please refer to our [GitHub issues](https://github.com/sqlrooms/sqlrooms/issues) or contact support.

## 0.26.0-rc.5

* There's no combined config in the store anymore. We decided to split the config into individual slices' configs to avoid confusion and simplify the store typing.

  ```
  state.config.title -> state.room.config.title
  state.config.dataSources -> state.room.config.dataSources
  state.config.sqlEditor -> state.sqlEditor.config
  state.config.layout -> state.layout.config
  ...
  ```

  If you were saving the combined config, make sure to update the persistence logic (check out the examples).

* createStore, createSlice now only have one generic type parameter

* room.setRoomConfig removed, use .setConfig in all individual slices

* RoomState renamed to BaseRoomStoreState (meant to be internal) and RoomStore interface renamed to BaseRoomStore to avoid confusion with RoomState/RoomStore introduced in many of the examples

* room.onSaveConfig, hasUnsavedChanges, lastSavedConfig were removed.

## 0.25.0-rc.1

* createAiSlice init parameters changed:
  * Instead of customTools and toolsOptions use tools + createDefaultAiTools(store, toolsOptions)
  * getInstructions must be provided, but can use createDefaultAiInstructions(store)

## 0.24.28-rc.1

* Discuss config separated from RoomConfig to make it easier to persist separately and to simplify typing (`state.discuss.config` instead of `state.config.discuss`)

```tsx
const discussConfig = useRoomStore((state) => state.discuss.config);
```

After:

```tsx
const discussConfig = useRoomStore((state) => state.config.discuss);
```

If you were persisting this state, you will likely need a migration.

You should also remove `.merge(DiscussSliceConfig)` when defining your `RoomConfig`

## 0.19.0

We are trying to make the package structure more logical, especially, for new users of the SQLRooms framework. Sorry for the more renaming.

* Package `@sqlrooms/core` (previously, `@sqlrooms/project`) renamed to `@sqlrooms/room-store`.

* The layout-related state and functions were moved to the new `LayoutSlice` added to `@sqlrooms/layout` which is namespaced as `layout`:
  * `panels`
  * `setLayout`
  * `togglePanel`
  * `tooglePanelPin`

Before:

```tsx
const togglePanel = useRoomStore((state) => state.room.togglePanel);
```

After:

```tsx
const togglePanel = useRoomStore((state) => state.layout.togglePanel);
```

## 0.18.0

`QueryHandle` returned from `.query()` is now implementing `PromiseLike` and can be awaited. So adding `.result`, which was introduced in [0.16.0](#_0-16-0), is not necessary anymore.

### Old

```tsx
const result = await connector.query('SELECT * FROM some_table').result;
```

### New

```tsx
const result = await connector.query('SELECT * FROM some_table');
```

## 0.17.0

This release focuses on standardizing terminology across the codebase and improving the developer experience for new users. We are replacing the concept of "project" with "room" to better align with the SQLRooms name. "Room" is an established concept in collaborative apps and fits well with the overall vision of the project.

### Package name changes

* `@sqlrooms/project` renamed to `@sqlrooms/core` (renamed again to `@sqlrooms/room-store` in [0.19.0](#_0-19-0), sorry)
* `@sqlrooms/project-config` renamed to `@sqlrooms/room-config`
* `@sqlrooms/project-builder` renamed to `@sqlrooms/room-shell`

### Component name changes

* `ProjectBuilder` is replaced by `RoomShell`
* `ProjectBuilderProvider` is removed (in favor of `RoomShell`)
* `ProjectBuilderState` renamed to `RoomShellSliceState`
* `createProjectBuilderStore` renamed to `createRoomStore`
* `createProjectBuilderSlice` renamed to `createRoomShellSlice`
* `ProjectBuilderPanel` renamed to `RoomPanel`
* `ProjectBuilderPanelHeader` renamed to `RoomPanelHeader`

#### Old way to set up a project

```tsx
<ProjectBuilderProvider projectStore={projectStore}>
  <div className="flex h-full w-full">
    <div className="bg-muted/50 flex h-full flex-col px-1 py-2">
      <ProjectBuilderSidebarButtons />
    </div>
    <div className="flex h-full w-full flex-col">
      <ProjectBuilder />
    </div>
  </div>
</ProjectBuilderProvider>
```

#### New

```tsx
<RoomShell className="h-screen" roomStore={roomStore}>
  <RoomShell.Sidebar />
  <RoomShell.LayoutComposer />
  <RoomShell.LoadingProgress />
</RoomShell>
```

### State name changes

* `state.project` namespace renamed to `state.room`

#### Old

```tsx
const dataSources = useProjectStore((state) => state.project.dataSources);
```

#### New

```tsx
const dataSources = useRoomStore((state) => state.room.dataSources);
```

## 0.16.3

### @sqlrooms/duckdb

The `BaseDuckDbConnector` and `WasmDuckDbConnector` are now provided as factory functions rather than classes. Use `createWasmDuckDbConnector()` or the generic `createDuckDbConnector({type: 'wasm'})` to obtain a connector instance.

#### Before

```typescript
import {WasmDuckDbConnector} from '@sqlrooms/duckdb';

const connector = new WasmDuckDbConnector();
```

#### After

```typescript
import {createWasmDuckDbConnector} from '@sqlrooms/duckdb';

const connector = createWasmDuckDbConnector();
```

## 0.16.0

### @sqlrooms/duckdb

The DuckDbConnector now supports query cancellation through a unified `QueryHandle` interface with full composability support. All query methods (`execute`, `query`, `queryJson`) now return a `QueryHandle` that provides immediate access to cancellation functionality and signal composability. [Read more…](https://sqlrooms.org/query-cancellation)

#### Old

```tsx
const result = await connector.query('SELECT * FROM some_table');
```

#### New

::: warning
Since [0.18.0](#_0-18-0) `QueryHandle` returned from `.query()` is implementing `PromiseLike` and can be awaited. So adding `.result` is not necessary anymore.
:::

```tsx
const result = await connector.query('SELECT * FROM some_table').result;
```

## 0.14.0

### @sqlrooms/ui

* `sqlroomsTailwindPreset` prefix parameter was removed

## 0.9.0

### @sqlrooms/project-builder

* `createProjectSlice` renamed into `createProjectBuilderSlice`

* `createProjectStore` renamed into `createProjectBuilderStore`

* `ProjectState` renamed into `ProjectBuilderState`

* `projectId` and `setProjectId` removed: add custom state if necessary

* `INITIAL_BASE_PROJECT_STATE` renamed into `INITIAL_PROJECT_BUILDER_STATE`

* A number of project store props and moved from `.project` to `.db`:
  * `.tables`
  * `.addTable`
  * `.getTable`
  * `.getTables`
  * `.getTableRowCount`
  * `.getTableSchema`
  * `.getTableSchemas`
  * `.checkTableExists`
  * `.dropTable`
  * `.createTableFromQuery`
  * `.setTableRowCount`
  * `.findTableByName`
  * `.refreshTableSchemas`

* `useBaseProjectStore` was renamed into `useBaseProjectBuilderStore`, but it's better to use `useProjectStore` returned by `createProjectBuilderStore` instead

* `processDroppedFile()` is removed: Use `ProjectStore.addProjectFile` directly.

* `ProjectStore.replaceProjectFile` is removed: Use `ProjectStore.addProjectFile` instead.

* `ProjectStore.addProjectFile` parameter changes: The function now takes a File or a pathname instead of the result of `processDroppedFile()`.

* `ProjectStore.addProjectFile` behavior changes: The function will no longer attempt to create unique table names, but will overwrite the created table.

* `ProjectStore.areViewsReadyToRender` and `onDataUpdated` were removed

* `ProjectStore.setTables` removed: use `state.db.refreshTableSchemas()` instead.

* `ProjectStore.isReadOnly` was removed: pass `isReadOnly` as a prop to respective components instead

### @sqlrooms/duckdb

* `useDuckDb()` now returns an instance of [`DuckDbConnector`](api/duckdb/interfaces/DuckDbConnector) to enable support for external DuckDB

* `getDuckDb` was removed: Use `useDuckDb()` instead

* `getDuckTableSchemas` was removed: use `const getTableSchemas = useProjectStore(state => state.db.getTableSchemas)`

* `exportToCsv` was removed: Use `useExportToCsv` instead

### @sqlrooms/mosaic

* `getMosaicConnector` removed: Use `useMosaic` instead

### @sqlrooms/ai

* `TOOLS` is not exported anymore: use `useProjectStore(state => state.ai.tools)` instead

## 0.8.0

### @sqlrooms/project-builder

* `project.config` moved to top level of `ProjectStore`

This was done to simplify persistence. To migrate you need to pull it up in your slice creation code.

Before:

```typescript
const {projectStore, useProjectStore} = createProjectStore<
  RoomConfig,
  RoomState
>(
    (set, get, store) => ({
      ...createProjectSlice<RoomConfig>({
        project: {
          config: {
            ...
          },
          ...
        }
      })
    })
);
```

After:

```typescript
const {projectStore, useProjectStore} = createProjectStore<
  RoomConfig,
  RoomState
>(
    (set, get, store) => ({
      ...createProjectSlice<RoomConfig>({
        config: {
          ...
        },
        project: {
          ...
        }
      })
    })
);
```

Check the [AI example store code](https://github.com/sqlrooms/examples/blob/main/ai/src/store.ts).

### @sqlrooms/ai

* Model provider in `getApiKey`

`getApiKey` property of `createAiSlice` now takes `modelProvider`:

```typescript
...createAiSlice({
getApiKey: (modelProvider: string) => {
  return get()?.apiKeys[modelProvider] || '';
},
})(set, get, store),

```

* Combining `useScrollToBottom` and `useScrollToBottomButton`

`useScrollToBottom` is now combined with `useScrollToBottomButton`. `useScrollToBottom` now takes `dataToObserve`, `containerRef`, `endRef`. When the data changes, the hook will scroll to the bottom of the container.

* Vega Chart Tool is now a custom tool

The Vega Chart Tool is no longer included by default and must be explicitly provided as a custom tool to `createAiSlice`. You need to import it from `@sqlrooms/vega` and add it to the `customTools` object:

```typescript
import {createVegaChartTool} from '@sqlrooms/vega';

...createAiSlice({
  getApiKey: (modelProvider: string) => {
    return get()?.apiKeys[modelProvider] || '';
  },
  // Add custom tools
  customTools: {
    // Add the VegaChart tool from the vega package
    chart: createVegaChartTool(),
    // Other custom tools...
  },
})(set, get, store),
```

This change allows for more flexibility in configuring the chart tool and reduces bundle size for applications that don't need chart functionality.

---

---
url: /api/ui/variables/Accordion.md
---
[@sqlrooms/ui](../index.md) / Accordion

# Variable: Accordion

> `const` **Accordion**: `ForwardRefExoticComponent`<`AccordionSingleProps` | `AccordionMultipleProps` & `RefAttributes`<`HTMLDivElement`>> = `AccordionPrimitive.Root`

---

---
url: /api/ui/variables/AccordionContent.md
---
[@sqlrooms/ui](../index.md) / AccordionContent

# Variable: AccordionContent

> `const` **AccordionContent**: `ForwardRefExoticComponent`<`Omit`<`AccordionContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/AccordionItem.md
---
[@sqlrooms/ui](../index.md) / AccordionItem

# Variable: AccordionItem

> `const` **AccordionItem**: `ForwardRefExoticComponent`<`Omit`<`AccordionItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/AccordionTrigger.md
---
[@sqlrooms/ui](../index.md) / AccordionTrigger

# Variable: AccordionTrigger

> `const` **AccordionTrigger**: `ForwardRefExoticComponent`<`Omit`<`AccordionTriggerProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`>>

---

---
url: /api/ai-settings/variables/AiModelParameters.md
---
[@sqlrooms/ai-settings](../index.md) / AiModelParameters

# Variable: AiModelParameters

> `const` **AiModelParameters**: `FC`

---

---
url: /api/ai/variables/AiModelParameters.md
---
[@sqlrooms/ai](../index.md) / AiModelParameters

# Variable: AiModelParameters

> `const` **AiModelParameters**: `FC`

---

---
url: /api/ai-settings/variables/AiModelsSettings.md
---
[@sqlrooms/ai-settings](../index.md) / AiModelsSettings

# Variable: AiModelsSettings

> `const` **AiModelsSettings**: `FC`<`AiModelsSettingsProps`>

---

---
url: /api/ai/variables/AiModelsSettings.md
---
[@sqlrooms/ai](../index.md) / AiModelsSettings

# Variable: AiModelsSettings

> `const` **AiModelsSettings**: `FC`<`AiModelsSettingsProps`>

---

---
url: /api/ai/variables/AiModelUsage.md
---
[@sqlrooms/ai](../index.md) / AiModelUsage

# Variable: AiModelUsage

> `const` **AiModelUsage**: `FC`<`AiModelUsageProps`>

---

---
url: /api/ai-settings/variables/AiModelUsage.md
---
[@sqlrooms/ai-settings](../index.md) / AiModelUsage

# Variable: AiModelUsage

> `const` **AiModelUsage**: `FC`<`AiModelUsageProps`>

---

---
url: /api/ai-settings/variables/AiProvidersSettings.md
---
[@sqlrooms/ai-settings](../index.md) / AiProvidersSettings

# Variable: AiProvidersSettings

> `const` **AiProvidersSettings**: `FC`

---

---
url: /api/ai/variables/AiProvidersSettings.md
---
[@sqlrooms/ai](../index.md) / AiProvidersSettings

# Variable: AiProvidersSettings

> `const` **AiProvidersSettings**: `FC`

---

---
url: /api/ai-settings/variables/AiSettingsPanel.md
---
[@sqlrooms/ai-settings](../index.md) / AiSettingsPanel

# Variable: AiSettingsPanel

> `const` **AiSettingsPanel**: `FC`<`PropsWithChildren`<`AiSettingsPanelProps`>> & `object`

## Type Declaration

| Name | Type | Default value |
| ------ | ------ | ------ |
| `ProvidersSettings` | `FC` | `AiProvidersSettings` |
| `ModelsSettings` | `FC`<`AiModelsSettingsProps`> | `AiModelsSettings` |
| `ModelUsage` | `FC`<`AiModelUsageProps`> | `AiModelUsage` |
| `ModelParametersSettings` | `FC` | `AiModelParameters` |

---

---
url: /api/ai/variables/AiSettingsPanel.md
---
[@sqlrooms/ai](../index.md) / AiSettingsPanel

# Variable: AiSettingsPanel

> `const` **AiSettingsPanel**: `FC`<`PropsWithChildren`<`AiSettingsPanelProps`>> & `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
| `ProvidersSettings` | `FC` |
| `ModelsSettings` | `FC`<`AiModelsSettingsProps`> |
| `ModelUsage` | `FC`<{ `className?`: `string`; `modelUsage?`: [`ModelUsageData`](../interfaces/ModelUsageData.md); }> |
| `ModelParametersSettings` | `FC` |

---

---
url: /api/ai-config/variables/AiSettingsSliceConfig.md
---
[@sqlrooms/ai-config](../index.md) / AiSettingsSliceConfig

# Variable: AiSettingsSliceConfig

> `const` **AiSettingsSliceConfig**: `ZodObject`<[`AiSettingsSliceConfig`](../type-aliases/AiSettingsSliceConfig.md)>

---

---
url: /api/ai/variables/AiSettingsSliceConfig.md
---
[@sqlrooms/ai](../index.md) / AiSettingsSliceConfig

# Variable: AiSettingsSliceConfig

> `const` **AiSettingsSliceConfig**: `z.ZodObject`<[`AiSettingsSliceConfig`](../type-aliases/AiSettingsSliceConfig.md)>

---

---
url: /api/ai-settings/variables/AiSettingsSliceConfig.md
---
[@sqlrooms/ai-settings](../index.md) / AiSettingsSliceConfig

# Variable: AiSettingsSliceConfig

> `const` **AiSettingsSliceConfig**: `z.ZodObject`<[`AiSettingsSliceConfig`](../type-aliases/AiSettingsSliceConfig.md)>

---

---
url: /api/ai-config/variables/AiSliceConfig.md
---
[@sqlrooms/ai-config](../index.md) / AiSliceConfig

# Variable: AiSliceConfig

> `const` **AiSliceConfig**: `ZodObject`<[`AiSliceConfig`](../type-aliases/AiSliceConfig.md)>

---

---
url: /api/ai-core/variables/AiSliceConfig.md
---
[@sqlrooms/ai-core](../index.md) / AiSliceConfig

# Variable: AiSliceConfig

> `const` **AiSliceConfig**: `z.ZodObject`<[`AiSliceConfig`](../type-aliases/AiSliceConfig.md)>

---

---
url: /api/ai/variables/AiSliceConfig.md
---
[@sqlrooms/ai](../index.md) / AiSliceConfig

# Variable: AiSliceConfig

> `const` **AiSliceConfig**: `z.ZodObject`<[`AiSliceConfig`](../type-aliases/AiSliceConfig.md)>

---

---
url: /api/ai-core/variables/AiThinkingDots.md
---
[@sqlrooms/ai-core](../index.md) / AiThinkingDots

# Variable: AiThinkingDots

> `const` **AiThinkingDots**: `React.FC`<{ `className?`: `string`; }>

Animated thinking indicator with ellipsis dots

## Param

The className for the component

## Returns

The AiThinkingDots component

---

---
url: /api/ai/variables/AiThinkingDots.md
---
[@sqlrooms/ai](../index.md) / AiThinkingDots

# Variable: AiThinkingDots

> `const` **AiThinkingDots**: `React.FC`<{ `className?`: `string`; }>

Animated thinking indicator with ellipsis dots

## Param

The className for the component

## Returns

The AiThinkingDots component

---

---
url: /api/ui/variables/Alert.md
---
[@sqlrooms/ui](../index.md) / Alert

# Variable: Alert

> `const` **Alert**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLDivElement`> & `VariantProps`<(`props?`) => `string`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/AlertDescription.md
---
[@sqlrooms/ui](../index.md) / AlertDescription

# Variable: AlertDescription

> `const` **AlertDescription**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLParagraphElement`> & `RefAttributes`<`HTMLParagraphElement`>>

---

---
url: /api/ui/variables/AlertTitle.md
---
[@sqlrooms/ui](../index.md) / AlertTitle

# Variable: AlertTitle

> `const` **AlertTitle**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLHeadingElement`> & `RefAttributes`<`HTMLParagraphElement`>>

---

---
url: /api/ai-core/variables/AnalysisResult.md
---
[@sqlrooms/ai-core](../index.md) / AnalysisResult

# Variable: AnalysisResult

> `const` **AnalysisResult**: `React.FC`<`AnalysisResultProps`>

Component that displays the results of an AI analysis.
Shows the original prompt, intermediate tool calls, final analysis text,
and any tool results.

## Component

## Param

Component props

## Param

The analysis result data to display

## Returns

A React component displaying the analysis results

---

---
url: /api/ai/variables/AnalysisResult.md
---
[@sqlrooms/ai](../index.md) / AnalysisResult

# Variable: AnalysisResult

> `const` **AnalysisResult**: `React.FC`<`AnalysisResultProps`>

Component that displays the results of an AI analysis.
Shows the original prompt, intermediate tool calls, final analysis text,
and any tool results.

## Component

## Param

Component props

## Param

The analysis result data to display

## Returns

A React component displaying the analysis results

---

---
url: /api/ai-config/variables/AnalysisResultSchema.md
---
[@sqlrooms/ai-config](../index.md) / AnalysisResultSchema

# Variable: AnalysisResultSchema

> `const` **AnalysisResultSchema**: `ZodObject`<[`AnalysisResultSchema`](../type-aliases/AnalysisResultSchema.md)>

---

---
url: /api/ai/variables/AnalysisResultSchema.md
---
[@sqlrooms/ai](../index.md) / AnalysisResultSchema

# Variable: AnalysisResultSchema

> `const` **AnalysisResultSchema**: `z.ZodObject`<[`AnalysisResultSchema`](../type-aliases/AnalysisResultSchema.md)>

---

---
url: /api/ai-core/variables/AnalysisResultsContainer.md
---
[@sqlrooms/ai-core](../index.md) / AnalysisResultsContainer

# Variable: AnalysisResultsContainer

> `const` **AnalysisResultsContainer**: `React.FC`<{ `className?`: `string`; `enableReasoningBox?`: `boolean`; `customMarkdownComponents?`: `Partial`<`Components`>; `userTools?`: `string`\[]; }>

---

---
url: /api/ai/variables/AnalysisResultsContainer.md
---
[@sqlrooms/ai](../index.md) / AnalysisResultsContainer

# Variable: AnalysisResultsContainer

> `const` **AnalysisResultsContainer**: `React.FC`<{ `className?`: `string`; `enableReasoningBox?`: `boolean`; `customMarkdownComponents?`: `Partial`<`Components`>; `userTools?`: `string`\[]; }>

---

---
url: /api/ai-config/variables/AnalysisSessionSchema.md
---
[@sqlrooms/ai-config](../index.md) / AnalysisSessionSchema

# Variable: AnalysisSessionSchema

> `const` **AnalysisSessionSchema**: `ZodPipe`<[`AnalysisSessionSchema`](../type-aliases/AnalysisSessionSchema.md)> = `migrateAnalysisSession`

---

---
url: /api/ai/variables/AnalysisSessionSchema.md
---
[@sqlrooms/ai](../index.md) / AnalysisSessionSchema

# Variable: AnalysisSessionSchema

> `const` **AnalysisSessionSchema**: `z.ZodPipe`<[`AnalysisSessionSchema`](../type-aliases/AnalysisSessionSchema.md)>

---

---
url: /api/recharts/variables/AreaChart.md
---
[@sqlrooms/recharts](../index.md) / AreaChart

# Variable: AreaChart

> `const` **AreaChart**: `ForwardRefExoticComponent`

---

---
url: /api/ui/variables/AspectRatio.md
---
[@sqlrooms/ui](../index.md) / AspectRatio

# Variable: AspectRatio

> `const` **AspectRatio**: `ForwardRefExoticComponent`<`AspectRatioProps` & `RefAttributes`<`HTMLDivElement`>> = `AspectRatioPrimitive.Root`

---

---
url: /api/ui/variables/badgeVariants.md
---
[@sqlrooms/ui](../index.md) / badgeVariants

# Variable: badgeVariants()

> `const` **badgeVariants**: (`props?`) => `string`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props?` | ConfigVariants<{ variant: { default: string; secondary: string; destructive: string; outline: string; }; }> & ClassProp |

## Returns

`string`

---

---
url: /api/recharts/variables/BarChart.md
---
[@sqlrooms/recharts](../index.md) / BarChart

# Variable: BarChart

> `const` **BarChart**: `ForwardRefExoticComponent`

---

---
url: /api/room-config/variables/BaseDataSource.md
---
[@sqlrooms/room-config](../index.md) / BaseDataSource

# Variable: BaseDataSource

> `const` **BaseDataSource**: `ZodObject`<[`BaseDataSource`](../type-aliases/BaseDataSource.md)>

**`Interface`**

Base interface for all data source configurations
BaseDataSource

---

---
url: /api/room-shell/variables/BaseDataSource.md
---
[@sqlrooms/room-shell](../index.md) / BaseDataSource

# Variable: BaseDataSource

> `const` **BaseDataSource**: `z.ZodObject`<[`BaseDataSource`](../type-aliases/BaseDataSource.md)>

**`Interface`**

Base interface for all data source configurations
BaseDataSource

---

---
url: /api/room-store/variables/BaseDataSource.md
---
[@sqlrooms/room-store](../index.md) / BaseDataSource

# Variable: BaseDataSource

> `const` **BaseDataSource**: `z.ZodObject`<[`BaseDataSource`](../type-aliases/BaseDataSource.md)>

**`Interface`**

Base interface for all data source configurations
BaseDataSource

---

---
url: /api/room-config/variables/BaseRoomConfig.md
---
[@sqlrooms/room-config](../index.md) / BaseRoomConfig

# Variable: BaseRoomConfig

> `const` **BaseRoomConfig**: `ZodObject`<[`BaseRoomConfig`](../type-aliases/BaseRoomConfig.md)>

---

---
url: /api/room-shell/variables/BaseRoomConfig.md
---
[@sqlrooms/room-shell](../index.md) / BaseRoomConfig

# Variable: BaseRoomConfig

> `const` **BaseRoomConfig**: `z.ZodObject`<[`BaseRoomConfig`](../type-aliases/BaseRoomConfig.md)>

---

---
url: /api/room-store/variables/BaseRoomConfig.md
---
[@sqlrooms/room-store](../index.md) / BaseRoomConfig

# Variable: BaseRoomConfig

> `const` **BaseRoomConfig**: `z.ZodObject`<[`BaseRoomConfig`](../type-aliases/BaseRoomConfig.md)>

---

---
url: /api/ui/variables/Breadcrumb.md
---
[@sqlrooms/ui](../index.md) / Breadcrumb

# Variable: Breadcrumb

> `const` **Breadcrumb**: `ForwardRefExoticComponent`<`Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLElement`>, `HTMLElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLElement`>>

---

---
url: /api/ui/variables/BreadcrumbItem.md
---
[@sqlrooms/ui](../index.md) / BreadcrumbItem

# Variable: BreadcrumbItem

> `const` **BreadcrumbItem**: `ForwardRefExoticComponent`<`Omit`<`DetailedHTMLProps`<`LiHTMLAttributes`<`HTMLLIElement`>, `HTMLLIElement`>, `"ref"`> & `RefAttributes`<`HTMLLIElement`>>

---

---
url: /api/ui/variables/BreadcrumbLink.md
---
[@sqlrooms/ui](../index.md) / BreadcrumbLink

# Variable: BreadcrumbLink

> `const` **BreadcrumbLink**: `ForwardRefExoticComponent`<`Omit`<`DetailedHTMLProps`<`AnchorHTMLAttributes`<`HTMLAnchorElement`>, `HTMLAnchorElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLAnchorElement`>>

---

---
url: /api/ui/variables/BreadcrumbList.md
---
[@sqlrooms/ui](../index.md) / BreadcrumbList

# Variable: BreadcrumbList

> `const` **BreadcrumbList**: `ForwardRefExoticComponent`<`Omit`<`DetailedHTMLProps`<`OlHTMLAttributes`<`HTMLOListElement`>, `HTMLOListElement`>, `"ref"`> & `RefAttributes`<`HTMLOListElement`>>

---

---
url: /api/ui/variables/BreadcrumbPage.md
---
[@sqlrooms/ui](../index.md) / BreadcrumbPage

# Variable: BreadcrumbPage

> `const` **BreadcrumbPage**: `ForwardRefExoticComponent`<`Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLSpanElement`>, `HTMLSpanElement`>, `"ref"`> & `RefAttributes`<`HTMLSpanElement`>>

---

---
url: /api/ui/variables/Button.md
---
[@sqlrooms/ui](../index.md) / Button

# Variable: Button

> `const` **Button**: `ForwardRefExoticComponent`<[`ButtonProps`](../interfaces/ButtonProps.md) & `RefAttributes`<`HTMLButtonElement`>>

---

---
url: /api/ui/variables/buttonVariants.md
---
[@sqlrooms/ui](../index.md) / buttonVariants

# Variable: buttonVariants()

> `const` **buttonVariants**: (`props?`) => `string`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props?` | ConfigVariants<{ variant: { default: string; destructive: string; outline: string; secondary: string; ghost: string; link: string; }; size: { default: string; sm: string; lg: string; icon: string; xs: string; }; }> & ClassProp |

## Returns

`string`

---

---
url: /api/canvas/variables/Canvas.md
---
[@sqlrooms/canvas](../index.md) / Canvas

# Variable: Canvas

> `const` **Canvas**: `React.FC`

---

---
url: /api/canvas/variables/CanvasSliceConfig.md
---
[@sqlrooms/canvas](../index.md) / CanvasSliceConfig

# Variable: CanvasSliceConfig

> `const` **CanvasSliceConfig**: `ZodObject`<[`CanvasSliceConfig`](../type-aliases/CanvasSliceConfig.md)>

---

---
url: /api/ui/variables/Card.md
---
[@sqlrooms/ui](../index.md) / Card

# Variable: Card

> `const` **Card**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLDivElement`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/CardContent.md
---
[@sqlrooms/ui](../index.md) / CardContent

# Variable: CardContent

> `const` **CardContent**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLDivElement`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/CardDescription.md
---
[@sqlrooms/ui](../index.md) / CardDescription

# Variable: CardDescription

> `const` **CardDescription**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLDivElement`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/CardFooter.md
---
[@sqlrooms/ui](../index.md) / CardFooter

# Variable: CardFooter

> `const` **CardFooter**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLDivElement`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/CardHeader.md
---
[@sqlrooms/ui](../index.md) / CardHeader

# Variable: CardHeader

> `const` **CardHeader**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLDivElement`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/CardTitle.md
---
[@sqlrooms/ui](../index.md) / CardTitle

# Variable: CardTitle

> `const` **CardTitle**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLDivElement`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/recharts/variables/Cell.md
---
[@sqlrooms/recharts](../index.md) / Cell

# Variable: Cell

> `const` **Cell**: `FunctionComponent`<[`CellProps`](../type-aliases/CellProps.md)>

---

---
url: /api/recharts/variables/ChartContainer.md
---
[@sqlrooms/recharts](../index.md) / ChartContainer

# Variable: ChartContainer

> `const` **ChartContainer**: `ForwardRefExoticComponent`<`Omit`<`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & `object`, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/recharts/variables/ChartLegend.md
---
[@sqlrooms/recharts](../index.md) / ChartLegend

# Variable: ChartLegend

> `const` **ChartLegend**: *typeof* [`Legend`](../classes/Legend.md) = `RechartsPrimitive.Legend`

---

---
url: /api/recharts/variables/ChartLegendContent.md
---
[@sqlrooms/recharts](../index.md) / ChartLegendContent

# Variable: ChartLegendContent

> `const` **ChartLegendContent**: `ForwardRefExoticComponent`<`Omit`<`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & `Pick`<[`LegendProps`](../type-aliases/LegendProps.md), `"payload"` | `"verticalAlign"`> & `object`, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/recharts/variables/ChartTooltip.md
---
[@sqlrooms/recharts](../index.md) / ChartTooltip

# Variable: ChartTooltip

> `const` **ChartTooltip**: *typeof* [`Tooltip`](../classes/Tooltip.md) = `RechartsPrimitive.Tooltip`

---

---
url: /api/recharts/variables/ChartTooltipContent.md
---
[@sqlrooms/recharts](../index.md) / ChartTooltipContent

# Variable: ChartTooltipContent

> `const` **ChartTooltipContent**: `ForwardRefExoticComponent`<`Omit`<[`DefaultTooltipContentProps`](../interfaces/DefaultTooltipContentProps.md)<`ValueType`, `NameType`> & `object` & `ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & `object`, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/Checkbox.md
---
[@sqlrooms/ui](../index.md) / Checkbox

# Variable: Checkbox

> `const` **Checkbox**: `ForwardRefExoticComponent`<`Omit`<`CheckboxProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`>>

---

---
url: /api/ui/variables/Collapsible.md
---
[@sqlrooms/ui](../index.md) / Collapsible

# Variable: Collapsible

> `const` **Collapsible**: `React.ForwardRefExoticComponent`<`CollapsibleProps` & `React.RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/CollapsibleContent.md
---
[@sqlrooms/ui](../index.md) / CollapsibleContent

# Variable: CollapsibleContent

> `const` **CollapsibleContent**: `React.ForwardRefExoticComponent`<`CollapsibleContentProps` & `React.RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/CollapsibleTrigger.md
---
[@sqlrooms/ui](../index.md) / CollapsibleTrigger

# Variable: CollapsibleTrigger

> `const` **CollapsibleTrigger**: `React.ForwardRefExoticComponent`<`CollapsibleTriggerProps` & `React.RefAttributes`<`HTMLButtonElement`>>

---

---
url: /api/schema-tree/variables/ColumnTreeNode.md
---
[@sqlrooms/schema-tree](../index.md) / ColumnTreeNode

# Variable: ColumnTreeNode

> `const` **ColumnTreeNode**: `FC`<{ `className?`: `string`; `nodeObject`: `ColumnNodeObject`; `additionalMenuItems?`: `React.ReactNode`; }>

---

---
url: /api/data-table/variables/ColumnTypeBadge.md
---
[@sqlrooms/data-table](../index.md) / ColumnTypeBadge

# Variable: ColumnTypeBadge

> `const` **ColumnTypeBadge**: `FC`<{ `className?`: `string`; `columnType`: `unknown`; `typeCategory?`: `ColumnTypeCategory`; }>

∏
A badge that displays the type of a database table column.

---

---
url: /api/ui/variables/Command.md
---
[@sqlrooms/ui](../index.md) / Command

# Variable: Command

> `const` **Command**: `ForwardRefExoticComponent`<`Omit`<`Children` & `Pick`<`Pick`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"key"` | keyof HTMLAttributes\<HTMLDivElement>> & `object` & `object`, `"key"` | keyof HTMLAttributes\<HTMLDivElement> | `"asChild"`> & `object` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/CommandEmpty.md
---
[@sqlrooms/ui](../index.md) / CommandEmpty

# Variable: CommandEmpty

> `const` **CommandEmpty**: `ForwardRefExoticComponent`<`Omit`<`Children` & `Pick`<`Pick`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"key"` | keyof HTMLAttributes\<HTMLDivElement>> & `object` & `object`, `"key"` | keyof HTMLAttributes\<HTMLDivElement> | `"asChild"`> & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/CommandGroup.md
---
[@sqlrooms/ui](../index.md) / CommandGroup

# Variable: CommandGroup

> `const` **CommandGroup**: `ForwardRefExoticComponent`<`Omit`<`Children` & `Omit`<`Pick`<`Pick`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"key"` | keyof HTMLAttributes\<HTMLDivElement>> & `object` & `object`, `"key"` | keyof HTMLAttributes\<HTMLDivElement> | `"asChild"`>, `"heading"` | `"value"`> & `object` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/CommandInput.md
---
[@sqlrooms/ui](../index.md) / CommandInput

# Variable: CommandInput

> `const` **CommandInput**: `ForwardRefExoticComponent`<`Omit`<`Omit`<`Pick`<`Pick`<`DetailedHTMLProps`<`InputHTMLAttributes`<`HTMLInputElement`>, `HTMLInputElement`>, `"key"` | keyof InputHTMLAttributes\<HTMLInputElement>> & `object` & `object`, `"key"` | `"asChild"` | keyof InputHTMLAttributes\<HTMLInputElement>>, `"onChange"` | `"value"` | `"type"`> & `object` & `RefAttributes`<`HTMLInputElement`>, `"ref"`> & `RefAttributes`<`HTMLInputElement`>>

---

---
url: /api/ui/variables/CommandItem.md
---
[@sqlrooms/ui](../index.md) / CommandItem

# Variable: CommandItem

> `const` **CommandItem**: `ForwardRefExoticComponent`<`Omit`<`Children` & `Omit`<`Pick`<`Pick`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"key"` | keyof HTMLAttributes\<HTMLDivElement>> & `object` & `object`, `"key"` | keyof HTMLAttributes\<HTMLDivElement> | `"asChild"`>, `"onSelect"` | `"disabled"` | `"value"`> & `object` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/CommandList.md
---
[@sqlrooms/ui](../index.md) / CommandList

# Variable: CommandList

> `const` **CommandList**: `ForwardRefExoticComponent`<`Omit`<`Children` & `Pick`<`Pick`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"key"` | keyof HTMLAttributes\<HTMLDivElement>> & `object` & `object`, `"key"` | keyof HTMLAttributes\<HTMLDivElement> | `"asChild"`> & `object` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/CommandSeparator.md
---
[@sqlrooms/ui](../index.md) / CommandSeparator

# Variable: CommandSeparator

> `const` **CommandSeparator**: `ForwardRefExoticComponent`<`Omit`<`Pick`<`Pick`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"key"` | keyof HTMLAttributes\<HTMLDivElement>> & `object` & `object`, `"key"` | keyof HTMLAttributes\<HTMLDivElement> | `"asChild"`> & `object` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/discuss/variables/Comment.md
---
[@sqlrooms/discuss](../index.md) / Comment

# Variable: Comment

> `const` **Comment**: `ZodObject`<[`Comment`](../type-aliases/Comment.md)>

---

---
url: /api/discuss/variables/CommentItem.md
---
[@sqlrooms/discuss](../index.md) / CommentItem

# Variable: CommentItem

> `const` **CommentItem**: `ForwardRefExoticComponent`<`Omit`<`CommentItemProps`, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/recharts/variables/ComposedChart.md
---
[@sqlrooms/recharts](../index.md) / ComposedChart

# Variable: ComposedChart

> `const` **ComposedChart**: `ForwardRefExoticComponent`

---

---
url: /api/ui/variables/ContextMenu.md
---
[@sqlrooms/ui](../index.md) / ContextMenu

# Variable: ContextMenu

> `const` **ContextMenu**: `FC`<`ContextMenuProps`> = `ContextMenuPrimitive.Root`

---

---
url: /api/ui/variables/ContextMenuCheckboxItem.md
---
[@sqlrooms/ui](../index.md) / ContextMenuCheckboxItem

# Variable: ContextMenuCheckboxItem

> `const` **ContextMenuCheckboxItem**: `ForwardRefExoticComponent`<`Omit`<`ContextMenuCheckboxItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/ContextMenuContent.md
---
[@sqlrooms/ui](../index.md) / ContextMenuContent

# Variable: ContextMenuContent

> `const` **ContextMenuContent**: `ForwardRefExoticComponent`<`Omit`<`ContextMenuContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/ContextMenuGroup.md
---
[@sqlrooms/ui](../index.md) / ContextMenuGroup

# Variable: ContextMenuGroup

> `const` **ContextMenuGroup**: `ForwardRefExoticComponent`<`ContextMenuGroupProps` & `RefAttributes`<`HTMLDivElement`>> = `ContextMenuPrimitive.Group`

---

---
url: /api/ui/variables/ContextMenuItem.md
---
[@sqlrooms/ui](../index.md) / ContextMenuItem

# Variable: ContextMenuItem

> `const` **ContextMenuItem**: `ForwardRefExoticComponent`<`Omit`<`ContextMenuItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/ContextMenuLabel.md
---
[@sqlrooms/ui](../index.md) / ContextMenuLabel

# Variable: ContextMenuLabel

> `const` **ContextMenuLabel**: `ForwardRefExoticComponent`<`Omit`<`ContextMenuLabelProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/ContextMenuPortal.md
---
[@sqlrooms/ui](../index.md) / ContextMenuPortal

# Variable: ContextMenuPortal

> `const` **ContextMenuPortal**: `FC`<`ContextMenuPortalProps`> = `ContextMenuPrimitive.Portal`

---

---
url: /api/ui/variables/ContextMenuRadioGroup.md
---
[@sqlrooms/ui](../index.md) / ContextMenuRadioGroup

# Variable: ContextMenuRadioGroup

> `const` **ContextMenuRadioGroup**: `ForwardRefExoticComponent`<`ContextMenuRadioGroupProps` & `RefAttributes`<`HTMLDivElement`>> = `ContextMenuPrimitive.RadioGroup`

---

---
url: /api/ui/variables/ContextMenuRadioItem.md
---
[@sqlrooms/ui](../index.md) / ContextMenuRadioItem

# Variable: ContextMenuRadioItem

> `const` **ContextMenuRadioItem**: `ForwardRefExoticComponent`<`Omit`<`ContextMenuRadioItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/ContextMenuSeparator.md
---
[@sqlrooms/ui](../index.md) / ContextMenuSeparator

# Variable: ContextMenuSeparator

> `const` **ContextMenuSeparator**: `ForwardRefExoticComponent`<`Omit`<`ContextMenuSeparatorProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/ContextMenuSub.md
---
[@sqlrooms/ui](../index.md) / ContextMenuSub

# Variable: ContextMenuSub

> `const` **ContextMenuSub**: `FC`<`ContextMenuSubProps`> = `ContextMenuPrimitive.Sub`

---

---
url: /api/ui/variables/ContextMenuSubContent.md
---
[@sqlrooms/ui](../index.md) / ContextMenuSubContent

# Variable: ContextMenuSubContent

> `const` **ContextMenuSubContent**: `ForwardRefExoticComponent`<`Omit`<`ContextMenuSubContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/ContextMenuSubTrigger.md
---
[@sqlrooms/ui](../index.md) / ContextMenuSubTrigger

# Variable: ContextMenuSubTrigger

> `const` **ContextMenuSubTrigger**: `ForwardRefExoticComponent`<`Omit`<`ContextMenuSubTriggerProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/ContextMenuTrigger.md
---
[@sqlrooms/ui](../index.md) / ContextMenuTrigger

# Variable: ContextMenuTrigger

> `const` **ContextMenuTrigger**: `ForwardRefExoticComponent`<`ContextMenuTriggerProps` & `RefAttributes`<`HTMLSpanElement`>> = `ContextMenuPrimitive.Trigger`

---

---
url: /api/ui/variables/CopyButton.md
---
[@sqlrooms/ui](../index.md) / CopyButton

# Variable: CopyButton

> `const` **CopyButton**: `React.FC`<[`CopyButtonProps`](../interfaces/CopyButtonProps.md)>

---

---
url: /api/cosmos/variables/CosmosGraph.md
---
[@sqlrooms/cosmos](../index.md) / CosmosGraph

# Variable: CosmosGraph

> `const` **CosmosGraph**: `FC`<[`CosmosGraphProps`](../type-aliases/CosmosGraphProps.md)>

A React component that renders an interactive graph visualization using Cosmos.

Features:

* Renders points and optional links in a WebGL canvas
* Supports point hovering with customizable tooltips
* Handles point focusing
* Provides graph state to child components through zustand store

## Example

```tsx
const MyGraph = () => {
  const config = {
    backgroundColor: '#ffffff',
    nodeSize: 5,
    simulation: {
      repulsion: 0.5,
      gravity: 0.1,
    },
  };

  return (
    <div style={{ width: '800px', height: '600px' }}>
      <CosmosGraph
        config={config}
        pointPositions={new Float32Array([0, 0, 1, 1])}
        pointColors={new Float32Array([1, 0, 0, 1, 0, 1, 0, 1])}
        pointSizes={new Float32Array([5, 5])}
        renderPointTooltip={(index) => `Point ${index}`}
      >
        <GraphControls />
      </CosmosGraph>
    </div>
  );
};
```

---

---
url: /api/cosmos/variables/CosmosGraphControls.md
---
[@sqlrooms/cosmos](../index.md) / CosmosGraphControls

# Variable: CosmosGraphControls

> `const` **CosmosGraphControls**: `FC`<`PropsWithChildren`<`CosmosGraphControlsProps`>>

A flexible control panel component for CosmosGraph that provides view controls.
Must be used within a CosmosGraph component as it relies on the graph state from the store.

The component shows the default fit view control and allows adding custom controls as children.
For simulation controls, use the CosmosSimulationControls component.

## Examples

```tsx
<CosmosGraph {...graphProps}>
  <CosmosGraphControls />
</CosmosGraph>
```

```tsx
<CosmosGraph {...graphProps}>
  <CosmosGraphControls className="absolute bottom-4 right-4" />
</CosmosGraph>
```

```tsx
<CosmosGraph {...graphProps}>
  <CosmosGraphControls>
    <Button onClick={handleExport}>
      <Download className="h-4 w-4" />
    </Button>
  </CosmosGraphControls>
</CosmosGraph>
```

---

---
url: /api/cosmos/variables/CosmosSimulationControls.md
---
[@sqlrooms/cosmos](../index.md) / CosmosSimulationControls

# Variable: CosmosSimulationControls

> `const` **CosmosSimulationControls**: `FC`<`CosmosSimulationControlsProps`>

A component that provides fine-grained controls for adjusting graph simulation parameters.
Uses the zustand store to access and control the graph state.

Features:

* Slider controls for all simulation parameters
* Real-time parameter adjustment
* Tooltips with parameter descriptions
* Customizable positioning
* Default values optimized for common use cases

Available parameters:

* Gravity (0-0.5): Controls how strongly nodes are pulled toward the center
* Repulsion (0-2): Controls how strongly nodes push away from each other
* Link Strength (0-2): Controls the spring force between connected nodes
* Link Distance (1-20): Sets the natural length of links between nodes
* Friction (0-1): Controls how quickly node movement decays
* Decay (100-10000): Controls how quickly the simulation "cools down"

## Examples

```tsx
import { CosmosGraph, CosmosSimulationControls } from '@sqlrooms/cosmos';

const MyGraph = () => {
  return (
      <CosmosGraph {...graphProps}>
        <CosmosSimulationControls />
      </CosmosGraph>
  );
};
```

```tsx
import { CosmosGraph, CosmosGraphControls, CosmosSimulationControls } from '@sqlrooms/cosmos';

const MyGraph = () => {
  return (
      <CosmosGraph {...graphProps}>
        <CosmosGraphControls className="absolute top-4 left-4" />
        <CosmosSimulationControls className="absolute top-4 right-4" />
      </CosmosGraph>
  );
};
```

```tsx
<CosmosGraph {...graphProps}>
  <CosmosSimulationControls
    className="absolute bottom-4 right-4 bg-opacity-75 backdrop-blur-sm"
  />
</CosmosGraph>
```

---

---
url: /api/cosmos/variables/CosmosSliceConfig.md
---
[@sqlrooms/cosmos](../index.md) / CosmosSliceConfig

# Variable: CosmosSliceConfig

> `const` **CosmosSliceConfig**: `ZodObject`<[`CosmosSliceConfig`](../type-aliases/CosmosSliceConfig.md)>

Zod schema for validating and configuring the Cosmos graph visualization.
This schema defines all available configuration options and their types.

The configuration is divided into several categories:

Node Appearance:

* `pointSizeScale`: Controls the size of nodes
* `scalePointsOnZoom`: Enables dynamic node sizing based on zoom level

Link Appearance:

* `renderLinks`: Toggles link visibility
* `linkWidthScale`: Controls link thickness
* `linkArrows`: Toggles directional arrows
* `linkArrowsSizeScale`: Controls arrow size
* `curvedLinks`: Toggles curved/straight links

Physics Simulation:

* `simulationGravity`: Central gravitational force (0.25)
* `simulationRepulsion`: Node repulsion force (1.0)
* `simulationLinkSpring`: Link spring force (1.0)
* `simulationLinkDistance`: Natural link length (10)
* `simulationFriction`: Movement damping (0.85)
* `simulationDecay`: Simulation cooling rate (1000)

## Examples

```typescript
const config: CosmosSliceConfig = {
  cosmos: {
    pointSizeScale: 1.2,
    scalePointsOnZoom: true,
    renderLinks: true,
    linkWidthScale: 1.5,
    simulationGravity: 0.25
  }
};
```

```typescript
const directedGraphConfig: CosmosSliceConfig = {
  cosmos: {
    linkArrows: true,
    linkArrowsSizeScale: 1.2,
    curvedLinks: true,
    simulationLinkDistance: 15,
    simulationLinkSpring: 1.2
  }
};
```

```typescript
const largeGraphConfig: CosmosSliceConfig = {
  cosmos: {
    simulationGravity: 0.1,
    simulationRepulsion: 0.8,
    simulationFriction: 0.9,
    simulationDecay: 2000,
    scalePointsOnZoom: false
  }
};
```

---

---
url: /api/sql-editor/variables/CreateTableModal.md
---
[@sqlrooms/sql-editor](../index.md) / CreateTableModal

# Variable: CreateTableModal

> `const` **CreateTableModal**: `FC`<[`CreateTableModalProps`](../type-aliases/CreateTableModalProps.md)>

---

---
url: /api/recharts/variables/Cross.md
---
[@sqlrooms/recharts](../index.md) / Cross

# Variable: Cross

> `const` **Cross**: `React.FC`<[`CrossProps`](../type-aliases/CrossProps.md)>

---

---
url: /api/recharts/variables/Curve.md
---
[@sqlrooms/recharts](../index.md) / Curve

# Variable: Curve

> `const` **Curve**: `React.FC`<[`CurveProps`](../type-aliases/CurveProps.md)>

---

---
url: /api/schema-tree/variables/DatabaseTreeNode.md
---
[@sqlrooms/schema-tree](../index.md) / DatabaseTreeNode

# Variable: DatabaseTreeNode

> `const` **DatabaseTreeNode**: `FC`<{ `className?`: `string`; `nodeObject`: `DatabaseNodeObject`; `additionalMenuItems?`: `React.ReactNode`; }>

---

---
url: /api/room-config/variables/DataSource.md
---
[@sqlrooms/room-config](../index.md) / DataSource

# Variable: DataSource

> `const` **DataSource**: `ZodDiscriminatedUnion`<[`DataSource`](../type-aliases/DataSource.md)>

Union type representing all possible data source configurations
Discriminated union based on the 'type' field

---

---
url: /api/room-shell/variables/DataSource.md
---
[@sqlrooms/room-shell](../index.md) / DataSource

# Variable: DataSource

> `const` **DataSource**: `z.ZodDiscriminatedUnion`<[`DataSource`](../type-aliases/DataSource.md)>

Union type representing all possible data source configurations
Discriminated union based on the 'type' field

---

---
url: /api/room-store/variables/DataSource.md
---
[@sqlrooms/room-store](../index.md) / DataSource

# Variable: DataSource

> `const` **DataSource**: `z.ZodDiscriminatedUnion`<[`DataSource`](../type-aliases/DataSource.md)>

Union type representing all possible data source configurations
Discriminated union based on the 'type' field

---

---
url: /api/room-config/variables/DataSourceTypes.md
---
[@sqlrooms/room-config](../index.md) / DataSourceTypes

# Variable: DataSourceTypes

> `const` **DataSourceTypes**: `ZodEnum`<[`DataSourceTypes`](../type-aliases/DataSourceTypes.md)>

Enum representing the supported types of data sources

---

---
url: /api/room-shell/variables/DataSourceTypes.md
---
[@sqlrooms/room-shell](../index.md) / DataSourceTypes

# Variable: DataSourceTypes

> `const` **DataSourceTypes**: `z.ZodEnum`<[`DataSourceTypes`](../type-aliases/DataSourceTypes.md)>

Enum representing the supported types of data sources

---

---
url: /api/room-store/variables/DataSourceTypes.md
---
[@sqlrooms/room-store](../index.md) / DataSourceTypes

# Variable: DataSourceTypes

> `const` **DataSourceTypes**: `z.ZodEnum`<[`DataSourceTypes`](../type-aliases/DataSourceTypes.md)>

Enum representing the supported types of data sources

---

---
url: /api/data-table/variables/DataTableArrowPaginated.md
---
[@sqlrooms/data-table](../index.md) / DataTableArrowPaginated

# Variable: DataTableArrowPaginated

> `const` **DataTableArrowPaginated**: `FC`<{ `className?`: `string`; `table`: `arrow.Table` | `undefined`; `fontSize?`: [`DataTablePaginatedProps`](../type-aliases/DataTablePaginatedProps.md)<`any`>\[`"fontSize"`]; `footerActions?`: [`DataTablePaginatedProps`](../type-aliases/DataTablePaginatedProps.md)<`any`>\[`"footerActions"`]; `pageSize?`: `number`; }>

---

---
url: /api/data-table/variables/DataTableModal.md
---
[@sqlrooms/data-table](../index.md) / DataTableModal

# Variable: DataTableModal

> `const` **DataTableModal**: `FC`<`object` & { `query`: `string` | `undefined`; } | { `arrowTable`: `arrow.Table` | `undefined`; }>

A modal component for displaying a table with data from a SQL query.

## Component

## Param

Component props

## Param

The title of the table

## Param

The SQL query to execute and display in the table

## Param

An object containing the modal's open state and close function

## Example

```tsx
import { useState } from 'react';
import { DataTableModal } from '@sqlrooms/data-table';

const MyComponent = () => {
  const tableModal = useDisclosure();
  return (
    <DataTableModal
      title="Users"
      query="SELECT * FROM users LIMIT 10"
      tableModal={tableModal}
    />
  );
};
```

---

---
url: /api/room-config/variables/DEFAULT_ROOM_TITLE.md
---
[@sqlrooms/room-config](../index.md) / DEFAULT\_ROOM\_TITLE

# Variable: DEFAULT\_ROOM\_TITLE

> `const` **DEFAULT\_ROOM\_TITLE**: `"Untitled room"` = `'Untitled room'`

---

---
url: /api/room-shell/variables/DEFAULT_ROOM_TITLE.md
---
[@sqlrooms/room-shell](../index.md) / DEFAULT\_ROOM\_TITLE

# Variable: DEFAULT\_ROOM\_TITLE

> `const` **DEFAULT\_ROOM\_TITLE**: `"Untitled room"` = `"Untitled room"`

---

---
url: /api/room-store/variables/DEFAULT_ROOM_TITLE.md
---
[@sqlrooms/room-store](../index.md) / DEFAULT\_ROOM\_TITLE

# Variable: DEFAULT\_ROOM\_TITLE

> `const` **DEFAULT\_ROOM\_TITLE**: `"Untitled room"` = `"Untitled room"`

---

---
url: /api/vega/variables/DEFAULT_VEGA_CHART_DESCRIPTION.md
---
[@sqlrooms/vega](../index.md) / DEFAULT\_VEGA\_CHART\_DESCRIPTION

# Variable: DEFAULT\_VEGA\_CHART\_DESCRIPTION

> `const` **DEFAULT\_VEGA\_CHART\_DESCRIPTION**: "A tool for creating VegaLite charts based on the schema of the SQL query result from the "query" tool.\nIn the response:\n- omit the data from the vegaLiteSpec\n- provide an sql query in sqlQuery instead.\n\nBest practices for creating charts:\n- try to use strptime to convert e.g. YYYYMMDD string format to a proper type (date, datetime, etc.)\n- try to set the top-level width property to "container", so the chart will stretch to the full width of its parent container.\n- for bar charts with few categories (<= 5), widen bars by reducing band padding on the x scale:\n  - For 2-3 categories: set "encoding.x.scale.paddingInner" to 0.2 and "paddingOuter" to 0.1 for optimal bar width with clear separation\n  - For 4-5 categories: set "encoding.x.scale.paddingInner" to 0.1 and "paddingOuter" to 0.05 for narrower spacing\n  - Adjust to lower values (0.05/0.02 or 0/0) only if user specifically requests maximum bar width\n- If the chart uses an encoding channel like color, shape, or size to represent a data field, then include a legend object in that channel's encoding (unless explicitly told not to)."

Default description for the VegaChart tool

---

---
url: /api/recharts/variables/DefaultTooltipContent.md
---
[@sqlrooms/recharts](../index.md) / DefaultTooltipContent

# Variable: DefaultTooltipContent()

> `const` **DefaultTooltipContent**: <`TValue`, `TName`>(`props`) => `React.JSX.Element`

## Type Parameters

| Type Parameter |
| ------ |
| `TValue` *extends* `ValueType` |
| `TName` *extends* `NameType` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`DefaultTooltipContentProps`](../interfaces/DefaultTooltipContentProps.md)<`TValue`, `TName`> |

## Returns

`React.JSX.Element`

---

---
url: /api/ai-core/variables/DeleteSessionDialog.md
---
[@sqlrooms/ai-core](../index.md) / DeleteSessionDialog

# Variable: DeleteSessionDialog

> `const` **DeleteSessionDialog**: `React.FC`<`DeleteSessionDialogProps`>

Dialog component for confirming session deletion.
Displays a warning message and provides cancel/delete buttons.

## Example

```tsx
<DeleteSessionDialog
  isOpen={true}
  onClose={() => console.log("Dialog closed")}
  onDelete={() => console.log("Session deleted")}
/>
```

---

---
url: /api/ai/variables/DeleteSessionDialog.md
---
[@sqlrooms/ai](../index.md) / DeleteSessionDialog

# Variable: DeleteSessionDialog

> `const` **DeleteSessionDialog**: `React.FC`<`DeleteSessionDialogProps`>

Dialog component for confirming session deletion.
Displays a warning message and provides cancel/delete buttons.

## Example

```tsx
<DeleteSessionDialog
  isOpen={true}
  onClose={() => console.log("Dialog closed")}
  onDelete={() => console.log("Session deleted")}
/>
```

---

---
url: /api/ui/variables/Dialog.md
---
[@sqlrooms/ui](../index.md) / Dialog

# Variable: Dialog

> `const` **Dialog**: `FC`<`DialogProps`> = `DialogPrimitive.Root`

---

---
url: /api/ui/variables/DialogClose.md
---
[@sqlrooms/ui](../index.md) / DialogClose

# Variable: DialogClose

> `const` **DialogClose**: `ForwardRefExoticComponent`<`DialogCloseProps` & `RefAttributes`<`HTMLButtonElement`>> = `DialogPrimitive.Close`

---

---
url: /api/ui/variables/DialogContent.md
---
[@sqlrooms/ui](../index.md) / DialogContent

# Variable: DialogContent

> `const` **DialogContent**: `ForwardRefExoticComponent`<`DialogContentProps` & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/DialogDescription.md
---
[@sqlrooms/ui](../index.md) / DialogDescription

# Variable: DialogDescription

> `const` **DialogDescription**: `ForwardRefExoticComponent`<`Omit`<`DialogDescriptionProps` & `RefAttributes`<`HTMLParagraphElement`>, `"ref"`> & `RefAttributes`<`HTMLParagraphElement`>>

---

---
url: /api/ui/variables/DialogOverlay.md
---
[@sqlrooms/ui](../index.md) / DialogOverlay

# Variable: DialogOverlay

> `const` **DialogOverlay**: `ForwardRefExoticComponent`<`Omit`<`DialogOverlayProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/DialogPortal.md
---
[@sqlrooms/ui](../index.md) / DialogPortal

# Variable: DialogPortal

> `const` **DialogPortal**: `FC`<`DialogPortalProps`> = `DialogPrimitive.Portal`

---

---
url: /api/ui/variables/DialogTitle.md
---
[@sqlrooms/ui](../index.md) / DialogTitle

# Variable: DialogTitle

> `const` **DialogTitle**: `ForwardRefExoticComponent`<`Omit`<`DialogTitleProps` & `RefAttributes`<`HTMLHeadingElement`>, `"ref"`> & `RefAttributes`<`HTMLHeadingElement`>>

---

---
url: /api/ui/variables/DialogTrigger.md
---
[@sqlrooms/ui](../index.md) / DialogTrigger

# Variable: DialogTrigger

> `const` **DialogTrigger**: `ForwardRefExoticComponent`<`DialogTriggerProps` & `RefAttributes`<`HTMLButtonElement`>> = `DialogPrimitive.Trigger`

---

---
url: /api/discuss/variables/Discussion.md
---
[@sqlrooms/discuss](../index.md) / Discussion

# Variable: Discussion

> `const` **Discussion**: `ZodObject`<[`Discussion`](../type-aliases/Discussion.md)>

---

---
url: /api/discuss/variables/DiscussionItem.md
---
[@sqlrooms/discuss](../index.md) / DiscussionItem

# Variable: DiscussionItem

> `const` **DiscussionItem**: `ForwardRefExoticComponent`<`Omit`<`DiscussionItemProps`, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/discuss/variables/DiscussionList.md
---
[@sqlrooms/discuss](../index.md) / DiscussionList

# Variable: DiscussionList

> `const` **DiscussionList**: `ForwardRefExoticComponent`<`Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/discuss/variables/DiscussSliceConfig.md
---
[@sqlrooms/discuss](../index.md) / DiscussSliceConfig

# Variable: DiscussSliceConfig

> `const` **DiscussSliceConfig**: `ZodObject`<[`DiscussSliceConfig`](../type-aliases/DiscussSliceConfig.md)>

---

---
url: /api/recharts/recharts/namespaces/CartesianGrid/variables/displayName.md
---
[@sqlrooms/recharts](../../../../index.md) / [CartesianGrid](../index.md) / displayName

# Variable: displayName

> **displayName**: `string`

---

---
url: /api/recharts/recharts/namespaces/Customized/variables/displayName.md
---
[@sqlrooms/recharts](../../../../index.md) / [Customized](../index.md) / displayName

# Variable: displayName

> **displayName**: `string`

---

---
url: /api/recharts/recharts/namespaces/Label/variables/displayName.md
---
[@sqlrooms/recharts](../../../../index.md) / [Label](../index.md) / displayName

# Variable: displayName

> **displayName**: `string`

---

---
url: /api/recharts/recharts/namespaces/LabelList/variables/displayName.md
---
[@sqlrooms/recharts](../../../../index.md) / [LabelList](../index.md) / displayName

# Variable: displayName

> **displayName**: `string`

---

---
url: /api/recharts/variables/Dot.md
---
[@sqlrooms/recharts](../index.md) / Dot

# Variable: Dot

> `const` **Dot**: `React.FC`<[`DotProps`](../type-aliases/DotProps.md)>

---

---
url: /api/ui/variables/DropdownMenu.md
---
[@sqlrooms/ui](../index.md) / DropdownMenu

# Variable: DropdownMenu

> `const` **DropdownMenu**: `FC`<`DropdownMenuProps`> = `DropdownMenuPrimitive.Root`

---

---
url: /api/ui/variables/DropdownMenuCheckboxItem.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuCheckboxItem

# Variable: DropdownMenuCheckboxItem

> `const` **DropdownMenuCheckboxItem**: `ForwardRefExoticComponent`<`Omit`<`DropdownMenuCheckboxItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/DropdownMenuContent.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuContent

# Variable: DropdownMenuContent

> `const` **DropdownMenuContent**: `ForwardRefExoticComponent`<`Omit`<`DropdownMenuContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/DropdownMenuGroup.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuGroup

# Variable: DropdownMenuGroup

> `const` **DropdownMenuGroup**: `ForwardRefExoticComponent`<`DropdownMenuGroupProps` & `RefAttributes`<`HTMLDivElement`>> = `DropdownMenuPrimitive.Group`

---

---
url: /api/ui/variables/DropdownMenuItem.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuItem

# Variable: DropdownMenuItem

> `const` **DropdownMenuItem**: `ForwardRefExoticComponent`<`Omit`<`DropdownMenuItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/DropdownMenuLabel.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuLabel

# Variable: DropdownMenuLabel

> `const` **DropdownMenuLabel**: `ForwardRefExoticComponent`<`Omit`<`DropdownMenuLabelProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/DropdownMenuPortal.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuPortal

# Variable: DropdownMenuPortal

> `const` **DropdownMenuPortal**: `FC`<`DropdownMenuPortalProps`> = `DropdownMenuPrimitive.Portal`

---

---
url: /api/ui/variables/DropdownMenuRadioGroup.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuRadioGroup

# Variable: DropdownMenuRadioGroup

> `const` **DropdownMenuRadioGroup**: `ForwardRefExoticComponent`<`DropdownMenuRadioGroupProps` & `RefAttributes`<`HTMLDivElement`>> = `DropdownMenuPrimitive.RadioGroup`

---

---
url: /api/ui/variables/DropdownMenuRadioItem.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuRadioItem

# Variable: DropdownMenuRadioItem

> `const` **DropdownMenuRadioItem**: `ForwardRefExoticComponent`<`Omit`<`DropdownMenuRadioItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/DropdownMenuSeparator.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuSeparator

# Variable: DropdownMenuSeparator

> `const` **DropdownMenuSeparator**: `ForwardRefExoticComponent`<`Omit`<`DropdownMenuSeparatorProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/DropdownMenuSub.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuSub

# Variable: DropdownMenuSub

> `const` **DropdownMenuSub**: `FC`<`DropdownMenuSubProps`> = `DropdownMenuPrimitive.Sub`

---

---
url: /api/ui/variables/DropdownMenuSubContent.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuSubContent

# Variable: DropdownMenuSubContent

> `const` **DropdownMenuSubContent**: `ForwardRefExoticComponent`<`Omit`<`DropdownMenuSubContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/DropdownMenuSubTrigger.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuSubTrigger

# Variable: DropdownMenuSubTrigger

> `const` **DropdownMenuSubTrigger**: `ForwardRefExoticComponent`<`Omit`<`DropdownMenuSubTriggerProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/DropdownMenuTrigger.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuTrigger

# Variable: DropdownMenuTrigger

> `const` **DropdownMenuTrigger**: `ForwardRefExoticComponent`<`DropdownMenuTriggerProps` & `RefAttributes`<`HTMLButtonElement`>> = `DropdownMenuPrimitive.Trigger`

---

---
url: /api/ui/variables/EditableText.md
---
[@sqlrooms/ui](../index.md) / EditableText

# Variable: EditableText

> `const` **EditableText**: `FC`<{ `className?`: `string`; `isReadOnly?`: `boolean`; `value`: `string`; `placeholder?`: `string`; `onChange`: (`text`) => `void`; `defaultEditing?`: `boolean`; `isEditing?`: `boolean`; `onEditingChange?`: (`isEditing`) => `void`; }>

Component that allows the user to edit a string.

The editing mode can be controlled (the mode is managed by the parent component)
or uncontrolled (managed by the component itself).

Controlled mode example:

```
   const [text, setText] = useState('');
   const [isEditing, setEditing] = useState(false);
   ...
   <EditableText
      value={text}
      onChange={setText}
      isEditing={isEditing}
      onEditingChange={setEditing}
   />
```

Uncontrolled mode example:

```
   const [text, setText] = useState('');
   ...
   <EditableText
     value={text}
     onChange={setText}
     defaultEditing={false}
   />
```

---

---
url: /api/ai-config/variables/ErrorMessageSchema.md
---
[@sqlrooms/ai-config](../index.md) / ErrorMessageSchema

# Variable: ErrorMessageSchema

> `const` **ErrorMessageSchema**: `ZodObject`<[`ErrorMessageSchema`](../type-aliases/ErrorMessageSchema.md)>

---

---
url: /api/ai/variables/ErrorMessageSchema.md
---
[@sqlrooms/ai](../index.md) / ErrorMessageSchema

# Variable: ErrorMessageSchema

> `const` **ErrorMessageSchema**: `z.ZodObject`<[`ErrorMessageSchema`](../type-aliases/ErrorMessageSchema.md)>

---

---
url: /api/ui/variables/ErrorPane.md
---
[@sqlrooms/ui](../index.md) / ErrorPane

# Variable: ErrorPane

> `const` **ErrorPane**: `ForwardRefExoticComponent`<`ErrorPaneProps` & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/duckdb/variables/escapeId.md
---
[@sqlrooms/duckdb](../index.md) / escapeId

# Variable: escapeId()

> `const` **escapeId**: (`id`) => `string`

Escapes an identifier (like table or column names) for use in DuckDB SQL queries
by wrapping it in double quotes and escaping any existing double quotes by doubling them.
If the identifier is already properly quoted, returns it as is.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `id` | `string` | The identifier string to escape |

## Returns

`string`

The escaped identifier wrapped in double quotes

## Example

```ts
escapeId("my_table") // Returns '"my_table"'
escapeId("my""table") // Returns '"my""""table"'
```

---

---
url: /api/duckdb/variables/escapeVal.md
---
[@sqlrooms/duckdb](../index.md) / escapeVal

# Variable: escapeVal()

> `const` **escapeVal**: (`val`) => `string`

Escapes a value for use in DuckDB SQL queries by wrapping it in single quotes
and escaping any existing single quotes by doubling them.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `val` | `unknown` | The value to escape. Will be converted to string if not already a string. |

## Returns

`string`

The escaped string value wrapped in single quotes.

## Example

```ts
escapeVal("John's data") // Returns "'John''s data'"
```

---

---
url: /api/room-config/variables/FileDataSource.md
---
[@sqlrooms/room-config](../index.md) / FileDataSource

# Variable: FileDataSource

> `const` **FileDataSource**: `ZodObject`<[`FileDataSource`](../type-aliases/FileDataSource.md)>

**`Interface`**

Configuration for file-based data sources
FileDataSource

---

---
url: /api/room-shell/variables/FileDataSource.md
---
[@sqlrooms/room-shell](../index.md) / FileDataSource

# Variable: FileDataSource

> `const` **FileDataSource**: `z.ZodObject`<[`FileDataSource`](../type-aliases/FileDataSource.md)>

**`Interface`**

Configuration for file-based data sources
FileDataSource

---

---
url: /api/room-store/variables/FileDataSource.md
---
[@sqlrooms/room-store](../index.md) / FileDataSource

# Variable: FileDataSource

> `const` **FileDataSource**: `z.ZodObject`<[`FileDataSource`](../type-aliases/FileDataSource.md)>

**`Interface`**

Configuration for file-based data sources
FileDataSource

---

---
url: /api/room-shell/variables/FileDataSourceCard.md
---
[@sqlrooms/room-shell](../index.md) / FileDataSourceCard

# Variable: FileDataSourceCard

> `const` **FileDataSourceCard**: `FC`<{ `isReadOnly?`: `boolean`; `fileInfo`: [`RoomFileInfo`](../type-aliases/RoomFileInfo.md); `fileState?`: [`RoomFileState`](../type-aliases/RoomFileState.md); }>

---

---
url: /api/room-shell/variables/FileDataSourcesPanel.md
---
[@sqlrooms/room-shell](../index.md) / FileDataSourcesPanel

# Variable: FileDataSourcesPanel

> `const` **FileDataSourcesPanel**: `FC`<{ `isReadOnly?`: `boolean`; }>

---

---
url: /api/kepler/variables/FileDropInput.md
---
[@sqlrooms/kepler](../index.md) / FileDropInput

# Variable: FileDropInput

> `const` **FileDropInput**: `React.FC`<`FileDropInputProps`>

---

---
url: /api/dropzone/variables/FileDropzone.md
---
[@sqlrooms/dropzone](../index.md) / FileDropzone

# Variable: FileDropzone

> `const` **FileDropzone**: `FC`<{ `className?`: `string`; `isInvalid?`: `boolean`; `onDrop`: (`files`) => `Promise`<`void`>; `multiple?`: `boolean`; `acceptedFormats?`: `Record`<`string`, `string`\[]>; `children?`: `React.ReactNode`; }>

A customizable file dropzone component that handles file uploads through drag-and-drop or click interactions.

## Example

```tsx
// Basic usage
<FileDropzone
  onDrop={async (files) => {
    console.log('Dropped files:', files);
    // Handle file upload
  }}
/>

// With file type restrictions and single file upload
<FileDropzone
  multiple={false}
  acceptedFormats={{
    'text/csv': ['.csv'],
    'application/json': ['.json']
  }}
  onDrop={async (files) => {
    const file = files[0];
    // Handle single file upload
  }}
>
  <p>Custom dropzone content</p>
</FileDropzone>
```

## Param

Component props

## Param

Optional CSS class name for styling

## Param

Optional flag to indicate validation error state

## Param

Async callback function called when files are dropped or selected

## Param

Optional flag to allow multiple file selection (default: true)

## Param

Optional object defining accepted MIME types and their extensions

## Param

Optional React nodes to render inside the dropzone

---

---
url: /api/ui/variables/Form.md
---
[@sqlrooms/ui](../index.md) / Form

# Variable: Form()

> `const` **Form**: <`TFieldValues`, `TContext`, `TTransformedValues`>(`props`) => `Element` = `FormProvider`

A provider component that propagates the `useForm` methods to all children components via [React Context](https://react.dev/reference/react/useContext) API. To be used with useFormContext.

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `TFieldValues` *extends* `FieldValues` | - |
| `TContext` | `any` |
| `TTransformedValues` | `TFieldValues` |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | `FormProviderProps`<`TFieldValues`, `TContext`, `TTransformedValues`> | all useForm methods |

## Returns

`Element`

## Remarks

[API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)

## Example

```tsx
function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods} >
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  );
}

 function NestedInput() {
  const { register } = useFormContext(); // retrieve all hook methods
  return <input {...register("test")} />;
}
```

---

---
url: /api/utils/variables/formatCount.md
---
[@sqlrooms/utils](../index.md) / formatCount

# Variable: formatCount()

> `const` **formatCount**: (`n`) => `string`

Formats a number as a string with thousands separators and no decimal places.
Example: 1234567 -> "1,234,567"

## Parameters

| Parameter | Type |
| ------ | ------ |
| `n` | `number` | { `valueOf`: `number`; } |

## Returns

`string`

---

---
url: /api/utils/variables/formatCount4.md
---
[@sqlrooms/utils](../index.md) / formatCount4

# Variable: formatCount4()

> `const` **formatCount4**: (`n`) => `string`

Formats a number as a string with 4 significant digits and SI prefix.
Example: 1234567 -> "1.235M"

## Parameters

| Parameter | Type |
| ------ | ------ |
| `n` | `number` | { `valueOf`: `number`; } |

## Returns

`string`

---

---
url: /api/utils/variables/formatCountShort.md
---
[@sqlrooms/utils](../index.md) / formatCountShort

# Variable: formatCountShort()

> `const` **formatCountShort**: (`n`) => `string`

Formats a number as a string with thousands separators and SI prefix.
Example: 1234567 -> "1M"

## Parameters

| Parameter | Type |
| ------ | ------ |
| `n` | `number` | { `valueOf`: `number`; } |

## Returns

`string`

---

---
url: /api/ui/variables/FormControl.md
---
[@sqlrooms/ui](../index.md) / FormControl

# Variable: FormControl

> `const` **FormControl**: `ForwardRefExoticComponent`<`Omit`<`SlotProps` & `RefAttributes`<`HTMLElement`>, `"ref"`> & `RefAttributes`<`HTMLElement`>>

---

---
url: /api/ui/variables/FormDescription.md
---
[@sqlrooms/ui](../index.md) / FormDescription

# Variable: FormDescription

> `const` **FormDescription**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLParagraphElement`> & `RefAttributes`<`HTMLParagraphElement`>>

---

---
url: /api/ui/variables/FormItem.md
---
[@sqlrooms/ui](../index.md) / FormItem

# Variable: FormItem

> `const` **FormItem**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLDivElement`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/FormLabel.md
---
[@sqlrooms/ui](../index.md) / FormLabel

# Variable: FormLabel

> `const` **FormLabel**: `ForwardRefExoticComponent`<`Omit`<`LabelProps` & `RefAttributes`<`HTMLLabelElement`>, `"ref"`> & `RefAttributes`<`HTMLLabelElement`>>

---

---
url: /api/ui/variables/FormMessage.md
---
[@sqlrooms/ui](../index.md) / FormMessage

# Variable: FormMessage

> `const` **FormMessage**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLParagraphElement`> & `RefAttributes`<`HTMLParagraphElement`>>

---

---
url: /api/recharts/variables/FunnelChart.md
---
[@sqlrooms/recharts](../index.md) / FunnelChart

# Variable: FunnelChart

> `const` **FunnelChart**: `ForwardRefExoticComponent`

---

---
url: /api/duckdb/variables/getSqlErrorWithPointer.md
---
[@sqlrooms/duckdb](../index.md) / getSqlErrorWithPointer

# Variable: getSqlErrorWithPointer()

> `const` **getSqlErrorWithPointer**: (`query`, `position`) => `object`

Function given a query and position finds the line and column of the console.error();

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | The query to parse |
| `position` | `number` | The position of the error |

## Returns

`object`

The line and column of the error

| Name | Type |
| ------ | ------ |
| `line` | `number` |
| `column` | `number` |
| `lineText` | `string` |
| `pointerLine` | `string` |
| `formatted` | `string` |

---

---
url: /api/recharts/variables/Global.md
---
[@sqlrooms/recharts](../index.md) / Global

# Variable: Global

> `const` **Global**: `object`

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `isSsr` | `boolean` |
|  `get()` | (`key`) => `boolean` |
|  `set()` | (`key`, `value?`) => `void` |

---

---
url: /api/ui/variables/Input.md
---
[@sqlrooms/ui](../index.md) / Input

# Variable: Input

> `const` **Input**: `ForwardRefExoticComponent`<`Omit`<`DetailedHTMLProps`<`InputHTMLAttributes`<`HTMLInputElement`>, `HTMLInputElement`>, `"ref"`> & `RefAttributes`<`HTMLInputElement`>>

---

---
url: /api/duckdb/variables/isNumericDuckType.md
---
[@sqlrooms/duckdb](../index.md) / isNumericDuckType

# Variable: isNumericDuckType()

> `const` **isNumericDuckType**: (`type`) => `boolean`

Checks if a DuckDB type string represents a numeric type.
Includes INTEGER, DECIMAL, FLOAT, REAL, and DOUBLE types.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `type` | `string` | The DuckDB type string to check |

## Returns

`boolean`

True if the type is numeric, false otherwise

## Example

```ts
isNumericDuckType('INTEGER') // Returns true
isNumericDuckType('VARCHAR') // Returns false
```

---

---
url: /api/duckdb/variables/isSpatialLoadFileOptions.md
---
[@sqlrooms/duckdb](../index.md) / isSpatialLoadFileOptions

# Variable: isSpatialLoadFileOptions()

> `const` **isSpatialLoadFileOptions**: (`options`) => `options is SpatialLoadFileOptions`

Type guard to check if options are spatial load file options

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | [`LoadFileOptions`](../type-aliases/LoadFileOptions.md) | The options to check |

## Returns

`options is SpatialLoadFileOptions`

True if options are spatial load file options

---

---
url: /api/room-shell/variables/isSpatialLoadFileOptions.md
---
[@sqlrooms/room-shell](../index.md) / isSpatialLoadFileOptions

# Variable: isSpatialLoadFileOptions()

> `const` **isSpatialLoadFileOptions**: (`options`) => `options is SpatialLoadFileOptions`

Type guard to check if options are spatial load file options

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | [`LoadFileOptions`](../type-aliases/LoadFileOptions.md) | The options to check |

## Returns

`options is SpatialLoadFileOptions`

True if options are spatial load file options

---

---
url: /api/room-store/variables/isSpatialLoadFileOptions.md
---
[@sqlrooms/room-store](../index.md) / isSpatialLoadFileOptions

# Variable: isSpatialLoadFileOptions()

> `const` **isSpatialLoadFileOptions**: (`options`) => `options is SpatialLoadFileOptions`

Type guard to check if options are spatial load file options

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | [`LoadFileOptions`](../type-aliases/LoadFileOptions.md) | The options to check |

## Returns

`options is SpatialLoadFileOptions`

True if options are spatial load file options

---

---
url: /api/monaco-editor/variables/JsonMonacoEditor.md
---
[@sqlrooms/monaco-editor](../index.md) / JsonMonacoEditor

# Variable: JsonMonacoEditor

> `const` **JsonMonacoEditor**: `React.FC`<[`JsonMonacoEditorProps`](../interfaces/JsonMonacoEditorProps.md)>

A Monaco editor for editing JSON with schema validation

---

---
url: /api/kepler/variables/KeplerImageExport.md
---
[@sqlrooms/kepler](../index.md) / KeplerImageExport

# Variable: KeplerImageExport

> `const` **KeplerImageExport**: `React.FC`<`KeplerImageExportProps`>

---

---
url: /api/kepler/variables/KeplerMapContainer.md
---
[@sqlrooms/kepler](../index.md) / KeplerMapContainer

# Variable: KeplerMapContainer

> `const` **KeplerMapContainer**: `FC`<{ `mapId`: `string`; }>

---

---
url: /api/kepler-config/variables/KeplerMapSchema.md
---
[@sqlrooms/kepler-config](../index.md) / KeplerMapSchema

# Variable: KeplerMapSchema

> `const` **KeplerMapSchema**: `ZodObject`<[`KeplerMapSchema`](../type-aliases/KeplerMapSchema.md)>

---

---
url: /api/kepler/variables/KeplerMapSchema.md
---
[@sqlrooms/kepler](../index.md) / KeplerMapSchema

# Variable: KeplerMapSchema

> `const` **KeplerMapSchema**: `z.ZodObject`<[`KeplerMapSchema`](../type-aliases/KeplerMapSchema.md)>

---

---
url: /api/kepler/variables/KeplerPlotContainer.md
---
[@sqlrooms/kepler](../index.md) / KeplerPlotContainer

# Variable: KeplerPlotContainer

> `const` **KeplerPlotContainer**: `FC`<{ `mapId`: `string`; `logoComponent?`: `ReactNode`; }>

---

---
url: /api/kepler/variables/KeplerProvider.md
---
[@sqlrooms/kepler](../index.md) / KeplerProvider

# Variable: KeplerProvider

> `const` **KeplerProvider**: `React.FC`<`KeplerProviderProps`>

---

---
url: /api/kepler/variables/KeplerSidePanels.md
---
[@sqlrooms/kepler](../index.md) / KeplerSidePanels

# Variable: KeplerSidePanels

> `const` **KeplerSidePanels**: `React.FC`<`KeplerSidePanelProps`>

---

---
url: /api/kepler/variables/KeplerSliceConfig.md
---
[@sqlrooms/kepler](../index.md) / KeplerSliceConfig

# Variable: KeplerSliceConfig

> `const` **KeplerSliceConfig**: `z.ZodPipe`<[`KeplerSliceConfig`](../type-aliases/KeplerSliceConfig.md)>

---

---
url: /api/kepler-config/variables/KeplerSliceConfig.md
---
[@sqlrooms/kepler-config](../index.md) / KeplerSliceConfig

# Variable: KeplerSliceConfig

> `const` **KeplerSliceConfig**: `ZodPipe`<[`KeplerSliceConfig`](../type-aliases/KeplerSliceConfig.md)>

---

---
url: /api/ui/variables/Label.md
---
[@sqlrooms/ui](../index.md) / Label

# Variable: Label

> `const` **Label**: `ForwardRefExoticComponent`<`Omit`<`LabelProps` & `RefAttributes`<`HTMLLabelElement`>, `"ref"`> & `VariantProps`<(`props?`) => `string`> & `RefAttributes`<`HTMLLabelElement`>>

---

---
url: /api/recharts/variables/Layer.md
---
[@sqlrooms/recharts](../index.md) / Layer

# Variable: Layer

> `const` **Layer**: `React.ForwardRefExoticComponent`<`React.SVGAttributes`<`SVGGElement`> & `LayerProps` & `React.RefAttributes`<`SVGGElement`>>

---

---
url: /api/layout-config/variables/LayoutConfig.md
---
[@sqlrooms/layout-config](../index.md) / LayoutConfig

# Variable: LayoutConfig

> `const` **LayoutConfig**: `ZodDiscriminatedUnion`<[`LayoutConfig`](../type-aliases/LayoutConfig.md)>

---

---
url: /api/layout/variables/LayoutConfig.md
---
[@sqlrooms/layout](../index.md) / LayoutConfig

# Variable: LayoutConfig

> `const` **LayoutConfig**: `z.ZodDiscriminatedUnion`<[`LayoutConfig`](../type-aliases/LayoutConfig.md)>

---

---
url: /api/room-config/variables/LayoutConfig.md
---
[@sqlrooms/room-config](../index.md) / LayoutConfig

# Variable: LayoutConfig

> `const` **LayoutConfig**: `z.ZodDiscriminatedUnion`<[`LayoutConfig`](../type-aliases/LayoutConfig.md)>

---

---
url: /api/room-shell/variables/LayoutConfig.md
---
[@sqlrooms/room-shell](../index.md) / LayoutConfig

# Variable: LayoutConfig

> `const` **LayoutConfig**: `z.ZodDiscriminatedUnion`<[`LayoutConfig`](../type-aliases/LayoutConfig.md)>

---

---
url: /api/room-store/variables/LayoutConfig.md
---
[@sqlrooms/room-store](../index.md) / LayoutConfig

# Variable: LayoutConfig

> `const` **LayoutConfig**: `z.ZodDiscriminatedUnion`<[`LayoutConfig`](../type-aliases/LayoutConfig.md)>

---

---
url: /api/layout/variables/LayoutSliceConfig.md
---
[@sqlrooms/layout](../index.md) / LayoutSliceConfig

# Variable: LayoutSliceConfig

> `const` **LayoutSliceConfig**: `ZodDiscriminatedUnion`<[`LayoutSliceConfig`](../type-aliases/LayoutSliceConfig.md)> = `LayoutConfig`

---

---
url: /api/layout-config/variables/LayoutTypes.md
---
[@sqlrooms/layout-config](../index.md) / LayoutTypes

# Variable: LayoutTypes

> `const` **LayoutTypes**: `ZodEnum`<{ `mosaic`: `"mosaic"`; }>

---

---
url: /api/layout/variables/LayoutTypes.md
---
[@sqlrooms/layout](../index.md) / LayoutTypes

# Variable: LayoutTypes

> `const` **LayoutTypes**: `z.ZodEnum`<{ `mosaic`: `"mosaic"`; }>

---

---
url: /api/room-config/variables/LayoutTypes.md
---
[@sqlrooms/room-config](../index.md) / LayoutTypes

# Variable: LayoutTypes

> `const` **LayoutTypes**: `z.ZodEnum`<{ `mosaic`: `"mosaic"`; }>

---

---
url: /api/room-shell/variables/LayoutTypes.md
---
[@sqlrooms/room-shell](../index.md) / LayoutTypes

# Variable: LayoutTypes

> `const` **LayoutTypes**: `z.ZodEnum`<{ `mosaic`: `"mosaic"`; }>

---

---
url: /api/room-store/variables/LayoutTypes.md
---
[@sqlrooms/room-store](../index.md) / LayoutTypes

# Variable: LayoutTypes

> `const` **LayoutTypes**: `z.ZodEnum`<{ `mosaic`: `"mosaic"`; }>

---

---
url: /api/recharts/variables/LineChart.md
---
[@sqlrooms/recharts](../index.md) / LineChart

# Variable: LineChart

> `const` **LineChart**: `ForwardRefExoticComponent`

---

---
url: /api/room-config/variables/LoadFile.md
---
[@sqlrooms/room-config](../index.md) / LoadFile

# Variable: LoadFile

> `const` **LoadFile**: `ZodEnum`<[`LoadFile`](../type-aliases/LoadFile.md)>

Enum representing supported file loading methods

---

---
url: /api/room-shell/variables/LoadFile.md
---
[@sqlrooms/room-shell](../index.md) / LoadFile

# Variable: LoadFile

> `const` **LoadFile**: `z.ZodEnum`<[`LoadFile`](../type-aliases/LoadFile.md)>

Enum representing supported file loading methods

---

---
url: /api/room-store/variables/LoadFile.md
---
[@sqlrooms/room-store](../index.md) / LoadFile

# Variable: LoadFile

> `const` **LoadFile**: `z.ZodEnum`<[`LoadFile`](../type-aliases/LoadFile.md)>

Enum representing supported file loading methods

---

---
url: /api/duckdb/variables/LoadFileOptions.md
---
[@sqlrooms/duckdb](../index.md) / LoadFileOptions

# Variable: LoadFileOptions

> `const` **LoadFileOptions**: `z.ZodDiscriminatedUnion`<[`LoadFileOptions`](../type-aliases/LoadFileOptions.md)>

Union type of all possible file loading options
Discriminated union based on the 'method' field

---

---
url: /api/room-config/variables/LoadFileOptions.md
---
[@sqlrooms/room-config](../index.md) / LoadFileOptions

# Variable: LoadFileOptions

> `const` **LoadFileOptions**: `ZodDiscriminatedUnion`<[`LoadFileOptions`](../type-aliases/LoadFileOptions.md)>

Union type of all possible file loading options
Discriminated union based on the 'method' field

---

---
url: /api/room-shell/variables/LoadFileOptions.md
---
[@sqlrooms/room-shell](../index.md) / LoadFileOptions

# Variable: LoadFileOptions

> `const` **LoadFileOptions**: `z.ZodDiscriminatedUnion`<[`LoadFileOptions`](../type-aliases/LoadFileOptions.md)>

Union type of all possible file loading options
Discriminated union based on the 'method' field

---

---
url: /api/room-store/variables/LoadFileOptions.md
---
[@sqlrooms/room-store](../index.md) / LoadFileOptions

# Variable: LoadFileOptions

> `const` **LoadFileOptions**: `z.ZodDiscriminatedUnion`<[`LoadFileOptions`](../type-aliases/LoadFileOptions.md)>

Union type of all possible file loading options
Discriminated union based on the 'method' field

---

---
url: /api/layout-config/variables/MAIN_VIEW.md
---
[@sqlrooms/layout-config](../index.md) / MAIN\_VIEW

# Variable: MAIN\_VIEW

> `const` **MAIN\_VIEW**: `"main"` = `'main'`

Main view room panel key

---

---
url: /api/layout/variables/MAIN_VIEW.md
---
[@sqlrooms/layout](../index.md) / MAIN\_VIEW

# Variable: MAIN\_VIEW

> `const` **MAIN\_VIEW**: `"main"` = `"main"`

Main view room panel key

---

---
url: /api/room-config/variables/MAIN_VIEW.md
---
[@sqlrooms/room-config](../index.md) / MAIN\_VIEW

# Variable: MAIN\_VIEW

> `const` **MAIN\_VIEW**: `"main"` = `"main"`

Main view room panel key

---

---
url: /api/room-shell/variables/MAIN_VIEW.md
---
[@sqlrooms/room-shell](../index.md) / MAIN\_VIEW

# Variable: MAIN\_VIEW

> `const` **MAIN\_VIEW**: `"main"` = `"main"`

Main view room panel key

---

---
url: /api/room-store/variables/MAIN_VIEW.md
---
[@sqlrooms/room-store](../index.md) / MAIN\_VIEW

# Variable: MAIN\_VIEW

> `const` **MAIN\_VIEW**: `"main"` = `"main"`

Main view room panel key

---

---
url: /api/ui/variables/Menubar.md
---
[@sqlrooms/ui](../index.md) / Menubar

# Variable: Menubar

> `const` **Menubar**: `ForwardRefExoticComponent`<`Omit`<`MenubarProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/MenubarCheckboxItem.md
---
[@sqlrooms/ui](../index.md) / MenubarCheckboxItem

# Variable: MenubarCheckboxItem

> `const` **MenubarCheckboxItem**: `ForwardRefExoticComponent`<`Omit`<`MenubarCheckboxItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/MenubarContent.md
---
[@sqlrooms/ui](../index.md) / MenubarContent

# Variable: MenubarContent

> `const` **MenubarContent**: `ForwardRefExoticComponent`<`Omit`<`MenubarContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/MenubarItem.md
---
[@sqlrooms/ui](../index.md) / MenubarItem

# Variable: MenubarItem

> `const` **MenubarItem**: `ForwardRefExoticComponent`<`Omit`<`MenubarItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/MenubarLabel.md
---
[@sqlrooms/ui](../index.md) / MenubarLabel

# Variable: MenubarLabel

> `const` **MenubarLabel**: `ForwardRefExoticComponent`<`Omit`<`MenubarLabelProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/MenubarRadioItem.md
---
[@sqlrooms/ui](../index.md) / MenubarRadioItem

# Variable: MenubarRadioItem

> `const` **MenubarRadioItem**: `ForwardRefExoticComponent`<`Omit`<`MenubarRadioItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/MenubarSeparator.md
---
[@sqlrooms/ui](../index.md) / MenubarSeparator

# Variable: MenubarSeparator

> `const` **MenubarSeparator**: `ForwardRefExoticComponent`<`Omit`<`MenubarSeparatorProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/MenubarSubContent.md
---
[@sqlrooms/ui](../index.md) / MenubarSubContent

# Variable: MenubarSubContent

> `const` **MenubarSubContent**: `ForwardRefExoticComponent`<`Omit`<`MenubarSubContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/MenubarSubTrigger.md
---
[@sqlrooms/ui](../index.md) / MenubarSubTrigger

# Variable: MenubarSubTrigger

> `const` **MenubarSubTrigger**: `ForwardRefExoticComponent`<`Omit`<`MenubarSubTriggerProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/MenubarTrigger.md
---
[@sqlrooms/ui](../index.md) / MenubarTrigger

# Variable: MenubarTrigger

> `const` **MenubarTrigger**: `ForwardRefExoticComponent`<`Omit`<`MenubarTriggerProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`>>

---

---
url: /api/ai-core/variables/ModelSelector.md
---
[@sqlrooms/ai-core](../index.md) / ModelSelector

# Variable: ModelSelector

> `const` **ModelSelector**: `React.FC`<`ModelSelectorProps`>

---

---
url: /api/ai/variables/ModelSelector.md
---
[@sqlrooms/ai](../index.md) / ModelSelector

# Variable: ModelSelector

> `const` **ModelSelector**: `React.FC`<`ModelSelectorProps`>

---

---
url: /api/monaco-editor/variables/MonacoEditor.md
---
[@sqlrooms/monaco-editor](../index.md) / MonacoEditor

# Variable: MonacoEditor

> `const` **MonacoEditor**: `React.FC`<[`MonacoEditorProps`](../interfaces/MonacoEditorProps.md)>

A wrapper around the Monaco Editor component

---

---
url: /api/layout/variables/MosaicLayout.md
---
[@sqlrooms/layout](../index.md) / MosaicLayout

# Variable: MosaicLayout

> `const` **MosaicLayout**: `FC`<`MosaicProps`<`string`> & `object`>

---

---
url: /api/layout-config/variables/MosaicLayoutConfig.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutConfig

# Variable: MosaicLayoutConfig

> `const` **MosaicLayoutConfig**: `ZodObject`<[`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)>

---

---
url: /api/layout/variables/MosaicLayoutConfig.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutConfig

# Variable: MosaicLayoutConfig

> `const` **MosaicLayoutConfig**: `z.ZodObject`<[`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)>

---

---
url: /api/room-config/variables/MosaicLayoutConfig.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutConfig

# Variable: MosaicLayoutConfig

> `const` **MosaicLayoutConfig**: `z.ZodObject`<[`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)>

---

---
url: /api/room-shell/variables/MosaicLayoutConfig.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutConfig

# Variable: MosaicLayoutConfig

> `const` **MosaicLayoutConfig**: `z.ZodObject`<[`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)>

---

---
url: /api/room-store/variables/MosaicLayoutConfig.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutConfig

# Variable: MosaicLayoutConfig

> `const` **MosaicLayoutConfig**: `z.ZodObject`<[`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)>

---

---
url: /api/layout-config/variables/MosaicLayoutDirection.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutDirection

# Variable: MosaicLayoutDirection

> `const` **MosaicLayoutDirection**: `ZodEnum`<[`MosaicLayoutDirection`](../type-aliases/MosaicLayoutDirection.md)>

---

---
url: /api/layout/variables/MosaicLayoutDirection.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutDirection

# Variable: MosaicLayoutDirection

> `const` **MosaicLayoutDirection**: `z.ZodEnum`<[`MosaicLayoutDirection`](../type-aliases/MosaicLayoutDirection.md)>

---

---
url: /api/room-config/variables/MosaicLayoutDirection.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutDirection

# Variable: MosaicLayoutDirection

> `const` **MosaicLayoutDirection**: `z.ZodEnum`<[`MosaicLayoutDirection`](../type-aliases/MosaicLayoutDirection.md)>

---

---
url: /api/room-shell/variables/MosaicLayoutDirection.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutDirection

# Variable: MosaicLayoutDirection

> `const` **MosaicLayoutDirection**: `z.ZodEnum`<[`MosaicLayoutDirection`](../type-aliases/MosaicLayoutDirection.md)>

---

---
url: /api/room-store/variables/MosaicLayoutDirection.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutDirection

# Variable: MosaicLayoutDirection

> `const` **MosaicLayoutDirection**: `z.ZodEnum`<[`MosaicLayoutDirection`](../type-aliases/MosaicLayoutDirection.md)>

---

---
url: /api/layout-config/variables/MosaicLayoutNode.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutNode

# Variable: MosaicLayoutNode

> **MosaicLayoutNode**: `ZodUnion`<[`MosaicLayoutNode`](../type-aliases/MosaicLayoutNode.md)>

---

---
url: /api/layout/variables/MosaicLayoutNode.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutNode

# Variable: MosaicLayoutNode

> **MosaicLayoutNode**: `ZodUnion`<[`MosaicLayoutNode`](../type-aliases/MosaicLayoutNode.md)>

---

---
url: /api/room-config/variables/MosaicLayoutNode.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutNode

# Variable: MosaicLayoutNode

> **MosaicLayoutNode**: `ZodUnion`<[`MosaicLayoutNode`](../type-aliases/MosaicLayoutNode.md)>

---

---
url: /api/room-shell/variables/MosaicLayoutNode.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutNode

# Variable: MosaicLayoutNode

> **MosaicLayoutNode**: `ZodUnion`<[`MosaicLayoutNode`](../type-aliases/MosaicLayoutNode.md)>

---

---
url: /api/room-store/variables/MosaicLayoutNode.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutNode

# Variable: MosaicLayoutNode

> **MosaicLayoutNode**: `ZodUnion`<[`MosaicLayoutNode`](../type-aliases/MosaicLayoutNode.md)>

---

---
url: /api/layout-config/variables/MosaicLayoutNodeKey.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutNodeKey

# Variable: MosaicLayoutNodeKey

> `const` **MosaicLayoutNodeKey**: `ZodString`<[`MosaicLayoutNodeKey`](../type-aliases/MosaicLayoutNodeKey.md)>

---

---
url: /api/layout/variables/MosaicLayoutNodeKey.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutNodeKey

# Variable: MosaicLayoutNodeKey

> `const` **MosaicLayoutNodeKey**: `z.ZodString`<[`MosaicLayoutNodeKey`](../type-aliases/MosaicLayoutNodeKey.md)>

---

---
url: /api/room-config/variables/MosaicLayoutNodeKey.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutNodeKey

# Variable: MosaicLayoutNodeKey

> `const` **MosaicLayoutNodeKey**: `z.ZodString`<[`MosaicLayoutNodeKey`](../type-aliases/MosaicLayoutNodeKey.md)>

---

---
url: /api/room-shell/variables/MosaicLayoutNodeKey.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutNodeKey

# Variable: MosaicLayoutNodeKey

> `const` **MosaicLayoutNodeKey**: `z.ZodString`<[`MosaicLayoutNodeKey`](../type-aliases/MosaicLayoutNodeKey.md)>

---

---
url: /api/room-store/variables/MosaicLayoutNodeKey.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutNodeKey

# Variable: MosaicLayoutNodeKey

> `const` **MosaicLayoutNodeKey**: `z.ZodString`<[`MosaicLayoutNodeKey`](../type-aliases/MosaicLayoutNodeKey.md)>

---

---
url: /api/layout-config/variables/MosaicLayoutParent.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutParent

# Variable: MosaicLayoutParent

> `const` **MosaicLayoutParent**: `z.ZodType`<[`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md)>

---

---
url: /api/layout/variables/MosaicLayoutParent.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutParent

# Variable: MosaicLayoutParent

> `const` **MosaicLayoutParent**: `z.ZodType`<[`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md)>

---

---
url: /api/room-config/variables/MosaicLayoutParent.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutParent

# Variable: MosaicLayoutParent

> `const` **MosaicLayoutParent**: `z.ZodType`<[`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md)>

---

---
url: /api/room-shell/variables/MosaicLayoutParent.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutParent

# Variable: MosaicLayoutParent

> `const` **MosaicLayoutParent**: `z.ZodType`<[`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md)>

---

---
url: /api/room-store/variables/MosaicLayoutParent.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutParent

# Variable: MosaicLayoutParent

> `const` **MosaicLayoutParent**: `z.ZodType`<[`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md)>

---

---
url: /api/utils/variables/NUMBER_FORMAT.md
---
[@sqlrooms/utils](../index.md) / NUMBER\_FORMAT

# Variable: NUMBER\_FORMAT

> `const` **NUMBER\_FORMAT**: `NumberFormat`

Number formatter instance configured for US locale with no minimum fraction digits

---

---
url: /api/ui/variables/PaginationContent.md
---
[@sqlrooms/ui](../index.md) / PaginationContent

# Variable: PaginationContent

> `const` **PaginationContent**: `ForwardRefExoticComponent`<`Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLUListElement`>, `HTMLUListElement`>, `"ref"`> & `RefAttributes`<`HTMLUListElement`>>

---

---
url: /api/ui/variables/PaginationItem.md
---
[@sqlrooms/ui](../index.md) / PaginationItem

# Variable: PaginationItem

> `const` **PaginationItem**: `ForwardRefExoticComponent`<`Omit`<`DetailedHTMLProps`<`LiHTMLAttributes`<`HTMLLIElement`>, `HTMLLIElement`>, `"ref"`> & `RefAttributes`<`HTMLLIElement`>>

---

---
url: /api/room-shell/variables/PanelHeaderButton.md
---
[@sqlrooms/room-shell](../index.md) / PanelHeaderButton

# Variable: PanelHeaderButton

> `const` **PanelHeaderButton**: `FC`<{ `label`: `string`; `icon`: `React.ReactElement`; `isPinned?`: `boolean`; `onClick`: () => `void`; }>

---

---
url: /api/recharts/recharts/namespaces/Label/variables/parseViewBox.md
---
[@sqlrooms/recharts](../../../../index.md) / [Label](../index.md) / parseViewBox

# Variable: parseViewBox()

> **parseViewBox**: (`props`) => `ViewBox`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `any` |

## Returns

`ViewBox`

---

---
url: /api/recharts/variables/PieChart.md
---
[@sqlrooms/recharts](../index.md) / PieChart

# Variable: PieChart

> `const` **PieChart**: `ForwardRefExoticComponent`

---

---
url: /api/recharts/variables/PolarGrid.md
---
[@sqlrooms/recharts](../index.md) / PolarGrid

# Variable: PolarGrid

> `const` **PolarGrid**: {(`__namedParameters`): `Element`; `displayName`: `string`; }

## Type Declaration

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`PolarGridProps`](../type-aliases/PolarGridProps.md) |

## Returns

`Element`

| Name | Type |
| ------ | ------ |
|  `displayName` | `string` |

---

---
url: /api/recharts/variables/Polygon.md
---
[@sqlrooms/recharts](../index.md) / Polygon

# Variable: Polygon

> `const` **Polygon**: `React.FC`<[`PolygonProps`](../type-aliases/PolygonProps.md)>

---

---
url: /api/ui/variables/Popover.md
---
[@sqlrooms/ui](../index.md) / Popover

# Variable: Popover

> `const` **Popover**: `FC`<`PopoverProps`> = `PopoverPrimitive.Root`

---

---
url: /api/ui/variables/PopoverAnchor.md
---
[@sqlrooms/ui](../index.md) / PopoverAnchor

# Variable: PopoverAnchor

> `const` **PopoverAnchor**: `ForwardRefExoticComponent`<`PopoverAnchorProps` & `RefAttributes`<`HTMLDivElement`>> = `PopoverPrimitive.Anchor`

---

---
url: /api/ui/variables/PopoverContent.md
---
[@sqlrooms/ui](../index.md) / PopoverContent

# Variable: PopoverContent

> `const` **PopoverContent**: `ForwardRefExoticComponent`<`Omit`<`PopoverContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/PopoverTrigger.md
---
[@sqlrooms/ui](../index.md) / PopoverTrigger

# Variable: PopoverTrigger

> `const` **PopoverTrigger**: `ForwardRefExoticComponent`<`PopoverTriggerProps` & `RefAttributes`<`HTMLButtonElement`>> = `PopoverPrimitive.Trigger`

---

---
url: /api/ui/variables/Progress.md
---
[@sqlrooms/ui](../index.md) / Progress

# Variable: Progress

> `const` **Progress**: `ForwardRefExoticComponent`<`ProgressProps` & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/ProgressModal.md
---
[@sqlrooms/ui](../index.md) / ProgressModal

# Variable: ProgressModal

> `const` **ProgressModal**: `FC`<{ `className?`: `string`; `isOpen`: `boolean`; `title?`: `string`; `loadingStage?`: `string`; `progress?`: `number`; `indeterminate?`: `boolean`; }>

---

---
url: /api/ai-core/variables/PromptSuggestions.md
---
[@sqlrooms/ai-core](../index.md) / PromptSuggestions

# Variable: PromptSuggestions

> `const` **PromptSuggestions**: `object`

Composable PromptSuggestions component with Container, Item, and VisibilityToggle subcomponents

## Type Declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `Container` | `FC`<`PromptSuggestionsContainerProps`> | Container component for prompt suggestions Shows suggestions when visible, returns null when not visible |
|  `Item` | `FC`<`PromptSuggestionsItemProps`> | Individual prompt suggestion item component Displays a single prompt suggestion and handles click events |
|  `VisibilityToggle` | `FC`<`PromptSuggestionsVisibilityToggleProps`> | Toggle button for showing/hiding prompt suggestions Can be placed anywhere in the UI Always shows a Lightbulb icon with styling that changes based on state |

## Example

```tsx
<PromptSuggestions.Container isLoading={false}>
  <PromptSuggestions.Item text="What are the top selling products?" />
  <PromptSuggestions.Item text="Show me the revenue trends" />
</PromptSuggestions.Container>

<PromptSuggestions.VisibilityToggle />
```

---

---
url: /api/ai/variables/PromptSuggestions.md
---
[@sqlrooms/ai](../index.md) / PromptSuggestions

# Variable: PromptSuggestions

> `const` **PromptSuggestions**: `object`

Composable PromptSuggestions component with Container, Item, and VisibilityToggle subcomponents

## Type Declaration

| Name | Type |
| ------ | ------ |
|  `Container` | `FC` |
|  `Item` | `FC` |
|  `VisibilityToggle` | `FC` |

## Example

```tsx
<PromptSuggestions.Container isLoading={false}>
  <PromptSuggestions.Item text="What are the top selling products?" />
  <PromptSuggestions.Item text="Show me the revenue trends" />
</PromptSuggestions.Container>

<PromptSuggestions.VisibilityToggle />
```

---

---
url: /api/ai-core/variables/QueryControls.md
---
[@sqlrooms/ai-core](../index.md) / QueryControls

# Variable: QueryControls

> `const` **QueryControls**: `React.FC`<`QueryControlsProps`>

---

---
url: /api/ai/variables/QueryControls.md
---
[@sqlrooms/ai](../index.md) / QueryControls

# Variable: QueryControls

> `const` **QueryControls**: `React.FC`<`QueryControlsProps`>

---

---
url: /api/data-table/variables/QueryDataTable.md
---
[@sqlrooms/data-table](../index.md) / QueryDataTable

# Variable: QueryDataTable

> `const` **QueryDataTable**: `FC`<[`QueryDataTableProps`](../type-aliases/QueryDataTableProps.md)>

---

---
url: /api/data-table/variables/QueryDataTableActionsMenu.md
---
[@sqlrooms/data-table](../index.md) / QueryDataTableActionsMenu

# Variable: QueryDataTableActionsMenu

> `const` **QueryDataTableActionsMenu**: `FC`<{ `query`: `string`; }>

---

---
url: /api/sql-editor/variables/QueryEditorPanel.md
---
[@sqlrooms/sql-editor](../index.md) / QueryEditorPanel

# Variable: QueryEditorPanel

> `const` **QueryEditorPanel**: `React.FC`<[`QueryEditorPanelProps`](../interfaces/QueryEditorPanelProps.md)>

---

---
url: /api/sql-editor/variables/QueryEditorPanelActions.md
---
[@sqlrooms/sql-editor](../index.md) / QueryEditorPanelActions

# Variable: QueryEditorPanelActions

> `const` **QueryEditorPanelActions**: `React.FC`<{ `className?`: `string`; }>

---

---
url: /api/sql-editor/variables/QueryEditorPanelEditor.md
---
[@sqlrooms/sql-editor](../index.md) / QueryEditorPanelEditor

# Variable: QueryEditorPanelEditor

> `const` **QueryEditorPanelEditor**: `React.FC`<{ `className?`: `string`; `queryId`: `string`; }>

---

---
url: /api/sql-editor/variables/QueryEditorPanelTabsList.md
---
[@sqlrooms/sql-editor](../index.md) / QueryEditorPanelTabsList

# Variable: QueryEditorPanelTabsList

> `const` **QueryEditorPanelTabsList**: `React.FC`<{ `className?`: `string`; }>

---

---
url: /api/sql-editor/variables/QueryResultPanel.md
---
[@sqlrooms/sql-editor](../index.md) / QueryResultPanel

# Variable: QueryResultPanel

> `const` **QueryResultPanel**: `React.FC`<[`QueryResultPanelProps`](../interfaces/QueryResultPanelProps.md)>

---

---
url: /api/ai/variables/QueryToolParameters.md
---
[@sqlrooms/ai](../index.md) / QueryToolParameters

# Variable: QueryToolParameters

> `const` **QueryToolParameters**: `ZodObject`<[`QueryToolParameters`](../type-aliases/QueryToolParameters.md)>

---

---
url: /api/recharts/variables/RadarChart.md
---
[@sqlrooms/recharts](../index.md) / RadarChart

# Variable: RadarChart

> `const` **RadarChart**: `ForwardRefExoticComponent`

---

---
url: /api/recharts/variables/RadialBarChart.md
---
[@sqlrooms/recharts](../index.md) / RadialBarChart

# Variable: RadialBarChart

> `const` **RadialBarChart**: `ForwardRefExoticComponent`

---

---
url: /api/ui/variables/RadioGroup.md
---
[@sqlrooms/ui](../index.md) / RadioGroup

# Variable: RadioGroup

> `const` **RadioGroup**: `ForwardRefExoticComponent`<`Omit`<`RadioGroupProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/RadioGroupItem.md
---
[@sqlrooms/ui](../index.md) / RadioGroupItem

# Variable: RadioGroupItem

> `const` **RadioGroupItem**: `ForwardRefExoticComponent`<`Omit`<`RadioGroupItemProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`>>

---

---
url: /api/ai-rag/variables/RagToolParameters.md
---
[@sqlrooms/ai-rag](../index.md) / RagToolParameters

# Variable: RagToolParameters

> `const` **RagToolParameters**: `ZodObject`<[`RagToolParameters`](../type-aliases/RagToolParameters.md)>

Zod schema for the RAG tool parameters

---

---
url: /api/ai-core/variables/ReasoningBox.md
---
[@sqlrooms/ai-core](../index.md) / ReasoningBox

# Variable: ReasoningBox

> `const` **ReasoningBox**: `React.FC`<`ReasoningBoxProps`>

---

---
url: /api/ai/variables/ReasoningBox.md
---
[@sqlrooms/ai](../index.md) / ReasoningBox

# Variable: ReasoningBox

> `const` **ReasoningBox**: `React.FC`<`ReasoningBoxProps`>

---

---
url: /api/recharts/variables/Rectangle.md
---
[@sqlrooms/recharts](../index.md) / Rectangle

# Variable: Rectangle

> `const` **Rectangle**: `React.FC`<[`RectangleProps`](../type-aliases/RectangleProps.md)>

---

---
url: /api/recharts/recharts/namespaces/Label/variables/renderCallByParent.md
---
[@sqlrooms/recharts](../../../../index.md) / [Label](../index.md) / renderCallByParent

# Variable: renderCallByParent()

> **renderCallByParent**: (`parentProps`, `viewBox?`, `checkPropsLabel?`) => `React.ReactElement`<`any`, `string` | `React.JSXElementConstructor`<`any`>>\[]

## Parameters

| Parameter | Type |
| ------ | ------ |
| `parentProps` | { `children?`: `React.ReactNode`; `label?`: `unknown`; } |
| `parentProps.children?` | `React.ReactNode` |
| `parentProps.label?` | `unknown` |
| `viewBox?` | `ViewBox` |
| `checkPropsLabel?` | `boolean` |

## Returns

`React.ReactElement`<`any`, `string` | `React.JSXElementConstructor`<`any`>>\[]

---

---
url: /api/recharts/recharts/namespaces/LabelList/variables/renderCallByParent.md
---
[@sqlrooms/recharts](../../../../index.md) / [LabelList](../index.md) / renderCallByParent

# Variable: renderCallByParent()

> **renderCallByParent**: <`T`>(`parentProps`, `data`, `checkPropsLabel?`) => `React.JSX.Element`\[]

## Type Parameters

| Type Parameter |
| ------ |
| `T` *extends* `Data` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `parentProps` | { `children?`: `React.ReactNode`; `label?`: `unknown`; } |
| `parentProps.children?` | `React.ReactNode` |
| `parentProps.label?` | `unknown` |
| `data?` | `T`\[] |
| `checkPropsLabel?` | `boolean` |

## Returns

`React.JSX.Element`\[]

---

---
url: /api/ui/variables/ResizablePanel.md
---
[@sqlrooms/ui](../index.md) / ResizablePanel

# Variable: ResizablePanel

> `const` **ResizablePanel**: `ForwardRefExoticComponent`<`Omit`<`HTMLAttributes`<`HTMLDivElement` | `HTMLElement` | `HTMLObjectElement` | `HTMLMapElement` | `HTMLAnchorElement` | `HTMLButtonElement` | `HTMLFormElement` | `HTMLHeadingElement` | `HTMLImageElement` | `HTMLInputElement` | `HTMLLabelElement` | `HTMLLIElement` | `HTMLOListElement` | `HTMLParagraphElement` | `HTMLSelectElement` | `HTMLSpanElement` | `HTMLUListElement` | `HTMLAreaElement` | `HTMLAudioElement` | `HTMLBaseElement` | `HTMLQuoteElement` | `HTMLBodyElement` | `HTMLBRElement` | `HTMLCanvasElement` | `HTMLTableColElement` | `HTMLDataElement` | `HTMLDataListElement` | `HTMLModElement` | `HTMLDetailsElement` | `HTMLDialogElement` | `HTMLDListElement` | `HTMLEmbedElement` | `HTMLFieldSetElement` | `HTMLHeadElement` | `HTMLHRElement` | `HTMLHtmlElement` | `HTMLIFrameElement` | `HTMLLegendElement` | `HTMLLinkElement` | `HTMLMetaElement` | `HTMLMeterElement` | `HTMLOptGroupElement` | `HTMLOptionElement` | `HTMLOutputElement` | `HTMLPreElement` | `HTMLProgressElement` | `HTMLSlotElement` | `HTMLScriptElement` | `HTMLSourceElement` | `HTMLStyleElement` | `HTMLTableElement` | `HTMLTemplateElement` | `HTMLTableSectionElement` | `HTMLTableCellElement` | `HTMLTextAreaElement` | `HTMLTimeElement` | `HTMLTitleElement` | `HTMLTableRowElement` | `HTMLTrackElement` | `HTMLVideoElement` | `HTMLTableCaptionElement` | `HTMLMenuElement` | `HTMLPictureElement`>, `"id"` | `"onResize"`> & `object` & `object` & `RefAttributes`<`ImperativePanelHandle`>> = `ResizablePrimitive.Panel`

---

---
url: /api/recharts/variables/ResponsiveContainer.md
---
[@sqlrooms/recharts](../index.md) / ResponsiveContainer

# Variable: ResponsiveContainer

> `const` **ResponsiveContainer**: `React.ForwardRefExoticComponent`<[`ResponsiveContainerProps`](../interfaces/ResponsiveContainerProps.md) & `React.RefAttributes`<`HTMLDivElement` | { `current`: `HTMLDivElement`; }>>

---

---
url: /api/room-shell/variables/RoomPanel.md
---
[@sqlrooms/room-shell](../index.md) / RoomPanel

# Variable: RoomPanel

> `const` **RoomPanel**: `FC`<`PropsWithChildren`<{ `className?`: `string`; `type`: `string`; `showHeader?`: `boolean`; }>>

---

---
url: /api/room-shell/variables/RoomPanelHeader.md
---
[@sqlrooms/room-shell](../index.md) / RoomPanelHeader

# Variable: RoomPanelHeader

> `const` **RoomPanelHeader**: `FC`<{ `panelKey`: `string`; `showHeader?`: `boolean`; `children?`: `React.ReactNode`; }>

---

---
url: /api/room-shell/variables/RoomShell.md
---
[@sqlrooms/room-shell](../index.md) / RoomShell

# Variable: RoomShell

> `const` **RoomShell**: (`__namedParameters`) => `Element` & `object`

## Type Declaration

| Name | Type | Default value |
| ------ | ------ | ------ |
| `Sidebar` | `FC`<`PropsWithChildren`<{ `className?`: `string`; }>> | `RoomSidebar` |
| `SidebarButton` | `FC`<{ `className?`: `string`; `title`: `string`; `isSelected`: `boolean`; `isDisabled?`: `boolean`; `icon`: `ComponentType`<{ `className?`: `string`; }>; `onClick`: () => `void`; }> | `SidebarButton` |
| `SidebarButtons` | `FC`<{ `className?`: `string`; }> | `RoomShellSidebarButtons` |
| `LayoutComposer` | `FC`<{ `className?`: `string`; `tileClassName?`: `string`; }> | `LayoutComposer` |
| `LoadingProgress` | `FC`<{ `className?`: `string`; }> | `LoadingProgress` |

---

---
url: /api/room-shell/variables/RoomShellSidebarButton.md
---
[@sqlrooms/room-shell](../index.md) / RoomShellSidebarButton

# Variable: RoomShellSidebarButton

> `const` **RoomShellSidebarButton**: `FC`<{ `roomPanelType`: `string`; }>

---

---
url: /api/room-shell/variables/RoomShellSidebarButtons.md
---
[@sqlrooms/room-shell](../index.md) / RoomShellSidebarButtons

# Variable: RoomShellSidebarButtons

> `const` **RoomShellSidebarButtons**: `FC`<{ `className?`: `string`; }>

---

---
url: /api/room-shell/variables/RoomStateContext.md
---
[@sqlrooms/room-shell](../index.md) / RoomStateContext

# Variable: RoomStateContext

> `const` **RoomStateContext**: `React.Context`<[`BaseRoomStore`](../type-aliases/BaseRoomStore.md)<[`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md)> | `null`>

---

---
url: /api/room-store/variables/RoomStateContext.md
---
[@sqlrooms/room-store](../index.md) / RoomStateContext

# Variable: RoomStateContext

> `const` **RoomStateContext**: `Context`<[`BaseRoomStore`](../type-aliases/BaseRoomStore.md)<[`BaseRoomStoreState`](../type-aliases/BaseRoomStoreState.md)> | `null`>

---

---
url: /api/s3-browser/variables/S3Config.md
---
[@sqlrooms/s3-browser](../index.md) / S3Config

# Variable: S3Config

> `const` **S3Config**: `z.ZodObject`<[`S3Config`](../type-aliases/S3Config.md)>

---

---
url: /api/s3-browser-config/variables/S3Config.md
---
[@sqlrooms/s3-browser-config](../index.md) / S3Config

# Variable: S3Config

> `const` **S3Config**: `ZodObject`<[`S3Config`](../type-aliases/S3Config.md)>

---

---
url: /api/s3-browser/variables/S3Credentials.md
---
[@sqlrooms/s3-browser](../index.md) / S3Credentials

# Variable: S3Credentials

> `const` **S3Credentials**: `z.ZodObject`<[`S3Credentials`](../type-aliases/S3Credentials.md)>

---

---
url: /api/s3-browser-config/variables/S3Credentials.md
---
[@sqlrooms/s3-browser-config](../index.md) / S3Credentials

# Variable: S3Credentials

> `const` **S3Credentials**: `ZodObject`<[`S3Credentials`](../type-aliases/S3Credentials.md)>

---

---
url: /api/s3-browser/variables/S3FileBrowser.md
---
[@sqlrooms/s3-browser](../index.md) / S3FileBrowser

# Variable: S3FileBrowser

> `const` **S3FileBrowser**: `FC`<{ `files?`: [`S3FileOrDirectory`](../type-aliases/S3FileOrDirectory.md)\[]; `selectedFiles`: `string`\[]; `selectedDirectory`: `string`; `onCanConfirmChange`: (`canConfirm`) => `void`; `onChangeSelectedDirectory`: (`directory`) => `void`; `onChangeSelectedFiles`: (`files`) => `void`; `renderFileActions?`: () => `React.ReactNode`; }>

A file browser component for navigating and selecting files from an S3-like storage.

This component provides a familiar file explorer interface with features like:

* Directory navigation with breadcrumbs
* File and directory listing
* Multiple file selection
* File metadata display (size, type, last modified)

![S3 File Browser Interface](https://github.com/user-attachments/assets/dd79fbb9-c487-4050-96ef-81cff39930d3)

## Example

```tsx
const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
const [selectedDirectory, setSelectedDirectory] = useState('');

return (
  <S3FileBrowser
    files={[
      { key: 'documents', isDirectory: true },
      {
        key: 'example.txt',
        isDirectory: false,
        size: 1024,
        contentType: 'text/plain',
        lastModified: new Date()
      }
    ]}
    selectedFiles={selectedFiles}
    selectedDirectory={selectedDirectory}
    onCanConfirmChange={(canConfirm) => console.log('Can confirm:', canConfirm)}
    onChangeSelectedDirectory={setSelectedDirectory}
    onChangeSelectedFiles={setSelectedFiles}
  />
);
```

## Param

The component props

## Param

Array of files and directories to display

## Param

Array of currently selected file keys

## Param

Current directory path (empty string for root)

## Param

Callback fired when selection state changes

## Param

Callback fired when directory navigation occurs

## Param

Callback fired when file selection changes

---

---
url: /api/s3-browser/variables/S3FileOrDirectory.md
---
[@sqlrooms/s3-browser](../index.md) / S3FileOrDirectory

# Variable: S3FileOrDirectory

> `const` **S3FileOrDirectory**: `z.ZodUnion`<[`S3FileOrDirectory`](../type-aliases/S3FileOrDirectory.md)>

---

---
url: /api/s3-browser-config/variables/S3FileOrDirectory.md
---
[@sqlrooms/s3-browser-config](../index.md) / S3FileOrDirectory

# Variable: S3FileOrDirectory

> `const` **S3FileOrDirectory**: `ZodUnion`<[`S3FileOrDirectory`](../type-aliases/S3FileOrDirectory.md)>

---

---
url: /api/recharts/variables/ScatterChart.md
---
[@sqlrooms/recharts](../index.md) / ScatterChart

# Variable: ScatterChart

> `const` **ScatterChart**: `ForwardRefExoticComponent`

---

---
url: /api/schema-tree/variables/SchemaTreeNode.md
---
[@sqlrooms/schema-tree](../index.md) / SchemaTreeNode

# Variable: SchemaTreeNode

> `const` **SchemaTreeNode**: `FC`<{ `className?`: `string`; `nodeObject`: `SchemaNodeObject`; `additionalMenuItems?`: `React.ReactNode`; }>

---

---
url: /api/ui/variables/ScrollArea.md
---
[@sqlrooms/ui](../index.md) / ScrollArea

# Variable: ScrollArea

> `const` **ScrollArea**: `ForwardRefExoticComponent`<`Omit`<`ScrollAreaProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/ScrollBar.md
---
[@sqlrooms/ui](../index.md) / ScrollBar

# Variable: ScrollBar

> `const` **ScrollBar**: `ForwardRefExoticComponent`<`Omit`<`ScrollAreaScrollbarProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/recharts/variables/Sector.md
---
[@sqlrooms/recharts](../index.md) / Sector

# Variable: Sector

> `const` **Sector**: `React.FC`<[`SectorProps`](../type-aliases/SectorProps.md)>

---

---
url: /api/ui/variables/Select.md
---
[@sqlrooms/ui](../index.md) / Select

# Variable: Select

> `const` **Select**: `FC`<`SelectProps`> = `SelectPrimitive.Root`

---

---
url: /api/ui/variables/SelectContent.md
---
[@sqlrooms/ui](../index.md) / SelectContent

# Variable: SelectContent

> `const` **SelectContent**: `ForwardRefExoticComponent`<`Omit`<`SelectContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/SelectGroup.md
---
[@sqlrooms/ui](../index.md) / SelectGroup

# Variable: SelectGroup

> `const` **SelectGroup**: `ForwardRefExoticComponent`<`SelectGroupProps` & `RefAttributes`<`HTMLDivElement`>> = `SelectPrimitive.Group`

---

---
url: /api/ui/variables/SelectItem.md
---
[@sqlrooms/ui](../index.md) / SelectItem

# Variable: SelectItem

> `const` **SelectItem**: `ForwardRefExoticComponent`<`Omit`<`SelectItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/SelectLabel.md
---
[@sqlrooms/ui](../index.md) / SelectLabel

# Variable: SelectLabel

> `const` **SelectLabel**: `ForwardRefExoticComponent`<`Omit`<`SelectLabelProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/SelectScrollDownButton.md
---
[@sqlrooms/ui](../index.md) / SelectScrollDownButton

# Variable: SelectScrollDownButton

> `const` **SelectScrollDownButton**: `ForwardRefExoticComponent`<`Omit`<`SelectScrollDownButtonProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/SelectScrollUpButton.md
---
[@sqlrooms/ui](../index.md) / SelectScrollUpButton

# Variable: SelectScrollUpButton

> `const` **SelectScrollUpButton**: `ForwardRefExoticComponent`<`Omit`<`SelectScrollUpButtonProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/SelectSeparator.md
---
[@sqlrooms/ui](../index.md) / SelectSeparator

# Variable: SelectSeparator

> `const` **SelectSeparator**: `ForwardRefExoticComponent`<`Omit`<`SelectSeparatorProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/SelectTrigger.md
---
[@sqlrooms/ui](../index.md) / SelectTrigger

# Variable: SelectTrigger

> `const` **SelectTrigger**: `ForwardRefExoticComponent`<`Omit`<`SelectTriggerProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`>>

---

---
url: /api/ui/variables/SelectValue.md
---
[@sqlrooms/ui](../index.md) / SelectValue

# Variable: SelectValue

> `const` **SelectValue**: `ForwardRefExoticComponent`<`SelectValueProps` & `RefAttributes`<`HTMLSpanElement`>> = `SelectPrimitive.Value`

---

---
url: /api/ui/variables/Separator.md
---
[@sqlrooms/ui](../index.md) / Separator

# Variable: Separator

> `const` **Separator**: `ForwardRefExoticComponent`<`Omit`<`SeparatorProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ai-core/variables/SessionActions.md
---
[@sqlrooms/ai-core](../index.md) / SessionActions

# Variable: SessionActions

> `const` **SessionActions**: `React.FC`<`SessionActionsProps`>

Component that displays action buttons for session management.
Shows a delete button (via DeleteSessionButton) and a create new session button.

## Example

```tsx
<SessionActions className="my-custom-class" />
```

---

---
url: /api/ai/variables/SessionActions.md
---
[@sqlrooms/ai](../index.md) / SessionActions

# Variable: SessionActions

> `const` **SessionActions**: `React.FC`<`SessionActionsProps`>

Component that displays action buttons for session management.
Shows a delete button (via DeleteSessionButton) and a create new session button.

## Example

```tsx
<SessionActions className="my-custom-class" />
```

---

---
url: /api/ai-core/variables/SessionControls.md
---
[@sqlrooms/ai-core](../index.md) / SessionControls

# Variable: SessionControls

> `const` **SessionControls**: `React.FC`<{ `className?`: `string`; `children?`: `React.ReactNode`; }>

Main component for managing AI sessions.
Uses TabStrip for session management with dropdown for switching sessions.

## Example

```tsx
<SessionControls className="p-4 border-b">
  <Button>Custom Button</Button>
</SessionControls>
```

---

---
url: /api/ai/variables/SessionControls.md
---
[@sqlrooms/ai](../index.md) / SessionControls

# Variable: SessionControls

> `const` **SessionControls**: `React.FC`<{ `className?`: `string`; `children?`: `React.ReactNode`; }>

Main component for managing AI sessions.
Uses TabStrip for session management with dropdown for switching sessions.

## Example

```tsx
<SessionControls className="p-4 border-b">
  <Button>Custom Button</Button>
</SessionControls>
```

---

---
url: /api/ai-core/variables/SessionDropdown.md
---
[@sqlrooms/ai-core](../index.md) / SessionDropdown

# Variable: SessionDropdown

> `const` **SessionDropdown**: `React.FC`<`SessionDropdownProps`>

Dropdown component for managing AI sessions.
Allows users to switch between existing sessions or create a new one.

## Example

```tsx
<SessionDropdown className="my-custom-class" />
```

---

---
url: /api/ai/variables/SessionDropdown.md
---
[@sqlrooms/ai](../index.md) / SessionDropdown

# Variable: SessionDropdown

> `const` **SessionDropdown**: `React.FC`<`SessionDropdownProps`>

Dropdown component for managing AI sessions.
Allows users to switch between existing sessions or create a new one.

## Example

```tsx
<SessionDropdown className="my-custom-class" />
```

---

---
url: /api/ai-core/variables/SessionTitle.md
---
[@sqlrooms/ai-core](../index.md) / SessionTitle

# Variable: SessionTitle

> `const` **SessionTitle**: `React.FC`<`SessionTitleProps`>

Component that displays the current session name as an editable text field.
Shows the model name if available and a placeholder if no session is selected.

## Example

```tsx
<SessionTitle className="my-custom-class" />
```

---

---
url: /api/ai/variables/SessionTitle.md
---
[@sqlrooms/ai](../index.md) / SessionTitle

# Variable: SessionTitle

> `const` **SessionTitle**: `React.FC`<`SessionTitleProps`>

Component that displays the current session name as an editable text field.
Shows the model name if available and a placeholder if no session is selected.

## Example

```tsx
<SessionTitle className="my-custom-class" />
```

---

---
url: /api/ui/variables/Sheet.md
---
[@sqlrooms/ui](../index.md) / Sheet

# Variable: Sheet

> `const` **Sheet**: `FC`<`DialogProps`> = `SheetPrimitive.Root`

---

---
url: /api/ui/variables/SheetClose.md
---
[@sqlrooms/ui](../index.md) / SheetClose

# Variable: SheetClose

> `const` **SheetClose**: `ForwardRefExoticComponent`<`DialogCloseProps` & `RefAttributes`<`HTMLButtonElement`>> = `SheetPrimitive.Close`

---

---
url: /api/ui/variables/SheetContent.md
---
[@sqlrooms/ui](../index.md) / SheetContent

# Variable: SheetContent

> `const` **SheetContent**: `ForwardRefExoticComponent`<`SheetContentProps` & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/SheetDescription.md
---
[@sqlrooms/ui](../index.md) / SheetDescription

# Variable: SheetDescription

> `const` **SheetDescription**: `ForwardRefExoticComponent`<`Omit`<`DialogDescriptionProps` & `RefAttributes`<`HTMLParagraphElement`>, `"ref"`> & `RefAttributes`<`HTMLParagraphElement`>>

---

---
url: /api/ui/variables/SheetOverlay.md
---
[@sqlrooms/ui](../index.md) / SheetOverlay

# Variable: SheetOverlay

> `const` **SheetOverlay**: `ForwardRefExoticComponent`<`Omit`<`DialogOverlayProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/SheetPortal.md
---
[@sqlrooms/ui](../index.md) / SheetPortal

# Variable: SheetPortal

> `const` **SheetPortal**: `FC`<`DialogPortalProps`> = `SheetPrimitive.Portal`

---

---
url: /api/ui/variables/SheetTitle.md
---
[@sqlrooms/ui](../index.md) / SheetTitle

# Variable: SheetTitle

> `const` **SheetTitle**: `ForwardRefExoticComponent`<`Omit`<`DialogTitleProps` & `RefAttributes`<`HTMLHeadingElement`>, `"ref"`> & `RefAttributes`<`HTMLHeadingElement`>>

---

---
url: /api/ui/variables/SheetTrigger.md
---
[@sqlrooms/ui](../index.md) / SheetTrigger

# Variable: SheetTrigger

> `const` **SheetTrigger**: `ForwardRefExoticComponent`<`DialogTriggerProps` & `RefAttributes`<`HTMLButtonElement`>> = `SheetPrimitive.Trigger`

---

---
url: /api/room-shell/variables/SidebarButton.md
---
[@sqlrooms/room-shell](../index.md) / SidebarButton

# Variable: SidebarButton

> `const` **SidebarButton**: `FC`<{ `className?`: `string`; `title`: `string`; `isSelected`: `boolean`; `isDisabled?`: `boolean`; `icon`: `React.ComponentType`<{ `className?`: `string`; }>; `onClick`: () => `void`; }>

---

---
url: /api/ui/variables/SkeletonPane.md
---
[@sqlrooms/ui](../index.md) / SkeletonPane

# Variable: SkeletonPane

> `const` **SkeletonPane**: `React.FC`<{ `n?`: `number`; `staggeringDelay?`: `number`; `rowHeight?`: `number` | `string`; `className?`: `string`; }>

---

---
url: /api/ui/variables/Slider.md
---
[@sqlrooms/ui](../index.md) / Slider

# Variable: Slider

> `const` **Slider**: `ForwardRefExoticComponent`<`Omit`<`SliderProps` & `RefAttributes`<`HTMLSpanElement`>, `"ref"`> & `RefAttributes`<`HTMLSpanElement`>>

---

---
url: /api/ui/variables/Slot.md
---
[@sqlrooms/ui](../index.md) / Slot

# Variable: Slot

> `const` **Slot**: `React.ForwardRefExoticComponent`<`SlotProps` & `React.RefAttributes`<`HTMLElement`>>

---

---
url: /api/duckdb/variables/SpatialLoadFileOptions.md
---
[@sqlrooms/duckdb](../index.md) / SpatialLoadFileOptions

# Variable: SpatialLoadFileOptions

> `const` **SpatialLoadFileOptions**: `z.ZodObject`<[`SpatialLoadFileOptions`](../type-aliases/SpatialLoadFileOptions.md)>

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

---

---
url: /api/room-config/variables/SpatialLoadFileOptions.md
---
[@sqlrooms/room-config](../index.md) / SpatialLoadFileOptions

# Variable: SpatialLoadFileOptions

> `const` **SpatialLoadFileOptions**: `ZodObject`<[`SpatialLoadFileOptions`](../type-aliases/SpatialLoadFileOptions.md)>

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

---

---
url: /api/room-shell/variables/SpatialLoadFileOptions.md
---
[@sqlrooms/room-shell](../index.md) / SpatialLoadFileOptions

# Variable: SpatialLoadFileOptions

> `const` **SpatialLoadFileOptions**: `z.ZodObject`<[`SpatialLoadFileOptions`](../type-aliases/SpatialLoadFileOptions.md)>

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

---

---
url: /api/room-store/variables/SpatialLoadFileOptions.md
---
[@sqlrooms/room-store](../index.md) / SpatialLoadFileOptions

# Variable: SpatialLoadFileOptions

> `const` **SpatialLoadFileOptions**: `z.ZodObject`<[`SpatialLoadFileOptions`](../type-aliases/SpatialLoadFileOptions.md)>

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

---

---
url: /api/room-config/variables/SpatialLoadOptions.md
---
[@sqlrooms/room-config](../index.md) / SpatialLoadOptions

# Variable: SpatialLoadOptions

> `const` **SpatialLoadOptions**: `ZodObject`<[`SpatialLoadOptions`](../type-aliases/SpatialLoadOptions.md)>

**`Interface`**

Extended options specifically for spatial data loading
Includes all standard options plus spatial-specific parameters
SpatialLoadOptions

---

---
url: /api/room-shell/variables/SpatialLoadOptions.md
---
[@sqlrooms/room-shell](../index.md) / SpatialLoadOptions

# Variable: SpatialLoadOptions

> `const` **SpatialLoadOptions**: `z.ZodObject`<[`SpatialLoadOptions`](../type-aliases/SpatialLoadOptions.md)>

**`Interface`**

Extended options specifically for spatial data loading
Includes all standard options plus spatial-specific parameters
SpatialLoadOptions

---

---
url: /api/room-store/variables/SpatialLoadOptions.md
---
[@sqlrooms/room-store](../index.md) / SpatialLoadOptions

# Variable: SpatialLoadOptions

> `const` **SpatialLoadOptions**: `z.ZodObject`<[`SpatialLoadOptions`](../type-aliases/SpatialLoadOptions.md)>

**`Interface`**

Extended options specifically for spatial data loading
Includes all standard options plus spatial-specific parameters
SpatialLoadOptions

---

---
url: /api/ui/variables/Spinner.md
---
[@sqlrooms/ui](../index.md) / Spinner

# Variable: Spinner

> `const` **Spinner**: `FC`<{ `className?`: `string`; }>

Loading spinner component

---

---
url: /api/ui/variables/SpinnerPane.md
---
[@sqlrooms/ui](../index.md) / SpinnerPane

# Variable: SpinnerPane

> `const` **SpinnerPane**: `React.FC`<{ `h?`: `number` | `string`; `delayed?`: `boolean`; `className?`: `string`; `children?`: `React.ReactNode`; }>

---

---
url: /api/sql-editor/variables/SqlEditor.md
---
[@sqlrooms/sql-editor](../index.md) / SqlEditor

# Variable: SqlEditor

> `const` **SqlEditor**: `NamedExoticComponent`<[`SqlEditorProps`](../type-aliases/SqlEditorProps.md)>

---

---
url: /api/sql-editor/variables/SqlEditorHeader.md
---
[@sqlrooms/sql-editor](../index.md) / SqlEditorHeader

# Variable: SqlEditorHeader

> `const` **SqlEditorHeader**: `React.FC`<[`SqlEditorHeaderProps`](../type-aliases/SqlEditorHeaderProps.md)>

---

---
url: /api/sql-editor/variables/SqlEditorModal.md
---
[@sqlrooms/sql-editor](../index.md) / SqlEditorModal

# Variable: SqlEditorModal

> `const` **SqlEditorModal**: `React.FC`<[`SqlEditorProps`](../type-aliases/SqlEditorProps.md)>

A modal wrapper for the SQL Editor component that provides a full-screen dialog interface.

This component wraps the main SqlEditor component in a modal dialog, making it suitable for
overlay/popup usage scenarios. It inherits all props from SqlEditorProps and handles the
modal-specific behavior.

## Example

```tsx
<SqlEditorModal
  isOpen={true}
  onClose={() => setIsOpen(false)}
  sqlEditorConfig={config}
  onChange={handleConfigChange}
/>
```

## See

* [SqlEditor](SqlEditor.md) for detailed documentation of all available props
* [SqlEditorProps](../type-aliases/SqlEditorProps.md)
  The component accepts all props from SqlEditorProps:
* `isOpen` - Whether the SQL editor modal is currently visible
* `onClose` - Callback fired when the modal should be closed
* `sqlEditorConfig` - Configuration object containing queries and selected query state
* `onChange` - Callback fired when the SQL editor configuration changes
* `schema` - Optional database schema to use for queries (defaults to 'main')
* `documentationPanel` - Optional component to render SQL documentation in the side panel
* `onAddOrUpdateSqlQuery` - Callback fired when a new table should be created from query results

---

---
url: /api/sql-editor/variables/SqlEditorSliceConfig.md
---
[@sqlrooms/sql-editor](../index.md) / SqlEditorSliceConfig

# Variable: SqlEditorSliceConfig

> `const` **SqlEditorSliceConfig**: `z.ZodPipe`<`z.ZodTransform`<`unknown`, `unknown`>, `z.ZodObject`<{ `queries`: `z.ZodArray`<`z.ZodObject`<{ `id`: `z.ZodString`; `name`: `z.ZodString`; `query`: `z.ZodString`; }, `z.core.$strip`>>; `selectedQueryId`: `z.ZodString`; `lastExecutedQuery`: `z.ZodOptional`<`z.ZodString`>; `openTabs`: `z.ZodArray`<`z.ZodString`>; }, `z.core.$strip`>>

Config schema for the SQL editor slice.
Automatically migrates legacy closedTabIds to openTabs format.

---

---
url: /api/sql-editor-config/variables/SqlEditorSliceConfig.md
---
[@sqlrooms/sql-editor-config](../index.md) / SqlEditorSliceConfig

# Variable: SqlEditorSliceConfig

> `const` **SqlEditorSliceConfig**: `ZodPipe`<`ZodTransform`<`unknown`, `unknown`>, `ZodObject`<{ `queries`: `ZodArray`<`ZodObject`<{ `id`: `ZodString`; `name`: `ZodString`; `query`: `ZodString`; }, `$strip`>>; `selectedQueryId`: `ZodString`; `lastExecutedQuery`: `ZodOptional`<`ZodString`>; `openTabs`: `ZodArray`<`ZodString`>; }, `$strip`>>

Config schema for the SQL editor slice.
Automatically migrates legacy closedTabIds to openTabs format.

---

---
url: /api/sql-editor/variables/SqlMonacoEditor.md
---
[@sqlrooms/sql-editor](../index.md) / SqlMonacoEditor

# Variable: SqlMonacoEditor

> `const` **SqlMonacoEditor**: `React.FC`<[`SqlMonacoEditorProps`](../interfaces/SqlMonacoEditorProps.md)>

A Monaco editor for editing SQL with DuckDB syntax highlighting and autocompletion
This is an internal component used by SqlEditor

---

---
url: /api/room-config/variables/SqlQueryDataSource.md
---
[@sqlrooms/room-config](../index.md) / SqlQueryDataSource

# Variable: SqlQueryDataSource

> `const` **SqlQueryDataSource**: `ZodObject`<[`SqlQueryDataSource`](../type-aliases/SqlQueryDataSource.md)>

**`Interface`**

Configuration for SQL query-based data sources
SqlQueryDataSource

---

---
url: /api/room-shell/variables/SqlQueryDataSource.md
---
[@sqlrooms/room-shell](../index.md) / SqlQueryDataSource

# Variable: SqlQueryDataSource

> `const` **SqlQueryDataSource**: `z.ZodObject`<[`SqlQueryDataSource`](../type-aliases/SqlQueryDataSource.md)>

**`Interface`**

Configuration for SQL query-based data sources
SqlQueryDataSource

---

---
url: /api/room-store/variables/SqlQueryDataSource.md
---
[@sqlrooms/room-store](../index.md) / SqlQueryDataSource

# Variable: SqlQueryDataSource

> `const` **SqlQueryDataSource**: `z.ZodObject`<[`SqlQueryDataSource`](../type-aliases/SqlQueryDataSource.md)>

**`Interface`**

Configuration for SQL query-based data sources
SqlQueryDataSource

---

---
url: /api/sql-editor/variables/SqlQueryDataSourcesPanel.md
---
[@sqlrooms/sql-editor](../index.md) / SqlQueryDataSourcesPanel

# Variable: SqlQueryDataSourcesPanel

> `const` **SqlQueryDataSourcesPanel**: `FC`<{ `isReadOnly?`: `boolean`; `queryDataSources`: `SqlQueryDataSource`\[]; }>

---

---
url: /api/sql-editor/variables/SqlReferenceButton.md
---
[@sqlrooms/sql-editor](../index.md) / SqlReferenceButton

# Variable: SqlReferenceButton

> `const` **SqlReferenceButton**: `React.FC`<{ `className?`: `string`; `text?`: `string`; `icon?`: `React.ReactNode`; `variant?`: `ButtonProps`\[`"variant"`]; `url?`: `string`; }>

---

---
url: /api/sql-editor/variables/SqlReferenceButtonContent.md
---
[@sqlrooms/sql-editor](../index.md) / SqlReferenceButtonContent

# Variable: SqlReferenceButtonContent

> `const` **SqlReferenceButtonContent**: `React.FC`<{ `className?`: `string`; `text?`: `string`; `icon?`: `React.ReactNode`; }>

---

---
url: /api/room-config/variables/StandardLoadFileOptions.md
---
[@sqlrooms/room-config](../index.md) / StandardLoadFileOptions

# Variable: StandardLoadFileOptions

> `const` **StandardLoadFileOptions**: `ZodObject`<[`StandardLoadFileOptions`](../type-aliases/StandardLoadFileOptions.md)>

**`Interface`**

Standard file loading options excluding spatial methods
StandardLoadFileOptions

---

---
url: /api/room-shell/variables/StandardLoadFileOptions.md
---
[@sqlrooms/room-shell](../index.md) / StandardLoadFileOptions

# Variable: StandardLoadFileOptions

> `const` **StandardLoadFileOptions**: `z.ZodObject`<[`StandardLoadFileOptions`](../type-aliases/StandardLoadFileOptions.md)>

**`Interface`**

Standard file loading options excluding spatial methods
StandardLoadFileOptions

---

---
url: /api/room-store/variables/StandardLoadFileOptions.md
---
[@sqlrooms/room-store](../index.md) / StandardLoadFileOptions

# Variable: StandardLoadFileOptions

> `const` **StandardLoadFileOptions**: `z.ZodObject`<[`StandardLoadFileOptions`](../type-aliases/StandardLoadFileOptions.md)>

**`Interface`**

Standard file loading options excluding spatial methods
StandardLoadFileOptions

---

---
url: /api/room-config/variables/StandardLoadOptions.md
---
[@sqlrooms/room-config](../index.md) / StandardLoadOptions

# Variable: StandardLoadOptions

> `const` **StandardLoadOptions**: `ZodObject`<[`StandardLoadOptions`](../type-aliases/StandardLoadOptions.md)>

**`Interface`**

Standard options for loading data files
StandardLoadOptions

---

---
url: /api/room-shell/variables/StandardLoadOptions.md
---
[@sqlrooms/room-shell](../index.md) / StandardLoadOptions

# Variable: StandardLoadOptions

> `const` **StandardLoadOptions**: `z.ZodObject`<[`StandardLoadOptions`](../type-aliases/StandardLoadOptions.md)>

**`Interface`**

Standard options for loading data files
StandardLoadOptions

---

---
url: /api/room-store/variables/StandardLoadOptions.md
---
[@sqlrooms/room-store](../index.md) / StandardLoadOptions

# Variable: StandardLoadOptions

> `const` **StandardLoadOptions**: `z.ZodObject`<[`StandardLoadOptions`](../type-aliases/StandardLoadOptions.md)>

**`Interface`**

Standard options for loading data files
StandardLoadOptions

---

---
url: /api/recharts/variables/SunburstChart.md
---
[@sqlrooms/recharts](../index.md) / SunburstChart

# Variable: SunburstChart()

> `const` **SunburstChart**: (`{ className, data, children, width, height, padding, dataKey, ringPadding, innerRadius, fill, stroke, textOptions, outerRadius, cx, cy, startAngle, endAngle, onClick, onMouseEnter, onMouseLeave, }`) => `React.JSX.Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `{ className, data, children, width, height, padding, dataKey, ringPadding, innerRadius, fill, stroke, textOptions, outerRadius, cx, cy, startAngle, endAngle, onClick, onMouseEnter, onMouseLeave, }` | `SunburstChartProps` |

## Returns

`React.JSX.Element`

---

---
url: /api/ui/variables/Switch.md
---
[@sqlrooms/ui](../index.md) / Switch

# Variable: Switch

> `const` **Switch**: `ForwardRefExoticComponent`<`Omit`<`SwitchProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`>>

---

---
url: /api/recharts/variables/Symbols.md
---
[@sqlrooms/recharts](../index.md) / Symbols

# Variable: Symbols

> `const` **Symbols**: {(`__namedParameters`): `Element`; `registerSymbol`: (`key`, `factory`) => `void`; }

## Type Declaration

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`SymbolsProps`](../type-aliases/SymbolsProps.md) |

## Returns

`Element`

| Name | Type |
| ------ | ------ |
|  `registerSymbol()` | (`key`, `factory`) => `void` |

---

---
url: /api/ui/variables/Table.md
---
[@sqlrooms/ui](../index.md) / Table

# Variable: Table

> `const` **Table**: `ForwardRefExoticComponent`<`TableProps` & `RefAttributes`<`HTMLTableElement`>>

---

---
url: /api/ui/variables/TableBody.md
---
[@sqlrooms/ui](../index.md) / TableBody

# Variable: TableBody

> `const` **TableBody**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLTableSectionElement`> & `RefAttributes`<`HTMLTableSectionElement`>>

---

---
url: /api/ui/variables/TableCaption.md
---
[@sqlrooms/ui](../index.md) / TableCaption

# Variable: TableCaption

> `const` **TableCaption**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLTableCaptionElement`> & `RefAttributes`<`HTMLTableCaptionElement`>>

---

---
url: /api/room-shell/variables/TableCard.md
---
[@sqlrooms/room-shell](../index.md) / TableCard

# Variable: TableCard

> `const` **TableCard**: `FC`<{ `isReadOnly?`: `boolean`; `value?`: `DataTable`; `rowCount?`: `number`; `onReset?`: () => `void`; `onClick?`: () => `void`; `className?`: `string`; `menuRenderer?`: (`v`) => `React.ReactNode`; }>

---

---
url: /api/ui/variables/TableCell.md
---
[@sqlrooms/ui](../index.md) / TableCell

# Variable: TableCell

> `const` **TableCell**: `ForwardRefExoticComponent`<`TdHTMLAttributes`<`HTMLTableCellElement`> & `RefAttributes`<`HTMLTableCellElement`>>

---

---
url: /api/ui/variables/TableFooter.md
---
[@sqlrooms/ui](../index.md) / TableFooter

# Variable: TableFooter

> `const` **TableFooter**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLTableSectionElement`> & `RefAttributes`<`HTMLTableSectionElement`>>

---

---
url: /api/ui/variables/TableHead.md
---
[@sqlrooms/ui](../index.md) / TableHead

# Variable: TableHead

> `const` **TableHead**: `ForwardRefExoticComponent`<`ThHTMLAttributes`<`HTMLTableCellElement`> & `RefAttributes`<`HTMLTableCellElement`>>

---

---
url: /api/ui/variables/TableHeader.md
---
[@sqlrooms/ui](../index.md) / TableHeader

# Variable: TableHeader

> `const` **TableHeader**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLTableSectionElement`> & `RefAttributes`<`HTMLTableSectionElement`>>

---

---
url: /api/ui/variables/TableRow.md
---
[@sqlrooms/ui](../index.md) / TableRow

# Variable: TableRow

> `const` **TableRow**: `ForwardRefExoticComponent`<`HTMLAttributes`<`HTMLTableRowElement`> & `RefAttributes`<`HTMLTableRowElement`>>

---

---
url: /api/schema-tree/variables/TableSchemaTree.md
---
[@sqlrooms/schema-tree](../index.md) / TableSchemaTree

# Variable: TableSchemaTree

> `const` **TableSchemaTree**: `FC`<{ `className?`: `string`; `schemaTrees`: `DbSchemaNode`\[]; `renderNode?`: (`node`, `isOpen`) => `React.ReactNode`; `skipSingleDatabaseOrSchema?`: `boolean`; }>

---

---
url: /api/room-shell/variables/TablesListPanel.md
---
[@sqlrooms/room-shell](../index.md) / TablesListPanel

# Variable: TablesListPanel

> `const` **TablesListPanel**: `FC`<{ `className?`: `string`; `isReadOnly?`: `boolean`; }>

---

---
url: /api/sql-editor/variables/TableStructurePanel.md
---
[@sqlrooms/sql-editor](../index.md) / TableStructurePanel

# Variable: TableStructurePanel

> `const` **TableStructurePanel**: `React.FC`<[`TableStructurePanelProps`](../interfaces/TableStructurePanelProps.md)>

---

---
url: /api/schema-tree/variables/TableTreeNode.md
---
[@sqlrooms/schema-tree](../index.md) / TableTreeNode

# Variable: TableTreeNode

> `const` **TableTreeNode**: `FC`<{ `className?`: `string`; `nodeObject`: `TableNodeObject`; `renderMenuItems?`: (`nodeObject`, `tableModal`) => `React.ReactNode`; }>

---

---
url: /api/ui/variables/Tabs.md
---
[@sqlrooms/ui](../index.md) / Tabs

# Variable: Tabs

> `const` **Tabs**: `ForwardRefExoticComponent`<`TabsProps` & `RefAttributes`<`HTMLDivElement`>> = `TabsPrimitive.Root`

---

---
url: /api/ui/variables/TabsContent.md
---
[@sqlrooms/ui](../index.md) / TabsContent

# Variable: TabsContent

> `const` **TabsContent**: `ForwardRefExoticComponent`<`Omit`<`TabsContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/TabsList.md
---
[@sqlrooms/ui](../index.md) / TabsList

# Variable: TabsList

> `const` **TabsList**: `ForwardRefExoticComponent`<`Omit`<`TabsListProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/TabsTrigger.md
---
[@sqlrooms/ui](../index.md) / TabsTrigger

# Variable: TabsTrigger

> `const` **TabsTrigger**: `ForwardRefExoticComponent`<`Omit`<`TabsTriggerProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`>>

---

---
url: /api/ui/variables/TabStrip.md
---
[@sqlrooms/ui](../index.md) / TabStrip

# Variable: TabStrip

> `const` **TabStrip**: (`__namedParameters`) => `Element` & `object`

## Type Declaration

| Name | Type | Default value |
| ------ | ------ | ------ |
| `Tabs()` | (`__namedParameters`) => `Element` | `TabStripTabs` |
| `SearchDropdown()` | (`__namedParameters`) => `Element` | `TabStripSearchDropdown` |
| `NewButton()` | (`__namedParameters`) => `Element` | `null` | `TabStripNewButton` |
| `MenuItem()` | (`__namedParameters`) => `Element` | `TabStripMenuItem` |
| `MenuSeparator()` | (`__namedParameters`) => `Element` | `TabStripMenuSeparator` |
| `SearchItemAction()` | (`__namedParameters`) => `Element` | `TabStripSearchItemAction` |

---

---
url: /api/recharts/variables/Text.md
---
[@sqlrooms/recharts](../index.md) / Text

# Variable: Text()

> `const` **Text**: (`{ x: propsX, y: propsY, lineHeight, capHeight, scaleToFit, textAnchor, verticalAnchor, fill, ...props }`) => `React.JSX.Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `{ x: propsX, y: propsY, lineHeight, capHeight, scaleToFit, textAnchor, verticalAnchor, fill, ...props }` | [`TextProps`](../type-aliases/TextProps.md) |

## Returns

`React.JSX.Element`

---

---
url: /api/ui/variables/Textarea.md
---
[@sqlrooms/ui](../index.md) / Textarea

# Variable: Textarea

> `const` **Textarea**: `ForwardRefExoticComponent`<`Omit`<`TextareaProps`, `"ref"`> & `RefAttributes`<`HTMLTextAreaElement`>>

---

---
url: /api/ui/variables/ThemeSwitch.md
---
[@sqlrooms/ui](../index.md) / ThemeSwitch

# Variable: ThemeSwitch

> `const` **ThemeSwitch**: `FC`<{ `className?`: `string`; }>

A theme toggle switch component that allows users to switch between light and dark themes.

This component provides a visually appealing switch with sun/moon icons that animate smoothly
during theme transitions. It integrates with the theme context to manage theme state.

Features:

* Smooth icon animations
* Accessible keyboard navigation
* Focus and hover states
* Customizable via className prop

## Component

## Example

```tsx
// Basic usage
<ThemeSwitch />

// With custom styling
<ThemeSwitch className="my-custom-class" />

// Within a theme provider
import { ThemeProvider } from '../theme/theme-provider';

function App() {
  return (
    <ThemeProvider>
      <ThemeSwitch />
    </ThemeProvider>
  );
}
```

---

---
url: /api/ui/variables/Toast.md
---
[@sqlrooms/ui](../index.md) / Toast

# Variable: Toast

> `const` **Toast**: `ForwardRefExoticComponent`<`Omit`<`ToastProps` & `RefAttributes`<`HTMLLIElement`>, `"ref"`> & `VariantProps`<(`props?`) => `string`> & `RefAttributes`<`HTMLLIElement`>>

---

---
url: /api/ui/variables/ToastAction.md
---
[@sqlrooms/ui](../index.md) / ToastAction

# Variable: ToastAction

> `const` **ToastAction**: `ForwardRefExoticComponent`<`Omit`<`ToastActionProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`>>

---

---
url: /api/ui/variables/ToastClose.md
---
[@sqlrooms/ui](../index.md) / ToastClose

# Variable: ToastClose

> `const` **ToastClose**: `ForwardRefExoticComponent`<`Omit`<`ToastCloseProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`>>

---

---
url: /api/ui/variables/ToastDescription.md
---
[@sqlrooms/ui](../index.md) / ToastDescription

# Variable: ToastDescription

> `const` **ToastDescription**: `ForwardRefExoticComponent`<`Omit`<`ToastDescriptionProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/ToastProvider.md
---
[@sqlrooms/ui](../index.md) / ToastProvider

# Variable: ToastProvider

> `const` **ToastProvider**: `FC`<`ToastProviderProps`> = `ToastPrimitives.Provider`

---

---
url: /api/ui/variables/ToastTitle.md
---
[@sqlrooms/ui](../index.md) / ToastTitle

# Variable: ToastTitle

> `const` **ToastTitle**: `ForwardRefExoticComponent`<`Omit`<`ToastTitleProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/ToastViewport.md
---
[@sqlrooms/ui](../index.md) / ToastViewport

# Variable: ToastViewport

> `const` **ToastViewport**: `ForwardRefExoticComponent`<`Omit`<`ToastViewportProps` & `RefAttributes`<`HTMLOListElement`>, `"ref"`> & `RefAttributes`<`HTMLOListElement`>>

---

---
url: /api/ui/variables/Toggle.md
---
[@sqlrooms/ui](../index.md) / Toggle

# Variable: Toggle

> `const` **Toggle**: `ForwardRefExoticComponent`<`Omit`<`ToggleProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `VariantProps`<(`props?`) => `string`> & `RefAttributes`<`HTMLButtonElement`>>

---

---
url: /api/ui/variables/ToggleGroup.md
---
[@sqlrooms/ui](../index.md) / ToggleGroup

# Variable: ToggleGroup

> `const` **ToggleGroup**: `ForwardRefExoticComponent`<(Omit\<ToggleGroupSingleProps & RefAttributes\<HTMLDivElement>, "ref"> | Omit\<ToggleGroupMultipleProps & RefAttributes<...>, "ref">) & VariantProps<...> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/ToggleGroupItem.md
---
[@sqlrooms/ui](../index.md) / ToggleGroupItem

# Variable: ToggleGroupItem

> `const` **ToggleGroupItem**: `ForwardRefExoticComponent`<`Omit`<`ToggleGroupItemProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `VariantProps`<(`props?`) => `string`> & `RefAttributes`<`HTMLButtonElement`>>

---

---
url: /api/ui/variables/toggleVariants.md
---
[@sqlrooms/ui](../index.md) / toggleVariants

# Variable: toggleVariants()

> `const` **toggleVariants**: (`props?`) => `string`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props?` | ConfigVariants<{ variant: { default: string; outline: string; }; size: { default: string; sm: string; lg: string; }; }> & ClassProp |

## Returns

`string`

---

---
url: /api/ai-core/variables/ToolCallInfo.md
---
[@sqlrooms/ai-core](../index.md) / ToolCallInfo

# Variable: ToolCallInfo

> `const` **ToolCallInfo**: `React.FC`<`ToolCallInfoProps`>

Component that renders a tool call is running
Shows the tool name and truncated arguments by default.
Click on the tool name to expand and see full arguments.

## Component

## Param

Component props

## Param

Name of the tool being called

## Param

Input arguments passed to the tool

## Param

Whether the tool call has completed

## Param

Current state of the tool call

## Returns

A React component displaying the tool call details

---

---
url: /api/ai/variables/ToolCallInfo.md
---
[@sqlrooms/ai](../index.md) / ToolCallInfo

# Variable: ToolCallInfo

> `const` **ToolCallInfo**: `React.FC`<`ToolCallInfoProps`>

Component that renders a tool call is running
Shows the tool name and truncated arguments by default.
Click on the tool name to expand and see full arguments.

## Component

## Param

Component props

## Param

Name of the tool being called

## Param

Input arguments passed to the tool

## Param

Whether the tool call has completed

## Param

Current state of the tool call

## Returns

A React component displaying the tool call details

---

---
url: /api/ui/variables/Tooltip.md
---
[@sqlrooms/ui](../index.md) / Tooltip

# Variable: Tooltip

> `const` **Tooltip**: `FC`<`TooltipProps`> = `TooltipPrimitive.Root`

---

---
url: /api/ui/variables/TooltipContent.md
---
[@sqlrooms/ui](../index.md) / TooltipContent

# Variable: TooltipContent

> `const` **TooltipContent**: `ForwardRefExoticComponent`<`Omit`<`TooltipContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/ui/variables/TooltipProvider.md
---
[@sqlrooms/ui](../index.md) / TooltipProvider

# Variable: TooltipProvider

> `const` **TooltipProvider**: `FC`<`TooltipProviderProps`> = `TooltipPrimitive.Provider`

---

---
url: /api/ui/variables/TooltipTrigger.md
---
[@sqlrooms/ui](../index.md) / TooltipTrigger

# Variable: TooltipTrigger

> `const` **TooltipTrigger**: `ForwardRefExoticComponent`<`TooltipTriggerProps` & `RefAttributes`<`HTMLButtonElement`>> = `TooltipPrimitive.Trigger`

---

---
url: /api/recharts/variables/Trapezoid.md
---
[@sqlrooms/recharts](../index.md) / Trapezoid

# Variable: Trapezoid

> `const` **Trapezoid**: `React.FC`<[`TrapezoidProps`](../type-aliases/TrapezoidProps.md)>

---

---
url: /api/schema-tree/variables/TreeNodeActionsMenu.md
---
[@sqlrooms/schema-tree](../index.md) / TreeNodeActionsMenu

# Variable: TreeNodeActionsMenu

> `const` **TreeNodeActionsMenu**: `FC`<`TreeNodeActionsMenuProps`>

Component that renders a tree node "more actions" menu.
The menu items are passed as children.

The menu is hidden by default and is shown when the user hovers over the node.
For this to work the parent element must have the `group` class.
It should also have classes `relative overflow-hidden`.

## Param

The menu items.

---

---
url: /api/schema-tree/variables/TreeNodeActionsMenuItem.md
---
[@sqlrooms/schema-tree](../index.md) / TreeNodeActionsMenuItem

# Variable: TreeNodeActionsMenuItem

> `const` **TreeNodeActionsMenuItem**: `ForwardRefExoticComponent`<`Omit`<`Omit`<`DropdownMenuItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>>

---

---
url: /api/room-config/variables/UrlDataSource.md
---
[@sqlrooms/room-config](../index.md) / UrlDataSource

# Variable: UrlDataSource

> `const` **UrlDataSource**: `ZodObject`<[`UrlDataSource`](../type-aliases/UrlDataSource.md)>

**`Interface`**

Configuration for URL-based data sources
UrlDataSource

---

---
url: /api/room-shell/variables/UrlDataSource.md
---
[@sqlrooms/room-shell](../index.md) / UrlDataSource

# Variable: UrlDataSource

> `const` **UrlDataSource**: `z.ZodObject`<[`UrlDataSource`](../type-aliases/UrlDataSource.md)>

**`Interface`**

Configuration for URL-based data sources
UrlDataSource

---

---
url: /api/room-store/variables/UrlDataSource.md
---
[@sqlrooms/room-store](../index.md) / UrlDataSource

# Variable: UrlDataSource

> `const` **UrlDataSource**: `z.ZodObject`<[`UrlDataSource`](../type-aliases/UrlDataSource.md)>

**`Interface`**

Configuration for URL-based data sources
UrlDataSource

---

---
url: /api/vega/variables/VegaChartToolParameters.md
---
[@sqlrooms/vega](../index.md) / VegaChartToolParameters

# Variable: VegaChartToolParameters

> `const` **VegaChartToolParameters**: `ZodObject`<[`VegaChartToolParameters`](../type-aliases/VegaChartToolParameters.md)>

Zod schema for the VegaChart tool parameters

---

---
url: /api/vega/variables/VegaLiteChart.md
---
[@sqlrooms/vega](../index.md) / VegaLiteChart

# Variable: VegaLiteChart

> `const` **VegaLiteChart**: `FC`<{ `className?`: `string`; `width?`: `number` | `"auto"`; `height?`: `number` | `"auto"`; `aspectRatio?`: `number`; `sqlQuery`: `string`; `spec`: `string` | [`VisualizationSpec`](../type-aliases/VisualizationSpec.md); `dataName?`: `string`; }> & `object`

## Type Declaration

| Name | Type | Default value |
| ------ | ------ | ------ |
| `SqlChart` | `FC`<{ `className?`: `string`; `width?`: `number` | `"auto"`; `height?`: `number` | `"auto"`; `aspectRatio?`: `number`; `sqlQuery`: `string`; `spec`: `string` | [`VisualizationSpec`](../type-aliases/VisualizationSpec.md); `dataName?`: `string`; }> | `VegaLiteSqlChart` |
| `ArrowChart` | `FC`<{ `className?`: `string`; `width?`: `number` | `"auto"`; `height?`: `number` | `"auto"`; `aspectRatio?`: `number`; `spec`: `string` | [`VisualizationSpec`](../type-aliases/VisualizationSpec.md); `arrowTable`: `Table`<`any`> | `undefined`; `dataName?`: `string`; }> | `ArrowChart` |

---

---
url: /api/mosaic/variables/VgPlotChart.md
---
[@sqlrooms/mosaic](../index.md) / VgPlotChart

# Variable: VgPlotChart

> `const` **VgPlotChart**: `FC`<`VgPlotChartProps`>

Renders a Vega-Lite chart using the Mosaic library.

## Param

The component props.

## Param

The Vega-Lite specification for the chart.

## Returns

The rendered chart component.

---

---
url: /whats-new.md
---

# What's New

New features, improvements, and notable changes in each SQLRooms release. For migration steps and breaking changes, see the [Upgrade Guide](/upgrade-guide).

## 0.26.1-rc.7 (2025-12-05)

### Replaced barrel exports across all modules

Barrel exports (i.e., `export * from ...`) were replaced across all modules to improve tree-shaking, reduce bundle size, and avoid import path ambiguities. Direct/explicit exports now ensure only the required symbols are included in consumers' builds, making dependencies clearer and preventing accidental re-exports or circular dependencies.

Additionally, `"sideEffects": false` was added to all packages. This signals to bundlers that the modules are free of side effects, enabling better tree-shaking and further reducing the final bundle size.

### TabStrip component in `@sqlrooms/ui`

A composable tab strip with drag-to-reorder, inline renaming, and a search dropdown for reopening closed tabs. Supports custom tab menus and flexible layouts via subcomponents (`TabStrip.Tabs`, `TabStrip.SearchDropdown`, `TabStrip.NewButton`).

### Kepler integration

Added [Kepler.gl](https://kepler.gl/) integration module for geospatial data visualization.

Check the [Kepler example](https://github.com/sqlrooms/examples/tree/main/kepler)

### AI RAG module

New `@sqlrooms/ai-rag` module for Retrieval Augmented Generation. Query your documentation using vector similarity search powered by DuckDB's native vector capabilities.

Check the [AI RAG example](https://github.com/sqlrooms/examples/tree/main/examples/ai-rag)

## 0.26.0 (2025-11-17)

### AI SDK v5

We migrated to Vercel AI SDK v5. Now supporting agents: check the [ai-agent example](https://github.com/sqlrooms/sqlrooms/tree/main/examples/ai-agent)