@perspective-dev/viewer 4.2.0 → 4.4.0

package/src/rust/components/function_dropdown.rs

@@ -10,142 +10,215 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use perspective_client::config::CompletionItemSuggestion;
+use std::cell::RefCell;
+use std::rc::Rc;
+
+use perspective_client::config::{COMPLETIONS, CompletionItemSuggestion};
+use perspective_js::utils::ApiResult;
 use web_sys::*;
+use yew::html::ImplicitClone;
 use yew::prelude::*;
 
-use super::modal::*;
-use crate::utils::WeakScope;
+use super::portal::PortalModal;
+use crate::utils::*;
 
 static CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/css/function-dropdown.css"));
 
-#[derive(Properties, PartialEq)]
-pub struct FunctionDropDownProps {
-    #[prop_or_default]
-    pub weak_link: WeakScope<FunctionDropDown>,
+#[derive(Default)]
+struct FunctionDropDownState {
+    values: Vec<CompletionItemSuggestion>,
+    selected: usize,
+    on_select: Option<Callback<CompletionItemSuggestion>>,
+    target: Option<HtmlElement>,
 }
 
-impl ModalLink<FunctionDropDown> for FunctionDropDownProps {
-    fn weak_link(&self) -> &'_ WeakScope<FunctionDropDown> {
-        &self.weak_link
-    }
+#[derive(Clone, Default)]
+pub struct FunctionDropDownElement {
+    state: Rc<RefCell<FunctionDropDownState>>,
+    notify: Rc<PubSub<()>>,
 }
 
-pub enum FunctionDropDownMsg {
-    SetValues(Vec<CompletionItemSuggestion>),
-    SetCallback(Callback<CompletionItemSuggestion>),
-    ItemDown,
-    ItemUp,
-    ItemSelect,
+impl PartialEq for FunctionDropDownElement {
+    fn eq(&self, other: &Self) -> bool {
+        Rc::ptr_eq(&self.state, &other.state)
+    }
 }
 
-pub struct FunctionDropDown {
-    values: Option<Vec<CompletionItemSuggestion>>,
-    selected: usize,
-    on_select: Option<Callback<CompletionItemSuggestion>>,
-}
+impl ImplicitClone for FunctionDropDownElement {}
 
-impl Component for FunctionDropDown {
-    type Message = FunctionDropDownMsg;
-    type Properties = FunctionDropDownProps;
+impl FunctionDropDownElement {
+    pub fn reautocomplete(&self) {
+        self.notify.emit(());
+    }
 
-    fn create(ctx: &Context<Self>) -> Self {
-        ctx.set_modal_link();
-        Self {
-            values: Some(vec![]),
-            selected: 0,
-            on_select: None,
+    pub fn autocomplete(
+        &self,
+        input: String,
+        target: HtmlElement,
+        callback: Callback<CompletionItemSuggestion>,
+    ) -> ApiResult<()> {
+        let values = filter_values(&input);
+        if values.is_empty() {
+            self.hide()?;
+        } else {
+            let mut s = self.state.borrow_mut();
+            s.values = values;
+            s.selected = 0;
+            s.on_select = Some(callback);
+            s.target = Some(target);
+            drop(s);
+            self.notify.emit(());
         }
+
+        Ok(())
     }
 
-    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
-        match msg {
-            FunctionDropDownMsg::SetCallback(callback) => {
-                self.on_select = Some(callback);
-                false
-            },
-            FunctionDropDownMsg::SetValues(values) => {
-                self.values = Some(values);
-                self.selected = 0;
-                true
-            },
-            FunctionDropDownMsg::ItemSelect => {
-                if let Some(ref values) = self.values {
-                    match values.get(self.selected) {
-                        None => {
-                            console::error_1(&"Selected out-of-bounds".into());
-                            false
-                        },
-                        Some(x) => {
-                            self.on_select.as_ref().unwrap().emit(*x);
-                            false
-                        },
-                    }
-                } else {
-                    console::error_1(&"No Values".into());
-                    false
-                }
-            },
-            FunctionDropDownMsg::ItemDown => {
-                self.selected += 1;
-                if let Some(ref values) = self.values
-                    && self.selected >= values.len()
-                {
-                    self.selected = 0;
-                };
-
-                true
-            },
-            FunctionDropDownMsg::ItemUp => {
-                if let Some(ref values) = self.values
-                    && self.selected < 1
-                {
-                    self.selected = values.len();
-                }
-
-                self.selected -= 1;
-                true
-            },
+    pub fn item_select(&self) {
+        let state = self.state.borrow();
+        if let Some(value) = state.values.get(state.selected)
+            && let Some(ref cb) = state.on_select
+        {
+            cb.emit(*value);
         }
     }
 
-    fn changed(&mut self, _ctx: &Context<Self>, _old: &Self::Properties) -> bool {
-        false
+    pub fn item_down(&self) {
+        let mut state = self.state.borrow_mut();
+        state.selected += 1;
+        if state.selected >= state.values.len() {
+            state.selected = 0;
+        }
+
+        drop(state);
+        self.notify.emit(());
     }
 
-    fn view(&self, _ctx: &Context<Self>) -> Html {
-        let body = html! {
-            if let Some(ref values) = self.values {
-                if !values.is_empty() {
-                    { for values
-                            .iter()
-                            .enumerate()
-                            .map(|(idx, value)| {
-                                let click = self.on_select.as_ref().unwrap().reform({
-                                    let value = *value;
-                                    move |_: MouseEvent| value
-                                });
-
-                                html! {
-                                    if idx == self.selected {
-                                        <div onmousedown={ click } class="selected">
-                                            <span style="font-weight:500">{ value.label }</span>
-                                            <br/>
-                                            <span style="padding-left:12px">{ value.documentation }</span>
-                                        </div>
-                                    } else {
-                                        <div onmousedown={ click }>
-                                            <span style="font-weight:500">{ value.label }</span>
-                                            <br/>
-                                            <span style="padding-left:12px">{ value.documentation }</span>
-                                        </div>
-                                    }
-                                }
-                            }) }
-                }
-            }
+    pub fn item_up(&self) {
+        let mut state = self.state.borrow_mut();
+        if state.selected < 1 {
+            state.selected = state.values.len();
+        }
+
+        state.selected -= 1;
+        drop(state);
+        self.notify.emit(());
+    }
+
+    pub fn hide(&self) -> ApiResult<()> {
+        self.state.borrow_mut().target = None;
+        self.notify.emit(());
+        Ok(())
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct FunctionDropDownPortalProps {
+    pub element: FunctionDropDownElement,
+    pub theme: String,
+}
+
+pub struct FunctionDropDownPortal {
+    _sub: Subscription,
+}
+
+impl Component for FunctionDropDownPortal {
+    type Message = ();
+    type Properties = FunctionDropDownPortalProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        let link = ctx.link().clone();
+        let sub = ctx
+            .props()
+            .element
+            .notify
+            .add_listener(move |()| link.send_message(()));
+        Self { _sub: sub }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, _msg: ()) -> bool {
+        true
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let state = ctx.props().element.state.borrow();
+        let target = state.target.clone();
+        let on_close = {
+            let element = ctx.props().element.clone();
+            Callback::from(move |()| {
+                let _ = element.hide();
+            })
         };
 
-        html! { <><style>{ CSS }</style>{ body }</> }
+        if target.is_some() {
+            let values = state.values.clone();
+            let selected = state.selected;
+            let on_select = state.on_select.clone();
+            drop(state);
+
+            html! {
+                <PortalModal
+                    tag_name="perspective-dropdown"
+                    {target}
+                    own_focus=false
+                    {on_close}
+                    theme={ctx.props().theme.clone()}
+                >
+                    <FunctionDropDownView {values} {selected} {on_select} />
+                </PortalModal>
+            }
+        } else {
+            html! {}
+        }
     }
 }
+
+#[derive(Properties, PartialEq)]
+struct FunctionDropDownViewProps {
+    values: Vec<CompletionItemSuggestion>,
+    selected: usize,
+    on_select: Option<Callback<CompletionItemSuggestion>>,
+}
+
+#[function_component]
+fn FunctionDropDownView(props: &FunctionDropDownViewProps) -> Html {
+    let body = html! {
+        if !props.values.is_empty() {
+            { for props.values
+                    .iter()
+                    .enumerate()
+                    .map(|(idx, value)| {
+                        let click = props.on_select.as_ref().unwrap().reform({
+                            let value = *value;
+                            move |_: MouseEvent| value
+                        });
+
+                        html! {
+                            if idx == props.selected {
+                                <div onmousedown={click} class="selected">
+                                    <span style="font-weight:500">{ value.label }</span>
+                                    <br/>
+                                    <span style="padding-left:12px">{ value.documentation }</span>
+                                </div>
+                            } else {
+                                <div onmousedown={click}>
+                                    <span style="font-weight:500">{ value.label }</span>
+                                    <br/>
+                                    <span style="padding-left:12px">{ value.documentation }</span>
+                                </div>
+                            }
+                        }
+                    }) }
+        }
+    };
+
+    html! { <><style>{ CSS }</style>{ body }</> }
+}
+
+fn filter_values(input: &str) -> Vec<CompletionItemSuggestion> {
+    let input = input.to_lowercase();
+    COMPLETIONS
+        .iter()
+        .filter(|x| x.label.to_lowercase().starts_with(&input))
+        .cloned()
+        .collect::<Vec<_>>()
+}

package/src/rust/components/main_panel.rs

@@ -10,24 +10,48 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use futures::channel::oneshot::*;
 use perspective_js::utils::*;
 use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
 use super::render_warning::RenderWarning;
 use super::status_bar::StatusBar;
-use crate::PerspectiveProperties;
 use crate::custom_events::CustomEvents;
 use crate::presentation::Presentation;
+use crate::renderer::limits::RenderLimits;
 use crate::renderer::*;
-use crate::session::*;
+use crate::session::{Session, TableErrorState, TableLoadState, ViewStats};
 use crate::utils::*;
 
-#[derive(Clone, Properties, PerspectiveProperties!)]
+#[derive(Clone, Properties)]
 pub struct MainPanelProps {
     pub on_settings: Callback<()>,
 
+    /// Reset callback forwarded from the root component.  Fired when the user
+    /// clicks the reset button; `bool` is `true` for a full reset (expressions
+    /// + column configs), `false` for config-only.
+    pub on_reset: Callback<bool>,
+
+    /// Render-limit dimensions forwarded from the root's `RendererProps`.
+    /// `Some` when the active plugin is capping the rendered row/column count;
+    /// `None` when no limits are active (e.g. after a plugin change).
+    pub render_limits: Option<RenderLimits>,
+
+    /// Value props from root's `SessionProps`, threaded to `StatusBar` /
+    /// `StatusIndicator`.
+    pub has_table: Option<TableLoadState>,
+    pub is_errored: bool,
+    pub stats: Option<ViewStats>,
+    pub update_count: u32,
+    pub error: Option<TableErrorState>,
+    pub title: Option<String>,
+
+    /// Value props from root's `PresentationProps`, threaded to `StatusBar`.
+    pub is_settings_open: bool,
+    pub selected_theme: Option<String>,
+    pub available_themes: PtrEqRc<Vec<String>>,
+    pub is_workspace: bool,
+
     /// State
     pub custom_events: CustomEvents,
     pub session: Session,
@@ -36,28 +60,33 @@ pub struct MainPanelProps {
 }
 
 impl PartialEq for MainPanelProps {
-    fn eq(&self, _rhs: &Self) -> bool {
-        false
+    fn eq(&self, rhs: &Self) -> bool {
+        self.has_table == rhs.has_table
+            && self.is_errored == rhs.is_errored
+            && self.stats == rhs.stats
+            && self.update_count == rhs.update_count
+            && self.error == rhs.error
+            && self.title == rhs.title
+            && self.is_settings_open == rhs.is_settings_open
+            && self.selected_theme == rhs.selected_theme
+            && self.available_themes == rhs.available_themes
+            && self.is_workspace == rhs.is_workspace
+            && self.render_limits == rhs.render_limits
     }
 }
 
 impl MainPanelProps {
     fn is_title(&self) -> bool {
-        self.session.get_title().is_some()
+        self.title.is_some()
     }
 }
 
 #[derive(Debug)]
 pub enum MainPanelMsg {
-    Reset(bool, Option<Sender<()>>),
-    RenderLimits(Option<(usize, usize, Option<usize>, Option<usize>)>),
     PointerEvent(web_sys::PointerEvent),
-    Error,
 }
 
 pub struct MainPanel {
-    _subscriptions: [Subscription; 2],
-    dimensions: Option<(usize, usize, Option<usize>, Option<usize>)>,
     main_panel_ref: NodeRef,
 }
 
@@ -65,85 +94,14 @@ impl Component for MainPanel {
     type Message = MainPanelMsg;
     type Properties = MainPanelProps;
 
-    fn create(ctx: &Context<Self>) -> Self {
-        let session_sub = {
-            let callback = ctx.link().callback(move |(_, render_limits)| {
-                MainPanelMsg::RenderLimits(Some(render_limits))
-            });
-
-            ctx.props()
-                .renderer
-                .render_limits_changed
-                .add_listener(callback)
-        };
-
-        let error_sub = ctx
-            .props()
-            .session
-            .table_errored
-            .add_listener(ctx.link().callback(|_| MainPanelMsg::Error));
-
+    fn create(_ctx: &Context<Self>) -> Self {
         Self {
-            _subscriptions: [session_sub, error_sub],
-            dimensions: None,
             main_panel_ref: NodeRef::default(),
         }
     }
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            MainPanelMsg::Error => true,
-            MainPanelMsg::Reset(all, sender) => {
-                ctx.props().presentation.set_open_column_settings(None);
-
-                clone!(
-                    ctx.props().renderer,
-                    ctx.props().session,
-                    ctx.props().presentation
-                );
-
-                ApiFuture::spawn(async move {
-                    session
-                        .reset(ResetOptions {
-                            config: true,
-                            expressions: all,
-                            ..ResetOptions::default()
-                        })
-                        .await?;
-                    let columns_config = if all {
-                        presentation.reset_columns_configs();
-                        None
-                    } else {
-                        Some(presentation.all_columns_configs())
-                    };
-
-                    renderer.reset(columns_config.as_ref()).await?;
-                    presentation.reset_available_themes(None).await;
-                    if all {
-                        presentation.reset_theme().await?;
-                    }
-
-                    let result = renderer.draw(session.validate().await?.create_view()).await;
-                    if let Some(sender) = sender {
-                        sender.send(()).unwrap();
-                    }
-
-                    renderer.reset_changed.emit(());
-                    result
-                });
-
-                false
-            },
-
-            MainPanelMsg::RenderLimits(dimensions) => {
-                if self.dimensions != dimensions {
-                    self.dimensions = dimensions;
-                    true
-                } else {
-                    false
-                }
-            },
-
             MainPanelMsg::PointerEvent(event) => {
                 if event.target().map(JsValue::from)
                     == self
@@ -175,8 +133,8 @@ impl Component for MainPanel {
             ..
         } = ctx.props();
 
-        let is_settings_open =
-            ctx.props().presentation.is_settings_open() && ctx.props().session.has_table();
+        let is_settings_open = ctx.props().is_settings_open
+            && matches!(ctx.props().has_table, Some(TableLoadState::Loaded));
 
         let on_settings = (!is_settings_open).then(|| ctx.props().on_settings.clone());
 
@@ -189,14 +147,35 @@ impl Component for MainPanel {
             class.push("titled");
         }
 
-        let on_reset = ctx.link().callback(|all| MainPanelMsg::Reset(all, None));
         let pointerdown = ctx.link().callback(MainPanelMsg::PointerEvent);
+        let on_dismiss_warning = {
+            clone!(renderer, session);
+            Callback::from(move |_: ()| {
+                clone!(renderer, session);
+                ApiFuture::spawn(async move {
+                    renderer.disable_active_plugin_render_warning();
+                    let view_task = session.get_view();
+                    renderer.update(view_task).await
+                });
+            })
+        };
+
         html! {
             <div id="main_column">
                 <StatusBar
                     id="status_bar"
                     {on_settings}
-                    on_reset={on_reset.clone()}
+                    on_reset={ctx.props().on_reset.clone()}
+                    has_table={ctx.props().has_table.clone()}
+                    is_errored={ctx.props().is_errored}
+                    stats={ctx.props().stats.clone()}
+                    update_count={ctx.props().update_count}
+                    error={ctx.props().error.clone()}
+                    title={ctx.props().title.clone()}
+                    is_settings_open={ctx.props().is_settings_open}
+                    selected_theme={ctx.props().selected_theme.clone()}
+                    available_themes={ctx.props().available_themes.clone()}
+                    is_workspace={ctx.props().is_workspace}
                     {custom_events}
                     {presentation}
                     {renderer}
@@ -208,7 +187,10 @@ impl Component for MainPanel {
                     {class}
                     onpointerdown={pointerdown}
                 >
-                    <RenderWarning {renderer} {session} dimensions={self.dimensions} />
+                    <RenderWarning
+                        on_dismiss={on_dismiss_warning}
+                        dimensions={ctx.props().render_limits}
+                    />
                     <slot />
                 </div>
             </div>

package/src/rust/components/mod.rs

@@ -22,7 +22,6 @@ pub mod copy_dropdown;
 pub mod datetime_column_style;
 pub mod editable_header;
 pub mod empty_row;
-pub mod error_message;
 pub mod export_dropdown;
 pub mod expression_editor;
 pub mod filter_dropdown;
@@ -33,6 +32,7 @@ pub mod main_panel;
 pub mod modal;
 pub mod number_column_style;
 pub mod plugin_selector;
+pub mod portal;
 pub mod render_warning;
 pub mod settings_panel;
 pub mod status_bar;

package/src/rust/components/modal.rs

@@ -78,7 +78,7 @@ where
             } => {
                 let opacity = if visible { "" } else { ";opacity:0" };
                 self.css = format!(":host{{top:{top}px;left:{left}px{opacity}}}");
-                self.rev_vert.0.set(rev_vert);
+                self.rev_vert.set(rev_vert);
                 true
             },
             ModalMsg::SubMsg(msg) => {
@@ -117,6 +117,12 @@ pub struct ModalOrientation(Rc<Cell<bool>>);
 
 impl ImplicitClone for ModalOrientation {}
 
+impl ModalOrientation {
+    pub fn set(&self, value: bool) {
+        self.0.set(value);
+    }
+}
+
 impl From<ModalOrientation> for bool {
     fn from(x: ModalOrientation) -> Self {
         x.0.get()

package/src/rust/components/number_column_style.rs

@@ -10,6 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+use perspective_client::config::Scalar;
 use yew::prelude::*;
 use yew::*;
 
@@ -65,8 +66,25 @@ impl ModalLink<NumberColumnStyle> for NumberColumnStyleProps {
 }
 
 impl PartialEq for NumberColumnStyleProps {
-    fn eq(&self, _other: &Self) -> bool {
-        false
+    fn eq(&self, other: &Self) -> bool {
+        self.config == other.config
+            && self.default_config == other.default_config
+            && self.column_name == other.column_name
+    }
+}
+
+fn scalar_to_f64(scalar: &Scalar) -> f64 {
+    match scalar {
+        Scalar::Float(x) => *x,
+        Scalar::String(x) => x.parse::<f64>().unwrap_or_default(),
+        Scalar::Bool(x) => {
+            if *x {
+                1.0
+            } else {
+                0.0
+            }
+        },
+        Scalar::Null => 0.0,
     }
 }
 
@@ -76,12 +94,9 @@ fn set_default_gradient(session: &Session, ctx: &Context<NumberColumnStyle>) {
         ctx.link().send_future(async move {
             let view = session.get_view().unwrap();
             let min_max = view.get_min_max(column_name).await.unwrap();
-            let abs_max = min_max
-                .0
-                .parse::<f64>()
-                .unwrap_or_default()
+            let abs_max = scalar_to_f64(&min_max.0)
                 .abs()
-                .max(min_max.1.parse::<f64>().unwrap_or_default().abs());
+                .max(scalar_to_f64(&min_max.1).abs());
 
             let gradient = (abs_max * 100.).round() / 100.;
             NumberColumnStyleMsg::DefaultGradientChanged(gradient)