Skip to content

fix: implement native browser fullscreen for dashboard charts#38819

Open
venkateshwaracholan wants to merge 26 commits intoapache:masterfrom
venkateshwaracholan:fix/dashboard-fullscreen-issue
Open

fix: implement native browser fullscreen for dashboard charts#38819
venkateshwaracholan wants to merge 26 commits intoapache:masterfrom
venkateshwaracholan:fix/dashboard-fullscreen-issue

Conversation

@venkateshwaracholan
Copy link
Copy Markdown

@venkateshwaracholan venkateshwaracholan commented Mar 24, 2026

User description

Summary

This PR implements the native Browser Fullscreen API for individual dashboard charts. Previously, "fullscreen" was a CSS-based expansion within the viewport, which caused issues with z-index, tooltip clipping, and browser chrome interference.

By leveraging the requestFullscreen API on the ChartHolder component, charts now utilize the full hardware display, providing a more immersive experience.

Key Changes

  • Native Fullscreen Integration: Replaced simulated expansion with requestFullscreen() and exitFullscreen() in SliceHeaderControls.
  • Tooltip Logic Fix: Updated plugin-chart-echarts to toggle appendToBody based on document.fullscreenElement. This ensures tooltips render inside the fullscreen DOM tree rather than behind it.
  • Ref Propagation: Threaded chartHolderRef from ChartHolder -> Chart -> SliceHeader -> SliceHeaderControls to allow the menu to target the container.
  • Portal Management: Wrapped ChartHolder content in AntdThemeProvider with a dynamic getPopupContainer. When in fullscreen, AntD Portals (Selects, Dropdowns) are attached to the chart holder instead of document.body.
  • Global Styles: Created Styles.tsx to handle the :fullscreen pseudo-class layout, ensuring the chart occupies 100vw/100vh with correct padding and background.
  • Event Handling: Added a fullscreenchange listener to sync the internal isFullSize state if a user exits via the Esc key.

Fixes #38589

Screenshots / GIFs

Before (Viewport)

Screen.Recording.2026-03-24.at.5.44.59.PM.mov

After (Native API)

Screen.Recording.2026-03-24.at.5.41.34.PM.mov

Testing Instructions

  1. Open any dashboard and locate a chart.
  2. Open the chart menu (three dots) and select "Enter fullscreen".
  3. Verify the chart fills the entire screen.
  4. Hover over elements to ensure tooltips are visible.
  5. Exit using the Esc key or the "Exit Fullscreen" icon and verify the chart returns to its original grid position.

Checklist

  • I have followed the Superset Contribution Guidelines.
  • I have added unit tests for the toggle logic in SliceHeaderControls.test.tsx.
  • My changes follow the "Sentence case" capitalization guidelines.
  • I have verified that code coverage has not decreased.

CodeAnt-AI Description

Use native fullscreen for dashboard charts and keep charts usable inside it

What Changed

  • Chart fullscreen now uses the browser’s native fullscreen view instead of only expanding inside the page.
  • Tooltips and dropdowns stay visible while a chart is fullscreen, including when using chart menus and other popups.
  • Exiting fullscreen now stays in sync even if the user leaves with the Esc key or the fullscreen exit control.
  • If fullscreen cannot be enabled, the chart shows a clear error message.

Impact

✅ True full-screen chart view
✅ Clearer chart tooltips in fullscreen
✅ Fewer broken popups over charts

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

Signed-off-by: Venkateshwaran Shanmugham <venkateshwaracholan@gmail.com>
Signed-off-by: Venkateshwaran Shanmugham <venkateshwaracholan@gmail.com>
…visibility

Signed-off-by: Venkateshwaran Shanmugham <venkateshwaracholan@gmail.com>
…visibility

Signed-off-by: Venkateshwaran Shanmugham <venkateshwaracholan@gmail.com>
Signed-off-by: Venkateshwaran Shanmugham <venkateshwaracholan@gmail.com>
…n SliceHeaderControls

Signed-off-by: Venkateshwaran Shanmugham <venkateshwaracholan@gmail.com>
Signed-off-by: Venkateshwaran Shanmugham <venkateshwaracholan@gmail.com>
@bito-code-review
Copy link
Copy Markdown
Contributor

bito-code-review bot commented Mar 24, 2026

Code Review Agent Run #a19fed

