Tutorial: build a data workbench

cargo new workbench
cd workbench

[package]
name = "workbench"
version = "0.1.0"
edition = "2021"

[dependencies]
gpui = "0.2"
guise-ui = "0.2"

use gpui::prelude::*;
use gpui::{
    div, px, size, App, Application, Bounds, Context, IntoElement, SharedString,
    TitlebarOptions, Window, WindowBounds, WindowOptions,
};
use guise::prelude::*;

struct Workbench;

impl Render for Workbench {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let t = cx.global::<Theme>();
        div()
            .size_full()
            .bg(t.body().hsla())
            .text_color(t.text().hsla())
            .font_family(t.font_family.clone())
            .p(px(24.0))
            .child(
                Stack::new()
                    .gap(Size::Md)
                    .child(Title::new("Workbench").order(2))
                    .child(Text::new("A data workbench, one chapter at a time.").dimmed()),
            )
    }
}

fn main() {
    Application::new().run(|cx: &mut App| {
        // 1. Install the theme global exactly once, before any window opens.
        Theme::dark().init(cx);

        // 2. Open a window hosting the root view.
        let bounds = Bounds::centered(None, size(px(1100.0), px(760.0)), cx);
        cx.open_window(
            WindowOptions {
                window_bounds: Some(WindowBounds::Windowed(bounds)),
                titlebar: Some(TitlebarOptions {
                    title: Some(SharedString::new_static("workbench")),
                    ..Default::default()
                }),
                ..Default::default()
            },
            |_window, cx| cx.new(|_cx| Workbench),
        )
        .expect("open window");
        cx.activate(true);
    });
}

Group::new()
    .gap(Size::Sm)
    .child(Button::new("run", "Run").color(ColorName::Teal))
    .child(Button::new("fmt", "Format").variant(Variant::Light))
    .child(Button::new("cancel", "Cancel").variant(Variant::Default).size(Size::Xs))

Theme::dark()
    .with_primary(color!("#5f3dc4"))
    .with_body(color!(rgb(14, 14, 19)))
    .with_surface(color!(rgb(22, 22, 30)))
    .init(cx);

impl Render for Workbench {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        // 1. Resolve every theme value FIRST. theme reads borrow `cx` immutably…
        let t = cx.global::<Theme>();
        let body = t.body().hsla();
        let text = t.text().hsla();
        let is_dark = t.scheme.is_dark();

        // 2. …and cx.listener(...) needs `cx` mutably, so it must come after.
        let toggle = Button::new("theme", if is_dark { "Light mode" } else { "Dark mode" })
            .variant(Variant::Default)
            .size(Size::Xs)
            .on_click(cx.listener(|_this, _ev, window, cx| {
                let next = cx.global::<Theme>().scheme.toggled();
                cx.global_mut::<Theme>().scheme = next;
                window.refresh();
            }));

        div().size_full().bg(body).text_color(text).p(px(24.0)).child(toggle)
    }
}

let shell = AppShell::new()
    .header(44.0, |_window, _cx| {
        div()
            .flex()
            .items_center()
            .justify_between()
            .h_full()
            .px(px(14.0))
            .child(Title::new("Workbench").order(5))
            .child(
                Button::new("theme", "Toggle theme")
                    .variant(Variant::Default)
                    .size(Size::Xs)
                    .on_click(|_ev, window, cx| {
                        let next = cx.global::<Theme>().scheme.toggled();
                        cx.global_mut::<Theme>().scheme = next;
                        window.refresh();
                    }),
            )
    })
    .navbar(240.0, |_, _| {
        div()
            .p(px(10.0))
            .child(Text::new("Queries").size(Size::Sm).dimmed())
    })
    .child(
        Container::new()
            .size(Size::Md)
            .padding(Size::Md)
            .child(Space::y(Size::Md))
            .child(Title::new("Results").order(4))
            .child(Space::y(Size::Sm))
            .child(Text::new("Nothing to show yet.").dimmed().size(Size::Sm)),
    );

let status = StatusBar::new()
    .left(Text::new("workbench").size(Size::Xs))
    .left(Badge::new(if is_dark { "Dark" } else { "Light" }).size(Size::Sm))
    .center(Text::new("Ready").size(Size::Xs).dimmed())
    .right(Text::new("0 rows").size(Size::Xs).dimmed());

div()
    .relative()
    .size_full()
    .flex()
    .flex_col()
    .bg(body)
    .text_color(text)
    .font_family(font)
    .child(div().flex_1().min_h(px(0.0)).child(shell))
    .child(status)

