Interface InteractiveQuestionComponents

interface InteractiveQuestionComponents {
    AlertsButton: () => Element;
    BackButton: (props: InteractiveQuestionBackButtonProps) => null | Element;
    Breakout: () => null | Element;
    BreakoutDropdown: (
        props: InteractiveQuestionBreakoutDropdownProps,
    ) => null | Element;
    ChartTypeDropdown: (props: MenuProps) => Element;
    ChartTypeSelector: (props: StackProps) => Element;
    DownloadWidget: (props: StackProps) => null | Element;
    DownloadWidgetDropdown: (props: PopoverProps) => null | Element;
    Editor: (props: InteractiveQuestionEditorProps) => null | Element;
    EditorButton: (
        props: InteractiveQuestionEditorButtonProps,
    ) => undefined | false | Element;
    Filter: (props: InteractiveQuestionFilterProps) => Element;
    FilterDropdown: (
        props: InteractiveQuestionFilterDropdownProps,
    ) => null | Element;
    NavigationBackButton: (
        props: { className?: string; style?: CSSProperties },
    ) => ReactNode;
    Notebook: (props: InteractiveQuestionEditorProps) => null | Element;
    NotebookButton: (
        props: InteractiveQuestionEditorButtonProps,
    ) => undefined | false | Element;
    QuestionSettings: (props: StackProps) => null | Element;
    QuestionSettingsDropdown: (
        props?: InteractiveQuestionQuestionSettingsDropdownProps,
    ) => Element;
    QuestionVisualization: (
        props: { className?: string; style?: CSSProperties } & {
            height?: Height<string | number>;
            width?: Width<string | number>;
        } & {},
    ) => Element;
    ResetButton: (props?: ButtonProps) => null | Element;
    SaveButton: (props?: InteractiveQuestionSaveButtonProps) => Element;
    SaveQuestionForm: (
        props: InteractiveQuestionSaveQuestionFormProps,
    ) => null | Element;
    SqlParametersList: () => null | Element;
    Summarize: () => Element;
    SummarizeDropdown: (
        props: InteractiveQuestionSummarizeDropdownProps,
    ) => Element;
    Title: (
        props: { className?: string; style?: CSSProperties },
    ) => undefined | Element;
    VisualizationButton: () => null | Element;
}

InteractiveQuestion

BackButton

BackButton: (props: InteractiveQuestionBackButtonProps) => null | Element

Type Declaration

- (props: InteractiveQuestionBackButtonProps): null | Element
- Function
  A navigation button that returns to the previous view. Only visible when rendered within the InteractiveDashboardProps.renderDrillThroughQuestion prop.
  Parameters
  - props: InteractiveQuestionBackButtonProps
  Returns null | Element

Deprecated

Use InteractiveQuestion.NavigationBackButton instead

Breakout

Breakout: () => null | Element

Type Declaration

- (): null | Element
- Function
  A set of badges for managing data groupings (breakouts). Uses question context for breakout functionality.
  
  Returns null | Element

BreakoutDropdown

BreakoutDropdown: (
props: InteractiveQuestionBreakoutDropdownProps,
) => null | Element

Type Declaration

- (props: InteractiveQuestionBreakoutDropdownProps): null | Element
- Function
  Dropdown button for the Breakout component.
  Parameters
  - props: InteractiveQuestionBreakoutDropdownProps
  Returns null | Element

ChartTypeDropdown

ChartTypeDropdown: (props: MenuProps) => Element

Type Declaration

- (props: MenuProps): Element
- Function
  Dropdown for selecting the visualization type (bar chart, line chart, table, etc.). Automatically updates to show recommended visualization types for the current data.
  Parameters
  - props: MenuProps
  Returns Element

ChartTypeSelector

ChartTypeSelector: (props: StackProps) => Element

Type Declaration

- (props: StackProps): Element
- Function
  Detailed chart type selection interface with recommended visualization options.
  Parameters
  - props: StackProps
  Returns Element

