@perspective-dev/viewer 4.0.0 → 4.1.0

package/src/rust/components/viewer.rs

@@ -13,102 +13,40 @@
 use std::rc::Rc;
 
 use futures::channel::oneshot::*;
-use perspective_client::config::ColumnType;
+use perspective_js::utils::*;
 use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
-use super::column_selector::ColumnSelector;
 use super::containers::split_panel::SplitPanel;
 use super::font_loader::{FontLoader, FontLoaderProps, FontLoaderStatus};
 use super::form::debug::DebugPanel;
-use super::plugin_selector::PluginSelector;
-use super::render_warning::RenderWarning;
-use super::status_bar::StatusBar;
 use super::style::{LocalStyle, StyleProvider};
-use crate::components::column_settings_sidebar::ColumnSettingsSidebar;
-use crate::components::containers::sidebar::SidebarCloseButton;
+use crate::components::column_settings_sidebar::ColumnSettingsPanel;
+use crate::components::main_panel::MainPanel;
+use crate::components::settings_panel::SettingsPanel;
 use crate::config::*;
 use crate::custom_events::CustomEvents;
 use crate::dragdrop::*;
 use crate::model::*;
-use crate::presentation::Presentation;
+use crate::presentation::{ColumnLocator, ColumnSettingsTab, Presentation};
 use crate::renderer::*;
 use crate::session::*;
 use crate::utils::*;
-use crate::*;
-
-/// Locates a view column.
-/// Table columns are those defined on the table, but their types will reflect
-/// the view type, not the table type.
-#[derive(Clone, Debug, PartialEq)]
-pub enum ColumnLocator {
-    Table(String),
-    Expression(String),
-    NewExpression,
-}
-impl ColumnLocator {
-    /// Pulls the column's name from the locator.
-    /// If the column is a new expression which has yet to be saved, the
-    /// function will return None.
-    pub fn name(&self) -> Option<&String> {
-        match self {
-            Self::Table(s) | Self::Expression(s) => Some(s),
-            Self::NewExpression => None,
-        }
-    }
-
-    pub fn name_or_default(&self, session: &Session) -> String {
-        match self {
-            Self::Table(s) | Self::Expression(s) => s.clone(),
-            Self::NewExpression => session.metadata().make_new_column_name(None),
-        }
-    }
-
-    pub fn is_active(&self, session: &Session) -> bool {
-        self.name()
-            .map(|name| session.is_column_active(name))
-            .unwrap_or_default()
-    }
-
-    #[inline(always)]
-    pub fn is_saved_expr(&self) -> bool {
-        matches!(self, ColumnLocator::Expression(_))
-    }
-
-    #[inline(always)]
-    pub fn is_expr(&self) -> bool {
-        matches!(
-            self,
-            ColumnLocator::Expression(_) | ColumnLocator::NewExpression
-        )
-    }
-
-    #[inline(always)]
-    pub fn is_new_expr(&self) -> bool {
-        matches!(self, ColumnLocator::NewExpression)
-    }
-
-    pub fn view_type(&self, session: &Session) -> Option<ColumnType> {
-        let name = self.name().cloned().unwrap_or_default();
-        session.metadata().get_column_view_type(name.as_str())
-    }
-}
+use crate::{PerspectiveProperties, css};
 
-#[derive(Properties)]
+#[derive(Clone, Properties, PerspectiveProperties!)]
 pub struct PerspectiveViewerProps {
+    /// The light DOM element this component will render to.
     pub elem: web_sys::HtmlElement,
+
+    /// State
+    pub custom_events: CustomEvents,
+    pub dragdrop: DragDrop,
     pub session: Session,
     pub renderer: Renderer,
     pub presentation: Presentation,
-    pub dragdrop: DragDrop,
-    pub custom_events: CustomEvents,
-
-    #[prop_or_default]
-    pub weak_link: WeakScope<PerspectiveViewer>,
 }
 
