@perspective-dev/viewer 5.4.0 → 5.5.1

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

@@ -0,0 +1,267 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 serde_json::Value;
+use web_sys::{HtmlInputElement, InputEvent, MouseEvent};
+use yew::prelude::*;
+
+use super::primitive_field::emit;
+use crate::config::{ColumnConfigFieldUpdate, FontSize, FontToggle};
+use crate::ui::{OptionalField, Select, SelectItem};
+use crate::utils::{
+    LocalFontsAccess, font_family_options, local_fonts_access, on_local_fonts_changed,
+    probe_local_fonts_access, read_intl_string, request_local_fonts_access,
+};
+
+#[derive(Properties, PartialEq)]
+pub struct FontFieldProps {
+    pub field_key: String,
+    pub default: String,
+    pub current: Option<String>,
+
+    /// The size input's key, default and bounds, when the spec declares
+    /// one, and the stored value for that key.
+    #[prop_or_default]
+    pub size: Option<FontSize>,
+
+    #[prop_or_default]
+    pub size_current: Option<f64>,
+
+    /// The bold toggle's key and default, when the spec declares one, and
+    /// the stored value for that key.
+    #[prop_or_default]
+    pub bold: Option<FontToggle>,
+
+    #[prop_or_default]
+    pub bold_current: Option<bool>,
+
+    #[prop_or_default]
+    pub italic: Option<FontToggle>,
+
+    #[prop_or_default]
+    pub italic_current: Option<bool>,
+    pub on_change: Callback<ColumnConfigFieldUpdate>,
+}
+
+/// The `ControlSpec::Font` widget: a family `<select>`, the optional size
+/// input and bold / italic toggles, and a "Local Fonts" action while the
+/// `local-fonts` permission is promptable.
+#[function_component]
+pub fn FontField(props: &FontFieldProps) -> Html {
+    let force_update = use_force_update();
+    use_effect_with((), move |_| {
+        let sub = on_local_fonts_changed(Callback::from(move |()| force_update.force_update()));
+        probe_local_fonts_access();
+        move || drop(sub)
+    });
+
+    let selected = props
+        .current
+        .clone()
+        .unwrap_or_else(|| props.default.clone());
+
+    let toggle_state = |toggle: &Option<FontToggle>, current: Option<bool>| {
+        toggle
+            .as_ref()
+            .map(|t| (t.clone(), current.unwrap_or(t.default)))
+    };
+
+    let bold = toggle_state(&props.bold, props.bold_current);
+    let italic = toggle_state(&props.italic, props.italic_current);
+    let family_checked = selected != props.default;
+    let style_checked = props
+        .size
+        .as_ref()
+        .is_some_and(|s| props.size_current.is_some_and(|v| v != s.default))
+        || bold.as_ref().is_some_and(|(t, on)| *on != t.default)
+        || italic.as_ref().is_some_and(|(t, on)| *on != t.default);
+
+    let values: Rc<Vec<SelectItem<String>>> = Rc::new(
+        font_family_options(&selected)
+            .into_iter()
+            .map(SelectItem::Option)
+            .collect(),
+    );
+
+    let on_select = use_callback(
+        (
+            props.field_key.clone(),
+            props.default.clone(),
+            props.on_change.clone(),
+        ),
+        |value: String, (key, default, on_change)| {
+            if value == *default {
+                emit(on_change, key, None);
+            } else {
+                emit(on_change, key, Some(Value::String(value)));
+            }
+        },
+    );
+
+    let on_reset_style = use_callback(
+        (
+            props.size.clone(),
+            props.bold.clone(),
+            props.italic.clone(),
+            props.field_key.clone(),
+            props.on_change.clone(),
+        ),
+        |_: MouseEvent, (size, bold, italic, key, on_change)| {
+            let keys = [
+                size.as_ref().map(|s| s.key.clone()),
+                bold.as_ref().map(|t| t.key.clone()),
+                italic.as_ref().map(|t| t.key.clone()),
+                Some(key.clone()),
+            ]
+            .into_iter()
+            .flatten()
+            .collect();
+
+            on_change.emit(ColumnConfigFieldUpdate {
+                keys,
+                value: serde_json::Map::new(),
+            });
+        },
+    );
+
+    let size_input = props.size.as_ref().map(|size| {
+        let on_input = {
+            let on_change = props.on_change.clone();
+            let size = size.clone();
+            Callback::from(move |event: InputEvent| {
+                let value = event
+                    .target_unchecked_into::<HtmlInputElement>()
+                    .value_as_number();
+                let value = (value.is_finite() && value != size.default)
+                    .then(|| serde_json::Number::from_f64(value).map(Value::Number))
+                    .flatten();
+
+                emit(&on_change, &size.key, value);
+            })
+        };
+
+        html! {
+            <input
+                type="number"
+                class="parameter font-size"
+                id={format!("{}-input", size.key)}
+                min={size.min.map(|v| v.to_string())}
+                max={size.max.map(|v| v.to_string())}
+                step={size.step.map(|v| v.to_string())}
+                value={props.size_current.unwrap_or(size.default).to_string()}
+                oninput={on_input}
+            />
+        }
+    });
+
+    let toggle_button = |class: &'static str, state: &Option<(FontToggle, bool)>| {
+        let Some((toggle, on)) = state else {
+            return html! {};
+        };
+
+        let next = !*on;
+        let on_toggle = {
+            let on_change = props.on_change.clone();
+            let toggle = toggle.clone();
+            Callback::from(move |_: MouseEvent| {
+                let value = (next != toggle.default).then_some(Value::Bool(next));
+                emit(&on_change, &toggle.key, value);
+            })
+        };
+
+        html! {
+            <span
+                class={classes!("font-style-toggle", class)}
+                id={format!("{}-toggle", toggle.key)}
+                role="button"
+                aria-pressed={on.to_string()}
+                onclick={on_toggle}
+            />
+        }
+    };
+
+    let access = local_fonts_access();
+    let action_ref = use_node_ref();
+    use_effect_with((action_ref.clone(), access), |(action_ref, access)| {
+        let Some(elem) = action_ref.cast::<web_sys::Element>() else {
+            return;
+        };
+
+        let (slug, fallback) = match access {
+            Some(LocalFontsAccess::Denied) => (
+                "local-fonts-blocked-title",
+                "Access to local fonts is blocked for this site. Allow it in the browser's site \
+                 settings to list them here.",
+            ),
+            _ => (
+                "request-local-fonts-title",
+                "Allow access to the fonts installed on this device",
+            ),
+        };
+
+        let title = read_intl_string(&elem, slug).unwrap_or_else(|| fallback.to_owned());
+        let _ = elem.set_attribute("title", &title);
+    });
+
+    let local_fonts = match access {
+        Some(LocalFontsAccess::Prompt) => {
+            let on_request = Callback::from(|_: MouseEvent| request_local_fonts_access());
+            html! {
+                <div class="local-fonts-controls">
+                    <span
+                        ref={action_ref}
+                        class="local-fonts-request"
+                        id="request-local-fonts"
+                        onclick={on_request}
+                    />
+                </div>
+            }
+        },
+        Some(LocalFontsAccess::Denied) => html! {
+            <div class="local-fonts-controls">
+                <span
+                    ref={action_ref}
+                    class="local-fonts-request blocked"
+                    id="request-local-fonts"
+                />
+            </div>
+        },
+        _ => html! {},
+    };
+
+    html! {
+        <>
+            <div class="row">
+                { local_fonts }
+                <OptionalField
+                    label={props.field_key.clone()}
+                    on_check={on_reset_style}
+                    checked={family_checked || style_checked}
+                >
+                    <div class="font-group">
+                        <Select<String>
+                            wrapper_class="font-group-family"
+                            {values}
+                            {selected}
+                            {on_select}
+                        />
+                        { size_input }
+                        { toggle_button("bold", &bold) }
+                        { toggle_button("italic", &italic) }
+                    </div>
+                </OptionalField>
+            </div>
+        </>
+    }
+}

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

@@ -36,7 +36,7 @@ use crate::utils::{
     canonicalize_css_color, gradient_to_css, palette_name_for,
 };
 
-fn emit(on_change: &Callback<ColumnConfigFieldUpdate>, key: &str, value: Option<Value>) {
+pub(super) fn emit(on_change: &Callback<ColumnConfigFieldUpdate>, key: &str, value: Option<Value>) {
     let mut map = serde_json::Map::new();
     if let Some(v) = value {
         map.insert(key.to_owned(), v);

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,17 +24,18 @@ 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::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, CustomNumberFormatConfig, DatetimeColumnStyleConfig,
-    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};
@@ -270,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,
         } => {
@@ -341,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/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;
@@ -18,8 +19,10 @@ use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
 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(())
@@ -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))
+}