struct Workbench {
    auto_refresh: Signal<bool>,
    filter: Signal<String>,
    queries: Signal<Vec<String>>,
    query_count: Signal<usize>,
    filter_input: Entity<TextInput>,
}

impl Workbench {
    fn new(cx: &mut Context<Self>) -> Self {
        let auto_refresh = use_state(cx, true);
        watch(cx, &auto_refresh);

        let queries = use_state(
            cx,
            vec![
                "orders.sql".to_string(),
                "revenue by month.sql".to_string(),
                "top customers.sql".to_string(),
            ],
        );
        watch(cx, &queries);

        // Derived state — React's useMemo. Recomputes whenever `queries` changes.
        let query_count = use_memo(cx, &queries, |list| list.len());
        watch(cx, &query_count);

        // A text signal, two-way bound to a TextInput entity.
        let filter = use_state(cx, String::new());
        watch(cx, &filter);
        let filter_input = cx.new(|cx| TextInput::new(cx).placeholder("Filter queries…"));
        TextInput::bind(&filter_input, &filter, cx);

        Workbench { auto_refresh, filter, queries, query_count, filter_input }
    }
}

// Controlled: replaces `.checked(...)` + `.on_change(...)` entirely.
Switch::new("auto-refresh")
    .label("Auto refresh")
    .bind(self.auto_refresh.binding())

let filter_input = self.filter_input.clone();
let auto = self.auto_refresh.clone();

let shell = AppShell::new()
    // …header as before…
    .navbar(240.0, move |_window, _cx| {
        div()
            .p(px(10.0))
            .child(
                Stack::new()
                    .gap(Size::Sm)
                    .child(filter_input.clone())
                    .child(Switch::new("auto-refresh").label("Auto refresh").bind(auto.binding())),
            )
    });

.right(
    Text::new(format!("{} queries", self.query_count.get(cx)))
        .size(Size::Xs)
        .dimmed(),
)

use std::cell::RefCell;
use std::rc::Rc;

// In Workbench::new, after `queries` and `filter` from chapter 5:
let query_cache: Rc<RefCell<String>> = Rc::new(RefCell::new(String::new()));
let filter_cache = query_cache.clone();
let query_list = cx.new(|cx| {
    DataView::new(cx, &queries)
        .item(|name: &String, _ix, _window, _cx| Text::new(name.clone()).size(Size::Sm))
        .filter(move |name: &String| {
            let query = filter_cache.borrow();
            query.is_empty() || name.to_lowercase().contains(&query.to_lowercase())
        })
        .sort_by(|a, b| a.to_lowercase().cmp(&b.to_lowercase()))
        .selectable()
});
cx.subscribe(&query_list, |this, _view, event: &DataViewEvent, cx| {
    let DataViewEvent::Selected(ix) = event;
    this.active_query = Some(*ix); // a new Option<usize> field
    cx.notify();
})
.detach();

// Copy each filter write into the cell, then nudge the DataView to repaint.
let filtered = query_list.clone();
cx.observe(filter.entity(), move |_this, changed, cx| {
    *query_cache.borrow_mut() = changed.read(cx).clone();
    filtered.update(cx, |_, cx| cx.notify());
})
.detach();

#[derive(Clone)]
struct Order {
    id: u32,
    customer: &'static str,
    total: f64,
    status: &'static str,
}

// In Workbench::new:
let orders = use_state(cx, seed_orders()); // your Vec<Order> fixture
let row_count = use_memo(cx, &orders, |rows| rows.len());
watch(cx, &row_count);

let results = cx.new(|cx| {
    TableView::new(cx)
        .columns(vec![
            Column::new("Id")
                .width(70.0)
                .text(|o: &Order| format!("#{}", o.id).into())
                .sortable_by(|a: &Order, b: &Order| a.id.cmp(&b.id)),
            Column::new("Customer").text(|o: &Order| o.customer.into()),
            Column::new("Total")
                .width(110.0)
                .align(Align::End)
                .text(|o: &Order| format!("${:.2}", o.total).into())
                .sortable_by(|a: &Order, b: &Order| a.total.total_cmp(&b.total)),
            Column::new("Status")
                .width(120.0)
                .cell(|o: &Order, _window, _cx| {
                    if o.status == "paid" {
                        Badge::new("Paid").color(ColorName::Teal)
                    } else {
                        Badge::new("Pending").color(ColorName::Orange)
                    }
                }),
        ])
        .bind_rows(&orders, cx)
        .selection_mode(SelectionMode::Multi)
        .striped(true)
        .highlight_on_hover(true)
        .with_border(true)
        .height(260.0)
});
cx.subscribe(&results, |this, _table, event: &TableViewEvent, cx| {
    this.table_status = match event {
        TableViewEvent::SelectionChanged(rows) => format!("Selected source rows: {rows:?}").into(),
        TableViewEvent::Activated(row) => format!("Activated row {row}").into(),
        TableViewEvent::Sorted(sort) => format!("Sort: {sort:?}").into(),
    };
    cx.notify();
})
.detach();