-derive_model!(Renderer, Session, Presentation for PerspectiveViewerProps);
-
 impl PartialEq for PerspectiveViewerProps {
     fn eq(&self, _rhs: &Self) -> bool {
         false
@@ -117,45 +55,40 @@ impl PartialEq for PerspectiveViewerProps {
 
 impl PerspectiveViewerProps {
     fn is_title(&self) -> bool {
-        !self.presentation.get_is_workspace() && self.presentation.get_title().is_some()
+        self.session.get_title().is_some()
     }
 }
 
 #[derive(Debug)]
 pub enum PerspectiveViewerMsg {
-    Resize,
-    Reset(bool, Option<Sender<()>>),
-    ToggleSettingsInit(Option<SettingsUpdate>, Option<Sender<ApiResult<JsValue>>>),
-    ToggleSettingsComplete(SettingsUpdate, Sender<()>),
-    ToggleDebug,
-    PreloadFontsUpdate,
-    RenderLimits(Option<(usize, usize, Option<usize>, Option<usize>)>),
-    SettingsPanelSizeUpdate(Option<i32>),
     ColumnSettingsPanelSizeUpdate(Option<i32>),
-    Error,
+    ColumnSettingsTabChanged(ColumnSettingsTab),
     OpenColumnSettings {
         locator: Option<ColumnLocator>,
         sender: Option<Sender<()>>,
         toggle: bool,
     },
+    PreloadFontsUpdate,
+    Reset(bool, Option<Sender<()>>),
+    Resize,
+    SettingsPanelSizeUpdate(Option<i32>),
+    ToggleDebug,
+    ToggleSettingsComplete(SettingsUpdate, Sender<()>),
+    ToggleSettingsInit(Option<SettingsUpdate>, Option<Sender<ApiResult<JsValue>>>),
 }
 
+use PerspectiveViewerMsg::*;
+
 pub struct PerspectiveViewer {
-    dimensions: Option<(usize, usize, Option<usize>, Option<usize>)>,
-    on_rendered: Option<Sender<()>>,
-    fonts: FontLoaderProps,
-    settings_open: bool,
+    _subscriptions: [Subscription; 1],
+    column_settings_panel_width_override: Option<i32>,
     debug_open: bool,
-    /// The column which will be opened in the ColumnSettingsSidebar
-    selected_column: Option<ColumnLocator>,
-    selected_column_is_active: bool, // TODO: should we use a struct?
+    fonts: FontLoaderProps,
+    on_close_column_settings: Callback<()>,
+    on_rendered: Option<Sender<()>>,
     on_resize: Rc<PubSub<()>>,
-    on_dimensions_reset: Rc<PubSub<()>>,
-    _subscriptions: [Subscription; 2],
+    settings_open: bool,
     settings_panel_width_override: Option<i32>,
-    column_settings_panel_width_override: Option<i32>,
-
-    on_close_column_settings: Callback<()>,
 }
 
 impl Component for PerspectiveViewer {
@@ -163,94 +96,58 @@ impl Component for PerspectiveViewer {
     type Properties = PerspectiveViewerProps;
 
     fn create(ctx: &Context<Self>) -> Self {
-        *ctx.props().weak_link.borrow_mut() = Some(ctx.link().clone());
         let elem = ctx.props().elem.clone();
-        let callback = ctx
-            .link()
-            .callback(|()| PerspectiveViewerMsg::PreloadFontsUpdate);
+        let fonts = FontLoaderProps::new(&elem, ctx.link().callback(|()| PreloadFontsUpdate));
 
         let session_sub = {
-            clone!(
-                ctx.props().presentation,
-                ctx.props().session,
-                plugin_query = ctx.props().get_plugin_column_styles_query()
-            );
-            let callback = ctx.link().batch_callback(move |(update, render_limits)| {
+            let props = ctx.props().clone();
+            let callback = ctx.link().batch_callback(move |(update, _)| {
                 if update {
-                    vec![PerspectiveViewerMsg::RenderLimits(Some(render_limits))]
+                    vec![]
                 } else {
-                    let locator =
-                        presentation
-                            .get_open_column_settings()
-                            .locator
-                            .filter(|locator| match &locator {
-                                ColumnLocator::Table(name) => {
-                                    locator.is_active(&session)
-                                        && plugin_query
-                                            .can_render_column_styles(name)
-                                            .unwrap_or_default()
-                                },
-                                _ => true,
-                            });
-
-                    vec![
-                        PerspectiveViewerMsg::RenderLimits(Some(render_limits)),
-                        PerspectiveViewerMsg::OpenColumnSettings {
-                            locator,
-                            sender: None,
-                            toggle: false,
-                        },
-                    ]
+                    let locator = props.get_current_column_locator();
+                    vec![OpenColumnSettings {
+                        locator,
+                        sender: None,
+                        toggle: false,
+                    }]
                 }
             });
+
             ctx.props()
                 .renderer
                 .render_limits_changed
                 .add_listener(callback)
         };
 
-        let error_sub = ctx
-            .props()
-            .session
-            .table_errored
-            .add_listener(ctx.link().callback(|_| PerspectiveViewerMsg::Error));
-
-        let on_close_column_settings =
-            ctx.link()
-                .callback(|_| PerspectiveViewerMsg::OpenColumnSettings {
-                    locator: None,
-                    sender: None,
-                    toggle: false,
-                });
+        let on_close_column_settings = ctx.link().callback(|_| OpenColumnSettings {
+            locator: None,
+            sender: None,
+            toggle: false,
+        });
 
         Self {
-            dimensions: None,
-            on_rendered: None,
-            fonts: FontLoaderProps::new(&elem, callback),
-            settings_open: false,
+            _subscriptions: [session_sub],
+            column_settings_panel_width_override: None,
             debug_open: false,
-            selected_column: None,
-            selected_column_is_active: false,
+            fonts,
+            on_close_column_settings,
+            on_rendered: None,
             on_resize: Default::default(),
-            on_dimensions_reset: Default::default(),
-            _subscriptions: [session_sub, error_sub],
+            settings_open: false,
             settings_panel_width_override: None,
-            column_settings_panel_width_override: None,
-            on_close_column_settings,
         }
     }
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
-        let needs_update = self.selected_column.is_some();
         match msg {
-            PerspectiveViewerMsg::PreloadFontsUpdate => true,
-            PerspectiveViewerMsg::Resize => {
+            PreloadFontsUpdate => true,
+            Resize => {
                 self.on_resize.emit(());
                 false
             },
-            PerspectiveViewerMsg::Error => true,
-            PerspectiveViewerMsg::Reset(all, sender) => {
-                self.selected_column = None;
+            Reset(all, sender) => {
+                ctx.props().presentation.set_open_column_settings(None);
                 clone!(
                     ctx.props().renderer,
                     ctx.props().session,
@@ -258,7 +155,13 @@ impl Component for PerspectiveViewer {
                 );
 
                 ApiFuture::spawn(async move {
-                    session.reset(all).await?;
+                    session
+                        .reset(ResetOptions {
+                            config: true,
+                            expressions: all,
+                            ..ResetOptions::default()
+                        })
+                        .await?;
                     let columns_config = if all {
                         presentation.reset_columns_configs();
                         None
@@ -281,111 +184,85 @@ impl Component for PerspectiveViewer {
                     result
                 });
 
-                needs_update
-            },
-            PerspectiveViewerMsg::ToggleDebug => {
-                self.debug_open = !self.debug_open;
-                clone!(ctx.props().renderer, ctx.props().session);
-                ApiFuture::spawn(async move {
-                    renderer.draw(session.validate().await?.create_view()).await
-                });
-
-                true
+                false
             },
-            PerspectiveViewerMsg::ToggleSettingsInit(Some(SettingsUpdate::Missing), None) => false,
-            PerspectiveViewerMsg::ToggleSettingsInit(
-                Some(SettingsUpdate::Missing),
-                Some(resolve),
-            ) => {
+            ToggleSettingsInit(Some(SettingsUpdate::Missing), None) => false,
+            ToggleSettingsInit(Some(SettingsUpdate::Missing), Some(resolve)) => {
                 resolve.send(Ok(JsValue::UNDEFINED)).unwrap();
                 false
             },
-            PerspectiveViewerMsg::ToggleSettingsInit(Some(SettingsUpdate::SetDefault), resolve) => {
+            ToggleSettingsInit(Some(SettingsUpdate::SetDefault), resolve) => {
                 self.init_toggle_settings_task(ctx, Some(false), resolve);
                 false
             },
-            PerspectiveViewerMsg::ToggleSettingsInit(
-                Some(SettingsUpdate::Update(force)),
-                resolve,
-            ) => {
+            ToggleSettingsInit(Some(SettingsUpdate::Update(force)), resolve) => {
                 self.init_toggle_settings_task(ctx, Some(force), resolve);
                 false
             },
-            PerspectiveViewerMsg::ToggleSettingsInit(None, resolve) => {
+            ToggleSettingsInit(None, resolve) => {
                 self.init_toggle_settings_task(ctx, None, resolve);
                 false
             },
-            PerspectiveViewerMsg::ToggleSettingsComplete(SettingsUpdate::SetDefault, resolve)
-                if self.settings_open =>
-            {
-                self.selected_column = None;
+            ToggleSettingsComplete(SettingsUpdate::SetDefault, resolve) if self.settings_open => {
+                ctx.props().presentation.set_open_column_settings(None);
                 self.settings_open = false;
                 self.on_rendered = Some(resolve);
                 true
             },
-            PerspectiveViewerMsg::ToggleSettingsComplete(
-                SettingsUpdate::Update(force),
-                resolve,
-            ) if force != self.settings_open => {
-                self.selected_column = None;
+            ToggleSettingsComplete(SettingsUpdate::Update(force), resolve)
+                if force != self.settings_open =>
+            {
+                ctx.props().presentation.set_open_column_settings(None);
                 self.settings_open = force;
                 self.on_rendered = Some(resolve);
                 true
             },
-            PerspectiveViewerMsg::ToggleSettingsComplete(_, resolve)
+            ToggleSettingsComplete(_, resolve)
                 if matches!(self.fonts.get_status(), FontLoaderStatus::Finished) =>
             {
-                self.selected_column = None;
+                ctx.props().presentation.set_open_column_settings(None);
                 if let Err(e) = resolve.send(()) {
                     tracing::error!("toggle settings failed {:?}", e);
                 }
 
                 false
             },
-            PerspectiveViewerMsg::ToggleSettingsComplete(_, resolve) => {
-                self.selected_column = None;
+            ToggleSettingsComplete(_, resolve) => {
+                ctx.props().presentation.set_open_column_settings(None);
                 self.on_rendered = Some(resolve);
                 true
             },
-            PerspectiveViewerMsg::RenderLimits(dimensions) => {
-                if self.dimensions != dimensions {
-                    self.dimensions = dimensions;
-                    true
-                } else {
-                    false
-                }
-            },
-            PerspectiveViewerMsg::OpenColumnSettings {
+            OpenColumnSettings {
                 locator,
                 sender,
                 toggle,
             } => {
-                let is_active = locator
-                    .as_ref()
-                    .map(|l| l.is_active(&ctx.props().session))
-                    .unwrap_or_default();
-
-                self.selected_column_is_active = is_active;
-                if toggle && self.selected_column == locator {
-                    self.selected_column = None;
-                    (false, None)
-                } else {
-                    self.selected_column.clone_from(&locator);
-
-                    locator
-                        .clone()
-                        .map(|c| (true, c.name().cloned()))
-                        .unwrap_or_default()
-                };
-
                 let mut open_column_settings = ctx.props().presentation.get_open_column_settings();
-                open_column_settings
-                    .locator
-                    .clone_from(&self.selected_column);
-
-                ctx.props()
-                    .presentation
-                    .set_open_column_settings(Some(open_column_settings));
+                if locator == open_column_settings.locator {
+                    if toggle {
+                        ctx.props().presentation.set_open_column_settings(None);
+                    }
+                } else {
+                    open_column_settings.locator.clone_from(&locator);
+                    open_column_settings.tab =
+                        if matches!(locator, Some(ColumnLocator::NewExpression)) {
+                            Some(ColumnSettingsTab::Attributes)
+                        } else {
+                            locator.as_ref().and_then(|x| {
+                                x.name().map(|x| {
+                                    if ctx.props().session.is_column_active(x) {
+                                        ColumnSettingsTab::Style
+                                    } else {
+                                        ColumnSettingsTab::Attributes
+                                    }
+                                })
+                            })
+                        };
+
+                    ctx.props()
+                        .presentation
+                        .set_open_column_settings(Some(open_column_settings));
+                }
 
                 if let Some(sender) = sender {
                     sender.send(()).unwrap();
@@ -393,22 +270,39 @@ impl Component for PerspectiveViewer {
 
                 true
             },
-            PerspectiveViewerMsg::SettingsPanelSizeUpdate(Some(x)) => {
+            SettingsPanelSizeUpdate(Some(x)) => {
                 self.settings_panel_width_override = Some(x);
                 false
             },
-            PerspectiveViewerMsg::SettingsPanelSizeUpdate(None) => {
+            SettingsPanelSizeUpdate(None) => {
                 self.settings_panel_width_override = None;
                 false
             },
-            PerspectiveViewerMsg::ColumnSettingsPanelSizeUpdate(Some(x)) => {
+            ColumnSettingsPanelSizeUpdate(Some(x)) => {
                 self.column_settings_panel_width_override = Some(x);
                 false
             },
-            PerspectiveViewerMsg::ColumnSettingsPanelSizeUpdate(None) => {
+            ColumnSettingsPanelSizeUpdate(None) => {
                 self.column_settings_panel_width_override = None;
                 false
             },
+            ColumnSettingsTabChanged(tab) => {
+                let mut open_column_settings = ctx.props().presentation.get_open_column_settings();
+                open_column_settings.tab.clone_from(&Some(tab));
+                ctx.props()
+                    .presentation
+                    .set_open_column_settings(Some(open_column_settings));
+                true
+            },
+            ToggleDebug => {
+                self.debug_open = !self.debug_open;
+                clone!(ctx.props().renderer, ctx.props().session);
+                ApiFuture::spawn(async move {
+                    renderer.draw(session.validate().await?.create_view()).await
+                });
+
+                true
+            },
         }
     }
 
@@ -421,12 +315,7 @@ impl Component for PerspectiveViewer {
 
     /// On rendered call notify_resize().  This also triggers any registered
     /// async callbacks to the Custom Element API.
-    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
-        ctx.props()
-            .presentation
-            .set_settings_open(Some(self.settings_open))
-            .unwrap();
-
+    fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool) {
         if self.on_rendered.is_some()
             && matches!(self.fonts.get_status(), FontLoaderStatus::Finished)
             && self.on_rendered.take().unwrap().send(()).is_err()
@@ -435,175 +324,125 @@ impl Component for PerspectiveViewer {
         }
     }
 
-    /// `PerspectiveViewer` has two basic UI modes - "open" and "closed".
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let settings = ctx
-            .link()
-            .callback(|_| PerspectiveViewerMsg::ToggleSettingsInit(None, None));
-
-        let on_close_settings = ctx
-            .link()
-            .callback(|()| PerspectiveViewerMsg::ToggleSettingsInit(None, None));
+        let Self::Properties {
+            custom_events,
+            dragdrop,
+            presentation,
+            renderer,
+            session,
+            ..
+        } = ctx.props();
+
+        let is_settings_open = self.settings_open && ctx.props().session.has_table();
+        let mut class = classes!();
+        if !is_settings_open {
+            class.push("settings-closed");
+        }
 
-        let on_toggle_debug = ctx.link().callback(|_| PerspectiveViewerMsg::ToggleDebug);
-        let mut class = classes!("settings-closed");
         if ctx.props().is_title() {
             class.push("titled");
         }
 
-        let on_open_expr_panel =
-            ctx.link()
-                .callback(|c| PerspectiveViewerMsg::OpenColumnSettings {
-                    locator: Some(c),
-                    sender: None,
-                    toggle: true,
-                });
-
-        let on_reset = ctx
-            .link()
-            .callback(|all| PerspectiveViewerMsg::Reset(all, None));
+        let on_open_expr_panel = ctx.link().callback(|c| OpenColumnSettings {
+            locator: Some(c),
+            sender: None,
+            toggle: true,
+        });
 
         let on_split_panel_resize = ctx
             .link()
-            .callback(|(x, _)| PerspectiveViewerMsg::SettingsPanelSizeUpdate(Some(x)));
+            .callback(|(x, _)| SettingsPanelSizeUpdate(Some(x)));
 
         let on_column_settings_panel_resize = ctx
             .link()
-            .callback(|(x, _)| PerspectiveViewerMsg::ColumnSettingsPanelSizeUpdate(Some(x)));
+            .callback(|(x, _)| ColumnSettingsPanelSizeUpdate(Some(x)));
 
+        let on_close_settings = ctx.link().callback(|()| ToggleSettingsInit(None, None));
+        let on_debug = ctx.link().callback(|_| ToggleDebug);
+        let selected_column = ctx.props().get_current_column_locator();
+        let selected_tab = ctx.props().presentation.get_open_column_settings().tab;
         let settings_panel = html! {
-            <div id="settings_panel" class="sidebar_column noselect split-panel orient-vertical">
-                if self.selected_column.is_none() {
-                    <SidebarCloseButton
-                        id="settings_close_button"
-                        on_close_sidebar={&on_close_settings}
-                    />
-                }
-                <SidebarCloseButton
-                    id={if self.debug_open { "debug_close_button" } else { "debug_open_button" }}
-                    on_close_sidebar={&on_toggle_debug}
-                />
-                <PluginSelector
-                    session={&ctx.props().session}
-                    renderer={&ctx.props().renderer}
-                    presentation={&ctx.props().presentation}
-                />
-                <ColumnSelector
-                    dragdrop={&ctx.props().dragdrop}
-                    renderer={&ctx.props().renderer}
-                    session={&ctx.props().session}
-                    presentation={&ctx.props().presentation}
+            if is_settings_open {
+                <SettingsPanel
+                    on_close={on_close_settings}
                     on_resize={&self.on_resize}
-                    on_open_expr_panel={&on_open_expr_panel}
-                    on_dimensions_reset={&self.on_dimensions_reset}
-                    selected_column={self.selected_column.clone()}
+                    on_select_column={on_open_expr_panel}
+                    is_debug={self.debug_open}
+                    {on_debug}
+                    {dragdrop}
+                    {presentation}
+                    {renderer}
+                    {session}
                 />
-            </div>
+            }
         };
 
-        let main_panel = html! {
-            <div id="main_column">
-                <StatusBar
-                    id="status_bar"
-                    session={&ctx.props().session}
-                    renderer={&ctx.props().renderer}
-                    presentation={&ctx.props().presentation}
-                    on_reset={on_reset.clone()}
-                />
-                <div id="main_panel_container">
-                    <RenderWarning
-                        dimensions={self.dimensions}
-                        session={&ctx.props().session}
-                        renderer={&ctx.props().renderer}
+        let on_settings = ctx.link().callback(|()| ToggleSettingsInit(None, None));
+        let on_select_tab = ctx.link().callback(ColumnSettingsTabChanged);
+        let column_settings_panel = html! {
+            if let Some(selected_column) = selected_column {
+                <SplitPanel
+                    id="modal_panel"
+                    reverse=true
+                    initial_size={self.column_settings_panel_width_override}
+                    on_reset={ctx.link().callback(|_| ColumnSettingsPanelSizeUpdate(None))}
+                    on_resize={on_column_settings_panel_resize}
+                >
+                    <ColumnSettingsPanel
+                        {selected_column}
+                        {selected_tab}
+                        on_close={self.on_close_column_settings.clone()}
+                        width_override={self.column_settings_panel_width_override}
+                        {on_select_tab}
+                        {custom_events}
+                        {presentation}
+                        {renderer}
+                        {session}
                     />
-                    <slot />
-                </div>
-                if let Some(selected_column) = self.selected_column.clone() {
-                    <SplitPanel
-                        id="modal_panel"
-                        reverse=true
-                        initial_size={self.column_settings_panel_width_override}
-                        on_reset={ctx.link().callback(|_| PerspectiveViewerMsg::ColumnSettingsPanelSizeUpdate(None))}
-                        on_resize={on_column_settings_panel_resize}
-                    >
-                        <ColumnSettingsSidebar
-                            session={&ctx.props().session}
-                            renderer={&ctx.props().renderer}
-                            custom_events={&ctx.props().custom_events}
-                            presentation={&ctx.props().presentation}
-                            {selected_column}
-                            on_close={self.on_close_column_settings.clone()}
-                            width_override={self.column_settings_panel_width_override}
-                            is_active={self.selected_column_is_active}
-                        />
-                        <></>
-                    </SplitPanel>
-                }
-            </div>
+                    <></>
+                </SplitPanel>
+            }
+        };
+
+        let main_panel = html! {
+            <MainPanel {on_settings} {custom_events} {presentation} {renderer} {session} />
+        };
+
+        let debug_panel = html! {
+            if self.debug_open { <DebugPanel {presentation} {renderer} {session} /> }
         };
 
         html! {
-            <>
-                <StyleProvider root={ctx.props().elem.clone()}>
-                    <LocalStyle href={css!("viewer")} />
-                    if self.settings_open && ctx.props().session.has_table() {
-                        if self.debug_open {
-                            <SplitPanel
-                                id="app_panel"
-                                reverse=true
-                                initial_size={self.settings_panel_width_override}
-                                on_reset={ctx.link().callback(|_| PerspectiveViewerMsg::SettingsPanelSizeUpdate(None))}
-                                on_resize={on_split_panel_resize}
-                                on_resize_finished={ctx.props().render_callback()}
-                            >
-                                <DebugPanel
-                                    session={ctx.props().session()}
-                                    renderer={ctx.props().renderer()}
-                                    presentation={ctx.props().presentation()}
-                                />
-                                { settings_panel }
-                                { main_panel }
-                            </SplitPanel>
-                        } else {
-                            <SplitPanel
-                                id="app_panel"
-                                reverse=true
-                                initial_size={self.settings_panel_width_override}
-                                on_reset={ctx.link().callback(|_| PerspectiveViewerMsg::SettingsPanelSizeUpdate(None))}
-                                on_resize={on_split_panel_resize}
-                                on_resize_finished={ctx.props().resize_callback()}
-                            >
-                                { settings_panel }
+            <StyleProvider root={ctx.props().elem.clone()}>
+                <LocalStyle href={css!("viewer")} />
+                <div id="component_container">
+                    if is_settings_open {
+                        <SplitPanel
+                            id="app_panel"
+                            reverse=true
+                            skip_empty=true
+                            initial_size={self.settings_panel_width_override}
+                            on_reset={ctx.link().callback(|_| SettingsPanelSizeUpdate(None))}
+                            on_resize={on_split_panel_resize.clone()}
+                            on_resize_finished={ctx.props().render_callback()}
+                        >
+                            { debug_panel }
+                            { settings_panel }
+                            <div id="main_column_container">
                                 { main_panel }
-                            </SplitPanel>
-                        }
+                                { column_settings_panel }
+                            </div>
+                        </SplitPanel>
                     } else {
-                        <RenderWarning
-                            dimensions={self.dimensions}
-                            session={&ctx.props().session}
-                            renderer={&ctx.props().renderer}
-                        />
-                        if ctx.props().is_title() || !ctx.props().session.has_table() || ctx.props().session.is_errored() {
-                            <StatusBar
-                                id="status_bar"
-                                session={&ctx.props().session}
-                                renderer={&ctx.props().renderer}
-                                presentation={&ctx.props().presentation}
-                                {on_reset}
-                            />
-                        }
-                        <div id="main_panel_container" {class}><slot /></div>
-                        if !ctx.props().presentation.get_is_workspace() {
-                            <div
-                                id="settings_button"
-                                class={if ctx.props().is_title() { "noselect button closed titled" } else { "noselect button closed" }}
-                                onmousedown={settings}
-                            />
-                        }
+                        <div id="main_column_container">
+                            { main_panel }
+                            { column_settings_panel }
+                        </div>
                     }
-                </StyleProvider>
+                </div>
                 <FontLoader ..self.fonts.clone() />
-            </>
+            </StyleProvider>
         }
     }
 
@@ -631,6 +470,7 @@ impl PerspectiveViewer {
         sender: Option<Sender<ApiResult<JsValue>>>,
     ) {
         let is_open = ctx.props().presentation.is_settings_open();
+        ctx.props().presentation.set_settings_before_open(!is_open);
         match force {
             Some(force) if is_open == force => {
                 if let Some(sender) = sender {
@@ -641,15 +481,32 @@ impl PerspectiveViewer {
                 let force = !is_open;
                 let callback = ctx.link().callback(move |resolve| {
                     let update = SettingsUpdate::Update(force);
-                    PerspectiveViewerMsg::ToggleSettingsComplete(update, resolve)
+                    ToggleSettingsComplete(update, resolve)
                 });
 
-                clone!(ctx.props().renderer, ctx.props().session);
+                clone!(
+                    ctx.props().renderer,
+                    ctx.props().session,
+                    ctx.props().presentation
+                );
+
                 ApiFuture::spawn(async move {
                     let result = if session.js_get_table().is_some() {
-                        renderer.presize(force, callback.emit_async_safe()).await
+                        renderer
+                            .presize(force, {
+                                let (sender, receiver) = channel::<()>();
+                                async move {
+                                    callback.emit(sender);
+                                    presentation.set_settings_open(!is_open);
+                                    Ok(receiver.await?)
+                                }
+                            })
+                            .await
                     } else {
-                        callback.emit_async_safe().await?;
+                        let (sender, receiver) = channel::<()>();
+                        callback.emit(sender);
+                        presentation.set_settings_open(!is_open);
+                        receiver.await?;
                         Ok(JsValue::UNDEFINED)
                     };