@perspective-dev/viewer 4.0.0 → 4.1.0

package/src/rust/components/status_bar_counter.rs

@@ -13,14 +13,16 @@
 use perspective_client::*;
 use yew::prelude::*;
 
+use crate::PerspectiveProperties;
 use crate::session::{Session, ViewStats};
-use crate::utils::{AddListener, ToFormattedString};
+use crate::utils::{AddListener, u32Ext};
 
-#[derive(Properties, PartialEq)]
+#[derive(PartialEq, Properties, PerspectiveProperties!)]
 pub struct StatusBarRowsCounterProps {
     pub session: Session,
 }
 
+/// A component to show the current [`Table`]'s dimensions.
 #[function_component]
 pub fn StatusBarRowsCounter(props: &StatusBarRowsCounterProps) -> Html {
     let stats = use_state_eq(|| props.session.get_table_stats());
@@ -57,10 +59,11 @@ pub fn StatusBarRowsCounter(props: &StatusBarRowsCounterProps) -> Html {
             let ncols = tc.to_formatted_string();
             html! {
                 <span id="rows">
-                    { vrows }
-                    <span>{ format!(" ({}) x ", nrows) }</span>
-                    { vcols }
-                    <span>{ format!(" ({})", ncols) }</span>
+                    <span>{ vrows }</span>
+                    <span class="total">{ format!(" ({})", nrows) }</span>
+                    <span class="x">{ " x " }</span>
+                    <span>{ vcols }</span>
+                    <span class="total">{ format!(" ({})", ncols) }</span>
                 </span>
             }
         },
@@ -83,7 +86,12 @@ pub fn StatusBarRowsCounter(props: &StatusBarRowsCounterProps) -> Html {
             let nrows = tr.to_formatted_string();
             let vcols = vc.to_formatted_string();
             html! {
-                <span id="rows">{ vrows }<span>{ format!(" ({}) x ", nrows) }</span>{ vcols }</span>
+                <span id="rows">
+                    <span>{ vrows }</span>
+                    <span class="total">{ format!(" ({})", nrows) }</span>
+                    <span class="x">{ " x " }</span>
+                    <span>{ vcols }</span>
+                </span>
             }
         },
 
@@ -97,10 +105,10 @@ pub fn StatusBarRowsCounter(props: &StatusBarRowsCounterProps) -> Html {
             let ncols = tc.to_formatted_string();
             html! {
                 <span id="rows">
-                    { vrows }
-                    <span>{ " x " }</span>
-                    { vcols }
-                    <span>{ format!(" ({})", ncols) }</span>
+                    <span>{ vrows }</span>
+                    <span class="x">{ " x " }</span>
+                    <span>{ vcols }</span>
+                    <span class="total">{ format!(" ({})", ncols) }</span>
                 </span>
             }
         },
@@ -111,7 +119,13 @@ pub fn StatusBarRowsCounter(props: &StatusBarRowsCounterProps) -> Html {
         }) => {
             let nrows = tr.to_formatted_string();
             let ncols = tc.to_formatted_string();
-            html! { <span id="rows">{ nrows }<span>{ " x " }</span>{ ncols }</span> }
+            html! {
+                <span id="rows">
+                    <span>{ nrows }</span>
+                    <span class="x">{ " x " }</span>
+                    <span>{ ncols }</span>
+                </span>
+            }
         },
         Some(ViewStats {
             num_table_cells: None,
@@ -120,110 +134,3 @@ pub fn StatusBarRowsCounter(props: &StatusBarRowsCounterProps) -> Html {
         None => html! { <span /> },
     }
 }
-
-// /// A label widget which displays a row count and a "projection" count, the
-// /// number of rows in the `View` which includes aggregate rows.
-// pub struct StatusBarRowsCounter {}
-
-// impl Component for StatusBarRowsCounter {
-//     type Message = ();
-//     type Properties = ();
-
-//     fn create(_ctx: &Context<Self>) -> Self {
-//         Self {}
-//     }
-
-//     fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
-//         false
-//     }
-
-//     fn view(&self, ctx: &Context<Self>) -> Html {
-//         match &ctx.props().stats {
-//             Some(
-//                 ViewStats {
-//                     num_table_cells: Some((tr, tc)),
-//                     num_view_cells: Some((vr, vc)),
-//                     is_group_by: true,
-//                     ..
-//                 }
-//                 | ViewStats {
-//                     num_table_cells: Some((tr, tc)),
-//                     num_view_cells: Some((vr, vc)),
-//                     is_filtered: true,
-//                     ..
-//                 },
-//             ) if vc != tc => {
-//                 let vrows = vr.to_formatted_string();
-//                 let nrows = tr.to_formatted_string();
-//                 let vcols = vc.to_formatted_string();
-//                 let ncols = tc.to_formatted_string();
-//                 html! {
-//                     <span id="rows">
-//                         { vrows }
-//                         <span>{ format!(" ({}) x ", nrows) }</span>
-//                         { vcols }
-//                         <span>{ format!(" ({})", ncols) }</span>
-//                     </span>
-//                 }
-//             },
-
-//             Some(
-//                 ViewStats {
-//                     num_table_cells: Some((tr, _)),
-//                     num_view_cells: Some((vr, vc)),
-//                     is_group_by: true,
-//                     ..
-//                 }
-//                 | ViewStats {
-//                     num_table_cells: Some((tr, _)),
-//                     num_view_cells: Some((vr, vc)),
-//                     is_filtered: true,
-//                     ..
-//                 },
-//             ) => {
-//                 let vrows = vr.to_formatted_string();
-//                 let nrows = tr.to_formatted_string();
-//                 let vcols = vc.to_formatted_string();
-//                 html! {
-//                     <span id="rows">
-//                         { vrows }
-//                         <span>{ format!(" ({}) x ", nrows) }</span>
-//                         { vcols }
-//                     </span>
-//                 }
-//             },
-
-//             Some(ViewStats {
-//                 num_table_cells: Some((_, tc)),
-//                 num_view_cells: Some((vr, vc)),
-//                 ..
-//             }) if vc != tc => {
-//                 let vrows = vr.to_formatted_string();
-//                 let vcols = vc.to_formatted_string();
-//                 let ncols = tc.to_formatted_string();
-//                 html! {
-//                     <span id="rows">
-//                         { vrows }
-//                         <span>{ " x " }</span>
-//                         { vcols }
-//                         <span>{ format!(" ({})", ncols) }</span>
-//                     </span>
-//                 }
-//             },
-
-//             Some(ViewStats {
-//                 num_table_cells: Some((tr, tc)),
-//                 ..
-//             }) => {
-//                 let nrows = tr.to_formatted_string();
-//                 let ncols = tc.to_formatted_string();
-//                 html! { <span id="rows">{ nrows }<span>{ " x " }</span>{
-// ncols }</span> }             },
-//             Some(ViewStats {
-//                 num_table_cells: None,
-//                 ..
-//             }) => html! { <span /> },
-//             None => html! { <span /> },
-//         }
-//     }
-// }

package/src/rust/components/status_indicator.rs

@@ -11,83 +11,25 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 use perspective_client::config::ViewConfigUpdate;
+use perspective_js::utils::ApiError;
+use wasm_bindgen::JsValue;
 use web_sys::*;
 use yew::prelude::*;
 
-use crate::model::UpdateAndRender;
+use crate::PerspectiveProperties;
+use crate::custom_events::CustomEvents;
+use crate::model::*;
 use crate::renderer::*;
 use crate::session::*;
 use crate::utils::*;
-use crate::*;
 
-#[derive(Clone, Default, Debug, PartialEq)]
-enum StatusIconState {
-    Loading,
-    Updating(u32),
-    Errored(String, String, &'static str),
-    Normal,
-
-    #[default]
-    Unititialized,
-}
-
-#[derive(Clone, Debug)]
-enum StatusIconStateAction {
-    Increment,
-    Decrement,
-    Load(Option<ViewStats>),
-    SetError(ApiError),
-}
-
-impl Reducible for StatusIconState {
-    type Action = StatusIconStateAction;
-
-    fn reduce(self: std::rc::Rc<Self>, action: Self::Action) -> std::rc::Rc<Self> {
-        let new_status = match (&*self, action.clone()) {
-            (StatusIconState::Updating(x), StatusIconStateAction::Increment) => {
-                Self::Updating(x + 1)
-            },
-            (StatusIconState::Updating(x), StatusIconStateAction::Decrement) if *x > 1 => {
-                Self::Updating(x - 1)
-            },
-            (_, StatusIconStateAction::Load(stats)) => {
-                if stats.and_then(|x| x.num_table_cells).is_some() {
-                    StatusIconState::Normal
-                } else {
-                    Self::Loading
-                }
-            },
-            (_, StatusIconStateAction::SetError(e)) => {
-                Self::Errored(e.message(), e.stacktrace(), e.kind())
-            },
-            (
-                StatusIconState::Loading,
-                StatusIconStateAction::Increment | StatusIconStateAction::Decrement,
-            ) => StatusIconState::Loading,
-            (_, StatusIconStateAction::Increment) => Self::Updating(1),
-            (_, StatusIconStateAction::Decrement) => StatusIconState::Normal,
-        };
-
-        new_status.into()
-    }
-}
-
-#[extend::ext]
-impl<T: Reducible + 'static> UseReducerDispatcher<T> {
-    fn callback<U>(&self, action: impl Fn(U) -> T::Action + 'static) -> Callback<U> {
-        let dispatcher = self.clone();
-        Callback::from(move |event| dispatcher.dispatch(action(event)))
-    }
-}
-
-#[derive(Clone, Properties, PartialEq)]
+#[derive(PartialEq, Properties, PerspectiveProperties!)]
 pub struct StatusIndicatorProps {
-    pub session: Session,
+    pub custom_events: CustomEvents,
     pub renderer: Renderer,
+    pub session: Session,
 }
 
-derive_model!(Session, Renderer for StatusIndicatorProps);
-
 /// An indicator component which displays the current status of the perspective
 /// server as an icon. This indicator also functions as a button to invoke the
 /// reconnect callback when in an error state.
@@ -123,19 +65,6 @@ pub fn StatusIndicator(props: &StatusIndicatorProps) -> Html {
         },
     );
 
