@perspective-dev/viewer 5.3.1 → 5.5.0

package/src/rust/components/column_settings_sidebar/style_tab.rs

@@ -11,6 +11,8 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 mod agg_depth_selector;
+pub(crate) mod alignment_field;
+pub(crate) mod font_field;
 pub(crate) mod primitive_field;
 mod symbol;
 
@@ -22,26 +24,26 @@ use perspective_client::config::ColumnType;
 use yew::{Callback, Html, Properties, function_component, html};
 
 use self::agg_depth_selector::*;
+use self::alignment_field::AlignmentField;
+use self::font_field::FontField;
 use self::primitive_field::{
     BoolField, ColorField, EnumField, GradientStopsField, NumberFieldPrimitive, PaletteField,
 };
 use crate::components::column_settings_sidebar::style_tab::symbol::SymbolStyle;
-use crate::components::containers::control_group::ControlGroup;
 use crate::components::datetime_column_style::DatetimeColumnStyle;
 use crate::components::number_series_style::NumberSeriesStyle;
-use crate::components::string_column_style::StringColumnStyle;
 use crate::components::style_controls::CustomNumberFormat;
 use crate::config::{
-    ColumnConfigFieldUpdate, ControlSpec, CssKind, CustomNumberFormatConfig,
-    DatetimeColumnStyleConfig, NamedValue, NumberFormatDefaults, NumberSeriesStyleConfig,
-    StringColumnStyleConfig,
+    Alignment, ColumnConfigFieldUpdate, ControlSpec, CustomNumberFormatConfig,
+    DatetimeColumnStyleConfig, FontToggle, NumberFormatDefaults, NumberSeriesStyleConfig,
 };
 use crate::presentation::Presentation;
 use crate::queries::{fetch_column_abs_max, get_column_config_schema, named_values};
 use crate::renderer::Renderer;
 use crate::session::Session;
 use crate::tasks::send_column_config;
-use crate::utils::PtrEqRc;
+use crate::ui::ControlGroup;
+use crate::utils::{CssKind, NamedValue, PtrEqRc};
 use crate::workspace::Workspace;
 
 #[derive(Clone, PartialEq, Properties)]
@@ -271,12 +273,6 @@ fn render_leaf(spec: ControlSpec, keys: &[String], ctx: &FieldRenderCtx) -> Opti
                 />
             }
         },
-        ControlSpec::StringFormat => {
-            let config: Option<StringColumnStyleConfig> = deser_sub(raw_config);
-            html! {
-                <StringColumnStyle {config} on_change={on_change.clone()} keys={keys.to_vec()} />
-            }
-        },
         ControlSpec::Symbols {
             default: default_config,
         } => {
@@ -342,6 +338,68 @@ fn render_leaf(spec: ControlSpec, keys: &[String], ctx: &FieldRenderCtx) -> Opti
                 />
             }
         },
