@perspective-dev/viewer 4.2.0 → 4.4.0

package/src/rust/components/filter_dropdown.rs

@@ -10,135 +10,279 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+use std::cell::RefCell;
+use std::collections::HashSet;
+use std::rc::Rc;
+
+use perspective_client::clone;
 use web_sys::*;
+use yew::html::ImplicitClone;
 use yew::prelude::*;
 
-use super::modal::*;
-use crate::utils::WeakScope;
+use super::portal::PortalModal;
+use crate::session::Session;
+use crate::utils::*;
+use crate::*;
 
 static CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/css/filter-dropdown.css"));
 
-#[derive(Properties, PartialEq)]
-pub struct FilterDropDownProps {
-    #[prop_or_default]
-    pub weak_link: WeakScope<FilterDropDown>,
-}
-
-impl ModalLink<FilterDropDown> for FilterDropDownProps {
-    fn weak_link(&self) -> &'_ WeakScope<FilterDropDown> {
-        &self.weak_link
-    }
+#[derive(Default)]
+struct FilterDropDownState {
+    values: Vec<String>,
+    selected: usize,
+    on_select: Option<Callback<String>>,
+    target: Option<HtmlElement>,
 }
 
-pub enum FilterDropDownMsg {
-    SetValues(Vec<String>),
-    SetCallback(Callback<String>),
-    ItemDown,
-    ItemUp,
-    ItemSelect,
+#[derive(Clone)]
+pub struct FilterDropDownElement {
+    state: Rc<RefCell<FilterDropDownState>>,
+    session: Session,
+    column: Rc<RefCell<Option<(usize, String)>>>,
+    all_values: Rc<RefCell<Option<Vec<String>>>>,
+    notify: Rc<PubSub<()>>,
 }
 
-pub struct FilterDropDown {
-    values: Option<Vec<String>>,
-    selected: usize,
-    on_select: Option<Callback<String>>,
+impl PartialEq for FilterDropDownElement {
+    fn eq(&self, other: &Self) -> bool {
+        Rc::ptr_eq(&self.state, &other.state)
+    }
 }
 
-impl Component for FilterDropDown {
-    type Message = FilterDropDownMsg;
-    type Properties = FilterDropDownProps;
+impl ImplicitClone for FilterDropDownElement {}
 
-    fn create(ctx: &Context<Self>) -> Self {
-        ctx.set_modal_link();
+impl FilterDropDownElement {
+    pub fn new(session: Session) -> Self {
         Self {
-            values: Some(vec![]),
-            selected: 0,
-            on_select: None,
+            state: Default::default(),
+            session,
+            column: Default::default(),
+            all_values: Default::default(),
+            notify: Rc::default(),
         }
     }
 
-    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
-        match msg {
-            FilterDropDownMsg::SetCallback(callback) => {
-                self.on_select = Some(callback);
-                false
-            },
-            FilterDropDownMsg::SetValues(values) => {
-                self.values = Some(values);
-                self.selected = 0;
-                true
-            },
-            FilterDropDownMsg::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.clone());
-                            false
-                        },
-                    }
+    pub fn reautocomplete(&self) {
+        // Re-open portal with current target
+        self.notify.emit(());
+    }
+
+    pub fn autocomplete(
+        &self,
+        column: (usize, String),
+        input: String,
+        exclude: HashSet<String>,
+        target: HtmlElement,
+        callback: Callback<String>,
+    ) {
+        let current_column = self.column.borrow().clone();
+        match current_column {
+            Some(filter_col) if filter_col == column => {
+                let values = filter_values(&input, &self.all_values, &exclude);
+                if values.len() == 1 && values[0] == input {
+                    let _ = self.hide();
                 } else {
-                    console::error_1(&"No Values".into());
-                    false
+                    let mut s = self.state.borrow_mut();
+                    s.values = values;
+                    s.selected = 0;
+                    s.on_select = Some(callback);
+                    if s.target.is_none() {
+                        s.target = Some(target);
+                    }
+
+                    drop(s);
+                    self.notify.emit(());
                 }
             },
-            FilterDropDownMsg::ItemDown => {
-                self.selected += 1;
-                if let Some(ref values) = self.values
-                    && self.selected >= values.len()
-                {
-                    self.selected = 0;
-                };
-
-                true
-            },
-            FilterDropDownMsg::ItemUp => {
-                if let Some(ref values) = self.values
-                    && self.selected < 1
-                {
-                    self.selected = values.len();
-                };
-
-                self.selected -= 1;
-                true
+            _ => {
+                clone!(
+                    self.state,
+                    self.session,
+                    self.all_values,
+                    self.notify,
+                    old_column = self.column
+                );
+                ApiFuture::spawn(async move {
+                    let fetched = session.get_column_values(column.1.clone()).await?;
+                    *all_values.borrow_mut() = Some(fetched);
+                    let values = filter_values(&input, &all_values, &exclude);
+                    let should_hide = values.len() == 1 && values[0] == input;
+
+                    *old_column.borrow_mut() = Some(column);
+                    {
+                        let mut s = state.borrow_mut();
+                        s.on_select = Some(callback);
+                        if should_hide {
+                            let fv = self::filter_values("", &all_values, &exclude);
+                            s.values = fv;
+                            s.target = Some(target);
+                        } else {
+                            s.values = values;
+                            s.target = Some(target);
+                        }
+                        s.selected = 0;
+                    }
+                    if should_hide {
+                        state.borrow_mut().target = None;
+                    }
+
+                    notify.emit(());
+                    Ok(())
+                });
             },
         }
     }
 
-    fn changed(&mut self, _ctx: &Context<Self>, _old: &Self::Properties) -> bool {
-        false
+    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.clone());
+        }
     }
 
-    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.clone();
-                                    move |_: MouseEvent| value.clone()
-                                });
-
-                                html! {
-                                    if idx == self.selected {
-                                        <span onmousedown={ click } class="selected">{ value }</span>
-                                    } else {
-                                        <span onmousedown={ click }>{ value }</span>
-                                    }
-                                }
-                            }) }
-                } else {
-                    <span class="no-results">{ "No Completions" }</span>
-                }
-            }
+    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(());
+    }
+
+    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.column.borrow_mut().take();
+        self.notify.emit(());
+        Ok(())
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct FilterDropDownPortalProps {
+    pub element: FilterDropDownElement,
+    pub theme: String,
+}
+
+pub struct FilterDropDownPortal {
+    _sub: Subscription,
+}
+
+impl Component for FilterDropDownPortal {
+    type Message = ();
+    type Properties = FilterDropDownPortalProps;
+
+    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()}
+                >
+                    <FilterDropDownView {values} {selected} {on_select} />
+                </PortalModal>
+            }
+        } else {
+            html! {}
+        }
+    }
+}
+
+#[derive(Properties, PartialEq)]
+struct FilterDropDownViewProps {
+    values: Vec<String>,
+    selected: usize,
+    on_select: Option<Callback<String>>,
+}
+
+#[function_component]
+fn FilterDropDownView(props: &FilterDropDownViewProps) -> 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.clone();
+                            move |_: MouseEvent| value.clone()
+                        });
+
+                        html! {
+                            if idx == props.selected {
+                                <span onmousedown={click} class="selected">{ value }</span>
+                            } else {
+                                <span onmousedown={click}>{ value }</span>
+                            }
+                        }
+                    }) }
+        } else {
+            <span class="no-results">{ "No Completions" }</span>
+        }
+    };
+
+    html! { <><style>{ CSS }</style>{ body }</> }
+}
+
+fn filter_values(
+    input: &str,
+    values: &Rc<RefCell<Option<Vec<String>>>>,
+    exclude: &HashSet<String>,
+) -> Vec<String> {
+    let input = input.to_lowercase();
+    if let Some(values) = &*values.borrow() {
+        values
+            .iter()
+            .filter(|x| x.to_lowercase().contains(&input) && !exclude.contains(x.as_str()))
+            .take(10)
+            .cloned()
+            .collect::<Vec<String>>()
+    } else {
+        vec![]
     }
 }