-    let onclick = use_async_callback(
-        (props.clone(), state.clone()),
-        async move |_: MouseEvent, (props, state)| {
-            if let StatusIconState::Errored(..) = &**state {
-                props.session.reconnect().await?;
-                let cfg = ViewConfigUpdate::default();
-                props.update_and_render(cfg)?.await?;
-            }
-
-            Ok::<_, ApiError>(())
-        },
-    );
-
     let class_name = match (&*state, props.session.is_reconnect()) {
         (StatusIconState::Errored(..), true) => "errored",
         (StatusIconState::Errored(..), false) => "errored disabled",
@@ -145,6 +74,33 @@ pub fn StatusIndicator(props: &StatusIndicatorProps) -> Html {
         (StatusIconState::Unititialized, _) => "uninitialized",
     };
 
+    let onclick = use_async_callback(
+        (props.clone_state(), state.clone()),
+        async move |_: MouseEvent, (props, state)| {
+            match &**state {
+                StatusIconState::Errored(..) => {
+                    props.session.reconnect().await?;
+                    let cfg = ViewConfigUpdate::default();
+                    props.update_and_render(cfg)?.await?;
+                },
+                StatusIconState::Normal => {
+                    props
+                        .custom_events
+                        .dispatch_event("status-indicator-click", JsValue::UNDEFINED)?;
+                },
+                _ => {},
+            };
+
+            // if let StatusIconState::Errored(..) = &**state {
+            //     props.session.reconnect().await?;
+            //     let cfg = ViewConfigUpdate::default();
+            //     props.update_and_render(cfg)?.await?;
+            // }
+
+            Ok::<_, ApiError>(())
+        },
+    );
+
     html! {
         <>
             <div class="section">
@@ -162,3 +118,63 @@ pub fn StatusIndicator(props: &StatusIndicatorProps) -> Html {
         </>
     }
 }
+
+#[derive(Clone, Default, Debug, PartialEq)]
+enum StatusIconState {
+    Loading,
+    Updating(u32),
+    Errored(String, String, &'static str),
+    Normal,
+
+    #[default]
+    Unititialized,
+}
+
+#[derive(Clone, Debug)]
+enum StatusIconStateAction {
+    Increment,
+    Decrement,
+    Load(Option<ViewStats>),
+    SetError(ApiError),
+}
+
+impl Reducible for StatusIconState {
+    type Action = StatusIconStateAction;
+
+    fn reduce(self: std::rc::Rc<Self>, action: Self::Action) -> std::rc::Rc<Self> {
+        let new_status = match (&*self, action.clone()) {
+            (StatusIconState::Updating(x), StatusIconStateAction::Increment) => {
+                Self::Updating(x + 1)
+            },
+            (StatusIconState::Updating(x), StatusIconStateAction::Decrement) if *x > 1 => {
+                Self::Updating(x - 1)
+            },
+            (_, StatusIconStateAction::Load(stats)) => {
+                if stats.and_then(|x| x.num_table_cells).is_some() {
+                    StatusIconState::Normal
+                } else {
+                    Self::Loading
+                }
+            },
+            (_, StatusIconStateAction::SetError(e)) => {
+                Self::Errored(e.message(), e.stacktrace(), e.kind())
+            },
+            (
+                StatusIconState::Loading,
+                StatusIconStateAction::Increment | StatusIconStateAction::Decrement,
+            ) => StatusIconState::Loading,
+            (_, StatusIconStateAction::Increment) => Self::Updating(1),
+            (_, StatusIconStateAction::Decrement) => StatusIconState::Normal,
+        };
+
+        new_status.into()
+    }
+}
+
+#[extend::ext]
+impl<T: Reducible + 'static> UseReducerDispatcher<T> {
+    fn callback<U>(&self, action: impl Fn(U) -> T::Action + 'static) -> Callback<U> {
+        let dispatcher = self.clone();
+        Callback::from(move |event| dispatcher.dispatch(action(event)))
+    }
+}

package/src/rust/components/string_column_style.rs

@@ -16,18 +16,10 @@ use yew::*;
 use super::form::color_selector::*;
 use super::modal::{ModalLink, SetModalLink};
 use super::style::LocalStyle;
-use crate::components::form::select_field::SelectEnumField;
+use crate::components::form::select_enum_field::SelectEnumField;
 use crate::config::*;
+use crate::css;
 use crate::utils::WeakScope;
-use crate::*;
-
-pub enum StringColumnStyleMsg {
-    Reset(StringColumnStyleConfig),
-    FormatChanged(Option<FormatMode>),
-    ColorModeChanged(Option<StringColorMode>),
-    ColorChanged(String),
-    ColorReset,
-}
 
 #[derive(Properties)]
 pub struct StringColumnStyleProps {
@@ -53,47 +45,20 @@ impl PartialEq for StringColumnStyleProps {
     }
 }
 
+pub enum StringColumnStyleMsg {
+    Reset(StringColumnStyleConfig),
+    FormatChanged(Option<FormatMode>),
+    ColorModeChanged(Option<StringColorMode>),
+    ColorChanged(String),
+    ColorReset,
+}
+
 /// A component for the style form control for [`String`] columns.
 pub struct StringColumnStyle {
     config: StringColumnStyleConfig,
     default_config: StringColumnStyleDefaultConfig,
 }
 
-impl StringColumnStyle {
-    /// When this config has changed, we must signal the wrapper element.
-    fn dispatch_config(&self, ctx: &Context<Self>) {
-        let update = Some(self.config.clone()).filter(|x| x != &StringColumnStyleConfig::default());
-        ctx.props()
-            .on_change
-            .emit(ColumnConfigValueUpdate::DatagridStringStyle(update));
-    }
-
-    /// Generate a color selector component for a specific `StringColorMode`
-    /// variant.
-    fn color_select_row(&self, ctx: &Context<Self>, mode: &StringColorMode, title: &str) -> Html {
-        let on_color = ctx.link().callback(StringColumnStyleMsg::ColorChanged);
-        let color = self
-            .config
-            .color
-            .clone()
-            .unwrap_or_else(|| self.default_config.color.to_owned());
-
-        let color_props = props!(ColorProps {
-            title: title.to_owned(),
-            on_color,
-            is_modified: color != self.default_config.color,
-            color,
-            on_reset: ctx.link().callback(|_| StringColumnStyleMsg::ColorReset)
-        });
-
-        if &self.config.string_color_mode == mode {
-            html! { <div class="row"><ColorSelector ..color_props /></div> }
-        } else {
-            html! {}
-        }
-    }
-}
-
 impl Component for StringColumnStyle {
     type Message = StringColumnStyleMsg;
     type Properties = StringColumnStyleProps;
@@ -184,3 +149,38 @@ impl Component for StringColumnStyle {
         }
     }
 }
