@perspective-dev/viewer 4.0.1 → 4.1.0

package/src/rust/presentation.rs

@@ -10,26 +10,54 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+mod column_locator;
+mod sheets;
+
 use std::cell::RefCell;
 use std::collections::{HashMap, HashSet};
 use std::ops::Deref;
 use std::rc::Rc;
 
 use async_lock::Mutex;
-use perspective_js::utils::{ApiFuture, ApiResult, ToApiError, global};
+use perspective_js::utils::{ApiFuture, ApiResult};
 use wasm_bindgen::prelude::*;
 use web_sys::*;
 use yew::html::ImplicitClone;
 
-use crate::components::column_settings_sidebar::ColumnSettingsTab;
-use crate::components::viewer::ColumnLocator;
+pub use self::column_locator::{ColumnLocator, ColumnSettingsTab, ColumnTab, OpenColumnSettings};
 use crate::config::{ColumnConfigUpdate, ColumnConfigValueUpdate, ColumnConfigValues};
 use crate::utils::*;
 
+pub type ColumnConfigMap = HashMap<String, ColumnConfigValues>;
+
 /// The available themes as detected in the browser environment or set
 /// explicitly when CORS prevents detection.  Detection is expensive and
 /// typically must be performed only once, when `document.styleSheets` is
 /// up-to-date.
+#[derive(Default)]
+struct ThemeData {
+    themes: Option<Vec<String>>,
+}
+
+/// Actual presentations tate struct with some fields hidden.
+pub struct PresentationHandle {
+    viewer_elem: HtmlElement,
+    theme_data: Mutex<ThemeData>,
+    is_settings_open: RefCell<bool>,
+    open_column_settings: RefCell<OpenColumnSettings>,
+    columns_config: RefCell<ColumnConfigMap>,
+    is_workspace: RefCell<Option<bool>>,
+    pub settings_open_changed: PubSub<bool>,
+    pub settings_before_open_changed: PubSub<bool>,
+    pub column_settings_open_changed: PubSub<(bool, Option<String>)>,
+    pub column_settings_updated: PubSub<JsValue>,
+    pub theme_config_updated: PubSub<(Rc<Vec<String>>, Option<usize>)>,
+    pub visibility_changed: PubSub<bool>,
+    pub on_eject: PubSub<()>,
+}
+
+/// State object responsible for the non-persistable/gui element state,
+/// including Themes, panel open state and realtive size, title, etc.
 #[derive(Clone)]
 pub struct Presentation(Rc<PresentationHandle>);
 