package/src/rust/components/font_loader.rs

@@ -47,35 +47,18 @@ impl PartialEq for FontLoaderProps {
     }
 }
 
-/// The `FontLoader` component ensures that fonts are loaded before they are
-/// visible.
-pub struct FontLoader {}
-
-impl Component for FontLoader {
-    type Message = ();
-    type Properties = FontLoaderProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn update(&mut self, _ctx: &Context<Self>, _msg: ()) -> bool {
-        false
-    }
+#[function_component(FontLoader)]
+pub fn font_loader(props: &FontLoaderProps) -> Html {
+    if matches!(props.get_status(), FontLoaderStatus::Finished) {
+        html! {}
+    } else {
+        let inner = props
+            .get_fonts()
+            .iter()
+            .map(font_test_html)
+            .collect::<Html>();
 
-    fn view(&self, ctx: &Context<Self>) -> yew::virtual_dom::VNode {
-        if matches!(ctx.props().get_status(), FontLoaderStatus::Finished) {
-            html! {}
-        } else {
-            let inner = ctx
-                .props()
-                .get_fonts()
-                .iter()
-                .map(font_test_html)
-                .collect::<Html>();
-
-            html! { <><style>{ ":host{opacity:0!important;}" }</style>{ inner }</> }
-        }
+        html! { <><style>{ ":host{opacity:0!important;}" }</style>{ inner }</> }
     }
 }
 

package/src/rust/components/form/code_editor.rs

@@ -18,9 +18,9 @@ use web_sys::*;
 use yew::prelude::*;
 
 use crate::components::form::highlight::highlight;
+use crate::components::function_dropdown::{FunctionDropDownElement, FunctionDropDownPortal};
 use crate::components::style::LocalStyle;
 use crate::css;
-use crate::custom_elements::FunctionDropDownElement;
 use crate::exprtk::{Cursor, tokenize};
 use crate::utils::*;
 
@@ -45,6 +45,10 @@ pub struct CodeEditorProps {
 
     #[prop_or_default]
     pub error: Option<ExprValidationError>,
+
+    /// Selected theme name, threaded for PortalModal consumers.
+    #[prop_or_default]
+    pub theme: String,
 }
 
 /// A syntax-highlighted text editor component.
@@ -128,6 +132,8 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
         |deps| scroll_sync(&deps.0, &deps.1, &deps.2),
     );
 
+    let portal_dropdown = filter_dropdown.clone();
+
     // Blur if this element is not in the tree
     use_effect_with(filter_dropdown.clone(), |filter_dropdown| {
         clone!(filter_dropdown);
@@ -160,7 +166,11 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
         ))
         .collect::<Html>();
 
-    let class = if props.wordwrap { "wordwrap" } else { "" };
+    let class = if props.wordwrap {
+        "wordwrap scrollable"
+    } else {
+        "scrollable"
+    };
     clone!(props.disabled);
     html! {
         <>
@@ -171,6 +181,7 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
                     <textarea
                         {disabled}
                         id="textarea_editable"
+                        class="scrollable"
                         ref={textarea_ref}
                         spellcheck="false"
                         {oninput}
@@ -191,6 +202,10 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
                     </pre>
                 </div>
             </div>
+            <FunctionDropDownPortal
+                element={(*portal_dropdown).clone()}
+                theme={props.theme.clone()}
+            />
         </>
     }
 }

