7 min readUpdated Mar 2, 2026

EditTileModal Documentation

Overview

The EditTileModal component serves as an interactive modal for editing tiles within the Vantage analytics and data platform. It combines a live preview of the tile with an editor sidebar that provides access to various configuration panels. This component allows users to customize tile attributes, content, appearance, and data sources dynamically.

Purpose

The primary purpose of the EditTileModal is to facilitate the editing of various tile properties, including data visualization types, layout configurations, title elements, and user-defined actions for enhanced data presentation and interactivity. It also allows users to create templates for reuse in dashboards.

Settings

The EditTileModal component accepts a range of settings that define its behavior and appearance. Below is a detailed breakdown of each setting:

Setting Name	Input Type	Description	Default Value
`tile`	Object	Represents the current tile object being edited. It contains existing settings to populate the modal initially.	N/A
`close`	Function	Callback function that closes the modal when invoked.	N/A
`title`	String	The title text displayed at the top of the tile. Changing this updates the visible title in the live preview.	''
`subtitle`	String	Secondary text under the title to provide additional context. Changing this updates the visible subtitle in the live preview.	''
`footerText`	String	Text displayed in the footer of the tile. Changes will reflect on the tile's footer immediately.	''
`footerColor`	String	Hex color code for the footer background. Altering this will change the footer's visual style.	'#ffffff'
`showFooter`	Boolean	Toggles the visibility of the footer. Setting this to `false` hides the footer from the live preview.	true
`isSaving`	Boolean	Indicates if a save operation is currently in progress. Useful for displaying loader animations.	false
`hasClipboard`	Boolean	Indicates whether clipboard features (Copy/Paste) are enabled.	false
`copySuccess`	Boolean	Flag to indicate if a copy operation was successful.	false
`contentItems`	Array	An array holding the content items associated with the tile. Modifying this will directly affect the tile's displayed content.	[]
`visualizationType`	String	Defines the type of visualization (e.g., bar chart, line chart) to be shown. Changes will reflect in the live preview.	'bar'
`backgroundColor`	String	Background color of the tile. Changing this updates the tile's base color.	'#f7f7f7'
`workflows`	Array	Lists the workflows associated with this tile. Altering this updates the backend and tile functionality accordingly.	[]
`showSectionHeader`	Boolean	Toggles visibility of the section header in the tile. Setting this to `false` removes the header from the live preview.	true
`headerStyle`	Object	Contains CSS properties for the section header such as font size or style. Changes will allow for custom styling of header.	{ fontSize: '16px' }
`showLeadingText`	Boolean	Controls whether the leading text near the title is displayed.	false
`leadingText`	String	The leading text that appears before the title. Changes will update the preview immediately.	''
`showDescription`	Boolean	Toggles the visibility of a description below the title.	false
`globalFieldMapping`	Object	Handles mapping of global fields for data synchronization. Changes will affect data binding in the tile.	{}
`waterfallMode`	Boolean	Enables or disables waterfall mode for certain visualizations. Adjusting this may alter data representation.	false
`sentiment`	String	Defines the sentiment analysis output to be linked to this tile. Changing this will impact the overall data representation.	'neutral'
`sectionIcon`	String	The icon used to represent the section in the UI. Altering this changes the visual representation of the section.	'default-icon'
`clickUrl`	String	URL that the tile refers to when clicked. Changing this will redirect users to the new URL when they click on the tile.	''
`mapConfig`	Object	Configuration object dictating how maps should be rendered, including styles and zoom.	{}
`layoutType`	String	Defines the layout style of the tile (e.g., grid, stacked). Changing this affects how the tile and content are displayed.	'grid'
`tabs`	Array	Defines tab structure in the editor for various settings. Adding/removing tabs updates the settings layout.	['setup', 'content']
`isCollapsible`	Boolean	Specifies whether the tile can be collapsed. Changing this affects user interaction with the tile.	false
`initialCollapseState`	Boolean	Determines whether the tile starts in a collapsed or expanded state.	false
`drilldownEnabled`	Boolean	Indicates if drilldown features are available for this tile.	true
`drilldownDefaultView`	String	Sets the default view for drilldown actions (e.g., table, detailed view). Adjusting this changes the initial experience.	'detailed'
`predictions`	Boolean	Indicates if AI predictions are enabled for the tile. Changing this triggers different predictive behaviors.	false

Note: Due to space limitations, the complete list of settings and their exhaustive details is truncated. Please consult the codebase for further configurations such as action buttons, API workflows, etc.

How It Works

When a user opens the EditTileModal, it initializes with a tile object that reflects the current configuration of the tile selected for editing. It provides several interactive panels for configuring different aspects of the tile:

Toolbar: Offers quick actions such as copying, pasting, duplicating, or saving templates.
Tab Bar: Allows users to navigate between different editing aspects, such as Setup, Content, Style, and Actions.
Editor Panels: Depending on the selected tab, users can modify various configurations like data sources, visualizations, and advanced settings.

Each modification performed within the modal is tied to the state management system, reflecting changes in real-time within the live preview.

Use Cases & Examples

Use Case 1: Dynamic Reporting

Scenario: A business analyst needs to create a sales dashboard tile featuring monthly sales dynamics. They would utilize the EditTileModal to configure visualization type (such as a line chart), adjust color settings for clarity, and add collapsible views for detailed breakdowns.

Use Case 2: Custom Alerts

Scenario: A data engineer aims to set up a tile that reports anomalies detected in data trends. They enable AI predictions, modifying prompts for automated insights and setting actions for user alerts on critical metrics.

Example Configuration

To create a sales dashboard tile that features a line chart with custom dynamics, the following configuration could be applied:

json

{
  "tile": {
    "title": "Monthly Sales Report",
    "subtitle": "Dynamic sales data for Q1",
    "footerText": "Generated on: {date}",
    "footerColor": "#f0f0f0",
    "showFooter": true,
    "visualizationType": "line",
    "backgroundColor": "#ffffff",
    "layoutType": "grid",
    "drilldownEnabled": true,
    "initialCollapseState": false,
    "sentiment": "positive",
    "contentItems": [
      {"type": "data", "source": "sales_data"}
    ],
    "showSectionHeader": true
  }
}

This configuration creates a visually appealing and functional tile tailored for presenting monthly sales data, complete with interaction and prediction capabilities.