@@ -49,74 +77,45 @@ impl Deref for Presentation {
 
 impl ImplicitClone for Presentation {}
 
-#[derive(Clone, Default, Debug, PartialEq)]
-pub struct OpenColumnSettings {
-    pub locator: Option<ColumnLocator>,
-    pub tab: Option<ColumnSettingsTab>,
-}
-impl OpenColumnSettings {
-    pub fn name(&self) -> Option<String> {
-        self.locator
-            .as_ref()
-            .and_then(|l| l.name())
-            .map(|s| s.to_owned())
-    }
-}
-
-pub type ColumnConfigMap = HashMap<String, ColumnConfigValues>;
-
-pub struct PresentationHandle {
-    viewer_elem: HtmlElement,
-    theme_data: Mutex<ThemeData>,
-    name: RefCell<Option<String>>,
-    is_settings_open: RefCell<bool>,
-    open_column_settings: RefCell<OpenColumnSettings>,
-    is_workspace: RefCell<Option<bool>>,
-    columns_config: RefCell<ColumnConfigMap>,
-    pub settings_open_changed: PubSub<bool>,
-    pub column_settings_open_changed: PubSub<(bool, Option<String>)>,
-    pub column_settings_updated: PubSub<JsValue>,
-    pub theme_config_updated: PubSub<(Rc<Vec<String>>, Option<usize>)>,
-    pub title_changed: PubSub<Option<String>>,
-}
-
-#[derive(Default)]
-pub struct ThemeData {
-    themes: Option<Vec<String>>,
-}
-
 impl Presentation {
     pub fn new(elem: &HtmlElement) -> Self {
         let theme = Self(Rc::new(PresentationHandle {
             viewer_elem: elem.clone(),
-            name: Default::default(),
             theme_data: Default::default(),
+            is_workspace: Default::default(),
             settings_open_changed: Default::default(),
+            settings_before_open_changed: Default::default(),
             column_settings_open_changed: Default::default(),
             column_settings_updated: Default::default(),
             columns_config: Default::default(),
             is_settings_open: Default::default(),
-            is_workspace: Default::default(),
             open_column_settings: Default::default(),
             theme_config_updated: PubSub::default(),
-            title_changed: PubSub::default(),
+            on_eject: PubSub::default(),
+            visibility_changed: PubSub::default(),
         }));
 
         ApiFuture::spawn(theme.clone().init());
         theme
     }
 
-    pub fn get_title(&self) -> Option<String> {
-        self.name.borrow().clone()
+    pub fn is_visible(&self) -> bool {
+        self.viewer_elem
+            .offset_parent()
+            .map(|x| !x.is_null())
+            .unwrap_or(false)
     }
 
-    pub fn set_title(&self, title: Option<String>) {
-        self.name.borrow_mut().clone_from(&title);
-        self.title_changed.emit(title);
+    pub fn is_active(&self, elem: &Option<Element>) -> bool {
+        elem.is_some() && &self.viewer_elem.shadow_root().unwrap().active_element() == elem
     }
 
     pub fn get_is_workspace(&self) -> bool {
         if self.is_workspace.borrow().is_none() {
+            if !self.viewer_elem.is_connected() {
+                return false;
+            }
+
             let is_workspace = self
                 .viewer_elem
                 .parent_element()
@@ -139,15 +138,16 @@ impl Presentation {
         *self.is_settings_open.borrow()
     }
 
-    pub fn set_settings_open(&self, open: Option<bool>) -> ApiResult<bool> {
-        let open_state = open.unwrap_or_else(|| !*self.is_settings_open.borrow());
-        if *self.is_settings_open.borrow() != open_state {
-            *self.is_settings_open.borrow_mut() = open_state;
-            self.set_settings_attribute(open_state);
-            self.settings_open_changed.emit(open_state);
+    pub fn set_settings_before_open(&self, open: bool) {
+        if *self.is_settings_open.borrow() != open {
+            *self.is_settings_open.borrow_mut() = open;
+            self.set_settings_attribute(open);
+            self.settings_before_open_changed.emit(open);
         }
+    }
 
-        Ok(open_state)
+    pub fn set_settings_open(&self, open: bool) {
+        self.settings_open_changed.emit(open);
     }
 
     /// Sets the currently opened column settings. Emits an internal event on
@@ -178,7 +178,7 @@ impl Presentation {
         let mut data = self.0.theme_data.lock().await;
         if data.themes.is_none() {
             await_dom_loaded().await?;
-            let themes = get_theme_names(&self.0.viewer_elem)?;
+            let themes = sheets::get_theme_names(&self.0.viewer_elem)?;
             data.themes = Some(themes);
         }
 
@@ -230,6 +230,7 @@ impl Presentation {
     }
 
     pub async fn reset_theme(&self) -> ApiResult<()> {
+        *self.0.is_workspace.borrow_mut() = None;
         let themes = self.get_available_themes().await?;
         let default_theme = themes.first().map(|x| x.as_str());
         self.set_theme_name(default_theme).await?;
@@ -242,10 +243,10 @@ impl Presentation {
     /// A `bool` indicating whether the internal state changed.
     pub async fn set_theme_name(&self, theme: Option<&str>) -> ApiResult<bool> {
         let (themes, selected) = self.get_selected_theme_config().await?;
-        if let Some(x) = selected
-            && themes.get(x).map(|x| x.as_str()) == theme
-        {
-            return Ok(false);
+        if let Some(x) = selected {
+            if themes.get(x).map(|x| x.as_str()) == theme {
+                return Ok(false);
+            }
         }
 
         let index = if let Some(theme) = theme {
@@ -308,63 +309,3 @@ impl Presentation {
         }
     }
 }
-
-macro_rules! iter_index {
-    ($x:expr) => {
-        (0..$x.length()).map(|x| $x.item(x))
-    };
-}
-
-fn fill_rule_theme_names(
-    themes: &mut Vec<String>,
-    rule: &Option<CssRule>,
-    elem: &HtmlElement,
-) -> ApiResult<()> {
-    if let Some(rule) = rule.as_ref().into_apierror()?.dyn_ref::<CssStyleRule>() {
-        let txt = rule.selector_text();
-        if elem.matches(&txt)? {
-            let style = rule.style();
-            let x = (0..style.length()).map(|x| style.item(x));
-            for property in x {
-                if property == "--theme-name" {
-                    let name = style.get_property_value("--theme-name")?;
-                    let trimmed = name.trim();
-                    themes.push(trimmed[1..trimmed.len() - 1].to_owned());
-                }
-            }
-        }
-    }
-
-    Ok(())
-}
-
-fn fill_sheet_theme_names(
-    themes: &mut Vec<String>,
-    sheet: &Option<StyleSheet>,
-    elem: &HtmlElement,
-) -> ApiResult<()> {
-    let sheet = sheet
-        .as_ref()
-        .into_apierror()?
-        .unchecked_ref::<CssStyleSheet>();
-
-    if let Ok(rules) = sheet.css_rules() {
-        for rule in iter_index!(&rules) {
-            fill_rule_theme_names(themes, &rule, elem).unwrap_or_default();
-        }
-    }
-
-    Ok(())
-}
-
-/// Search the document's `styleSheets` for rules which apply to `elem` and
-/// provide the `--theme-name` CSS custom property.
-fn get_theme_names(elem: &HtmlElement) -> Result<Vec<String>, JsValue> {
-    let sheets = global::document().style_sheets();
-    let mut themes: Vec<String> = vec![];
-    for sheet in iter_index!(sheets) {
-        fill_sheet_theme_names(&mut themes, &sheet, elem)?;
-    }
-
-    Ok(themes)
-}

package/src/rust/renderer/activate.rs

@@ -39,11 +39,26 @@ pub async fn activate_plugin<T>(
     }
 
     let result = task.await;
-    let first_child = viewer.children().item(0).unwrap();
-    if first_child != *plugin.unchecked_ref::<Element>() {
-        viewer.remove_child(&first_child)?;
-    }
-
     html_plugin.style().set_property("opacity", "1")?;
     result
 }
+
+pub fn remove_inactive_plugin(
+    viewer: &HtmlElement,
+    plugin: &JsPerspectiveViewerPlugin,
+    plugins: &[JsPerspectiveViewerPlugin],
+) -> ApiResult<()> {
+    for idx in 0..viewer.children().length() {
+        let elem = viewer.children().item(idx).unwrap();
+        if &elem != plugin.unchecked_ref::<Element>()
+            && plugins
+                .iter()
+                .any(|x| *x.unchecked_ref::<Element>() == elem)
+        {
+            viewer.remove_child(&elem)?;
+            break;
+        }
+    }
+
+    Ok(())
+}

package/src/rust/renderer/limits.rs

@@ -49,152 +49,3 @@ pub async fn get_row_and_col_limits(
         },
     }
 }
-
-// #[cfg(test)]
-// mod tests {
-//     use super::*;
-
-//     fn closure_helper<T>(x: T) -> Closure<dyn Fn(JsValue) -> js_sys::Promise>
-//     where
-//         T: Into<JsValue>,
-//     {
-//         let val = x.into();
-//         Closure::new(move |_: JsValue| {
-//             clone!(val);
-//             future_to_promise(async move { Ok(val.clone()) })
-//         })
-//     }
-
-//     #[wasm_bindgen_test]
-//     pub async fn test_emtpy_schema_no_columns() {
-//         let closure = closure_helper(0);
-//         let closure2 = closure_helper(json!({}));
-//         let view = json!({
-//             "num_columns": closure.as_ref().unchecked_ref::<JsValue>(),
-//             "num_rows": closure.as_ref().unchecked_ref::<JsValue>(),
-//             "schema": closure2.as_ref().unchecked_ref::<JsValue>()
-//         })
-//         .unchecked_into::<JsPerspectiveView>();
-
-//         let reqs = ViewConfigRequirements {
-//             render_warning: true,
-//             ..ViewConfigRequirements::default()
-//         };
-//         let (_, _, max_cols, max_rows) = get_row_and_col_limits(&view,
-// &reqs).await.unwrap();         assert_eq!(max_cols, None);
-//         assert_eq!(max_rows, None);
-//     }
-
-//     #[wasm_bindgen_test]
-//     pub async fn test_columns_do_not_exceed_max_columns() {
-//         let closure = closure_helper(1);
-//         let closure2 = closure_helper(0);
-//         let closure3 = closure_helper(json!({}));
-//         let view = json!({
-//             "num_columns": closure.as_ref().unchecked_ref::<JsValue>(),
-//             "num_rows": closure2.as_ref().unchecked_ref::<JsValue>(),
-//             "schema": closure3.as_ref().unchecked_ref::<JsValue>()
-//         })
-//         .unchecked_into::<JsPerspectiveView>();
-
-//         let reqs = ViewConfigRequirements {
-//             max_columns: Some(2),
-//             render_warning: true,
-//             ..ViewConfigRequirements::default()
-//         };
-
-//         let (_, _, max_cols, max_rows) = get_row_and_col_limits(&view,
-// &reqs).await.unwrap();         assert_eq!(max_cols, None);
-//         assert_eq!(max_rows, None);
-//     }
-
-//     #[wasm_bindgen_test]
-//     pub async fn test_columns_exceed_max_columns() {
-//         let closure = closure_helper(2);
-//         let closure2 = closure_helper(0);
-//         let closure3 = closure_helper(json!({}));
-//         let view = json!({
-//             "num_columns": closure.as_ref().unchecked_ref::<JsValue>(),
-//             "num_rows": closure2.as_ref().unchecked_ref::<JsValue>(),
-//             "schema": closure3.as_ref().unchecked_ref::<JsValue>()
-//         })
-//         .unchecked_into::<JsPerspectiveView>();
-
-//         let reqs = ViewConfigRequirements {
-//             max_columns: Some(1),
-//             render_warning: true,
-//             ..ViewConfigRequirements::default()
-//         };
-//         let (_, _, max_cols, max_rows) = get_row_and_col_limits(&view,
-// &reqs).await.unwrap();         assert_eq!(max_cols, Some(1));
-//         assert_eq!(max_rows, None);
-//     }
-
-//     #[wasm_bindgen_test]
-//     pub async fn test_when_schema_columns_are_present() {
-//         let closure = closure_helper(100);
-//         let closure2 = closure_helper(0);
-//         let closure3 = closure_helper(json!({"x": "string", "y": "string"}));
-//         let view = json!({
-//             "num_columns": closure.as_ref().unchecked_ref::<JsValue>(),
-//             "num_rows": closure2.as_ref().unchecked_ref::<JsValue>(),
-//             "schema": closure3.as_ref().unchecked_ref::<JsValue>()
-//         })
-//         .unchecked_into::<JsPerspectiveView>();
-
-//         let reqs = ViewConfigRequirements {
-//             max_columns: Some(3),
-//             render_warning: true,
-//             ..ViewConfigRequirements::default()
-//         };
-//         let (_, _, max_cols, max_rows) = get_row_and_col_limits(&view,
-// &reqs).await.unwrap();         assert_eq!(max_cols, Some(4));
-//         assert_eq!(max_rows, None);
-//     }
-
-//     #[wasm_bindgen_test]
-//     pub async fn test_when_max_cells_exits() {
-//         let closure = closure_helper(1);
-//         let closure2 = closure_helper(0);
-//         let closure3 = closure_helper(json!({}));
-//         let view = json!({
-//             "num_columns": closure.as_ref().unchecked_ref::<JsValue>(),
-//             "num_rows": closure2.as_ref().unchecked_ref::<JsValue>(),
-//             "schema": closure3.as_ref().unchecked_ref::<JsValue>()
-//         })
-//         .unchecked_into::<JsPerspectiveView>();
-
-//         let reqs = ViewConfigRequirements {
-//             max_cells: Some(2),
-//             render_warning: true,
-//             ..ViewConfigRequirements::default()
-//         };
-//         let (_, _, max_cols, max_rows) = get_row_and_col_limits(&view,
-// &reqs).await.unwrap();         assert_eq!(max_cols, None);
-//         assert_eq!(max_rows, Some(2));
-//     }
-
-//     #[wasm_bindgen_test]
-//     pub async fn test_when_columns_exceed_max_columns_and_max_cells_exists()
-// {         let closure = closure_helper(4);
-//         let closure2 = closure_helper(0);
-//         let closure3 = closure_helper(json!({}));
-//         let view = json!({
-//             "num_columns": closure.as_ref().unchecked_ref::<JsValue>(),
-//             "num_rows": closure2.as_ref().unchecked_ref::<JsValue>(),
-//             "schema": closure3.as_ref().unchecked_ref::<JsValue>()
-//         })
-//         .unchecked_into::<JsPerspectiveView>();
-
-//         let reqs = ViewConfigRequirements {
-//             max_columns: Some(2),
-//             max_cells: Some(10),
-//             render_warning: true,
-//             ..ViewConfigRequirements::default()
-//         };
-
-//         let (_, _, max_cols, max_rows) = get_row_and_col_limits(&view,
-// &reqs).await.unwrap();         assert_eq!(max_cols, Some(2));
-//         assert_eq!(max_rows, Some(5));
-//     }
-// }

package/src/rust/renderer/render_timer.rs

@@ -171,7 +171,7 @@ impl Default for RenderTimerState {
 
 impl From<&RenderTimerState> for RenderTimerStats {
     fn from(value: &RenderTimerState) -> Self {
-        let perf = global::window().performance().unwrap();
+        let perf = global::performance();
         let now = perf.now();
         let total_time = now - value.start_time;
         RenderTimerStats {

package/src/rust/renderer.rs

@@ -31,7 +31,8 @@ use std::pin::Pin;
 use std::rc::Rc;
 
 use futures::future::{join_all, select_all};
-use perspective_client::ViewWindow;
+use perspective_client::utils::*;
+use perspective_client::{View, ViewWindow};
 use perspective_js::json;
 use perspective_js::utils::ApiResult;
 use wasm_bindgen::prelude::*;
@@ -46,12 +47,8 @@ use self::render_timer::*;
 use crate::config::*;
 use crate::js::plugin::*;
 use crate::presentation::ColumnConfigMap;
-use crate::session::*;
 use crate::utils::*;
 
-#[derive(Clone)]
-pub struct Renderer(Rc<RendererData>);
-
 /// Immutable state
 pub struct RendererData {
     plugin_data: RefCell<RendererMutData>,
@@ -75,6 +72,10 @@ pub struct RendererMutData {
 
 type RenderLimits = (usize, usize, Option<usize>, Option<usize>);
 
+/// The state object responsible for the active [`JsPerspectiveViewerPlugin`].
+#[derive(Clone)]
+pub struct Renderer(Rc<RendererData>);
+
 impl Deref for Renderer {
     type Target = RendererData;
 
@@ -135,10 +136,8 @@ impl Renderer {
     }
 
     pub fn delete(&self) -> ApiResult<()> {
-        //        self.get_active_plugin()?.delete();
-        self.0.plugin_data.borrow().viewer_elem.set_inner_text("");
-
-        // self.plugin_data.borrow_mut().metadata = ViewConfigRequirements::default();
+        self.get_active_plugin().map(|x| x.delete()).unwrap_or_log();
+        self.plugin_data.borrow().viewer_elem.set_inner_text("");
         let new_state = Self::new(&self.plugin_data.borrow().viewer_elem);
         std::mem::swap(
             &mut *self.plugin_data.borrow_mut(),
@@ -193,6 +192,13 @@ impl Renderer {
         Ok(result.unwrap())
     }
 
+    pub fn is_plugin_activated(&self) -> ApiResult<bool> {
+        Ok(self
+            .get_active_plugin()?
+            .unchecked_ref::<HtmlElement>()
+            .is_connected())
+    }
+
     pub async fn restyle_all(&self, view: &perspective_client::View) -> ApiResult<JsValue> {
         let plugins = self.get_all_plugins();
         let tasks = plugins
@@ -235,7 +241,6 @@ impl Renderer {
         };
 
         let idx = self.find_plugin_idx(name).expect("f");
-
         let changed = !matches!(
             self.0.borrow().plugins_idx,
             Some(selected_idx) if selected_idx == idx
@@ -318,19 +323,23 @@ impl Renderer {
     }
 
     /// This will take a future which _should_ create a new view and then will
-    /// draw it.
-    pub async fn draw(&self, session: impl Future<Output = ApiResult<&Session>>) -> ApiResult<()> {
+    /// draw it. As the `session` closure is asynchronous, it can be cancelled
+    /// by returning `None`.
+    pub async fn draw(
+        &self,
+        session: impl Future<Output = ApiResult<Option<View>>>,
+    ) -> ApiResult<()> {
         self.draw_plugin(session, false).await
     }
 
     /// This will update an already existing view
-    pub async fn update(&self, session: &Session) -> ApiResult<()> {
+    pub async fn update(&self, session: Option<View>) -> ApiResult<()> {
         self.draw_plugin(async { Ok(session) }, true).await
     }
 
     async fn draw_plugin(
         &self,
-        session: impl Future<Output = ApiResult<&Session>>,
+        session: impl Future<Output = ApiResult<Option<View>>>,
         is_update: bool,
     ) -> ApiResult<()> {
         let timer = self.render_timer();
@@ -339,9 +348,10 @@ impl Renderer {
                 set_timeout(timer.get_throttle()).await?;
             }
 
-            if let Some(view) = session.await?.get_view() {
+            if let Some(view) = session.await? {
                 timer.capture_time(self.draw_view(&view, is_update)).await
             } else {
+                tracing::debug!("Render skipped, no `View` attached");
                 Ok(())
             }
         };
@@ -362,17 +372,23 @@ impl Renderer {
         let viewer_elem = &self.0.borrow().viewer_elem.clone();
         if is_update {
             let task = plugin.update(view.clone().into(), limits.2, limits.3, false);
-            activate_plugin(viewer_elem, &plugin, task).await
+            activate_plugin(viewer_elem, &plugin, task).await?;
         } else {
             let task = plugin.draw(view.clone().into(), limits.2, limits.3, false);
-            activate_plugin(viewer_elem, &plugin, task).await
+            activate_plugin(viewer_elem, &plugin, task).await?;
         }
+
+        remove_inactive_plugin(
+            viewer_elem,
+            &plugin,
+            self.plugin_data.borrow_mut().plugin_store.plugins(),
+        )
     }
 
     /// Decide whether to draw plugin or self first based on whether the panel
     /// is opening or closing, then draw with a timeout.  If the timeout
     /// triggers, draw self and resolve `on_toggle` but still await the
-    /// completion of the draw task
+    /// completion of the draw task.
     pub async fn presize(
         &self,
         open: bool,

package/src/rust/root.rs

@@ -0,0 +1,50 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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::cell::{Ref, RefCell, RefMut};
+use std::rc::Rc;
+
+use derivative::Derivative;
+use yew::{AppHandle, Component};
+
+#[derive(Default, Derivative)]
+#[derivative(Clone(bound = ""))]
+pub struct Root<T: Component>(Rc<RefCell<Option<AppHandle<T>>>>);
+
+impl<T: Component> PartialEq for Root<T> {
+    fn eq(&self, other: &Self) -> bool {
+        Rc::ptr_eq(&self.0, &other.0)
+    }
+}
+
+// We want to use libraries that are designed to require thread-safety, in the
+// JavaScript environment that (currently) does not allow threads. If we were
+// to implement a threaded build, we'd need to replace with true
+// synchronization.
+unsafe impl<T: Component> Send for Root<T> {}
+unsafe impl<T: Component> Sync for Root<T> {}
+
+impl<T: Component> Root<T> {
+    pub fn new(shadow_root: web_sys::Element, props: T::Properties) -> Self {
+        Self(Rc::new(RefCell::new(Some(
+            yew::Renderer::with_root_and_props(shadow_root, props).render(),
+        ))))
+    }
+
+    pub fn borrow(&self) -> Ref<'_, Option<AppHandle<T>>> {
+        self.0.borrow()
+    }
+
+    pub fn borrow_mut(&self) -> RefMut<'_, Option<AppHandle<T>>> {
+        self.0.borrow_mut()
+    }
+}

package/src/rust/session/column_defaults_update.rs

@@ -111,7 +111,7 @@ pub impl ViewConfigUpdate {
             }
         } else if self.columns.is_none() {
             let mut columns = columns.to_vec();
-            let initial_len = columns.len();
+            let initial_len = self.columns.as_ref().map(|x| x.len()).unwrap_or_default();
             if let Some(last_filled) = columns.iter().rposition(|x| x.is_some()) {
                 columns.truncate(last_filled + 1);
                 if let ViewConfigRequirements {
@@ -131,10 +131,10 @@ pub impl ViewConfigUpdate {
                         .filter(|x| x.is_some())
                         .collect::<Vec<_>>();
                 }
+            }
 
-                if initial_len != columns.len() {
-                    self.columns = Some(columns);
-                }
+            if initial_len != columns.len() {
+                self.columns = Some(columns);
             }
         }
     }

package/src/rust/session/drag_drop_update.rs

@@ -12,8 +12,8 @@
 
 use perspective_client::config::*;
 
-use crate::dragdrop::{DragEffect, DragTarget};
 use crate::js::plugin::ViewConfigRequirements;
+use crate::utils::{DragEffect, DragTarget};
 
 #[allow(clippy::too_many_arguments)]
 #[extend::ext]