perspective_viewer/components/

window_editor.rs

// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
// ┃ This file is part of the Perspective library, distributed under the terms ┃
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

use std::collections::HashSet;
use std::rc::Rc;

use perspective_client::config::{ColumnType, WindowFrame, WindowSort, WindowSortDir, WindowSpec};
use wasm_bindgen::JsCast;
use web_sys::{DragEvent, HtmlInputElement, MouseEvent};
use yew::prelude::*;

use crate::components::column_dropdown::{ColumnDropDownElement, ColumnDropDownPortal};
use crate::components::column_selector::{ColumnSelectorColumnRow, InPlaceColumn, PivotColumn};
use crate::components::containers::dragdrop_list::{
    DragContext, DragDropList, DragDropListItemProps,
};
use crate::components::containers::select::{Select, SelectItem};
use crate::presentation::Presentation;
use crate::session::{Session, SessionMetadataRc};
use crate::utils::{AddListener, DragEffect, DragTarget, Subscription};

/// The declared capabilities of one window aggregate, for a `source` column
/// type. Which controls an aggregate needs is the data model's to state - the
/// editor cannot infer it from a name it has never seen.
fn op_spec(
    metadata: &SessionMetadataRc,
    source: &str,
    op: &str,
) -> Option<perspective_client::proto::WindowAggregateArgs> {
    let ty = metadata.get_column_table_type(source)?;
    metadata.get_window_aggregate(ty, op)
}

/// The editor's frame-type labels, as the `frames` a declaration lists.
fn frame_label(frame: &str) -> &'static str {
    match frame {
        "rows" => "Rows",
        "range" => "Range",
        _ => "Cumulative",
    }
}

fn frame_name(label: &str) -> &'static str {
    match label {
        "Rows" => "rows",
        "Range" => "range",
        _ => "cumulative",
    }
}

fn is_orderable_for_range(ty: ColumnType) -> bool {
    matches!(
        ty,
        ColumnType::Integer | ColumnType::Float | ColumnType::Date | ColumnType::Datetime
    )
}

#[derive(Clone, Properties)]
pub struct WindowEditorProps {
    pub metadata: SessionMetadataRc,

    /// The saved spec under edit, or `None` for the "new column" drawer.
    pub initial: Option<WindowSpec>,

    /// Fires on every form mutation with the draft spec when it validates,
    /// else `None`. The spec's `name` is a placeholder - the editable header
    /// owns naming.
    pub on_change: Callback<Option<WindowSpec>>,

    /// Incremented by the parent to discard the draft.
    pub reset_count: u8,

    /// Drag/drop state - the editor's column slots are STAGED drop targets
    /// ([`DragTarget::is_staged`]): drops mutate the draft only, and the
    /// drag origin never self-removes.
    pub presentation: Presentation,

    /// Threaded for the slots' autocomplete dropdown
    /// ([`ColumnDropDownElement`]).
    pub session: Session,

    /// Selected theme name, threaded for the autocomplete dropdown's
    /// `PortalModal`.
    #[prop_or_default]
    pub selected_theme: Option<String>,
}

impl PartialEq for WindowEditorProps {
    fn eq(&self, other: &Self) -> bool {
        self.metadata == other.metadata
            && self.initial == other.initial
            && self.reset_count == other.reset_count
            && self.selected_theme == other.selected_theme
    }
}

/// Input mirror of a draft [`WindowSpec`]. Free-text fields hold raw
/// strings so invalid intermediate input is representable; the NUMBER
/// fields are typed with default `1` and can never hold an invalid value -
/// like the Style tab's `NumberField`, a non-numeric or out-of-domain
/// input resets to the default at the keystroke. `validate` produces the
/// spec (or the error shown inline), applying the same rules as `View`
/// construction so a saveable draft cannot be rejected by the engine.
#[derive(Clone, PartialEq)]
struct WindowDraft {
    op: String,
    source: String,
    order_by: String,
    order_desc: bool,
    partition_by: Vec<String>,
    frame_type: String,
    frame_rows: u32,
    frame_range: f64,
    offset: u32,
    alpha: f64,
}