Actionable Suggestions - 0
Review Details
  • Files reviewed - 7 · Commit Range: 67444d1..33e723f
    • superset-frontend/plugins/plugin-chart-echarts/src/utils/tooltip.ts
    • superset-frontend/src/dashboard/components/SliceHeader/index.tsx
    • superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx
    • superset-frontend/src/dashboard/components/SliceHeaderControls/Styles.tsx
    • superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
    • superset-frontend/src/dashboard/components/gridComponents/Chart/Chart.tsx
    • superset-frontend/src/dashboard/components/gridComponents/ChartHolder/ChartHolder.tsx
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful
    • Eslint (Linter) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

@dosubot dosubot bot added change:frontend Requires changing the frontend dashboard Namespace | Anything related to the Dashboard viz:charts:echarts Related to Echarts labels Mar 24, 2026
@codeant-ai-for-open-source codeant-ai-for-open-source bot added the size:L This PR changes 100-499 lines, ignoring generated files label Mar 24, 2026
@codeant-ai-for-open-source
Copy link
Copy Markdown
Contributor

Sequence Diagram

This PR replaces CSS-only chart expansion with native browser fullscreen on the chart holder element. It also updates portal and tooltip behavior so dropdowns and tooltips render correctly inside the fullscreen layer and keeps UI state synced when users exit with Esc.

sequenceDiagram
    participant User
    participant SliceHeaderControls
    participant BrowserFullscreen
    participant ChartHolder
    participant ChartUI

    User->>SliceHeaderControls: Choose Enter fullscreen
    SliceHeaderControls->>BrowserFullscreen: Request fullscreen for chart holder
    BrowserFullscreen-->>ChartHolder: Activate fullscreen element
    SliceHeaderControls->>ChartHolder: Toggle fullsize state and trigger resize
    ChartHolder->>ChartUI: Render popups and menus in chart holder when fullscreen
    ChartUI->>ChartUI: Use fullscreen aware tooltip container
    User->>BrowserFullscreen: Press Esc to exit
    BrowserFullscreen-->>SliceHeaderControls: Fire fullscreen change event
    SliceHeaderControls->>ChartHolder: Sync fullsize state to normal mode
Loading

Generated by CodeAnt AI


export const fullscreenStyles = (theme: SupersetTheme) => css`
/* Using && to increase specificity without needing !important as often */
&&[data-test='dashboard-component-chart-holder']:fullscreen {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: The selector starts with && inside a Global style block, which has no parent selector to expand &. That makes the fullscreen rule invalid and causes the main fullscreen layout styles to be skipped. Use a normal explicit selector so the rule actually matches the fullscreen chart holder. [logic error]

Severity Level: Critical 🚨
- ⚠️ Fullscreen chart may not get intended 100vw/100vh layout.
- ⚠️ New fullscreen feature can appear partially broken.
Suggested change
&&[data-test='dashboard-component-chart-holder']:fullscreen {
[data-test='dashboard-component-chart-holder']:fullscreen {
Steps of Reproduction ✅
1. Open a dashboard chart menu and click fullscreen; `MenuKeys.Fullscreen` in
`superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx:239-249` calls
`el.requestFullscreen()` then `props.handleToggleFullSize()`.

2. `handleToggleFullSize` in
`superset-frontend/src/dashboard/components/gridComponents/ChartHolder/ChartHolder.tsx:232-234`
sets fullsize state, making `isFullSize` true for that chart.

3. With `isFullSize === true`, `SliceHeaderControls` renders `<Global
styles={fullscreenStyles(theme)} />` at
`superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx:656`.

4. In `superset-frontend/src/dashboard/components/SliceHeaderControls/Styles.tsx:23`, the
primary fullscreen selector starts with `&&...`; in a global stylesheet there is no parent
selector context, so this selector does not reliably match, causing the main fullscreen
sizing/layout declarations in that block to be skipped.
Prompt for AI Agent 🤖
This is a comment left during a code review.

**Path:** superset-frontend/src/dashboard/components/SliceHeaderControls/Styles.tsx
**Line:** 23:23
**Comment:**
	*Logic Error: The selector starts with `&&` inside a `Global` style block, which has no parent selector to expand `&`. That makes the fullscreen rule invalid and causes the main fullscreen layout styles to be skipped. Use a normal explicit selector so the rule actually matches the fullscreen chart holder.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
👍 | 👎

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

Copy link
Copy Markdown
Member

@msyavuz msyavuz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for this! I think it's certainly a step in the right direction. I have some nits around z indexes. cc @kasiazjc for any ui/ux input she might have.

import { css, SupersetTheme } from '@apache-superset/core/theme';

export const fullscreenStyles = (theme: SupersetTheme) => css`
/* Using && to increase specificity without needing !important as often */
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this an outdated comment?

Copy link
Copy Markdown
Author

@venkateshwaracholan venkateshwaracholan Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, removed it now, thanks