package/src/rust/components/form/color_range_selector.rs

@@ -106,12 +106,25 @@ pub fn color_chooser_component(props: &ColorRangeProps) -> Html {
 }
 
 fn infer_fg(color: &str) -> &'static str {
-    let r = i32::from_str_radix(&color[1..3], 16).unwrap_or(255) as f64;
-    let g = i32::from_str_radix(&color[3..5], 16).unwrap_or(0) as f64;
-    let b = i32::from_str_radix(&color[5..7], 16).unwrap_or(0) as f64;
-    if (r * r * 0.299 + g * g * 0.587 + b * b * 0.114).sqrt() > 130.0 {
-        "--sign--color:#161616"
+    if color.len() >= 7 {
+        let r = i32::from_str_radix(&color[1..3], 16).unwrap_or(255) as f64;
+        let g = i32::from_str_radix(&color[3..5], 16).unwrap_or(0) as f64;
+        let b = i32::from_str_radix(&color[5..7], 16).unwrap_or(0) as f64;
+        if (r * r * 0.299 + g * g * 0.587 + b * b * 0.114).sqrt() > 130.0 {
+            "--sign--color:var(--psp--color)"
+        } else {
+            "--sign--color:var(--psp--background-color)"
+        }
+    } else if color.len() == 4 {
+        let r = i32::from_str_radix(&color[1..2], 16).unwrap_or(15) as f64;
+        let g = i32::from_str_radix(&color[2..3], 16).unwrap_or(0) as f64;
+        let b = i32::from_str_radix(&color[3..4], 16).unwrap_or(0) as f64;
+        if (r * r * 0.299 + g * g * 0.587 + b * b * 0.114).sqrt() > 8.0 {
+            "--sign--color:var(--psp--color)"
+        } else {
+            "--sign--color:var(--psp--background-color)"
+        }
     } else {
-        "--sign--color:#FFFFFF"
+        "--sign--color:var(--psp--color)"
     }
 }