+
+impl StringColumnStyle {
+    /// When this config has changed, we must signal the wrapper element.
+    fn dispatch_config(&self, ctx: &Context<Self>) {
+        let update = Some(self.config.clone()).filter(|x| x != &StringColumnStyleConfig::default());
+        ctx.props()
+            .on_change
+            .emit(ColumnConfigValueUpdate::DatagridStringStyle(update));
+    }
+
+    /// Generate a color selector component for a specific `StringColorMode`
+    /// variant.
+    fn color_select_row(&self, ctx: &Context<Self>, mode: &StringColorMode, title: &str) -> Html {
+        let on_color = ctx.link().callback(StringColumnStyleMsg::ColorChanged);
+        let color = self
+            .config
+            .color
+            .clone()
+            .unwrap_or_else(|| self.default_config.color.to_owned());
+
+        let color_props = props!(ColorProps {
+            title: title.to_owned(),
+            on_color,
+            is_modified: color != self.default_config.color,
+            color,
+            on_reset: ctx.link().callback(|_| StringColumnStyleMsg::ColorReset)
+        });
+
+        if &self.config.string_color_mode == mode {
+            html! { <div class="row"><ColorSelector ..color_props /></div> }
+        } else {
+            html! {}
+        }
+    }
+}

package/src/rust/components/style/style_provider.rs

