@perspective-dev/viewer 4.0.0

package/src/rust/components/datetime_column_style.rs

@@ -0,0 +1,284 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+mod custom;
+mod simple;
+
+use std::rc::Rc;
+use std::sync::LazyLock;
+
+use derivative::Derivative;
+use perspective_js::json;
+use perspective_js::utils::global::navigator;
+use wasm_bindgen::prelude::*;
+use yew::prelude::*;
+use yew::*;
+
+use super::form::color_selector::*;
+use super::modal::{ModalLink, SetModalLink};
+use super::style::LocalStyle;
+use crate::components::datetime_column_style::custom::DatetimeStyleCustom;
+use crate::components::datetime_column_style::simple::DatetimeStyleSimple;
+use crate::components::form::select_field::{SelectEnumField, SelectValueField};
+use crate::config::*;
+use crate::utils::WeakScope;
+use crate::*;
+
+#[wasm_bindgen]
+extern "C" {
+    #[wasm_bindgen(js_name = supportedValuesOf, js_namespace = Intl)]
+    pub fn supported_values_of(s: &JsValue) -> js_sys::Array;
+}
+
+thread_local! {
+    static ALL_TIMEZONES: LazyLock<Rc<Vec<String>>> = LazyLock::new(|| {
+        Rc::new(
+            supported_values_of(&JsValue::from("timeZone"))
+                .iter()
+                .map(|x| x.as_string().unwrap())
+                .collect(),
+        )
+    });
+}
+
+static USER_TIMEZONE: LazyLock<String> = LazyLock::new(|| {
+    js_sys::Reflect::get(
+        &js_sys::Intl::DateTimeFormat::new(&navigator().languages(), &json!({})).resolved_options(),
+        &JsValue::from("timeZone"),
+    )
+    .unwrap()
+    .as_string()
+    .unwrap()
+});
+
+pub enum DatetimeColumnStyleMsg {
+    SimpleDatetimeStyleConfigChanged(SimpleDatetimeStyleConfig),
+    CustomDatetimeStyleConfigChanged(CustomDatetimeStyleConfig),
+    TimezoneChanged(Option<String>),
+    ColorModeChanged(Option<DatetimeColorMode>),
+    ColorChanged(String),
+    ColorReset,
+}
+
+#[derive(Properties, Derivative)]
+#[derivative(Debug)]
+pub struct DatetimeColumnStyleProps {
+    pub enable_time_config: bool,
+
+    pub config: Option<DatetimeColumnStyleConfig>,
+
+    pub default_config: DatetimeColumnStyleDefaultConfig,
+
+    #[prop_or_default]
+    pub on_change: Callback<ColumnConfigValueUpdate>,
+
+    #[prop_or_default]
+    #[derivative(Debug = "ignore")]
+    weak_link: WeakScope<DatetimeColumnStyle>,
+}
+
+impl ModalLink<DatetimeColumnStyle> for DatetimeColumnStyleProps {
+    fn weak_link(&self) -> &'_ WeakScope<DatetimeColumnStyle> {
+        &self.weak_link
+    }
+}
+
+impl PartialEq for DatetimeColumnStyleProps {
+    fn eq(&self, _other: &Self) -> bool {
+        false
+    }
+}
+
+/// Column style controls for the `datetime` type.
+#[derive(Debug)]
+pub struct DatetimeColumnStyle {
+    config: DatetimeColumnStyleConfig,
+    default_config: DatetimeColumnStyleDefaultConfig,
+}
+
+impl DatetimeColumnStyle {
+    /// When this config has changed, we must signal the wrapper element.
+    fn dispatch_config(&self, ctx: &Context<Self>) {
+        let update =
+            Some(self.config.clone()).filter(|x| x != &DatetimeColumnStyleConfig::default());
+        ctx.props()
+            .on_change
+            .emit(ColumnConfigValueUpdate::DatagridDatetimeStyle(update));
+    }
+
+    /// Generate a color selector component for a specific `StringColorMode`
+    /// variant.
+    fn color_select_row(&self, ctx: &Context<Self>, mode: &DatetimeColorMode, title: &str) -> Html {
+        let on_color = ctx.link().callback(DatetimeColumnStyleMsg::ColorChanged);
+        let color = self
+            .config
+            .color
+            .clone()
+            .unwrap_or_else(|| self.default_config.color.to_owned());
+
+        let color_props = props!(ColorProps {
+            title: title.to_owned(),
+            on_color,
+            is_modified: color != self.default_config.color,
+            color,
+            on_reset: ctx.link().callback(|_| DatetimeColumnStyleMsg::ColorReset)
+        });
+
+        if &self.config.datetime_color_mode == mode {
+            html! { <div class="row"><ColorSelector ..color_props /></div> }
+        } else {
+            html! {}
+        }
+    }
+}
+
+impl Component for DatetimeColumnStyle {
+    type Message = DatetimeColumnStyleMsg;
+    type Properties = DatetimeColumnStyleProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        ctx.set_modal_link();
+        Self {
+            config: ctx.props().config.clone().unwrap_or_default(),
+            default_config: ctx.props().default_config.clone(),
+        }
+    }
+
+    // Always re-render when config changes.
+    fn changed(&mut self, ctx: &Context<Self>, old: &Self::Properties) -> bool {
+        let mut rerender = false;
+        let mut new_config = ctx.props().config.clone().unwrap_or_default();
+        if self.config != new_config {
+            std::mem::swap(&mut self.config, &mut new_config);
+            rerender = true;
+        }
+        if old.enable_time_config != ctx.props().enable_time_config {
+            rerender = true;
+        }
+        rerender
+    }
+
+    // TODO could be more conservative here with re-rendering
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            DatetimeColumnStyleMsg::TimezoneChanged(val) => {
+                if Some(&*USER_TIMEZONE) != val.as_ref() {
+                    *self.config.date_format.time_zone_mut() = val;
+                } else {
+                    *self.config.date_format.time_zone_mut() = None;
+                }
+
+                self.dispatch_config(ctx);
+                true
+            },
+            DatetimeColumnStyleMsg::ColorModeChanged(mode) => {
+                self.config.datetime_color_mode = mode.unwrap_or_default();
+                self.dispatch_config(ctx);
+                true
+            },
+            DatetimeColumnStyleMsg::ColorChanged(color) => {
+                self.config.color = Some(color);
+                self.dispatch_config(ctx);
+                true
+            },
+
+            DatetimeColumnStyleMsg::SimpleDatetimeStyleConfigChanged(simple) => {
+                self.config.date_format = DatetimeFormatType::Simple(simple);
+                self.dispatch_config(ctx);
+                true
+            },
+            DatetimeColumnStyleMsg::CustomDatetimeStyleConfigChanged(custom) => {
+                self.config.date_format = DatetimeFormatType::Custom(custom);
+                self.dispatch_config(ctx);
+                true
+            },
+            DatetimeColumnStyleMsg::ColorReset => {
+                self.config.color = Some(self.default_config.color.clone());
+                self.dispatch_config(ctx);
+                true
+            },
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let selected_color_mode = self.config.datetime_color_mode;
+        let color_mode_changed = ctx
+            .link()
+            .callback(DatetimeColumnStyleMsg::ColorModeChanged);
+
+        let color_controls = match selected_color_mode {
+            DatetimeColorMode::None => html! {},
+            DatetimeColorMode::Foreground => {
+                self.color_select_row(ctx, &DatetimeColorMode::Foreground, "foreground-label")
+            },
+            DatetimeColorMode::Background => {
+                self.color_select_row(ctx, &DatetimeColorMode::Background, "background-label")
+            },
+        };
+
+        html! {
+            <>
+                <LocalStyle href={css!("column-style")} />
+                <div id="column-style-container" class="datetime-column-style-container">
+                    <SelectEnumField<DatetimeColorMode>
+                        label="color"
+                        on_change={color_mode_changed}
+                        current_value={selected_color_mode}
+                    />
+                    { color_controls }
+                    if ctx.props().enable_time_config {
+                        <SelectValueField<String>
+                            label="timezone"
+                            values={ALL_TIMEZONES.with(|x| (*x).clone())}
+                            default_value={(*USER_TIMEZONE).clone()}
+                            on_change={ctx.link().callback(DatetimeColumnStyleMsg::TimezoneChanged)}
+                            current_value={self.config.date_format.time_zone().as_ref().unwrap_or(&*USER_TIMEZONE).clone()}
+                        />
+                    }
+                    if let DatetimeFormatType::Simple(config) = &self.config.date_format {
+                        if ctx.props().enable_time_config {
+                            <div class="row">
+                                <button
+                                    id="datetime_format"
+                                    data-title="Simple"
+                                    data-title-hover="Switch to Custom"
+                                    onclick={ctx.link().callback(|_| DatetimeColumnStyleMsg::CustomDatetimeStyleConfigChanged(CustomDatetimeStyleConfig::default()))}
+                                />
+                            </div>
+                        }
+                        <DatetimeStyleSimple
+                            enable_time_config={ctx.props().enable_time_config}
+                            on_change={ctx.link().callback(DatetimeColumnStyleMsg::SimpleDatetimeStyleConfigChanged)}
+                            config={config.clone()}
+                        />
+                    } else if let DatetimeFormatType::Custom(config) = &self.config.date_format {
+                        if ctx.props().enable_time_config {
+                            <div class="row">
+                                <button
+                                    id="datetime_format"
+                                    data-title="Custom"
+                                    data-title-hover="Switch to Simple"
+                                    onclick={ctx.link().callback(|_| DatetimeColumnStyleMsg::SimpleDatetimeStyleConfigChanged(SimpleDatetimeStyleConfig::default()))}
+                                />
+                            </div>
+                        }
+                        <DatetimeStyleCustom
+                            enable_time_config={ctx.props().enable_time_config}
+                            on_change={ctx.link().callback(DatetimeColumnStyleMsg::CustomDatetimeStyleConfigChanged)}
+                            config={config.clone()}
+                        />
+                    }
+                </div>
+            </>
+        }
+    }
+}