package/src/rust/components/form/debug.rs

@@ -20,21 +20,39 @@ use yew::prelude::*;
 use crate::components::containers::trap_door_panel::TrapDoorPanel;
 use crate::components::form::code_editor::CodeEditor;
 use crate::components::style::LocalStyle;
+use crate::css;
 use crate::js::{MimeType, copy_to_clipboard, paste_from_clipboard};
-use crate::model::*;
 use crate::presentation::*;
 use crate::renderer::*;
 use crate::session::*;
+use crate::tasks::*;
 use crate::utils::*;
-use crate::{PerspectiveProperties, css};
 
-#[derive(PartialEq, Properties, PerspectiveProperties!)]
+#[derive(Clone, PartialEq, Properties)]
 pub struct DebugPanelProps {
     pub presentation: Presentation,
     pub renderer: Renderer,
     pub session: Session,
 }
 
+impl HasPresentation for DebugPanelProps {
+    fn presentation(&self) -> &Presentation {
+        &self.presentation
+    }
+}
+
+impl HasRenderer for DebugPanelProps {
+    fn renderer(&self) -> &Renderer {
+        &self.renderer
+    }
+}
+
+impl HasSession for DebugPanelProps {
+    fn session(&self) -> &Session {
+        &self.session
+    }
+}
+
 #[function_component(DebugPanel)]
 pub fn debug_panel(props: &DebugPanelProps) -> Html {
     let expr = use_state_eq(|| Rc::new("".to_string()));
@@ -42,7 +60,7 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
     let select_all = use_memo((), |()| PubSub::default());
     let modified = use_state_eq(|| false);
 
-    use_effect_with((expr.setter(), props.clone_state()), {
+    use_effect_with((expr.setter(), props.clone()), {
         clone!(error, modified);
         move |(text, state)| {
             state.set_text(text.clone());
@@ -57,7 +75,7 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
                 ));
 
             let sub2 = state
-                .renderer()
+                .renderer
                 .reset_changed
                 .add_listener(state.reset_callback(
                     text.clone(),
@@ -66,7 +84,7 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
                 ));
 
             let sub3 = state
-                .session()
+                .session
                 .view_config_changed
                 .add_listener(state.reset_callback(
                     text.clone(),
@@ -90,7 +108,7 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
         }
     });
 
-    let onsave = use_callback((expr.clone(), error.clone(), props.clone_state()), {
+    let onsave = use_callback((expr.clone(), error.clone(), props.clone()), {
         clone!(modified);
         move |_, (text, error, props)| props.on_save(text, error, &modified)
     });
@@ -111,12 +129,12 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
         },
     );
 
-    let onapply = use_callback((expr.clone(), error.clone(), props.clone_state()), {
+    let onapply = use_callback((expr.clone(), error.clone(), props.clone()), {
         clone!(modified);
         move |_, (text, error, props)| props.on_save(text, error, &modified)
     });
 
-    let onreset = use_callback((expr.setter(), error.clone(), props.clone_state()), {
+    let onreset = use_callback((expr.setter(), error.clone(), props.clone()), {
         clone!(modified);
         move |_, (text, error, props)| {
             props.set_text(text.clone());
@@ -125,7 +143,7 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
         }
     });
 
-    let onpaste = use_callback((expr.clone(), error.clone(), props.clone_state()), {
+    let onpaste = use_callback((expr.clone(), error.clone(), props.clone()), {
         clone!(modified);
         move |_, (text, error, props)| {
             clone!(text, error, props, modified);
@@ -181,12 +199,11 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
     }
 }
 
-impl DebugPanelPropsState {
+impl DebugPanelProps {
     fn set_text(&self, setter: UseStateSetter<Rc<String>>) {
         let props = self.clone();
         ApiFuture::spawn(async move {
-            let task = props.get_viewer_config();
-            let config = task.await?;
+            let config = props.get_viewer_config().await?;
             let json = JsValue::from_serde_ext(&config)?;
             let js_string =
                 js_sys::JSON::stringify_with_replacer_and_space(&json, &JsValue::NULL, &2.into())?;