impl Default for WindowDraft {
    fn default() -> Self {
        Self {
            op: String::default(),
            source: String::default(),
            order_by: String::default(),
            order_desc: false,
            partition_by: vec![],
            frame_type: String::default(),
            frame_rows: 1,
            frame_range: 1.0,
            offset: 1,
            alpha: 1.0,
        }
    }
}

impl WindowDraft {
    fn from_spec(spec: &WindowSpec) -> Self {
        let (frame_type, frame_rows, frame_range) = match spec.frame {
            Some(WindowFrame::Rows(n)) => ("Rows", n, 1.0),
            Some(WindowFrame::Range(x)) => ("Range", 1, x),
            Some(WindowFrame::Cumulative) | None => ("Cumulative", 1, 1.0),
        };

        Self {
            op: spec.aggregate.clone(),
            source: spec.column.clone(),
            order_by: spec
                .order_by
                .as_ref()
                .map(|x| x.0.clone())
                .unwrap_or_default(),
            order_desc: spec
                .order_by
                .as_ref()
                .map(|x| x.1 == WindowSortDir::Desc)
                .unwrap_or_default(),
            partition_by: spec.partition_by.clone(),
            frame_type: frame_type.to_string(),
            frame_rows,
            frame_range,
            offset: spec.offset.unwrap_or(1),
            alpha: spec.alpha.unwrap_or(1.0),
        }
    }

    fn new_default() -> Self {
        Self {
            op: "sum".to_string(),
            frame_type: "Cumulative".to_string(),
            ..Self::default()
        }
    }

    fn validate(&self, metadata: &SessionMetadataRc) -> Result<WindowSpec, String> {
        let op = self.op.clone();

        // Every slot takes true `Table` columns ONLY - expression aliases
        // and other window columns would create dependency cycles (and
        // force delete-blocking). The slots reject non-table drops with the
        // invalid-X overlay, so these are backstops for API-authored specs
        // opened in the editor.
        let table_column = |col: &String| {
            metadata
                .get_table_columns()
                .into_iter()
                .flatten()
                .any(|x| x == col)
        };

        if self.source.is_empty() {
            return Err("Missing Column".to_string());
        }

        if !table_column(&self.source) {
            // TODO I should not be
            return Err(format!(
                "\"{}\" must be a table column to source a window",
                self.source
            ));
        }

        let source_ty = metadata
            .get_column_table_type(&self.source)
            .ok_or_else(|| format!("Unknown source column \"{}\"", self.source))?;

        // Backstop for API-authored specs opened in the editor - the op
        // menu only offers the feature-declared set, so this is
        // unreachable from the UI. The declaration also supplies the
        // controls this op takes, below.
        let declared = metadata
            .get_window_aggregate(source_ty, &op)
            .ok_or_else(|| {
                format!("\"{op}\" is not a supported window aggregate for this column")
            })?;

        // An EMPTY order slot is valid when the backend has a natural row
        // order to fall back on (primary key order in the engine, `rowid`
        // for SQL virtual servers); UNORDERED stores (`Features`) require
        // an explicit order column.
        let order_ty = if self.order_by.is_empty() {
            if metadata
                .get_features()
                .map(|x| x.unordered)
                .unwrap_or_default()
            {
                return Err("Missing Order By".to_string());
            }

            None
        } else {
            if !table_column(&self.order_by) {
                // TODO I should not be
                return Err(format!(
                    "\"{}\" must be a table column to order by",
                    self.order_by
                ));
            }

            Some(
                metadata
                    .get_column_table_type(&self.order_by)
                    .ok_or_else(|| format!("Unknown order by column \"{}\"", self.order_by))?,
            )
        };

        for col in self.partition_by.iter() {
            // TODO I should not be
            if !table_column(col) {
                return Err(format!(
                    "\"{}\" must be a table column to partition by",
                    col
                ));
            }
        }

        // The numeric fields are typed and input-clamped to their domains,
        // so no parse or range errors are reachable here.
        let frame = if declared.frames.is_empty() {
            None
        } else {
            let chosen = frame_name(&self.frame_type);
            if !declared.frames.iter().any(|x| x == chosen) {
                return Err(format!("\"{op}\" does not support a {chosen} frame"));
            }

            match self.frame_type.as_str() {
                "Rows" => Some(WindowFrame::Rows(self.frame_rows)),
                "Range" => {
                    // The natural-order fallback has no units, so `range`
                    // frames require an explicit order column.
                    let Some(order_ty) = order_ty else {
                        return Err("Range frames require an order by column".to_string());
                    };

                    if !is_orderable_for_range(order_ty) {
                        return Err("Range frames require a numeric, date or datetime order by \
                                    column"
                            .to_string());
                    }

                    Some(WindowFrame::Range(self.frame_range))
                },
                _ => None,
            }
        };

        // Emit `None` at the engine default so a spec saved without an
        // explicit `offset` round-trips unchanged (the name-stripped
        // change-detection baseline compares specs structurally).
        let offset = (declared.offset && self.offset != 1).then_some(self.offset);
        let alpha = declared.alpha.then_some(self.alpha);

        let mut partition_by = self.partition_by.clone();
        partition_by.retain(|col| !col.is_empty());

        Ok(WindowSpec {
            column: self.source.clone(),
            aggregate: op,
            partition_by,
            order_by: (!self.order_by.is_empty()).then(|| {
                WindowSort(
                    self.order_by.clone(),
                    if self.order_desc {
                        WindowSortDir::Desc
                    } else {
                        WindowSortDir::Asc
                    },
                )
            }),
            frame,
            offset,
            alpha,
        })
    }
}