+        ControlSpec::Font {
+            key,
+            default,
+            size,
+            bold,
+            italic,
+        } => {
+            let current = raw_config
+                .as_ref()
+                .and_then(|m| m.get(&key))
+                .and_then(|v| v.as_str().map(|s| s.to_string()));
+
+            let toggle = |t: &FontToggle| {
+                raw_config
+                    .as_ref()
+                    .and_then(|m| m.get(&t.key))
+                    .and_then(|v| v.as_bool())
+            };
+
+            let size_current = size
+                .as_ref()
+                .and_then(|s| raw_config.as_ref().and_then(|m| m.get(&s.key)))
+                .and_then(|v| v.as_f64());
+
+            let bold_current = bold.as_ref().and_then(toggle);
+            let italic_current = italic.as_ref().and_then(toggle);
+            html! {
+                <FontField
+                    field_key={key}
+                    {default}
+                    {current}
+                    {size}
+                    {size_current}
+                    {bold}
+                    {bold_current}
+                    {italic}
+                    {italic_current}
+                    on_change={on_change.clone()}
+                />
+            }
+        },
+        ControlSpec::Alignment {
+            key,
+            default,
+            corners,
+        } => {
+            let current = raw_config
+                .as_ref()
+                .and_then(|m| m.get(&key))
+                .and_then(|v| v.as_str())
+                .and_then(Alignment::parse);
+
+            html! {
+                <AlignmentField
+                    field_key={key}
+                    {default}
+                    {corners}
+                    {current}
+                    on_change={on_change.clone()}
+                />
+            }
+        },
         ControlSpec::Bool { key, default } => {
             let current = raw_config
                 .as_ref()

package/src/rust/components/column_settings_sidebar.rs

@@ -29,9 +29,7 @@ use crate::components::column_settings_sidebar::attributes_tab::AttributesTab;
 use crate::components::column_settings_sidebar::save_settings::SaveSettingsProps;
 use crate::components::column_settings_sidebar::style_tab::StyleTab;
 use crate::components::column_settings_sidebar::window_tab::{WindowTab, WindowTabProps};
-use crate::components::containers::sidebar::Sidebar;
-use crate::components::containers::tab_list::TabList;
-use crate::components::editable_header::EditableHeaderProps;
+use crate::components::editable_header::{EditableHeader, EditableHeaderProps};
 use crate::components::expression_editor::ExpressionEditorProps;
 use crate::components::type_icon::TypeIconType;
 use crate::components::window_editor::WindowEditorProps;
@@ -41,6 +39,7 @@ use crate::session::{Session, SessionMetadataRc};
 use crate::tasks::{
     delete_expr, delete_window, save_expr, save_window, update_expr, update_window,
 };
+use crate::ui::{Sidebar, TabList};
 use crate::utils::PtrEqRc;
 use crate::workspace::Workspace;
 
@@ -519,7 +518,7 @@ impl Component for ColumnSettingsPanel {
                     is_pinned={ctx.props().is_pinned}
                     on_toggle_pin={Some(ctx.props().on_toggle_pin.clone())}
                     selected_tab={selected_tab_idx}
-                    {header_props}
+                    header={html! { <EditableHeader ..header_props /> }}
                 >
                     <TabList<ColumnSettingsTab>
                         tabs={self.tabs.clone()}

package/src/rust/components/copy_dropdown.rs

@@ -14,9 +14,9 @@ use std::rc::Rc;
 
 use yew::prelude::*;
 
-use super::containers::dropdown_menu::*;
 use crate::config::*;
 use crate::renderer::*;
+use crate::ui::{DropDownMenu, DropDownMenuItem};
 
 type CopyDropDownMenuItem = DropDownMenuItem<ExportFile>;
 

package/src/rust/components/datetime_column_style/custom.rs

@@ -14,10 +14,8 @@ use std::rc::Rc;
 
 use yew::prelude::*;
 
-use crate::components::form::number_field::NumberField;
-use crate::components::form::select_value_field::SelectValueField;
-use crate::components::modal::{ModalLink, SetModalLink};
 use crate::config::*;
+use crate::ui::{ModalLink, NumberField, SelectValueField, SetModalLink};
 use crate::utils::WeakScope;
 
 #[derive(Properties)]

package/src/rust/components/datetime_column_style/simple.rs

@@ -12,9 +12,8 @@
 
 use yew::prelude::*;
 
-use crate::components::form::select_enum_field::SelectEnumField;
-use crate::components::modal::{ModalLink, SetModalLink};
 use crate::config::*;
+use crate::ui::{ModalLink, SelectEnumField, SetModalLink};
 use crate::utils::WeakScope;
 
 #[derive(Properties)]

package/src/rust/components/datetime_column_style.rs

@@ -22,11 +22,10 @@ use perspective_js::utils::global::navigator;
 use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
-use super::modal::{ModalLink, SetModalLink};
 use crate::components::datetime_column_style::custom::DatetimeStyleCustom;
 use crate::components::datetime_column_style::simple::DatetimeStyleSimple;
-use crate::components::form::select_value_field::SelectValueField;
 use crate::config::*;
+use crate::ui::{ModalLink, SelectValueField, SetModalLink};
 use crate::utils::WeakScope;
 
 /// Format-only widget for `datetime` columns. Renders the `date_format`

package/src/rust/components/{form/debug.rs → debug_panel.rs}

@@ -10,6 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+use std::cell::Cell;
 use std::rc::Rc;
 
 use perspective_client::ExprValidationError;
@@ -17,9 +18,11 @@ use perspective_js::utils::{ApiFuture, JsValueSerdeExt};
 use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
-use crate::components::form::code_editor::CodeEditor;
+use crate::components::code_editor::CodeEditor;
+use crate::config::*;
 use crate::js::{MimeType, copy_to_clipboard, paste_from_clipboard};
 use crate::presentation::*;
+use crate::queries::fetch_hosted_tables;
 use crate::renderer::*;
 use crate::session::*;
 use crate::utils::*;
@@ -44,12 +47,18 @@ pub struct DebugPanelProps {
     pub on_auto_width: Callback<f64>,
 }
 
+/// Whether the editor holds text the panel has not successfully applied, read
+/// synchronously by the config-change listeners so a failed apply's own
+/// `view_config_changed` never discards it.
+type Dirty = Rc<Cell<bool>>;
+
 #[function_component(DebugPanel)]
 pub fn debug_panel(props: &DebugPanelProps) -> Html {
     let expr = use_state_eq(|| Rc::new("".to_string()));
     let error = use_state_eq(|| Option::<ExprValidationError>::None);
     let select_all = use_memo((), |()| PubSub::default());
     let modified = use_state_eq(|| false);
+    let dirty: Dirty = use_memo((), |()| Cell::new(false));
 
     // Measure natural width on mount and route up to `SettingsPanel`.
     let sizer = use_node_ref();
@@ -64,7 +73,7 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
     });
 
     use_effect_with((expr.setter(), props.clone()), {
-        clone!(error, modified);
+        clone!(error, modified, dirty);
         move |(text, state)| {
             state.set_text(text.clone());
             error.set(None);
@@ -75,6 +84,7 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
                     text.clone(),
                     error.setter(),
                     modified.setter(),
+                    dirty.clone(),
                 ));
 
             let sub2 = state
@@ -84,6 +94,7 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
                     text.clone(),
                     error.setter(),
                     modified.setter(),
+                    dirty.clone(),
                 ));
 
             let sub3 = state