/>
);
};
const FULLSCREEN_Z_INDEX = 10001;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is there an ant design way of doing this? Custom z indexes are a bit troublesome

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replaced the hardcoded constant with supersetTheme.zIndexPopupBase + 1 to align with the AntD design tokens.

overflow: visible;
position: relative;
pointer-events: auto;
z-index: 1000;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's check if there is an antd way of doing this

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Swapped the magic number for ${theme.zIndexPopupBase} to use the standardized theme token

.ant-modal-root,
.ant-select-dropdown,
.ant-popover {
z-index: 99999;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated this to ${theme.zIndexPopupBase + 1} to ensure popups consistently layer above the fullscreen container using theme tokens.

Signed-off-by: Venkateshwaran Shanmugham <venkateshwaracholan@gmail.com>
Signed-off-by: Venkateshwaran Shanmugham <venkateshwaracholan@gmail.com>
@codeant-ai-for-open-source codeant-ai-for-open-source bot added size:L This PR changes 100-499 lines, ignoring generated files and removed size:L This PR changes 100-499 lines, ignoring generated files labels Mar 24, 2026
Signed-off-by: Venkateshwaran Shanmugham <venkateshwaracholan@gmail.com>
background-color: ${theme.colorBgBase};
width: 100vw;
height: 100vh;
display: flex;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: The fullscreen container sets width: 100vw and height: 100vh while also adding padding, which makes the rendered box larger than the viewport under default content-box sizing. This can cause overflow/cropping in fullscreen mode. Add box-sizing: border-box so padding is included in the fullscreen dimensions. [logic error]

Severity Level: Major ⚠️
- ⚠️ Fullscreen chart container can exceed viewport bounds.
- ⚠️ Fullscreen chart content may clip near edges.
Suggested change
display: flex;
box-sizing: border-box;
Steps of Reproduction ✅
1. Open a dashboard chart and trigger **Enter fullscreen** from `SliceHeaderControls`
menu; this executes `el?.requestFullscreen?.()` in
`superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx:243`.

2. On success, `handleToggleFullSize()` is called (`index.tsx:245-247`), setting chart
full-size state through `ChartHolder`
(`superset-frontend/src/dashboard/components/gridComponents/ChartHolder/ChartHolder.tsx:232-234`).

3. While full-size is true, `Global styles={fullscreenStyles(theme)}` is mounted at
`index.tsx:656`, applying `Styles.tsx:22-33` to
`[data-test='dashboard-component-chart-holder']:fullscreen`.

4. In that block, `width: 100vw; height: 100vh; padding: ...` (`Styles.tsx:24-28`) uses
default content-box sizing unless overridden; padding is added outside viewport-sized
content box, causing overflow/cropping risk in fullscreen layouts.
Prompt for AI Agent 🤖
This is a comment left during a code review.

**Path:** superset-frontend/src/dashboard/components/SliceHeaderControls/Styles.tsx
**Line:** 26:26
**Comment:**
	*Logic Error: The fullscreen container sets `width: 100vw` and `height: 100vh` while also adding padding, which makes the rendered box larger than the viewport under default `content-box` sizing. This can cause overflow/cropping in fullscreen mode. Add `box-sizing: border-box` so padding is included in the fullscreen dimensions.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
👍 | 👎

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed. Added box-sizing: border-box to include padding within the viewport and prevent overflow.

Signed-off-by: Venkateshwaran Shanmugham <venkateshwaracholan@gmail.com>
@bito-code-review
Copy link
Copy Markdown
Contributor

bito-code-review bot commented Mar 24, 2026

Code Review Agent Run #f401b1

Actionable Suggestions - 0
Review Details
  • Files reviewed - 2 · Commit Range: 909b727..8388aa4
    • superset-frontend/src/dashboard/components/SliceHeaderControls/Styles.tsx
    • superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

@venkateshwaracholan
Copy link
Copy Markdown
Author

@msyavuz I have addressed the review comments and made the changes, Please review.

@bito-code-review
Copy link
Copy Markdown
Contributor

Bito Review Failed - Technical Failure Bito encountered technical difficulties while starting a code review session. To retry, type /review in a comment and save. If the issue persists, contact support@bito.ai.

@bito-code-review
Copy link
Copy Markdown
Contributor

bito-code-review bot commented Mar 24, 2026

Code Review Agent Run #2e36c0

Actionable Suggestions - 0
Review Details
  • Files reviewed - 1 · Commit Range: 8388aa4..a13a94c
    • superset-frontend/src/dashboard/components/SliceHeaderControls/Styles.tsx
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

@codeant-ai-for-open-source codeant-ai-for-open-source bot added size:L This PR changes 100-499 lines, ignoring generated files and removed size:L This PR changes 100-499 lines, ignoring generated files labels Mar 25, 2026
pointer-events: auto;
}