package/src/rust/components/editable_header.rs

@@ -0,0 +1,183 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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::rc::Rc;
+
+use derivative::Derivative;
+use itertools::Itertools;
+use web_sys::{FocusEvent, HtmlInputElement, KeyboardEvent};
+use yew::{Callback, Component, Html, NodeRef, Properties, TargetCast, classes, html};
+
+use super::type_icon::TypeIconType;
+use crate::components::type_icon::TypeIcon;
+use crate::maybe;
+use crate::session::Session;
+
+#[derive(PartialEq, Properties, Derivative, Clone)]
+#[derivative(Debug)]
+pub struct EditableHeaderProps {
+    pub icon_type: Option<TypeIconType>,
+    pub on_change: Callback<(Option<String>, bool)>,
+    pub editable: bool,
+    pub initial_value: Option<String>,
+    pub placeholder: Rc<String>,
+    #[prop_or_default]
+    pub reset_count: u8,
+    #[derivative(Debug = "ignore")]
+    pub session: Session,
+}
+impl EditableHeaderProps {
+    fn split_placeholder(&self) -> String {
+        let split = self
+            .placeholder
+            .split_once('\n')
+            .map(|(a, _)| a)
+            .unwrap_or(&*self.placeholder);
+        match split.char_indices().nth(25) {
+            None => split.to_string(),
+            Some((idx, _)) => split[..idx].to_owned(),
+        }
+    }
+}
+
+#[derive(Default, Debug, PartialEq, Copy, Clone)]
+pub enum ValueState {
+    #[default]
+    Unedited,
+    Edited,
+}
+
+pub enum EditableHeaderMsg {
+    SetNewValue(String),
+    OnClick(()),
+}
+
+#[derive(Default, Debug)]
+pub struct EditableHeader {
+    noderef: NodeRef,
+    edited: bool,
+    valid: bool,
+    value: Option<String>,
+    placeholder: String,
+}
+impl Component for EditableHeader {
+    type Message = EditableHeaderMsg;
+    type Properties = EditableHeaderProps;
+
+    fn create(ctx: &yew::prelude::Context<Self>) -> Self {
+        Self {
+            value: ctx.props().initial_value.clone(),
+            placeholder: ctx.props().split_placeholder(),
+            valid: true,
+            ..Self::default()
+        }
+    }
+
+    fn changed(&mut self, ctx: &yew::prelude::Context<Self>, old_props: &Self::Properties) -> bool {
+        if ctx.props().reset_count != old_props.reset_count {
+            self.value.clone_from(&ctx.props().initial_value);
+        }
+        if ctx.props().initial_value != old_props.initial_value {
+            self.edited = false;
+            self.value.clone_from(&ctx.props().initial_value);
+        }
+        if !ctx.props().editable {
+            self.edited = false;
+        }
+        self.placeholder = ctx.props().split_placeholder();
+        ctx.props() != old_props
+    }
+
+    fn update(&mut self, ctx: &yew::prelude::Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            EditableHeaderMsg::SetNewValue(new_value) => {
+                let maybe_value = (!new_value.is_empty()).then_some(new_value.clone());
+                self.edited = ctx.props().initial_value != maybe_value;
+
+                self.valid = maybe!({
+                    if maybe_value
+                        .as_ref()
+                        .map(|v| v == &self.placeholder)
+                        .unwrap_or(true)
+                    {
+                        return Some(true);
+                    }
+                    if !self.edited {
+                        return Some(true);
+                    }
+                    let metadata = ctx.props().session.metadata();
+                    let expressions = metadata.get_expression_columns();
+                    let found = metadata
+                        .get_table_columns()?
+                        .iter()
+                        .chain(expressions)
+                        .contains(&new_value);
+                    Some(!found)
+                })
+                .unwrap_or(true);
+
+                self.value.clone_from(&maybe_value);
+                ctx.props().on_change.emit((maybe_value, self.valid));
+                true
+            },
+            EditableHeaderMsg::OnClick(()) => {
+                self.noderef
+                    .cast::<HtmlInputElement>()
+                    .unwrap()
+                    .focus()
+                    .unwrap();
+                false
+            },
+        }
+    }
+
+    fn view(&self, ctx: &yew::prelude::Context<Self>) -> Html {
+        let mut classes = classes!("sidebar_header_contents");
+        if ctx.props().editable {
+            classes.push("editable");
+        }
+
+        if !self.valid {
+            classes.push("invalid");
+        }
+
+        if self.edited {
+            classes.push("edited");
+        }
+
+        let onkeyup = ctx.link().callback(|e: KeyboardEvent| {
+            let value = e.target_unchecked_into::<HtmlInputElement>().value();
+            EditableHeaderMsg::SetNewValue(value)
+        });
+
+        let onblur = ctx.link().callback(|e: FocusEvent| {
+            let value = e.target_unchecked_into::<HtmlInputElement>().value();
+            EditableHeaderMsg::SetNewValue(value)
+        });
+
+        html! {
+            <div class={classes} onclick={ctx.link().callback(|_| EditableHeaderMsg::OnClick(()))}>
+                if let Some(icon) = ctx.props().icon_type { <TypeIcon ty={icon} /> }
+                <input
+                    ref={self.noderef.clone()}
+                    type="search"
+                    class="sidebar_header_title"
+                    disabled={!ctx.props().editable}
+                    {onblur}
+                    {onkeyup}
+                    value={self.value.clone()}
+                    placeholder={self.placeholder.clone()}
+                />
+            </div>
+        }
+    }
+}