@@ -10,15 +10,14 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use web_sys::HtmlStyleElement;
 use yew::prelude::*;
-use yew::virtual_dom::VNode;
 
 use super::style_cache::StyleCache;
 
 #[derive(Properties, PartialEq)]
 pub struct StyleProviderProps {
     pub root: web_sys::HtmlElement,
+
     #[prop_or(true)]
     pub is_shadow: bool,
     pub children: Children,
@@ -50,16 +49,3 @@ impl Component for StyleProvider {
         }
     }
 }
-
-#[derive(Properties, PartialEq)]
-struct StyleKeyedProps {
-    elem: HtmlStyleElement,
-}
-
-/// Necessary only to attach `key` to individual `HtmlStylElement` children,
-/// as `yew` does not calculate list updates correctly for sequences of these
-/// without keys.
-#[function_component(StyleKeyed)]
-fn style_renderer(props: &StyleKeyedProps) -> Html {
-    VNode::VRef(props.elem.clone().into())
-}

package/src/rust/components/style_controls/number_string_format/digits_section.rs

@@ -21,7 +21,7 @@ use crate::components::containers::select::{Select, SelectItem};
 use crate::components::form::number_field::NumberField;
 use crate::components::form::number_range_field::NumberRangeField;
 use crate::components::form::optional_field::OptionalField;
-use crate::components::form::select_field::SelectEnumField;
+use crate::components::form::select_enum_field::SelectEnumField;
 use crate::components::style_controls::CustomNumberFormatMsg;
 use crate::config::{
     ROUNDING_INCREMENTS, RoundingIncrement, RoundingMode, RoundingPriority, TrailingZeroDisplay,

package/src/rust/components/style_controls/number_string_format/misc_section.rs

@@ -13,7 +13,7 @@
 use yew::html;
 
 use super::CustomNumberFormat;
-use crate::components::form::select_field::SelectEnumField;
+use crate::components::form::select_enum_field::SelectEnumField;
 use crate::components::style_controls::{CustomNumberFormatMsg, NotationName};
 use crate::config::*;
 

package/src/rust/components/style_controls/number_string_format/style_section.rs

@@ -13,7 +13,7 @@
 use yew::html;
 
 use super::CustomNumberFormat;
-use crate::components::form::select_field::SelectEnumField;
+use crate::components::form::select_enum_field::SelectEnumField;
 use crate::components::style_controls::{CustomNumberFormatMsg, NumberStyle};
 use crate::config::*;