[data-test='dashboard-component-chart-header'] {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: The header z-index fix targets a non-existent test attribute (dashboard-component-chart-header), so the style never applies and fullscreen header layering remains broken. Point the selector to the actual header attribute and scope it under the fullscreen chart holder so it applies only in fullscreen mode. [logic error]

Severity Level: Major ⚠️
- ⚠️ Fullscreen chart header z-index fix never executes.
- ⚠️ Header/menu layering can regress in fullscreen mode.
Suggested change
[data-test='dashboard-component-chart-header'] {
[data-test='dashboard-component-chart-holder']:fullscreen [data-test='slice-header'] {
Steps of Reproduction ✅
1. Open a dashboard chart and trigger fullscreen from menu path
`SliceHeaderControls/index.tsx:238-245` (`MenuKeys.Fullscreen` calls
`el?.requestFullscreen?.()` and then toggles full size state).

2. Confirm fullscreen global CSS is injected at `SliceHeaderControls/index.tsx:655`
(`{isFullSize && <Global styles={fullscreenStyles(theme)} />}`).

3. Inspect selector in `SliceHeaderControls/Styles.tsx:66-69`; it targets
`[data-test='dashboard-component-chart-header']`, but grep shows no such attribute exists
anywhere else in frontend code.

4. Inspect actual header markup at `SliceHeader/index.tsx:260`; header is rendered as
`data-test="slice-header"`, so the z-index rule never matches any real element.

5. Because this rule never applies, intended header layering fix is effectively dead code
during fullscreen; changing selector to existing `slice-header` under fullscreen holder
makes the rule executable.
Prompt for AI Agent 🤖
This is a comment left during a code review.

**Path:** superset-frontend/src/dashboard/components/SliceHeaderControls/Styles.tsx
**Line:** 66:66
**Comment:**
	*Logic Error: The header z-index fix targets a non-existent test attribute (`dashboard-component-chart-header`), so the style never applies and fullscreen header layering remains broken. Point the selector to the actual header attribute and scope it under the fullscreen chart holder so it applies only in fullscreen mode.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
👍 | 👎

@codeant-ai-for-open-source codeant-ai-for-open-source bot added size:L This PR changes 100-499 lines, ignoring generated files and removed size:L This PR changes 100-499 lines, ignoring generated files labels Mar 25, 2026
@michael-s-molina michael-s-molina changed the title feat: implement native browser fullscreen for dashboard charts fix: implement native browser fullscreen for dashboard charts Mar 25, 2026
…/Styles.tsx

Co-authored-by: Mehmet Salih Yavuz <salih.yavuz@proton.me>
@codeant-ai-for-open-source codeant-ai-for-open-source bot added size:L This PR changes 100-499 lines, ignoring generated files and removed size:L This PR changes 100-499 lines, ignoring generated files labels Mar 31, 2026
@netlify
Copy link
Copy Markdown

netlify bot commented Mar 31, 2026

Deploy Preview for superset-docs-preview ready!

Name Link
🔨 Latest commit 7859235
🔍 Latest deploy log https://app.netlify.com/projects/superset-docs-preview/deploys/69cd46585c45f1000806317d
😎 Deploy Preview https://deploy-preview-38819--superset-docs-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@bito-code-review
Copy link
Copy Markdown
Contributor

bito-code-review bot commented Mar 31, 2026

Bito Review Failed - Technical Failure

Bito encountered technical difficulties while fetching pull request comments. To retry, type /review in a comment and save. If the issue persists, contact support@bito.ai.

@codeant-ai-for-open-source codeant-ai-for-open-source bot added size:L This PR changes 100-499 lines, ignoring generated files and removed size:L This PR changes 100-499 lines, ignoring generated files labels Apr 1, 2026
@bito-code-review
Copy link
Copy Markdown
Contributor

bito-code-review bot commented Apr 1, 2026

Code Review Agent Run #298e15

Actionable Suggestions - 0
Review Details
  • Files reviewed - 1 · Commit Range: a13a94c..7859235
    • superset-frontend/src/dashboard/components/SliceHeaderControls/Styles.tsx
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

change:frontend Requires changing the frontend dashboard Namespace | Anything related to the Dashboard plugins size/L size:L This PR changes 100-499 lines, ignoring generated files viz:charts:echarts Related to Echarts

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Superset 6.1.0rc1 Enter full screen isn't working

3 participants