// A new field to route the main area:
enum MainView {
    Query,
    Settings,
}

// In Workbench::new:
let tree = cx.new(|cx| {
    TreeView::new(cx)
        .nodes(vec![
            TreeNode::new("queries", "queries")
                .child(TreeNode::new("orders", "orders.sql"))
                .child(TreeNode::new("revenue", "revenue.sql")),
            TreeNode::new("tables", "tables")
                .child(TreeNode::new("t-orders", "orders"))
                .child(TreeNode::new("t-customers", "customers")),
            TreeNode::new("settings", "settings").icon(IconName::Star),
        ])
        .expand("queries")
});
cx.subscribe(&tree, |this, _tree, event: &TreeViewEvent, cx| {
    if let TreeViewEvent::Activated(id) = event {
        this.view = if id.as_ref() == "settings" {
            MainView::Settings
        } else {
            MainView::Query
        };
        cx.notify();
    }
})
.detach();

// In Workbench::new — the results table moves into the bottom pane,
// framed by a stateless Panel:
let table = results.clone();
let split = cx.new(|cx| {
    SplitPanel::new(cx)
        .direction(SplitDirection::Vertical)
        .ratio(0.4)
        .min_first(140.0)
        .min_second(180.0)
        .first(|_, _| {
            div()
                .p(px(12.0))
                .child(Text::new("Editor — chapter 8.").size(Size::Sm).dimmed())
        })
        .second(move |_, _| {
            div().p(px(12.0)).child(
                Panel::new()
                    .title("Results")
                    .description("orders")
                    .child(table.clone()),
            )
        })
});
cx.subscribe(&split, |_this, _split, _event: &SplitPanelEvent, cx| cx.notify()).detach();

let main = match self.view {
    MainView::Query => div()
        .h(px(520.0))
        .w_full()
        .border_1()
        .border_color(border)
        .rounded(px(8.0))
        .overflow_hidden()
        .child(self.split.clone())
        .into_any_element(),
    MainView::Settings => settings_panel.into_any_element(), // chapter 10
};

const FIRST_QUERY: &str = "SELECT id, customer, total\nFROM orders\nORDER BY total DESC;";

// In Workbench::new:
let editor = cx.new(|cx| {
    Editor::new(cx)
        .language(Language::Sql)
        .rows(10)
        .placeholder("SELECT * FROM orders;")
        .value(FIRST_QUERY)
});
cx.subscribe(&editor, |this, _editor, event: &EditorEvent, cx| {
    if let EditorEvent::Run(source) = event {
        this.run_query(source.clone(), cx); // defined in chapter 9
    }
})
.detach();

pub enum EditorEvent {
    Change(String), // every edit, full new text
    Run(String),    // Cmd+Enter, current text
}

let source = use_state(cx, String::new());
Editor::bind(&editor, &source, cx); // equality-guarded in both directions

// New fields: tabbar: Entity<TabBar>, sources: Vec<String>, active_tab: usize.
let tabbar = cx.new(|cx| {
    TabBar::new(cx)
        .tabs(["orders.sql", "revenue.sql"])
        .active(0)
});
cx.subscribe(&tabbar, |this, bar, event: &TabBarEvent, cx| match event {
    TabBarEvent::Select(next) => {
        let next = *next;
        // Save the outgoing buffer, load the incoming one.
        this.sources[this.active_tab] = this.editor.read(cx).text();
        this.active_tab = next;
        let source = this.sources[next].clone();
        this.editor.update(cx, |e, cx| e.set_text(&source, cx));
    }
    TabBarEvent::Close(i) => {
        // Closing is a *request* — decide (unsaved changes? last tab?),
        // then remove.
        let i = *i;
        if this.sources.len() > 1 {
            this.sources.remove(i);
            bar.update(cx, |b, cx| b.remove_tab(i, cx));
            this.active_tab = bar.read(cx).active_index();
            let source = this.sources[this.active_tab].clone();
            this.editor.update(cx, |e, cx| e.set_text(&source, cx));
        }
    }
    TabBarEvent::Add => {
        this.sources[this.active_tab] = this.editor.read(cx).text();
        this.sources.push(String::new());
        bar.update(cx, |b, cx| {
            let n = b.len() + 1;
            b.add_tab(format!("untitled {n}"), cx);
        });
        this.active_tab = bar.read(cx).active_index();
        this.editor.update(cx, |e, cx| e.set_text("", cx));
    }
})
.detach();

