From ef341146d206fd9ec08c4bbf990acead37f36ed5 Mon Sep 17 00:00:00 2001 From: Oleksandr Kholiavko <43780952+HalavicH@users.noreply.github.com> Date: Wed, 13 May 2026 02:44:26 +0200 Subject: [PATCH] csv_preview: Add settings UI panel with debug tools during development (#53496) Self-Review Checklist: - [x] I've reviewed my own diff for quality, security, and reliability - [x] Unsafe blocks (if any) have justifying comments - [x] The content is consistent with the [UI/UX checklist](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist) - [x] Tests cover the new/changed behavior - [x] Performance impact has been considered and is acceptable ------ This PR adds a settings panel above the CSV table with dropdown menus to control rendering behavior, and a performance metrics overlay for debugging. Currently it's mostly used for me during dev phase, but before release of CSV preview feature all dev-only options will be cleaned up, and future features like "copy selected" will have their settings in this bar image_2026-04-09_11-52-24 **What changed:** - Adds `render_settings_panel()` method with dropdown menus for: - **Rendering Mode**: Variable Height (multiline support) vs Uniform Height (better performance) - **Text Alignment**: Top vs Center vertical alignment within cells - **Font Type**: UI Font vs Monospace for better readability (will be exposed to user settings) - **Experimental**: Popover menu with toggles for debug features - Adds `render_performance_metrics_overlay()` method showing: - CSV parsing duration - Rendered row count and indices - Positioned in bottom-right corner with semi-transparent styling Context: Will iterate on it with @Anthony-Eid Release Notes: - N/A --------- Co-authored-by: Anthony Eid --- crates/csv_preview/Cargo.toml | 3 + crates/csv_preview/src/csv_preview.rs | 6 +- crates/csv_preview/src/renderer.rs | 3 + .../renderer/performance_metrics_overlay.rs | 82 ++++++++ .../csv_preview/src/renderer/preview_view.rs | 33 +++- .../csv_preview/src/renderer/render_table.rs | 1 - .../src/renderer/row_identifiers.rs | 16 +- crates/csv_preview/src/renderer/settings.rs | 182 ++++++++++++++++++ crates/csv_preview/src/renderer/table_cell.rs | 25 +-- .../csv_preview/src/renderer/table_header.rs | 6 +- crates/csv_preview/src/settings.rs | 14 +- 11 files changed, 312 insertions(+), 59 deletions(-) create mode 100644 crates/csv_preview/src/renderer/performance_metrics_overlay.rs create mode 100644 crates/csv_preview/src/renderer/settings.rs diff --git a/crates/csv_preview/Cargo.toml b/crates/csv_preview/Cargo.toml index 7e9ce2c4d51..ff4c0a61240 100644 --- a/crates/csv_preview/Cargo.toml +++ b/crates/csv_preview/Cargo.toml @@ -17,5 +17,8 @@ workspace.workspace = true log.workspace = true text.workspace = true +[features] +dev-tools = [] + [lints] workspace = true diff --git a/crates/csv_preview/src/csv_preview.rs b/crates/csv_preview/src/csv_preview.rs index ba798738480..322777da042 100644 --- a/crates/csv_preview/src/csv_preview.rs +++ b/crates/csv_preview/src/csv_preview.rs @@ -179,7 +179,8 @@ impl CsvPreviewView { column_widths: ColumnWidths::new(cx, 1), parsing_task: None, performance_metrics: PerformanceMetrics::default(), - list_state: gpui::ListState::new(contents.rows.len(), ListAlignment::Top, px(1.)), + list_state: gpui::ListState::new(contents.rows.len(), ListAlignment::Top, px(1.)) + .measure_all(), settings: CsvPreviewSettings::default(), last_parse_end_time: None, engine: TableDataEngine::default(), @@ -207,7 +208,8 @@ impl CsvPreviewView { // Update list state with filtered row count let visible_rows = self.engine.d2d_mapping().visible_row_count(); - self.list_state = gpui::ListState::new(visible_rows, ListAlignment::Top, px(100.)); + self.list_state = + gpui::ListState::new(visible_rows, ListAlignment::Top, px(100.)).measure_all(); } pub fn resolve_active_item_as_csv_editor( diff --git a/crates/csv_preview/src/renderer.rs b/crates/csv_preview/src/renderer.rs index 42ae05936c7..872c61aa409 100644 --- a/crates/csv_preview/src/renderer.rs +++ b/crates/csv_preview/src/renderer.rs @@ -1,5 +1,8 @@ +#[cfg(feature = "dev-tools")] +mod performance_metrics_overlay; mod preview_view; mod render_table; mod row_identifiers; +mod settings; mod table_cell; mod table_header; diff --git a/crates/csv_preview/src/renderer/performance_metrics_overlay.rs b/crates/csv_preview/src/renderer/performance_metrics_overlay.rs new file mode 100644 index 00000000000..3d0cf50cf1d --- /dev/null +++ b/crates/csv_preview/src/renderer/performance_metrics_overlay.rs @@ -0,0 +1,82 @@ +//! Performance metrics overlay for CSV preview debugging. +//! +//! Provides a semi-transparent overlay in the bottom-right corner showing +//! CSV parsing performance metrics for developer experience. + +use ui::{ActiveTheme, Context, IntoElement, ParentElement, Styled, StyledTypography, div}; + +use crate::{CsvPreviewView, PerformanceMetrics}; + +impl CsvPreviewView { + /// Renders a semi-transparent performance metrics overlay in the bottom-right corner. + /// + /// Shows CSV parsing duration for debugging and performance monitoring. + /// The overlay is positioned absolutely and styled with reduced opacity. + pub(crate) fn render_performance_metrics_overlay( + &mut self, + cx: &mut Context, + ) -> impl IntoElement { + let theme = cx.theme(); + + let children = div() + .absolute() + .top_24() + .right_4() + .px_3() + .py_2() + .bg(theme.colors().editor_background) + .border_1() + .border_color(theme.colors().border) + .rounded_md() + .opacity(0.75) + .text_xs() + .font_buffer(cx) + .text_color(theme.colors().text_muted) + .flex() + .flex_col() + .gap_1() + .child("Performance metrics:") + .children( + format_performance_metrics(&self.performance_metrics) + .into_iter() + .map(|line| div().child(line)), + ); + + // Clear rendered indices to prepare for next frame + self.performance_metrics.rendered_indices.clear(); + children + } +} + +fn format_performance_metrics(metrics: &PerformanceMetrics) -> Vec { + let mut lines = Vec::new(); + + // Add timing metrics using the display method + let timing_display = metrics.display(); + if !timing_display.is_empty() { + lines.extend(timing_display.lines().map(|line| format!("- {}", line))); + } else { + lines.push("- No timing data yet".to_string()); + } + + // Add rendered indices information + if metrics.rendered_indices.is_empty() { + lines.push("- Rendered: none".to_string()); + } else { + lines.push(format!( + "- Rendered: {} rows", + metrics.rendered_indices.len() + )); + if metrics.rendered_indices.len() <= 20 { + // Show indices if not too many + lines.push(format!(" {:?}", metrics.rendered_indices)); + } else { + // Show first/last few if too many + let first_few = &metrics.rendered_indices[..5]; + let last_few = &metrics.rendered_indices[metrics.rendered_indices.len() - 5..]; + lines.push(format!(" {:?}\n..{:?}", first_few, last_few)); + } + } + + lines +} diff --git a/crates/csv_preview/src/renderer/preview_view.rs b/crates/csv_preview/src/renderer/preview_view.rs index 55e62d03806..90500d53d06 100644 --- a/crates/csv_preview/src/renderer/preview_view.rs +++ b/crates/csv_preview/src/renderer/preview_view.rs @@ -2,19 +2,19 @@ use std::time::Instant; use ui::{div, prelude::*}; -use crate::{CsvPreviewView, settings::FontType}; +use crate::CsvPreviewView; impl Render for CsvPreviewView { - fn render(&mut self, _window: &mut Window, cx: &mut Context) -> impl IntoElement { + fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement { let theme = cx.theme(); - self.performance_metrics.rendered_indices.clear(); let render_prep_start = Instant::now(); let table_with_settings = v_flex() .size_full() .p_4() .bg(theme.colors().editor_background) .track_focus(&self.focus_handle) + .child(self.render_settings_panel(window, cx)) .child({ if self.engine.contents.number_of_cols == 0 { div() @@ -23,10 +23,7 @@ impl Render for CsvPreviewView { .justify_center() .h_32() .text_ui(cx) - .map(|div| match self.settings.font_type { - FontType::Ui => div.font_ui(cx), - FontType::Monospace => div.font_buffer(cx), - }) + .font_buffer(cx) .text_color(cx.theme().colors().text_muted) .child("No CSV content to display") .into_any_element() @@ -41,10 +38,28 @@ impl Render for CsvPreviewView { (render_prep_duration, std::time::Instant::now()), ); - div() + let div = div() .relative() .w_full() .h_full() - .child(table_with_settings) + .child(table_with_settings); + + #[cfg(feature = "dev-tools")] + let show_perf_metrics_overlay = self.settings.show_perf_metrics_overlay; + + #[cfg(feature = "dev-tools")] + let div = div.when(show_perf_metrics_overlay, |div| { + div.child(self.render_performance_metrics_overlay(cx)) + }); + + #[cfg(feature = "dev-tools")] + if !show_perf_metrics_overlay { + self.performance_metrics.rendered_indices.clear(); + } + + #[cfg(not(feature = "dev-tools"))] + self.performance_metrics.rendered_indices.clear(); + + div } } diff --git a/crates/csv_preview/src/renderer/render_table.rs b/crates/csv_preview/src/renderer/render_table.rs index 71bb9b84c89..92afb9f836d 100644 --- a/crates/csv_preview/src/renderer/render_table.rs +++ b/crates/csv_preview/src/renderer/render_table.rs @@ -133,7 +133,6 @@ impl CsvPreviewView { display_cell_id, cell_content, this.settings.vertical_alignment, - this.settings.font_type, cx, ), ); diff --git a/crates/csv_preview/src/renderer/row_identifiers.rs b/crates/csv_preview/src/renderer/row_identifiers.rs index fc8bf68845f..06a26e4696e 100644 --- a/crates/csv_preview/src/renderer/row_identifiers.rs +++ b/crates/csv_preview/src/renderer/row_identifiers.rs @@ -1,12 +1,12 @@ use ui::{ ActiveTheme as _, AnyElement, Button, ButtonCommon as _, ButtonSize, ButtonStyle, - Clickable as _, Context, ElementId, FluentBuilder as _, IntoElement as _, ParentElement as _, - SharedString, Styled as _, StyledTypography as _, Tooltip, div, + Clickable as _, Context, ElementId, IntoElement as _, ParentElement as _, SharedString, + Styled as _, StyledTypography as _, Tooltip, div, }; use crate::{ CsvPreviewView, - settings::{FontType, RowIdentifiers}, + settings::RowIdentifiers, types::{DataRow, DisplayRow, LineNumber}, }; @@ -119,10 +119,7 @@ impl CsvPreviewView { let view = cx.entity(); let value = div() - .map(|div| match self.settings.font_type { - FontType::Ui => div.font_ui(cx), - FontType::Monospace => div.font_buffer(cx), - }) + .font_buffer(cx) .child( Button::new( ElementId::Name("row-identifier-toggle".into()), @@ -179,10 +176,7 @@ impl CsvPreviewView { // Row identifiers are always centered .items_center() .justify_end() - .map(|div| match self.settings.font_type { - FontType::Ui => div.font_ui(cx), - FontType::Monospace => div.font_buffer(cx), - }) + .font_buffer(cx) .child(row_identifier) .into_any_element(); Some(value) diff --git a/crates/csv_preview/src/renderer/settings.rs b/crates/csv_preview/src/renderer/settings.rs new file mode 100644 index 00000000000..cafa2a4c1bd --- /dev/null +++ b/crates/csv_preview/src/renderer/settings.rs @@ -0,0 +1,182 @@ +use ui::{ + ActiveTheme as _, AnyElement, ButtonSize, Context, ContextMenu, DropdownMenu, ElementId, + IntoElement as _, ParentElement as _, Styled as _, Tooltip, Window, div, h_flex, +}; + +use crate::{CsvPreviewView, settings::VerticalAlignment}; + +///// Settings related ///// +impl CsvPreviewView { + /// Render settings panel above the table + pub(crate) fn render_settings_panel( + &self, + window: &mut Window, + cx: &mut Context, + ) -> AnyElement { + let current_alignment_text = match self.settings.vertical_alignment { + VerticalAlignment::Top => "Top", + VerticalAlignment::Center => "Center", + }; + + let view = cx.entity(); + let alignment_dropdown_menu = ContextMenu::build(window, cx, |menu, _window, _cx| { + menu.entry("Top", None, { + let view = view.clone(); + move |_window, cx| { + view.update(cx, |this, cx| { + this.settings.vertical_alignment = VerticalAlignment::Top; + cx.notify(); + }); + } + }) + .entry("Center", None, { + let view = view.clone(); + move |_window, cx| { + view.update(cx, |this, cx| { + this.settings.vertical_alignment = VerticalAlignment::Center; + cx.notify(); + }); + } + }) + }); + + let panel = h_flex() + .gap_4() + .p_2() + .bg(cx.theme().colors().surface_background) + .border_b_1() + .border_color(cx.theme().colors().border) + .flex_wrap() + .child( + h_flex() + .gap_2() + .items_center() + .child( + div() + .text_sm() + .text_color(cx.theme().colors().text_muted) + .child("Text Alignment:"), + ) + .child( + DropdownMenu::new( + ElementId::Name("vertical-alignment-dropdown".into()), + current_alignment_text, + alignment_dropdown_menu, + ) + .trigger_size(ButtonSize::Compact) + .trigger_tooltip(Tooltip::text( + "Choose vertical text alignment within cells", + )), + ), + ); + + #[cfg(feature = "dev-tools")] + let panel = panel.child( + h_flex() + .gap_2() + .items_center() + .child( + div() + .text_sm() + .text_color(cx.theme().colors().text_muted) + .child("Dev-only:"), + ) + .child(create_dev_only_popover_menu(cx)), + ); + + panel.into_any_element() + } +} + +#[cfg(feature = "dev-tools")] +fn create_dev_only_popover_menu( + cx: &mut Context<'_, CsvPreviewView>, +) -> ui::PopoverMenu { + use crate::settings::RowRenderMechanism; + use ui::{IconButton, IconName, IconPosition, IconSize, PopoverMenu}; + + PopoverMenu::new("debug-options-menu") + .trigger_with_tooltip( + IconButton::new("debug-options-trigger", IconName::Settings).icon_size(IconSize::Small), + Tooltip::text( + "Dev-only section used for debugging purposes.\nWill be removed on public release of CSV feature" + ), + ) + .menu({ + let view_entity = cx.entity(); + move |window, cx| { + let view = view_entity.read(cx); + let settings = view.settings.clone(); + Some(ContextMenu::build(window, cx, |menu, _, _| { + menu.header("Rendering Mode") + .toggleable_entry( + "Variable Height", + settings.rendering_with == RowRenderMechanism::VariableList, + IconPosition::Start, + None, + { + let view_entity = view_entity.clone(); + move |_w, cx| { + view_entity.update(cx, |view, cx| { + view.settings.rendering_with = + RowRenderMechanism::VariableList; + view.settings.multiline_cells_enabled = true; + cx.notify(); + }) + } + }, + ) + .toggleable_entry( + "Uniform Height", + settings.rendering_with == RowRenderMechanism::UniformList, + IconPosition::Start, + None, + { + let view_entity = view_entity.clone(); + move |_w, cx| { + view_entity.update(cx, |view, cx| { + view.settings.rendering_with = + RowRenderMechanism::UniformList; + view.settings.multiline_cells_enabled = false; + cx.notify(); + }) + } + }, + ) + .separator() + .toggleable_entry( + "Show perf metrics", + settings.show_perf_metrics_overlay, + IconPosition::Start, + None, + { + let view_entity = view_entity.clone(); + move |_w, cx| { + view_entity.update(cx, |view, cx| { + view.settings.show_perf_metrics_overlay = + !view.settings.show_perf_metrics_overlay; + cx.notify(); + }) + } + }, + ) + .toggleable_entry( + "Show cell positions", + settings.show_debug_info, + IconPosition::Start, + None, + { + let view_entity = view_entity.clone(); + move |_, cx| { + view_entity.update(cx, |view, cx| { + view.settings.show_debug_info = + !view.settings.show_debug_info; + cx.notify(); + }) + } + }, + ) + })) + } + }) +} diff --git a/crates/csv_preview/src/renderer/table_cell.rs b/crates/csv_preview/src/renderer/table_cell.rs index cc9690b4233..8100731e13a 100644 --- a/crates/csv_preview/src/renderer/table_cell.rs +++ b/crates/csv_preview/src/renderer/table_cell.rs @@ -3,11 +3,7 @@ use gpui::{AnyElement, ElementId}; use ui::{SharedString, Tooltip, div, prelude::*}; -use crate::{ - CsvPreviewView, - settings::{FontType, VerticalAlignment}, - types::DisplayCellId, -}; +use crate::{CsvPreviewView, settings::VerticalAlignment, types::DisplayCellId}; impl CsvPreviewView { /// Create selectable table cell with mouse event handlers. @@ -15,18 +11,11 @@ impl CsvPreviewView { display_cell_id: DisplayCellId, cell_content: SharedString, vertical_alignment: VerticalAlignment, - font_type: FontType, cx: &Context, ) -> AnyElement { - create_table_cell( - display_cell_id, - cell_content, - vertical_alignment, - font_type, - cx, - ) - // Mouse events handlers will be here - .into_any_element() + create_table_cell(display_cell_id, cell_content, vertical_alignment, cx) + // Mouse events handlers will be here + .into_any_element() } } @@ -35,7 +24,6 @@ fn create_table_cell( display_cell_id: DisplayCellId, cell_content: SharedString, vertical_alignment: VerticalAlignment, - font_type: FontType, cx: &Context<'_, CsvPreviewView>, ) -> gpui::Stateful
{ div() @@ -61,10 +49,7 @@ fn create_table_cell( VerticalAlignment::Top => div.content_start(), VerticalAlignment::Center => div.content_center(), }) - .map(|div| match font_type { - FontType::Ui => div.font_ui(cx), - FontType::Monospace => div.font_buffer(cx), - }) + .font_buffer(cx) .tooltip(Tooltip::text(cell_content.clone())) .child(div().child(cell_content)) } diff --git a/crates/csv_preview/src/renderer/table_header.rs b/crates/csv_preview/src/renderer/table_header.rs index 52a16be9fc8..05652b49a48 100644 --- a/crates/csv_preview/src/renderer/table_header.rs +++ b/crates/csv_preview/src/renderer/table_header.rs @@ -3,7 +3,6 @@ use ui::{Tooltip, prelude::*}; use crate::{ CsvPreviewView, - settings::FontType, table_data_engine::sorting_by_column::{AppliedSorting, SortDirection}, types::AnyColumn, }; @@ -21,10 +20,7 @@ impl CsvPreviewView { .justify_between() .items_center() .w_full() - .map(|div| match self.settings.font_type { - FontType::Ui => div.font_ui(cx), - FontType::Monospace => div.font_buffer(cx), - }) + .font_buffer(cx) .child(div().child(header_text)) .child(h_flex().gap_1().child(self.create_sort_button(cx, col_idx))) .into_any_element() diff --git a/crates/csv_preview/src/settings.rs b/crates/csv_preview/src/settings.rs index 9c64f6e9cfc..215d681c28f 100644 --- a/crates/csv_preview/src/settings.rs +++ b/crates/csv_preview/src/settings.rs @@ -1,4 +1,4 @@ -#[derive(Default, Clone, Copy)] +#[derive(Default, Clone, Copy, PartialEq)] pub enum RowRenderMechanism { /// More correct for multiline content, but slower. #[allow(dead_code)] // Will be used when settings ui is added @@ -17,15 +17,6 @@ pub enum VerticalAlignment { Center, } -#[derive(Default, Clone, Copy)] -pub enum FontType { - /// Use the default UI font - #[default] - Ui, - /// Use monospace font (same as buffer/editor font) - Monospace, -} - #[derive(Default, Clone, Copy)] pub enum RowIdentifiers { /// Show original line numbers from CSV file @@ -39,8 +30,9 @@ pub enum RowIdentifiers { pub(crate) struct CsvPreviewSettings { pub(crate) rendering_with: RowRenderMechanism, pub(crate) vertical_alignment: VerticalAlignment, - pub(crate) font_type: FontType, pub(crate) numbering_type: RowIdentifiers, pub(crate) show_debug_info: bool, + #[cfg(feature = "dev-tools")] + pub(crate) show_perf_metrics_overlay: bool, pub(crate) multiline_cells_enabled: bool, }