#[derive(Clone, Debug)]
pub enum WindowEditorMsg {
    SetOp(String),
    ClearSource,
    ClearOrderBy,
    ToggleOrderDir,
    RemovePartition(usize),
    SetFrameType(String),
    /// Number-field messages carry the input's `value_as_number` (`NaN` for
    /// empty or unparseable text); the handlers clamp to each field's
    /// domain, resetting to the default `1` on invalid input.
    SetFrameRows(f64),
    SetFrameRange(f64),
    SetOffset(f64),
    SetAlpha(f64),
    /// A completed drop concerning this editor: a staged target to fill,
    /// and/or the staged origin slot (`DragEffect::Move` from a slot pill)
    /// to clear.
    Drop(String, DragTarget, Option<DragTarget>),
    New(DragTarget, InPlaceColumn),
    DragEnter(DragTarget, usize),
    DragLeave(DragTarget),
}

/// [`DragContext`] bindings routing one [`DragDropList`] per staged target
/// into [`WindowEditorMsg`]s - the same composition the config selector
/// uses per zone, so the slots inherit its drop previews, autocomplete
/// (`EmptyColumn`) and pill styling.
struct WindowSourceContext;
struct WindowOrderByContext;
struct WindowPartitionByContext;

impl DragContext<WindowEditorMsg> for WindowSourceContext {
    fn close(_index: usize) -> WindowEditorMsg {
        WindowEditorMsg::ClearSource
    }

    fn dragenter(index: usize) -> WindowEditorMsg {
        WindowEditorMsg::DragEnter(DragTarget::WindowSource, index)
    }

    fn dragleave() -> WindowEditorMsg {
        WindowEditorMsg::DragLeave(DragTarget::WindowSource)
    }

    fn create(col: InPlaceColumn) -> WindowEditorMsg {
        WindowEditorMsg::New(DragTarget::WindowSource, col)
    }

    fn is_self_move(effect: DragTarget) -> bool {
        effect == DragTarget::WindowSource
    }
}

impl DragContext<WindowEditorMsg> for WindowOrderByContext {
    fn close(_index: usize) -> WindowEditorMsg {
        WindowEditorMsg::ClearOrderBy
    }