let bar = tabbar.clone();
let buffer = editor.clone();
// …inside the SplitPanel construction:
.first(move |_, _| {
    div()
        .p(px(12.0))
        .child(Stack::new().gap(Size::Sm).child(bar.clone()).child(buffer.clone()))
})

// Field: confirm_delete: Option<usize>. At the end of render, where `root`
// (the full-size column from chapter 4) is bound as `mut`:
if let Some(ix) = self.confirm_delete {
    root = root.child(
        ConfirmModal::new()
            .title("Delete query?")
            .message("The file will be removed from the workspace.")
            .confirm_label("Delete")
            .danger()
            .on_confirm(cx.listener(move |this, _ev, _window, cx| {
                this.queries.update(cx, |list| {
                    list.remove(ix);
                });
                this.confirm_delete = None;
                cx.notify();
            }))
            .on_cancel(cx.listener(|this, _ev, _window, cx| {
                this.confirm_delete = None;
                cx.notify();
            })),
    );
}
root

use gpui::{MouseButton, MouseDownEvent};

// In Workbench::new:
let row_menu = cx.new(|cx| {
    ContextMenu::new(cx)
        .section("Rows")
        .item_icon(IconName::Copy, "Copy as CSV", |_window, _cx| { /* … */ })
        .item("Refresh", |_window, _cx| { /* … */ })
        .divider()
        .danger_item("Delete query", |_window, _cx| { /* … */ })
});

// In render — the frame around the split from chapter 7:
let frame = div()
    .id("main-frame")
    .relative()
    .h(px(520.0))
    .w_full()
    .border_1()
    .border_color(border)
    .rounded(px(8.0))
    .overflow_hidden()
    .on_mouse_down(
        MouseButton::Right,
        cx.listener(|this, ev: &MouseDownEvent, window, cx| {
            let position = ev.position;
            this.row_menu.update(cx, |menu, cx| menu.show(position, window, cx));
        }),
    )
    .child(self.split.clone());

let menubar = cx.new(|cx| {
    MenuBar::new(cx)
        .menu("File", |m| {
            m.item_shortcut("New query", "⌘N", |_window, _cx| { /* … */ })
                .divider()
                .danger_item("Quit", |_window, cx| cx.quit())
        })
        .menu("View", |m| {
            m.item("Toggle theme", |window, cx| {
                let next = cx.global::<Theme>().scheme.toggled();
                cx.global_mut::<Theme>().scheme = next;
                window.refresh();
            })
        })
});

let toasts = cx.new(|_| ToastStack::new());     // in Workbench::new
root = root.child(self.toasts.clone());         // in render, on the root

use std::time::Duration;

// Fields: running: bool, log: Signal<Vec<String>> (created with use_state + watch).
impl Workbench {
    fn run_query(&mut self, source: String, cx: &mut Context<Self>) {
        self.running = true;
        self.log.update(cx, |lines| lines.push(format!("ran {} chars", source.len())));
        cx.notify();
        cx.spawn(async move |this, cx| {
            cx.background_executor().timer(Duration::from_millis(600)).await;
            this.update(cx, |this, cx| {
                this.running = false;
                this.toasts.update(cx, |t, cx| {
                    t.push_titled("Query finished", "6 rows in 0.6 s", ColorName::Teal, cx);
                });
                cx.notify();
            })
            .ok();
        })
        .detach();
    }
}

.child(self.split.clone())
.child(LoadingOverlay::new().visible(self.running))

let last_log = self
    .log
    .read(cx)
    .last()
    .cloned()
    .unwrap_or_else(|| "Ready".to_string());

// In Workbench::new:
let api_key = use_state(cx, String::new());
let api_key_input = cx.new(|cx| {
    PasswordInput::new(cx)
        .label("API key")
        .placeholder("At least 20 characters")
        .description("The eye toggles visibility.")
});
PasswordInput::bind(&api_key_input, &api_key, cx);

let accent = use_state(cx, rgb(34, 139, 230)); // Signal<Hsla>
let accent_input = cx.new(|cx| ColorInput::new(cx).label("Accent color").value(rgb(34, 139, 230)));
ColorInput::bind(&accent_input, &accent, cx);

let environments = use_state(cx, vec!["prod".to_string(), "eu-west".to_string()]);
let tags_input = cx.new(|cx| {
    TagsInput::new(cx)
        .label("Environments")
        .placeholder("Type and press Enter…")
        .tags(["prod", "eu-west"])
        .max_tags(6)
});
TagsInput::bind(&tags_input, &environments, cx);