package/src/rust/components/empty_row.rs

@@ -0,0 +1,169 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 derivative::Derivative;
+use perspective_client::clone;
+use wasm_bindgen::JsCast;
+use web_sys::*;
+use yew::prelude::*;
+
+use crate::components::style::LocalStyle;
+use crate::css;
+use crate::custom_elements::FilterDropDownElement;
+
+#[derive(Default)]
+pub struct EmptyRow {
+    input_ref: NodeRef,
+}
+
+#[derive(Properties, Derivative)]
+#[derivative(Debug)]
+pub struct EmptyRowProps {
+    #[derivative(Debug = "ignore")]
+    pub dropdown: Rc<FilterDropDownElement>,
+    pub exclude: HashSet<String>,
+    pub on_select: Callback<String>,
+    pub focused: bool,
+    pub index: usize,
+    pub set_focused_index: Callback<Option<usize>>,
+    pub value: String,
+    pub column_name: String,
+}
+
+impl PartialEq for EmptyRowProps {
+    fn eq(&self, _other: &Self) -> bool {
+        false
+    }
+}
+
+pub enum EmptyRowMsg {
+    KeyDown(u32),
+    Blur,
+    Input(String),
+    Focus,
+}
+
+use EmptyRowMsg::*;
+
+impl Component for EmptyRow {
+    type Message = EmptyRowMsg;
+    type Properties = EmptyRowProps;
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let onblur = ctx.link().callback(|_| Blur);
+        let oninput = ctx.link().callback(|e: InputEvent| {
+            let value = e
+                .target()
+                .unwrap()
+                .unchecked_into::<HtmlInputElement>()
+                .value();
+            Input(value)
+        });
+        let onkeydown = ctx
+            .link()
+            .callback(|event: KeyboardEvent| KeyDown(event.key_code()));
+
+        if ctx.props().focused {
+            // do this on the next render cycle so we know the ref is there
+            ctx.link()
+                .send_message_batch(vec![Focus, Input(ctx.props().value.clone())]);
+        }
+        let onfocus = {
+            clone!(ctx.props().value);
+            ctx.link().callback(move |_| Input(value.clone()))
+        };
+
+        html! {
+            <div class="pivot-column column-empty">
+                <LocalStyle href={css!("empty-column")} />
+                <input
+                    spellcheck="false"
+                    ref={self.input_ref.clone()}
+                    {onblur}
+                    {onkeydown}
+                    {oninput}
+                    {onfocus}
+                    class="column-empty-input"
+                />
+            </div>
+        }
+    }
+
+    fn changed(&mut self, _ctx: &Context<Self>, _old_props: &Self::Properties) -> bool {
+        if let Some(elem) = self.input_ref.cast::<HtmlInputElement>() {
+            elem.blur().unwrap();
+        }
+        false
+    }
+
+    fn destroy(&mut self, ctx: &Context<Self>) {
+        ctx.props().dropdown.hide().unwrap();
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        let p = ctx.props();
+        match msg {
+            Focus => {
+                if let Some(elem) = self.input_ref.cast::<HtmlInputElement>() {
+                    elem.set_value(&ctx.props().value);
+                    elem.focus().unwrap();
+                }
+
+                false
+            },
+            Blur => {
+                p.dropdown.hide().unwrap();
+                if let Some(elem) = self.input_ref.cast::<HtmlInputElement>() {
+                    elem.set_value("");
+                }
+                p.set_focused_index.emit(Some(p.index + 1));
+
+                false
+            },
+            KeyDown(40) => {
+                p.dropdown.item_down();
+                false
+            },
+            KeyDown(38) => {
+                p.dropdown.item_up();
+                false
+            },
+            KeyDown(13) => {
+                p.dropdown.item_select();
+                p.dropdown.hide().unwrap();
+                p.set_focused_index.emit(Some(p.index + 1));
+                true
+            },
+            KeyDown(_) => false,
+            Input(value) => {
+                if let Some(elem) = self.input_ref.cast::<HtmlElement>() {
+                    ctx.props().dropdown.autocomplete(
+                        (ctx.props().index, ctx.props().column_name.clone()),
+                        value,
+                        ctx.props().exclude.clone(),
+                        elem,
+                        ctx.props().on_select.clone(),
+                    );
+                }
+
+                false
+            },
+        }
+    }
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self::default()
+    }
+}