    fn dragenter(index: usize) -> WindowEditorMsg {
        WindowEditorMsg::DragEnter(DragTarget::WindowOrderBy, index)
    }

    fn dragleave() -> WindowEditorMsg {
        WindowEditorMsg::DragLeave(DragTarget::WindowOrderBy)
    }

    fn create(col: InPlaceColumn) -> WindowEditorMsg {
        WindowEditorMsg::New(DragTarget::WindowOrderBy, col)
    }

    fn is_self_move(effect: DragTarget) -> bool {
        effect == DragTarget::WindowOrderBy
    }
}

impl DragContext<WindowEditorMsg> for WindowPartitionByContext {
    fn close(index: usize) -> WindowEditorMsg {
        WindowEditorMsg::RemovePartition(index)
    }

    fn dragenter(index: usize) -> WindowEditorMsg {
        WindowEditorMsg::DragEnter(DragTarget::WindowPartitionBy, index)
    }

    fn dragleave() -> WindowEditorMsg {
        WindowEditorMsg::DragLeave(DragTarget::WindowPartitionBy)
    }

    fn create(col: InPlaceColumn) -> WindowEditorMsg {
        WindowEditorMsg::New(DragTarget::WindowPartitionBy, col)
    }

    fn is_self_move(effect: DragTarget) -> bool {
        effect == DragTarget::WindowPartitionBy
    }
}

/// A slot's filled state: the shared `ColumnSelectorColumnRow`, with the
/// window `op` selector bound into its aggregate slot for the SOURCE slot -
/// the ONLY op control in the UI. The pill is a drag ORIGIN with
/// `DragEffect::Move(action)` (the same shape as `PivotColumn`) - the open
/// [`WindowEditor`] consumes the staged origin from `drop_received` to
/// complete the move by clearing this slot in its draft.
#[derive(Clone, Properties)]
pub struct WindowSlotColumnProps {
    pub column: String,
    pub column_type: Option<ColumnType>,

    /// The staged slot this pill occupies - its drag origin.
    pub action: DragTarget,

    pub presentation: Presentation,

    #[prop_or_default]
    pub aggregate: Option<Html>,

    /// Trailing affordance in the row (the order slot's staged sort-dir
    /// toggle).
    #[prop_or_default]
    pub trailing: Html,
}

impl PartialEq for WindowSlotColumnProps {
    fn eq(&self, other: &Self) -> bool {
        self.column == other.column
            && self.column_type == other.column_type
            && self.action == other.action
            && self.aggregate == other.aggregate
            && self.trailing == other.trailing
    }
}

impl DragDropListItemProps for WindowSlotColumnProps {
    type Item = String;

    fn get_item(&self) -> String {
        self.column.clone()
    }
}

pub struct WindowSlotColumn;

impl Component for WindowSlotColumn {
    type Message = ();
    type Properties = WindowSlotColumnProps;

    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let dragstart = Callback::from({
            let column = ctx.props().column.clone();
            let presentation = ctx.props().presentation.clone();
            let action = ctx.props().action;
            move |event: DragEvent| {
                presentation.set_drag_image(&event).unwrap();
                presentation.notify_drag_start(column.clone(), DragEffect::Move(action))
            }
        });

        let dragend = Callback::from({
            let presentation = ctx.props().presentation.clone();
            move |_: DragEvent| presentation.notify_drag_end()
        });

        html! {
            <div class="column-selector-column">
                <ColumnSelectorColumnRow
                    name={ctx.props().column.clone()}
                    col_type={ctx.props().column_type}
                    aggregate={ctx.props().aggregate.clone()}
                    trailing={ctx.props().trailing.clone()}
                    wrapper_class={classes!["column-selector-column-title"]}
                    ondragstart={Some(dragstart)}
                    ondragend={Some(dragend)}
                />
            </div>
        }
    }
}

pub struct WindowEditor {
    draft: WindowDraft,
    error: Option<String>,
    column_dropdown: ColumnDropDownElement,
    _drop_sub: Subscription,
}