let sample_range = use_state(cx, (20.0, 80.0));
let range_input = cx.new(|cx| {
    RangeSlider::new(cx).min(0.0).max(100.0).min_gap(5.0).value((20.0, 80.0))
});
RangeSlider::bind(&range_input, &sample_range, cx);

let pin_code = use_state(cx, String::new());
let pin_input = cx.new(|cx| PinInput::new(cx).length(6).mask(true));
PinInput::bind(&pin_input, &pin_code, cx);

let rating = use_state(cx, 4.0f32);
watch(cx, &rating); // Rating is a controlled builder — the view renders it

use guise::reactive::validators;

let form = use_form(
    cx,
    FormState::new()
        .field("host", "localhost:5432")
        .validator("host", validators::required())
        .field("email", "")
        .validator("email", validators::email()),
);
watch(cx, &form);

// Entities feed the form through their Change events:
let host_input = cx.new(|cx| TextInput::new(cx).value("localhost:5432"));
cx.subscribe(&host_input, |this, _input, event: &TextInputEvent, cx| {
    if let TextInputEvent::Change(value) = event {
        this.form.update(cx, |f| f.set("host", value.clone()));
    }
})
.detach();

let email_input = cx.new(|cx| TextInput::new(cx).placeholder("[email protected]"));
// …same subscribe shape, writing to "email".

let host_error = self.form.read(cx).error("host").map(str::to_string);
let mut host_field = Field::new().label("Host").child(self.host_input.clone());
if let Some(error) = host_error {
    host_field = host_field.error(error);
}
// …and an `email_field` built the same way.

let save = Button::new("save-settings", "Save")
    .on_click(cx.listener(|this, _ev, _window, cx| {
        this.form.update(cx, |f| {
            f.validate();
        });
        if this.form.read(cx).is_valid() {
            this.toasts.update(cx, |t, cx| {
                t.push_titled("Saved", "Settings updated.", ColorName::Teal, cx);
            });
        }
        cx.notify();
    }));

let settings_panel = Panel::new()
    .title("Settings")
    .description("Connection & workspace")
    .child(
        Stack::new()
            .gap(Size::Md)
            .child(host_field)
            .child(email_field)
            .child(
                Group::new()
                    .align(Align::Start)
                    .gap(Size::Lg)
                    .child(div().flex_1().child(self.api_key_input.clone()))
                    .child(div().flex_1().child(self.accent_input.clone())),
            )
            .child(self.tags_input.clone())
            .child(
                Stack::new()
                    .gap(Size::Xs)
                    .child(Text::new("Sampling range").size(Size::Sm))
                    .child(self.range_input.clone()),
            )
            .child(
                Group::new()
                    .align(Align::Center)
                    .gap(Size::Md)
                    .child(self.pin_input.clone())
                    .child(Text::new("2FA code").size(Size::Sm).dimmed()),
            )
            .child(Rating::new("satisfaction").bind(self.rating.binding()))
            .child(Group::new().justify(Justify::End).child(save)),
    );

// In Workbench::new:
let palette_log = log.clone();
let spotlight = cx.new(|cx| {
    Spotlight::new(cx)
        .item_hint("Toggle theme", "⌘T", |window, cx| {
            let next = cx.global::<Theme>().scheme.toggled();
            cx.global_mut::<Theme>().scheme = next;
            window.refresh();
        })
        .item("Clear log", move |_window, cx| {
            palette_log.update(cx, |lines| lines.clear());
        })
});

let spotlight = self.spotlight.clone();
// …inside .header(44.0, move |_, _| { … }):
{
    let palette = spotlight.clone();
    Button::new("palette", "⌘K")
        .variant(Variant::Default)
        .size(Size::Xs)
        .on_click(move |_ev, window, cx| {
            palette.update(cx, |s, cx| s.open(window, cx));
        })
}

Group::new()
    .align(Align::Center)
    .gap(Size::Xs)
    .child(Text::new("Run").size(Size::Xs).dimmed())
    .child(Kbd::new("⌘"))
    .child(Kbd::new("↵"))

let totals: Vec<f32> = self.orders.read(cx).iter().map(|o| o.total as f32).collect();

let summary = Group::new()
    .align(Align::Center)
    .gap(Size::Lg)
    .child(Sparkline::new(totals).fill().color(ColorName::Teal))
    .child(
        BarChart::entries([("Mon", 12.0), ("Tue", 9.0), ("Wed", 15.0), ("Thu", 7.0)])
            .height(64.0),
    );