package/src/rust/components/error_message.rs

@@ -0,0 +1,56 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 perspective_client::clone;
+use yew::prelude::*;
+use yew::{Properties, function_component, html};
+
+use crate::components::style::LocalStyle;
+use crate::css;
+use crate::session::Session;
+use crate::utils::AddListener;
+
+#[derive(PartialEq, Properties)]
+pub struct ErrorMessageProps {
+    pub session: Session,
+}
+
+#[function_component(ErrorMessage)]
+pub fn error_message(p: &ErrorMessageProps) -> yew::Html {
+    let error = use_state(|| p.session.get_error());
+    use_effect_with(
+        (error.setter(), p.session.clone()),
+        |(set_error, session)| {
+            let sub = session.table_errored.add_listener({
+                clone!(set_error);
+                move |y| set_error.set(Some(y))
+            });
+
+            || drop(sub)
+        },
+    );
+
+    html! {
+        <>
+            <LocalStyle href={css!("render-warning")} />
+            <div
+                class="plugin_information plugin_information--warning"
+                id="plugin_information--size"
+            >
+                <span class="plugin_information__icon" />
+                <span class="plugin_information__text" id="plugin_information_count">
+                    if let Some(msg) = error.as_ref() { { msg } }
+                </span>
+            </div>
+        </>
+    }
+}