--- product: "AG Studio" title: "User Interface" description: "Find your way around AG Studio: switch between Edit and View mode, and use, collapse and resize the Filters, Compose, Data and AI Assistant panels." framework: react version: "3.1.0" related: - title: "Overview" url: "https://www.ag-grid.com/studio/analysts/analyst-overview/" llms: "https://www.ag-grid.com/studio/llms.txt" --- # User Interface AG Studio groups the actions you use most into panels and toolbars. It combines a report-building interface with the engine that processes your data, and provides the layout, panels, widget configuration, data processing, calculations, filtering, visualisation and a layout grid that Widgets snap to as you arrange them. > **Note** > > Your application, not AG Studio, controls some features, such as saving and publishing, which widget types are available, and navigation. If something seems to be missing or unavailable, speak to your developer or administrator. In the default layout, the page sits beside the panels you use to build and configure it. The example below shows an empty page in Edit Mode with the default Panel layout: from left to right, the Panels are Filters, Compose and Data. When your team has connected an AI service, the AI Assistant panel sits to the left of the page. #### Empty Dashboard ```ts import { AgReportState, AgStudioApi, AgStudioProperties, createStudio, enableStudioDevValidations, } from "ag-studio"; if (process.env.NODE_ENV !== "production") { // Enable extended validations only for development enableStudioDevValidations(); } const initialState: AgReportState = { pages: [{ id: "a" }], selectedPageId: "a", }; const studioProperties: AgStudioProperties = { mode: "edit", initialState, }; let studioApi: AgStudioApi; // setup Studio after the page has finished loading const studioDiv = document.querySelector("#myStudio")!; studioApi = createStudio(studioDiv, studioProperties); fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json") .then((response) => response.json()) .then((data) => studioApi!.setProperty("data", { sources: [{ id: "medals", data }] }), ); ``` [Live example: Empty Dashboard](https://www.ag-grid.com/studio/examples/user-interface/empty/typescript/) ## Modes AG Studio keeps viewing a report separate from changing its structure and configuration. How you switch between modes depends on your application, so if you cannot find the control, ask your developer. In Edit Mode, you can add and configure widgets and change the page layout. Widgets stay fully interactive: tooltips, filters, selections and other widget behaviours work exactly as they do in View Mode, and you can move and resize widgets alongside them. When you move or resize a widget, it snaps to the [Layout Grid](https://www.ag-grid.com/studio/analysts/page-layout/#layout-grid), and if it would go beyond the layout bounds, it is placed at the nearest valid position instead. In View Mode, the page structure is locked and the editing panels are hidden. You can still interact with widgets, for example through filters, selections and tooltips, but you cannot move, resize or reconfigure them. A Table can also drive cross-filtering: clicking a row restricts the other Widgets to that row's values. See [Cross-Filtering](https://www.ag-grid.com/studio/analysts/cross-filtering/). ## Panels Most of the work of building and configuring a page happens in the Panels. Which Panels you see depends on how your application is set up. The Filters, Compose and Data Panels each have a search box, which searches the Panel's current contents, or only the active tab if the Panel has tabs. Results update as you type, and search covers the whole Panel hierarchy, for example across groups and data sources. Click a Panel's title to collapse it to a narrow strip, and click the title again to expand it. To resize an expanded Panel, drag its edge on the side nearest the page. Each Panel has a minimum and maximum width, which your developer can change. From the keyboard, focus a Panel's title, then press Enter or Space to collapse or expand it. Press Left Arrow or Right Arrow to move the Panel's edge, and hold Shift to move it in larger steps. See [Keyboard Shortcuts](https://www.ag-grid.com/studio/analysts/keyboard-shortcuts/#panels). ### Data Panel The Data Panel shows the Fields your developer has set up. Use it to choose Fields, calculated Fields and Measures when you configure Widgets. For more on how data is structured and used, see [Data Panel](https://www.ag-grid.com/studio/analysts/data-panel/). ### Compose Panel The Compose Panel changes with what you select on the layout or in the Panels, so it shows only the options that are relevant to what you are doing. - When nothing is selected, the Compose Panel shows its default view, with the Widgets and Page tabs. Here you can choose [Widget Types](https://www.ag-grid.com/studio/analysts/widget-basics/#widget-types) to add to the page and adjust the [Page Layout](https://www.ag-grid.com/studio/analysts/page-layout/) settings. - When you select a Widget on the layout, the Panel switches to configuring that Widget, with the Setup and Format tabs. For full guidance on configuring Widgets, see [Widget Basics](https://www.ag-grid.com/studio/analysts/widget-basics/). - When you select a data field, the Panel can switch to a data-field view with options for that field. - To return to the default view at any time, clear the current selection or click the Back button next to the Panel title. Select different parts of the example below to see the Compose Panel change to match. #### Compose Panel ```ts import { AgReportState, AgStudioApi, AgStudioProperties, createStudio, enableStudioDevValidations, } from "ag-studio"; if (process.env.NODE_ENV !== "production") { // Enable extended validations only for development enableStudioDevValidations(); } const initialState: AgReportState = { pages: [ { id: "a", widgets: { "total-medals": { type: "value", dataMapping: { value: [{ id: "medals.total", aggregation: "sum" }], }, format: { style: { label: { enabled: true, }, }, }, }, }, widgetLayout: { "total-medals": { xTrack: 0, yTrack: 0, xSpan: 8, ySpan: 6, }, }, }, ], selectedPageId: "a", }; const studioProperties: AgStudioProperties = { mode: "edit", initialState, panels: { edit: { right: ["edit", "data"], }, }, }; let studioApi: AgStudioApi; // setup Studio after the page has finished loading const studioDiv = document.querySelector("#myStudio")!; studioApi = createStudio(studioDiv, studioProperties); fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json") .then((response) => response.json()) .then((data) => studioApi!.setProperty("data", { sources: [{ id: "medals", data }] }), ); ``` [Live example: Compose Panel](https://www.ag-grid.com/studio/examples/user-interface/edit-panel/typescript/) ### Filters Panel Use the Filters Panel to manage the Filters that apply to the report. Depending on your application, these can include page-level Filters, Widget-level Filters and cross-filtering. For more on Filter types and how to use them, see [Filters Panel](https://www.ag-grid.com/studio/analysts/filters-panel/). ### AI Assistant The AI Assistant lets you build and change a report by describing what you want. It appears only when your team has connected an AI service, such as OpenAI or Anthropic, because AG Studio does not include the AI itself. The panel has three areas: - Thread control - at the top of the panel, shows the active thread name as a dropdown. Select it to open a list of threads to switch between, or select the New button to create a new thread. - Message area - shows the conversation history for the active thread. While the AI is working, a "Thinking..." indicator shows, and a Stop button cancels the current request. When you scroll up, a Back to bottom button appears. - Input - a text field at the bottom of the panel. Press Enter to send a message, or Shift+Enter to insert a new line without sending. Each thread holds its own conversation history, and switching threads keeps the history of each one. For guidance on using it, see [AI Assistant](https://www.ag-grid.com/studio/analysts/ai-assistant/).