DownloadWidget

DownloadWidget: (props: StackProps) => null | Element

Type Declaration

- (props: StackProps): null | Element
- Function
  Provides a UI widget for downloading data in different formats (CSV, XLSX, JSON, and PNG depending on the visualization).
  Parameters
  - props: StackProps
  Returns null | Element

DownloadWidgetDropdown

DownloadWidgetDropdown: (props: PopoverProps) => null | Element

Type Declaration

- (props: PopoverProps): null | Element
- Function
  Provides a button that contains a dropdown that shows the DownloadWidget.
  Parameters
  - props: PopoverProps
  Returns null | Element

Editor

Editor: (props: InteractiveQuestionEditorProps) => null | Element

Type Declaration

- (props: InteractiveQuestionEditorProps): null | Element
- Function
  Advanced query editor that provides full access to question configuration. Includes filtering, aggregation, custom expressions, and joins.
  Parameters
  - props: InteractiveQuestionEditorProps
    - OptionalhasVisualizeButton?: boolean
    - OptionalonApply?: () => void
      Callback function executed when changes are applied
  Returns null | Element

EditorButton

EditorButton: (
props: InteractiveQuestionEditorButtonProps,
) => undefined | false | Element

Type Declaration

- (props: InteractiveQuestionEditorButtonProps): undefined | false | Element
- Function
  Toggle button for showing/hiding the Editor interface. In custom layouts, the EditorButton must have an InteractiveQuestionEditorButtonProps.onClick` handler or the button won't do anything when clicked.
  Parameters
  - props: InteractiveQuestionEditorButtonProps
    - OptionalisOpen?: boolean
      Whether the editor is currently open
      
      Default Value
      false
    - OptionalonClick?: MouseEventHandler<HTMLButtonElement>
      Callback function to be called when the button is clicked
  Returns undefined | false | Element

Filter

Filter: (props: InteractiveQuestionFilterProps) => Element

Type Declaration

- (props: InteractiveQuestionFilterProps): Element
- Function
  A set of interactive filter badges that allow adding, editing, and removing filters. Displays current filters as badges with an "Add another filter" option.
  Parameters
  - props: InteractiveQuestionFilterProps
    - OptionalwithColumnItemIcon?: boolean
      Whether to show the icon for the column item
  Returns Element

FilterDropdown

FilterDropdown: (
props: InteractiveQuestionFilterDropdownProps,
) => null | Element

Type Declaration

- (props: InteractiveQuestionFilterDropdownProps): null | Element
- Function
  A dropdown button for the Filter component.
  Parameters
  - props: InteractiveQuestionFilterDropdownProps
    - OptionalwithColumnItemIcon?: boolean
      Whether to show the icon for the column item
  Returns null | Element

Notebook

Notebook: (props: InteractiveQuestionEditorProps) => null | Element

Type Declaration

- (props: InteractiveQuestionEditorProps): null | Element
- Function
  Advanced query editor that provides full access to question configuration. Includes filtering, aggregation, custom expressions, and joins.
  Parameters
  - props: InteractiveQuestionEditorProps
    - OptionalhasVisualizeButton?: boolean
    - OptionalonApply?: () => void
      Callback function executed when changes are applied
  Returns null | Element

Deprecated

Use InteractiveQuestion.Editor instead

NotebookButton

NotebookButton: (
props: InteractiveQuestionEditorButtonProps,
) => undefined | false | Element

Type Declaration

- (props: InteractiveQuestionEditorButtonProps): undefined | false | Element
- Function
  Toggle button for showing/hiding the Editor interface. In custom layouts, the EditorButton must have an InteractiveQuestionEditorButtonProps.onClick` handler or the button won't do anything when clicked.
  Parameters
  - props: InteractiveQuestionEditorButtonProps
    - OptionalisOpen?: boolean
      Whether the editor is currently open
      
      Default Value
      false
    - OptionalonClick?: MouseEventHandler<HTMLButtonElement>
      Callback function to be called when the button is clicked
  Returns undefined | false | Element