@@ -93,6 +104,7 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
                     text.clone(),
                     error.setter(),
                     modified.setter(),
+                    dirty.clone(),
                 ));
 
             || {
@@ -104,16 +116,17 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
     });
 
     let oninput = use_callback(expr.setter(), {
-        clone!(modified);
+        clone!(modified, dirty);
         move |x, expr| {
+            dirty.set(true);
             modified.set(true);
             expr.set(x)
         }
     });
 
     let onsave = use_callback((expr.clone(), error.clone(), props.clone()), {
-        clone!(modified);
-        move |_, (text, error, props)| props.on_save(text, error, &modified)
+        clone!(modified, dirty);
+        move |_, (text, error, props)| props.on_save(text, text.setter(), error, &modified, &dirty)
     });
 
     let oncopy = use_callback(
@@ -133,13 +146,14 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
     );
 
     let onapply = use_callback((expr.clone(), error.clone(), props.clone()), {
-        clone!(modified);
-        move |_, (text, error, props)| props.on_save(text, error, &modified)
+        clone!(modified, dirty);
+        move |_, (text, error, props)| props.on_save(text, text.setter(), error, &modified, &dirty)
     });
 
     let onreset = use_callback((expr.setter(), error.clone(), props.clone()), {
-        clone!(modified);
+        clone!(modified, dirty);
         move |_, (text, error, props)| {
+            dirty.set(false);
             props.set_text(text.clone());
             error.set(None);
             modified.set(false);
@@ -147,16 +161,17 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
     });
 
     let onpaste = use_callback((expr.clone(), error.clone(), props.clone()), {
-        clone!(modified);
+        clone!(modified, dirty);
         move |_, (text, error, props)| {
-            clone!(text, error, props, modified);
+            clone!(text, error, props, modified, dirty);
             ApiFuture::spawn(async move {
                 if let Some(x) = paste_from_clipboard().await {
                     let x = Rc::new(x);
+                    dirty.set(true);
                     modified.set(true);
                     error.set(None);
                     text.set(x.clone());
-                    props.on_save(&x, &error, &modified);
+                    props.on_save(&x, text.setter(), &error, &modified, &dirty);
                 }
 
                 Ok(())
@@ -169,10 +184,10 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
             <div id="debug-panel-overflow">
                 <div id="debug-panel" class="sidebar_column" ref={sizer}>
                     <div id="debug-panel-controls">
-                        <button disabled={!*modified} onclick={onapply}>{ "Apply" }</button>
-                        <button disabled={!*modified} onclick={onreset}>{ "Reset" }</button>
-                        <button onclick={oncopy}>{ "Copy" }</button>
-                        <button onclick={onpaste}>{ "Paste" }</button>
+                        <button id="debug-panel-apply" disabled={!*modified} onclick={onapply} />
+                        <button id="debug-panel-reset" disabled={!*modified} onclick={onreset} />
+                        <button id="debug-panel-copy" onclick={oncopy} />
+                        <button id="debug-panel-paste" onclick={onpaste} />
                     </div>
                     <div id="debug-panel-editor">
                         <CodeEditor
@@ -184,6 +199,9 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
                             select_all={select_all.subscriber()}
                             error={(*error).clone()}
                         />
+                        if let Some(err) = &*error {
+                            <div id="debug-panel-error" class="error">{ &err.error_message }</div>
+                        }
                     </div>
                     <div
                         class="scroll-panel-auto-width"
@@ -219,66 +237,105 @@ impl DebugPanelProps {
         text: UseStateSetter<Rc<String>>,
         error: UseStateSetter<Option<ExprValidationError>>,
         modified: UseStateSetter<bool>,
+        dirty: Dirty,
     ) -> impl Fn(()) + use<> {
         let props = self.clone();
         move |_| {
+            if dirty.get() {
+                return;
+            }
+
             error.set(None);
             props.set_text(text.clone());
             modified.set(false);
         }
     }
 
+    /// Validate and apply the editor's text as this panel's config, treating
+    /// an un-hosted `table` as a validation error rather than a pending bind.
     fn on_save(
         &self,
-        text: &Rc<String>,
+        source: &Rc<String>,
+        text: UseStateSetter<Rc<String>>,
         error: &UseStateHandle<Option<ExprValidationError>>,
         modified: &UseStateHandle<bool>,
+        dirty: &Dirty,
     ) {
         let props = self.clone();
-        clone!(text, error, modified);
+        clone!(source, error, modified, dirty);
         ApiFuture::spawn(async move {
-            match serde_json::from_str(&text) {
-                Ok(config) => {
-                    let active =
-                        props.workspace.active_renderer().as_ref() == Some(&props.renderer);
-                    match crate::tasks::restore_panel(
-                        &props.session,
-                        &props.renderer,
-                        &props.presentation,
-                        &props.workspace,
-                        crate::tasks::RestoreMode::Existing { active },
-                        config,
-                        crate::tasks::RestoreErrors::Suppress,
-                    )
-                    .await
-                    {
-                        Ok(_) => {
-                            modified.set(false);
-                        },
-                        Err(e) => {
-                            modified.set(true);
-                            error.set(Some(ExprValidationError {
-                                error_message: JsValue::from(e).as_string().unwrap_or_else(|| {
-                                    "Failed to validate viewer config".to_owned()
-                                }),
-                                line: 0_u32,
-                                column: 0,
-                            }));
-                        },
-                    }
-                    Ok(())
-                },
+            let fail = |message: String, (line, column): (u32, u32)| {
+                dirty.set(true);
+                modified.set(true);
+                error.set(Some(ExprValidationError {
+                    error_message: message,
+                    line,
+                    column,
+                }));
+            };
+
+            let config: ViewerConfigUpdate = match serde_json::from_str(&source) {
+                Ok(config) => config,
                 Err(err) => {
-                    modified.set(true);
-                    error.set(Some(ExprValidationError {
-                        error_message: err.to_string(),
-                        line: err.line() as u32 - 1,
-                        column: err.column() as u32 - 1,
-                    }));
+                    let position = (err.line() as u32 - 1, err.column() as u32 - 1);
+                    fail(err.to_string(), position);
+                    return Ok(());
+                },
+            };
+
+            if let OptionalUpdate::Update(name) = &config.table {
+                let hosted = fetch_hosted_tables(&props.workspace).await;
+                if !hosted
+                    .iter()
+                    .any(|(_, names)| names.iter().any(|n| n == name))
+                {
+                    fail(
+                        format!("Unknown table \"{name}\""),
+                        locate_key(&source, "table"),
+                    );
+
+                    return Ok(());
+                }
+            }
+
+            let active = props.workspace.active_renderer().as_ref() == Some(&props.renderer);
+            let result = crate::tasks::restore_panel(
+                &props.session,
+                &props.renderer,
+                &props.presentation,
+                &props.workspace,
+                crate::tasks::RestoreMode::Existing { active },
+                config,
+                crate::tasks::RestoreErrors::Suppress,
+                MissingTable::Error,
+            )
+            .await;
 
-                    Ok(())
+            match result {
+                Ok(_) => {
+                    dirty.set(false);
+                    error.set(None);
+                    modified.set(false);
+                    props.set_text(text);
                 },
+                Err(e) => fail(format!("{e}"), (0, 0)),
             }
+
+            Ok(())
         });
     }
 }
+
+/// The 0-based `(line, column)` of the first `"key"` in `text`, or `(0, 0)`
+/// when absent.
+fn locate_key(text: &str, key: &str) -> (u32, u32) {
+    let needle = format!("\"{key}\"");
+    text.lines()
+        .enumerate()
+        .find_map(|(line, content)| {
+            content
+                .find(&needle)
+                .map(|column| (line as u32, column as u32))
+        })
+        .unwrap_or((0, 0))
+}

package/src/rust/components/{containers/dragdrop_list.rs → dragdrop_list.rs}

@@ -23,6 +23,7 @@ use crate::components::column_dropdown::ColumnDropDownElement;
 use crate::components::column_selector::{EmptyColumn, InPlaceColumn, InvalidColumn};
 use crate::components::type_icon::TypeIcon;
 use crate::presentation::{DragDropContainer, Presentation};
+use crate::ui::intl_slug;
 use crate::utils::DragTarget;
 
 #[derive(Properties, Derivative)]
@@ -405,16 +406,7 @@ where
         // here while the var VALUE stays in the stylesheets - custom
         // properties inherit, so the label's `:before` picks it up.
         let role_style = ctx.props().role_label.as_ref().map(|role| {
-            let slug = role
-                .chars()
-                .map(|x| {
-                    if x.is_ascii_alphanumeric() {
-                        x.to_ascii_lowercase()
-                    } else {
-                        '-'
-                    }
-                })
-                .collect::<String>();
+            let slug = intl_slug(role);
 
             // The second var is a PRESENCE FLAG: CSS cannot ask whether a
             // custom property is set, so the slot's stylesheet reads it as

package/src/rust/components/export_dropdown.rs

@@ -14,10 +14,10 @@ use std::rc::Rc;
 
 use yew::prelude::*;
 
-use super::containers::dropdown_menu::*;
 use crate::config::*;
 use crate::renderer::*;
 use crate::session::Session;
+use crate::ui::{DropDownMenu, DropDownMenuItem};
 
 pub type ExportDropDownMenuItem = DropDownMenuItem<ExportFile>;
 

package/src/rust/components/expression_editor.rs

@@ -15,7 +15,7 @@ use std::rc::Rc;
 use perspective_client::{ExprValidationError, clone};
 use yew::prelude::*;
 
-use super::form::code_editor::*;
+use super::code_editor::CodeEditor;
 use crate::session::{Session, SessionMetadataRc};
 use crate::tasks::{ExprValidation, validate_expression};
 

package/src/rust/components/filter_dropdown.rs

@@ -19,9 +19,9 @@ use web_sys::*;
 use yew::html::ImplicitClone;
 use yew::prelude::*;
 
-use super::portal::PortalModal;
 use super::style::StyleSurface;
 use crate::session::Session;
+use crate::ui::PortalModal;
 use crate::utils::*;
 use crate::*;
 
@@ -219,7 +219,7 @@ impl Component for FilterDropDownPortal {
             html! {
                 <PortalModal
                     tag_name="perspective-dropdown"
-                    surface={StyleSurface::FilterDropdown}
+                    sheet={StyleSurface::FilterDropdown.sheet()}
                     {target}
                     own_focus=false
                     {on_close}

package/src/rust/components/function_dropdown.rs

@@ -19,8 +19,8 @@ use web_sys::*;
 use yew::html::ImplicitClone;
 use yew::prelude::*;
 
-use super::portal::PortalModal;
 use super::style::StyleSurface;
+use crate::ui::PortalModal;
 use crate::utils::*;
 
 #[derive(Default)]
@@ -157,7 +157,7 @@ impl Component for FunctionDropDownPortal {
             html! {
                 <PortalModal
                     tag_name="perspective-dropdown"
-                    surface={StyleSurface::FunctionDropdown}
+                    sheet={StyleSurface::FunctionDropdown.sheet()}
                     {target}
                     own_focus=false
                     {on_close}