impl WindowEditor {
    fn initialize(ctx: &Context<Self>) -> WindowDraft {
        ctx.props()
            .initial
            .as_ref()
            .map(WindowDraft::from_spec)
            .unwrap_or_else(WindowDraft::new_default)
    }

    fn emit(&mut self, ctx: &Context<Self>) {
        match self.draft.validate(&ctx.props().metadata) {
            Ok(spec) => {
                self.error = None;
                ctx.props().on_change.emit(Some(spec));
            },
            Err(msg) => {
                self.error = Some(msg);
                ctx.props().on_change.emit(None);
            },
        }
    }
}

impl Component for WindowEditor {
    type Message = WindowEditorMsg;
    type Properties = WindowEditorProps;

    fn create(ctx: &Context<Self>) -> Self {
        let _drop_sub = {
            let link = ctx.link().clone();
            ctx.props().presentation.drop_received.add_listener(
                move |(column, target, effect, _index): (String, DragTarget, DragEffect, usize)| {
                    let staged_origin = match effect {
                        DragEffect::Move(origin) if origin.is_staged() => Some(origin),
                        _ => None,
                    };

                    if target.is_staged() || staged_origin.is_some() {
                        link.send_message(WindowEditorMsg::Drop(column, target, staged_origin));
                    }
                },
            )
        };

        let mut this = Self {
            draft: Self::initialize(ctx),
            error: None,
            column_dropdown: ColumnDropDownElement::new(ctx.props().session.clone()),
            _drop_sub,
        };

        this.emit(ctx);
        this
    }

    fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
        if ctx.props().reset_count != old_props.reset_count
            || ctx.props().initial != old_props.initial
        {
            self.draft = Self::initialize(ctx);
            self.emit(ctx);
            true
        } else {
            false
        }
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            WindowEditorMsg::DragEnter(target, index) => {
                return ctx.props().presentation.notify_drag_enter(target, index);
            },
            WindowEditorMsg::DragLeave(target) => {
                ctx.props().presentation.notify_drag_leave(target);
                return true;
            },
            WindowEditorMsg::New(target, InPlaceColumn::Column(column)) => {
                ctx.link()
                    .send_message(WindowEditorMsg::Drop(column, target, None));
                return false;
            },
            WindowEditorMsg::New(_, InPlaceColumn::Expression(_)) => {
                // In-place expression creation is a config-selector affordance;
                // staged window slots take existing columns only.
                return false;
            },
            WindowEditorMsg::Drop(column, target, origin) => {
                // The origin slot clears FIRST so a self-move (origin ==
                // target) re-inserts the same column and nets to no change.
                match origin {
                    Some(DragTarget::WindowSource) => self.draft.source = String::default(),
                    Some(DragTarget::WindowOrderBy) => self.draft.order_by = String::default(),
                    Some(DragTarget::WindowPartitionBy) => {
                        self.draft.partition_by.retain(|x| x != &column)
                    },
                    _ => {},
                }

                // Slots take true `Table` columns ONLY - a staged drop of
                // an expression or window column is rejected outright (the
                // list already showed the invalid-X overlay during hover).
                let is_table_column = ctx
                    .props()
                    .metadata
                    .get_table_columns()
                    .into_iter()
                    .flatten()
                    .any(|x| *x == column);

                match target {
                    _ if target.is_staged() && !is_table_column => {},
                    DragTarget::WindowSource => {
                        self.draft.source = column;

                        // The op selector only offers the feature-declared
                        // set for the source's type, so an op orphaned by
                        // the new source coerces to that set's first entry.
                        let available = ctx
                            .props()
                            .metadata
                            .get_column_table_type(&self.draft.source)
                            .and_then(|ty| {
                                ctx.props()
                                    .metadata
                                    .get_features()
                                    .map(|x| x.get_window_aggregates(ty))
                            })
                            .unwrap_or_default();

                        if !available.iter().any(|x| x.name == self.draft.op)
                            && let Some(first) = available.first()
                        {
                            self.draft.op = first.name.clone();
                        }
                    },
                    DragTarget::WindowOrderBy => self.draft.order_by = column,
                    DragTarget::WindowPartitionBy
                        if !column.is_empty() && !self.draft.partition_by.contains(&column) =>
                    {
                        self.draft.partition_by.push(column);
                    },
                    // A committing target: the config zone handles its own
                    // insert; only the staged origin cleanup applies here.
                    _ => {},
                }
            },
            WindowEditorMsg::SetOp(op) => {
                self.draft.op = op;

                // Keep the frame coherent as the op changes - an op that
                // does not accept the current frame kind coerces to its
                // first declared one (the dropdown omits the rest).
                if let Some(declared) =
                    op_spec(&ctx.props().metadata, &self.draft.source, &self.draft.op)
                    && !declared.frames.is_empty()
                    && !declared
                        .frames
                        .iter()
                        .any(|x| x == frame_name(&self.draft.frame_type))
                    && let Some(first) = declared.frames.first()
                {
                    self.draft.frame_type = frame_label(first).to_string();
                }
            },
            WindowEditorMsg::ClearSource => self.draft.source = String::default(),
            WindowEditorMsg::ClearOrderBy => self.draft.order_by = String::default(),
            WindowEditorMsg::ToggleOrderDir => self.draft.order_desc = !self.draft.order_desc,
            WindowEditorMsg::RemovePartition(idx) => {
                if idx < self.draft.partition_by.len() {
                    self.draft.partition_by.remove(idx);
                }
            },
            WindowEditorMsg::SetFrameType(x) => self.draft.frame_type = x,
            WindowEditorMsg::SetFrameRows(x) => {
                self.draft.frame_rows = if x.is_finite() && x >= 0.0 {
                    x as u32
                } else {
                    1
                };
            },
            WindowEditorMsg::SetFrameRange(x) => {
                self.draft.frame_range = if x.is_finite() && x > 0.0 { x } else { 1.0 };
            },
            WindowEditorMsg::SetOffset(x) => {
                self.draft.offset = if x.is_finite() && x >= 0.0 {
                    x as u32
                } else {
                    1
                };
            },
            WindowEditorMsg::SetAlpha(x) => {
                self.draft.alpha = if x.is_finite() && x > 0.0 && x <= 1.0 {
                    x
                } else {
                    1.0
                };
            },
        }

        self.emit(ctx);
        true
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let declared = op_spec(&ctx.props().metadata, &self.draft.source, &self.draft.op);

        // The op selector renders the FEATURE-DECLARED window aggregates
        // for the source column's type, in the server's declared order -
        // capability and type-validity both come from the data model
        // (`GetFeaturesResp::window_aggregates`), not a hardcoded list.
        let ops: Rc<Vec<SelectItem<String>>> = Rc::new(
            ctx.props()
                .metadata
                .get_column_table_type(&self.draft.source)
                .and_then(|ty| {
                    ctx.props()
                        .metadata
                        .get_features()
                        .map(|x| x.get_window_aggregates(ty))
                })
                .unwrap_or_default()
                .into_iter()
                .map(|x| SelectItem::Option(x.name.clone()))
                .collect(),
        );

        // Number inputs report `value_as_number` (`NaN` for empty/garbage),
        // the Style tab `NumberField` idiom - the handlers reset invalid
        // values to the default.
        let on_number_input = |f: fn(f64) -> WindowEditorMsg| {
            ctx.link().callback(move |event: InputEvent| {
                let value = event
                    .target()
                    .and_then(|t| t.dyn_into::<HtmlInputElement>().ok())
                    .map(|x| x.value_as_number())
                    .unwrap_or(f64::NAN);
                f(value)
            })
        };

        // Frame type as a dropdown; like the op selector, invalid choices
        // are omitted rather than disabled - the declared `frames` are the
        // menu, and `SetOp` already coerces the draft into them.
        let frame_types: Rc<Vec<SelectItem<String>>> = Rc::new(
            declared
                .as_ref()
                .map(|x| x.frames.clone())
                .unwrap_or_default()
                .iter()
                .map(|x| SelectItem::Option(frame_label(x).to_string()))
                .collect(),
        );

        // Slots take true `Table` columns ONLY - expression aliases and
        // other window columns would create dependency cycles (and force
        // delete-blocking). They join every slot's `exclude` set (removing
        // them from the autocomplete dropdowns), the drop handler rejects
        // them, and an invalid hover shows the X overlay below.
        let non_table: HashSet<String> = ctx
            .props()
            .metadata
            .get_expression_columns()
            .chain(ctx.props().metadata.get_window_columns())
            .cloned()
            .collect();

        let is_invalid_drag = |target: DragTarget| {
            ctx.props()
                .presentation
                .is_dragover(target)
                .map(|(_, col)| non_table.contains(&col))
                .unwrap_or_default()
        };

        // The op selector renders in the source pill's aggregate-selector
        // space - the ONLY place a window op control exists in the UI.
        let source_exclude: HashSet<String> = std::iter::once(self.draft.source.clone())
            .chain(non_table.iter().cloned())
            .collect();

        let source_list = html! {
            <DragDropList<WindowEditor, WindowSlotColumn, WindowSourceContext>
                name="window-source"
                parent={ctx.link().clone()}
                presentation={ctx.props().presentation.clone()}
                column_dropdown={self.column_dropdown.clone()}
                exclude={source_exclude}
                is_dragover={ctx.props().presentation.is_dragover(DragTarget::WindowSource)}
                is_invalid={is_invalid_drag(DragTarget::WindowSource)}
                single_slot=true
            >
                { for (!self.draft.source.is_empty()).then(|| yew::html_nested! {
                        <WindowSlotColumn
                            column={self.draft.source.clone()}
                            column_type={ctx.props().metadata.get_column_table_type(&self.draft.source)}
                            action={DragTarget::WindowSource}
                            presentation={ctx.props().presentation.clone()}
                            aggregate={html! {
                                <div class="aggregate-selector-wrapper">
                                    <Select<String>
                                        wrapper_class="aggregate-selector"
                                        values={ops.clone()}
                                        selected={self.draft.op.clone()}
                                        on_select={ctx.link().callback(WindowEditorMsg::SetOp)}
                                    />
                                </div>
                            }}
                        />
                    }) }
            </DragDropList<WindowEditor, WindowSlotColumn, WindowSourceContext>>
        };

        let order_exclude: HashSet<String> = std::iter::once(self.draft.order_by.clone())
            .chain(non_table.iter().cloned())
            .collect();
        let order_list = html! {
            <DragDropList<WindowEditor, WindowSlotColumn, WindowOrderByContext>
                name="window-order-by"
                parent={ctx.link().clone()}
                presentation={ctx.props().presentation.clone()}
                column_dropdown={self.column_dropdown.clone()}
                exclude={order_exclude}
                is_dragover={ctx.props().presentation.is_dragover(DragTarget::WindowOrderBy)}
                is_invalid={is_invalid_drag(DragTarget::WindowOrderBy)}
                single_slot=true
            >
                { for (!self.draft.order_by.is_empty()).then(|| {
                        // The sort pill's direction affordance, staged: the
                        // toggle mutates the draft only, committed by Save.
                        let dir = if self.draft.order_desc {
                            WindowSortDir::Desc
                        } else {
                            WindowSortDir::Asc
                        };

                        let onmousedown = ctx
                            .link()
                            .callback(|_: MouseEvent| WindowEditorMsg::ToggleOrderDir);

                        yew::html_nested! {
                            <WindowSlotColumn
                                column={self.draft.order_by.clone()}
                                column_type={ctx.props().metadata.get_column_table_type(&self.draft.order_by)}
                                action={DragTarget::WindowOrderBy}
                                presentation={ctx.props().presentation.clone()}
                                trailing={html! {
                                    <span
                                        class={format!("sort-icon {}", dir)}
                                        {onmousedown}
                                    />
                                }}
                            />
                        }
                    }) }
            </DragDropList<WindowEditor, WindowSlotColumn, WindowOrderByContext>>
        };

        let partition_exclude: HashSet<String> = self
            .draft
            .partition_by
            .iter()
            .cloned()
            .chain(non_table.iter().cloned())
            .collect();
        let partition_list = html! {
            <DragDropList<WindowEditor, PivotColumn, WindowPartitionByContext>
                name="window-partition-by"
                parent={ctx.link().clone()}
                presentation={ctx.props().presentation.clone()}
                column_dropdown={self.column_dropdown.clone()}
                exclude={partition_exclude}
                is_dragover={ctx.props().presentation.is_dragover(DragTarget::WindowPartitionBy)}
                is_invalid={is_invalid_drag(DragTarget::WindowPartitionBy)}
            >
                { for self.draft.partition_by.iter().map(|col| yew::html_nested! {
                        <PivotColumn
                            column={col.clone()}
                            column_type={ctx.props().metadata.get_column_table_type(col)}
                            action={DragTarget::WindowPartitionBy}
                            presentation={ctx.props().presentation.clone()}
                        />
                    }) }
            </DragDropList<WindowEditor, PivotColumn, WindowPartitionByContext>>
        };

        let show_frame = declared
            .as_ref()
            .map(|x| !x.frames.is_empty())
            .unwrap_or_default();
        let show_offset = declared.as_ref().map(|x| x.offset).unwrap_or_default();
        let show_alpha = declared.as_ref().map(|x| x.alpha).unwrap_or_default();

        html! {
            <>
                <div id="window-editor-slots">{ source_list }{ order_list }{ partition_list }</div>
                <div id="window-editor-container">
                    if show_frame {
                        <div class="column-style-label"><label id="window-frame-label" /></div>
                        <div class="row">
                            <Select<String>
                                id="window-frame-type"
                                values={frame_types}
                                selected={self.draft.frame_type.clone()}
                                on_select={ctx.link().callback(WindowEditorMsg::SetFrameType)}
                            />
                        </div>
                        if self.draft.frame_type == "Rows" {
                            <div class="row">
                                <input
                                    type="number"
                                    class="parameter"
                                    min="0"
                                    value={self.draft.frame_rows.to_string()}
                                    oninput={on_number_input(WindowEditorMsg::SetFrameRows)}
                                />
                            </div>
                        }
                        if self.draft.frame_type == "Range" {
                            <div class="row">
                                <input
                                    type="number"
                                    class="parameter"
                                    min="0"
                                    value={self.draft.frame_range.to_string()}
                                    oninput={on_number_input(WindowEditorMsg::SetFrameRange)}
                                />
                            </div>
                        }
                    }
                    if show_offset {
                        <div class="column-style-label">
                            <label id="window-offset-label" class="indent" />
                        </div>
                        <div class="row">
                            <input
                                type="number"
                                class="parameter"
                                min="0"
                                value={self.draft.offset.to_string()}
                                oninput={on_number_input(WindowEditorMsg::SetOffset)}
                            />
                        </div>
                    }
                    if show_alpha {
                        <div class="column-style-label">
                            <label id="window-alpha-label" class="indent" />
                        </div>
                        <div class="row">
                            <input
                                type="number"
                                class="parameter"
                                step="0.05"
                                min="0"
                                max="1"
                                value={self.draft.alpha.to_string()}
                                oninput={on_number_input(WindowEditorMsg::SetAlpha)}
                            />
                        </div>
                    }
                    if let Some(error) = &self.error {
                        <div class="row window-editor-error">{ error.clone() }</div>
                    }
                </div>
                <ColumnDropDownPortal
                    element={self.column_dropdown.clone()}
                    theme={ctx.props().selected_theme.clone().unwrap_or_default()}
                />
            </>
        }
    }
}