Deprecated

Use InteractiveQuestion.EditorButton instead

QuestionSettings

QuestionSettings: (props: StackProps) => null | Element

Type Declaration

- (props: StackProps): null | Element
- Function
  Settings panel for configuring visualization options like axes, colors, and formatting. Uses question context for settings.
  Parameters
  - props: StackProps
  Returns null | Element

QuestionSettingsDropdown

QuestionSettingsDropdown: (
props?: InteractiveQuestionQuestionSettingsDropdownProps,
) => Element

Type Declaration

- (props?: InteractiveQuestionQuestionSettingsDropdownProps): Element
- Function
  Dropdown button that contains the QuestionSettings component.
  Parameters
  - Optionalprops: InteractiveQuestionQuestionSettingsDropdownProps
    - Optionalheight?: Height<string | number>
      Height for the dropdown menu
  Returns Element

QuestionVisualization

QuestionVisualization: (
    props: { className?: string; style?: CSSProperties } & {
        height?: Height<string | number>;
        width?: Width<string | number>;
    } & {},
) => Element

Type Declaration

- (
      props: { className?: string; style?: CSSProperties } & {
          height?: Height<string | number>;
          width?: Width<string | number>;
      } & {},
  ): Element
- Function
  The main visualization component that renders the question results as a chart, table, or other visualization type.
  Parameters
  - props: { className?: string; style?: CSSProperties } & {
    height?: Height<string | number>;
    width?: Width<string | number>;
    } & {}
    - OptionalclassName?: string
      A custom class name to be added to the root element.
    - Optionalstyle?: CSSProperties
      A custom style object to be added to the root element.
    - Optionalheight?: Height<string | number>
      A number or string specifying a CSS size value that specifies the height of the component
    - Optionalwidth?: Width<string | number>
      A number or string specifying a CSS size value that specifies the width of the component
  Returns Element

ResetButton

ResetButton: (props?: ButtonProps) => null | Element

Type Declaration

- (props?: ButtonProps): null | Element
- Function
  Button to reset question modifications. Only appears when there are unsaved changes to the question.
  Parameters
  - Optionalprops: ButtonProps
  Returns null | Element

SaveButton

SaveButton: (props?: InteractiveQuestionSaveButtonProps) => Element

Type Declaration

- (props?: InteractiveQuestionSaveButtonProps): Element
- Function
  Button for saving question changes. Only enabled when there are unsaved modifications to the question.
  
  Note: Currently, in custom layouts, the SaveButton must have an onClick handler or the button will not do anything when clicked.
  Parameters
  - Optionalprops: InteractiveQuestionSaveButtonProps
    - OptionalonClick?: MouseEventHandler<HTMLButtonElement>
      A handler function to be called when the button is clicked
  Returns Element

SaveQuestionForm

SaveQuestionForm: (
props: InteractiveQuestionSaveQuestionFormProps,
) => null | Element

Type Declaration

- (props: InteractiveQuestionSaveQuestionFormProps): null | Element
- Function
  Form for saving a question, including title and description. When saved:
  - For existing questions: Calls SdkQuestionProps.onSave
  - Both callbacks receive the updated question object
  - Form can be cancelled via the InteractiveQuestionSaveQuestionFormProps.onCancel
  Parameters
  - props: InteractiveQuestionSaveQuestionFormProps
    - OptionalonCancel?: () => void
      Callback function executed when save is cancelled
  Returns null | Element

SqlParametersList

SqlParametersList: () => null | Element

Type Declaration

- (): null | Element
- Function
  Parameters list for SQL questions
  
  Returns null | Element

Summarize

Summarize: () => Element

Type Declaration

- (): Element
- Function
  Interface for adding and managing data summaries (like counts, sums, averages). Displays as a set of badges. Uses question context for summarization functionality.
  
  Returns Element

SummarizeDropdown

SummarizeDropdown: (props: InteractiveQuestionSummarizeDropdownProps) => Element

Type Declaration

- (props: InteractiveQuestionSummarizeDropdownProps): Element
- Function
  Dropdown button for the Summarize component.
  Parameters
  - props: InteractiveQuestionSummarizeDropdownProps
  Returns Element

Title

Title: (
props: { className?: string; style?: CSSProperties },
) => undefined | Element

Type Declaration

- (props: { className?: string; style?: CSSProperties }): undefined | Element
- Function
  Displays a title based on the question's state. Shows:
  - The question's display name if it's saved
  - An auto-generated description for ad-hoc questions (non-native queries)
  Parameters
  - props: { className?: string; style?: CSSProperties }
    - OptionalclassName?: string
      A custom class name to be added to the root element.
    - Optionalstyle?: CSSProperties
      A custom style object to be added to the root element.
  Returns undefined | Element

VisualizationButton

VisualizationButton: () => null | Element

Type Declaration

- (): null | Element
- Function
  A button that triggers the visualization of the current question.
  
  Returns null | Element

other

AlertsButton

AlertsButton: () => Element

NavigationBackButton

NavigationBackButton: (
props: { className?: string; style?: CSSProperties },
) => ReactNode

Back button to navigate back after drills and internal navigation. It will render null if there's nothing to go back to

Interface InteractiveQuestionComponents

Index

InteractiveQuestion

other

InteractiveQuestion

BackButton

Type Declaration

Parameters

Returns null | Element

Deprecated

Breakout

Type Declaration

Returns null | Element

BreakoutDropdown

Type Declaration

Parameters

Returns null | Element

ChartTypeDropdown

Type Declaration

Parameters

Returns Element

ChartTypeSelector

Type Declaration

Parameters

Returns Element

DownloadWidget

Type Declaration

Parameters

Returns null | Element

DownloadWidgetDropdown

Type Declaration

Parameters

Returns null | Element

Editor

Type Declaration

Parameters

OptionalhasVisualizeButton?: boolean

OptionalonApply?: () => void

Returns null | Element

EditorButton

Type Declaration

Parameters

OptionalisOpen?: boolean

Default Value

OptionalonClick?: MouseEventHandler<HTMLButtonElement>

Returns undefined | false | Element

Filter

Type Declaration

Parameters

OptionalwithColumnItemIcon?: boolean

Returns Element

FilterDropdown

Type Declaration

Parameters

OptionalwithColumnItemIcon?: boolean

Returns null | Element

Notebook

Type Declaration

Parameters

OptionalhasVisualizeButton?: boolean

OptionalonApply?: () => void

Returns null | Element

Deprecated

NotebookButton

Type Declaration

Parameters

OptionalisOpen?: boolean

Default Value

OptionalonClick?: MouseEventHandler<HTMLButtonElement>

Returns undefined | false | Element

Deprecated

QuestionSettings

Type Declaration

Parameters

Returns null | Element

QuestionSettingsDropdown

Type Declaration

Parameters

Optionalheight?: Height<string | number>

Returns Element

`Optional`hasVisualizeButton?: boolean

`Optional`onApply?: () => void

`Optional`isOpen?: boolean

`Optional`onClick?: MouseEventHandler<HTMLButtonElement>

`Optional`withColumnItemIcon?: boolean

`Optional`withColumnItemIcon?: boolean

`Optional`hasVisualizeButton?: boolean

`Optional`onApply?: () => void

`Optional`isOpen?: boolean

`Optional`onClick?: MouseEventHandler<HTMLButtonElement>

`Optional`height?: Height<string | number>

`Optional`className?: string

`Optional`style?: CSSProperties

`Optional`height?: Height<string | number>

`Optional`width?: Width<string | number>

`Optional`onClick?: MouseEventHandler<HTMLButtonElement>

`Optional`onCancel?: () => void

`Optional`className?: string

`Optional`style?: CSSProperties