mv things around (wip)

rust/perspective-viewer/src/less/column-settings-panel.less

@@ -62,13 +62,16 @@
                 cursor: text;
             }
         }
-        &.focused {
+        &::focus {
             outline-style: solid;
             background: var(--plugin--background);
         }
         &.edited {
             outline-style: dashed;
         }
+        &.invalid {
+            outline-color: var(--error--color);
+        }
 
         .sidebar_header_title {
             line-height: normal;

rust/perspective-viewer/src/rust/components/column_settings_sidebar/attributes_tab.rs

@@ -27,8 +27,11 @@ use crate::{derive_model, html_template};
 #[derive(PartialEq, Clone, Properties)]
 pub struct AttributesTabProps {
     pub header_value: Option<String>,
+    pub initial_header_value: Option<String>,
+    pub header_valid: bool,
     pub selected_column: ColumnLocator,
     pub on_close: Callback<()>,
+    pub on_reset: Callback<()>,
     pub session: Session,
     pub renderer: Renderer,
     pub presentation: Presentation,
@@ -44,7 +47,10 @@ pub fn AttributesTab(p: &AttributesTabProps) -> Html {
             <div class="tab-section">
                 <ExprEditorAttr
                     on_close={p.on_close.clone()}
+                    on_reset={p.on_reset.clone()}
                     header_value={p.header_value.clone()}
+                    header_valid={p.header_valid}
+                    header_changed={p.header_value != p.initial_header_value}
                     selected_column={p.selected_column.clone()}
                     session={p.session.clone()}
                     renderer={p.renderer.clone()}

rust/perspective-viewer/src/rust/components/column_settings_sidebar/attributes_tab/expression_editor.rs

@@ -29,8 +29,11 @@ use crate::utils::ApiFuture;
 #[derive(Properties, PartialEq, Clone)]
 pub struct ExprEditorAttrProps {
     pub header_value: Option<String>,
+    pub header_valid: bool,
+    pub header_changed: bool,
     pub selected_column: ColumnLocator,
     pub on_close: Callback<()>,
+    pub on_reset: Callback<()>,
     pub session: Session,
     pub renderer: Renderer,
     pub on_input: Callback<Rc<String>>,
@@ -66,29 +69,34 @@ pub fn expression_editor_attr(p: &ExprEditorAttrProps) -> Html {
                 { on_save }
                 { on_validate }
                 { on_delete }
+                on_reset = { p.on_reset.clone() }
                 on_input={ p.on_input.clone() }
                 session = { &p.session }
                 alias = { p.selected_column.name().cloned() }
                 disabled = {!matches!(p.selected_column, ColumnLocator::Expr(_))}
+                valid_alias = {p.header_valid}
+                alias_changed = {p.header_changed}
             />
         </div>
     }
 }
 
-fn update_expr(alias: String, new_expr_val: &JsValue, props: &ExprEditorAttrProps) {
+fn update_expr(old_name: String, new_expr_val: &JsValue, props: &ExprEditorAttrProps) {
     let session = props.session.clone();
     let props = props.clone();
+
     let new_expr_val = new_expr_val.as_string().unwrap();
-    let new_expr = Expression::new(Some(alias.clone().into()), new_expr_val.into());
+    let new_name = props.header_value.clone().unwrap_or(new_expr_val.clone());
+    let new_expr = Expression::new(Some(new_name.into()), new_expr_val.into());
 
     ApiFuture::spawn(async move {
         let update = session
-            .create_replace_expression_update(&alias, &new_expr)
+            .create_replace_expression_update(&old_name, &new_expr)
             .await;
         props
             .presentation
             .set_open_column_settings(Some(OpenColumnSettings {
-                locator: Some(ColumnLocator::Expr(Some(alias.clone()))),
+                locator: Some(ColumnLocator::Expr(Some(old_name.clone()))),
                 tab: Some(ColumnSettingsTab::Attributes),
             }));
         props.update_and_render(update).await?;

rust/perspective-viewer/src/rust/components/column_settings_sidebar/sidebar.rs

@@ -19,6 +19,8 @@ use std::rc::Rc;
 pub use tablist::*;
 use yew::{function_component, html, Callback, Html, Properties};
 
+use crate::components::column_settings_sidebar::attributes_tab::AttributesTabProps;
+use crate::components::column_settings_sidebar::style_tab::StyleTabProps;
 use crate::components::containers::sidebar::Sidebar;
 use crate::components::containers::tablist::Tab;
 use crate::components::style::LocalStyle;
@@ -62,17 +64,28 @@ impl PartialEq for ColumnSettingsProps {
 #[function_component]
 pub fn ColumnSettingsSidebar(p: &ColumnSettingsProps) -> Html {
     let column_name = p.selected_column.name_or_default(&p.session);
-    let header_value = yew::use_state_eq(|| Some(column_name.clone()));
+    let expr_value = p.session.metadata().get_expression_by_alias(&column_name);
+    let header_value_opt =
+        expr_value.and_then(|val| (val != column_name).then_some(column_name.clone()));
+    let header_value = yew::use_state_eq(|| header_value_opt.clone());
+    let initial_header_value = yew::use_state_eq(|| header_value_opt);
+    let header_valid = yew::use_state_eq(|| true);
     {
         // on p.selected_column change...
-        clone!(header_value, p.session);
+        clone!(header_value, initial_header_value, p.session);
         yew::use_effect_with(p.selected_column.clone(), move |selected_column| {
-            header_value.set(Some(selected_column.name_or_default(&session)));
+            let value = Some(selected_column.name_or_default(&session));
+            header_value.set(value.clone());
+            initial_header_value.set(value);
         });
     }
-    let on_change_header_value = yew::use_callback(header_value.clone(), |s, header_value| {
-        header_value.set(s);
-    });
+    let on_change_header_value = yew::use_callback(
+        (header_value.clone(), header_valid.clone()),
+        |(value, valid), (header_value, header_valid)| {
+            header_value.set(value);
+            header_valid.set(valid);
+        },
+    );
 
     let expr_contents = {
         let expr_contents = p
@@ -85,6 +98,9 @@ pub fn ColumnSettingsSidebar(p: &ColumnSettingsProps) -> Html {
     let on_expr_input = yew::use_callback(expr_contents.clone(), |val, expr_contents| {
         expr_contents.set(val)
     });
+    let on_expr_reset = yew::use_callback((), |(), ()| {
+        todo!();
+    });
 
     let maybe_ty = p.session.metadata().get_column_view_type(&column_name);
 
@@ -125,18 +141,38 @@ pub fn ColumnSettingsSidebar(p: &ColumnSettingsProps) -> Html {
     let header_contents = html! {
         <ColumnSettingsHeader
             {maybe_ty}
-            header_value={(*header_value).clone()}
+            initial_value={(*initial_header_value).clone()}
             on_change={on_change_header_value.clone()}
             selected_tab={selected_tab.1}
             selected_column={p.selected_column.clone()}
             placeholder={(*expr_contents).clone()}
             session={p.session.clone()}
-            renderer={p.renderer.clone()}
-            presentation={p.presentation.clone()}
         />
     };
 
     // --- render ---
+    let attrs_tab = AttributesTabProps {
+        header_value: (*header_value).clone(),
+        initial_header_value: (*initial_header_value).clone(),
+        header_valid: *header_valid,
+        selected_column: (p.selected_column.clone()),
+        on_close: p.on_close.clone(),
+        on_reset: on_expr_reset,
+        session: p.session.clone(),
+        renderer: p.renderer.clone(),
+        presentation: p.presentation.clone(),
+        custom_events: p.custom_events.clone(),
+        on_input: on_expr_input,
+    };
+
+    let style_tab = StyleTabProps {
+        custom_events: p.custom_events.clone(),
+        session: p.session.clone(),
+        renderer: p.renderer.clone(),
+        ty: maybe_ty,
+        column_name,
+    };
+
     html_template! {
         <LocalStyle href={ css!("column-settings-panel") } />
         <Sidebar
@@ -152,17 +188,12 @@ pub fn ColumnSettingsSidebar(p: &ColumnSettingsProps) -> Html {
                 session={p.session.clone()}
                 custom_events={p.custom_events.clone()}
 
-                on_close={p.on_close.clone()}
-                selected_column={p.selected_column.clone()}
-                {on_expr_input}
-
                 on_tab_change={on_tab_change.clone()}
                 selected_tab={*selected_tab}
                 {tabs}
-                {maybe_ty}
-                header_value={(*header_value).clone()}
-                {column_name}
-                is_active={p.is_active}
+
+                {attrs_tab}
+                {style_tab}
             />
 
         </Sidebar>

rust/perspective-viewer/src/rust/components/column_settings_sidebar/sidebar/header.rs

@@ -7,51 +7,43 @@ use crate::components::editable_header::EditableHeader;
 use crate::components::type_icon::{TypeIcon, TypeIconType};
 use crate::components::viewer::ColumnLocator;
 use crate::config::Type;
-use crate::model::*;
-use crate::presentation::{OpenColumnSettings, Presentation};
-use crate::renderer::Renderer;
 use crate::session::Session;
-use crate::utils::ApiFuture;
-use crate::{clone, derive_model};
 
 #[derive(PartialEq, Properties, Clone)]
 pub struct ColumnSettingsHeaderProps {
     pub maybe_ty: Option<Type>,
-    pub header_value: Option<String>,
-    pub on_change: Callback<Option<String>>,
+    pub initial_value: Option<String>,
+    pub on_change: Callback<(Option<String>, bool)>,
     pub selected_column: ColumnLocator,
     pub selected_tab: ColumnSettingsTab,
-    pub session: Session,
-    pub renderer: Renderer,
     pub placeholder: Rc<String>,
-    pub presentation: Presentation,
+    pub session: Session,
 }
-derive_model!(Presentation, Session, Renderer for ColumnSettingsHeaderProps);
 
 #[function_component(ColumnSettingsHeader)]
 pub fn column_settings_header(p: &ColumnSettingsHeaderProps) -> Html {
-    let on_submit = yew::use_callback(p.clone(), move |new_name: Option<String>, p| {
-        if let ColumnLocator::Expr(Some(column_name)) | ColumnLocator::Plain(column_name) =
-            p.selected_column.clone()
-        {
-            // rename expr
-            clone!(p, new_name);
-            ApiFuture::spawn(async move {
-                let update = p
-                    .session
-                    .create_rename_expression_update(column_name, new_name.clone())
-                    .await;
-                // p.presentation.set_open_column_settings(new_name);
-                p.presentation
-                    .set_open_column_settings(Some(OpenColumnSettings {
-                        locator: Some(ColumnLocator::Expr(new_name.clone())),
-                        tab: Some(p.selected_tab),
-                    }));
-                p.update_and_render(update).await?;
-                Ok(())
-            })
-        }
-    });
+    // let on_submit = yew::use_callback(p.clone(), move |new_name: Option<String>,
+    // p| {     if let ColumnLocator::Expr(Some(column_name)) |
+    // ColumnLocator::Plain(column_name) =         p.selected_column.clone()
+    //     {
+    //         // rename expr
+    //         clone!(p, new_name);
+    //         ApiFuture::spawn(async move {
+    //             let update = p
+    //                 .session
+    //                 .create_rename_expression_update(column_name,
+    // new_name.clone())                 .await;
+    //             // p.presentation.set_open_column_settings(new_name);
+    //             p.presentation
+    //                 .set_open_column_settings(Some(OpenColumnSettings {
+    //                     locator: Some(ColumnLocator::Expr(new_name.clone())),
+    //                     tab: Some(p.selected_tab),
+    //                 }));
+    //             p.update_and_render(update).await?;
+    //             Ok(())
+    //         })
+    //     }
+    // });
 
     let is_expr = matches!(p.selected_column, ColumnLocator::Expr(_));
     let editable = is_expr && matches!(p.selected_tab, ColumnSettingsTab::Attributes);
@@ -64,10 +56,10 @@ pub fn column_settings_header(p: &ColumnSettingsHeaderProps) -> Html {
         <EditableHeader
             icon={Some(header_icon)}
             on_change={p.on_change.clone()}
-            {on_submit}
             {editable}
-            value={p.header_value.clone()}
+            initial_value={p.initial_value.clone()}
             placeholder={p.placeholder.clone()}
+            session={p.session.clone()}
         />
     }
 }

rust/perspective-viewer/src/rust/components/column_settings_sidebar/sidebar/tablist.rs

@@ -1,12 +1,10 @@
-use std::rc::Rc;
-
 use yew::{function_component, html, Callback, Html, Properties};
 
-use crate::components::column_settings_sidebar::attributes_tab::AttributesTab;
-use crate::components::column_settings_sidebar::style_tab::StyleTab;
+use crate::components::column_settings_sidebar::attributes_tab::{
+    AttributesTab, AttributesTabProps,
+};
+use crate::components::column_settings_sidebar::style_tab::{StyleTab, StyleTabProps};
 use crate::components::containers::tablist::TabList;
-use crate::components::viewer::ColumnLocator;
-use crate::config::Type;
 use crate::custom_events::CustomEvents;
 use crate::presentation::Presentation;
 use crate::renderer::Renderer;
@@ -25,26 +23,18 @@ pub struct ColumnSettingsTablistProps {
     pub presentation: Presentation,
     pub session: Session,
     pub custom_events: CustomEvents,
-    pub on_close: Callback<()>,
-    pub selected_column: ColumnLocator,
-    pub on_expr_input: Callback<Rc<String>>,
+
+    pub attrs_tab: AttributesTabProps,
+    pub style_tab: StyleTabProps,
+
     pub on_tab_change: Callback<(usize, ColumnSettingsTab)>,
     pub selected_tab: (usize, ColumnSettingsTab),
     pub tabs: Vec<ColumnSettingsTab>,
-    pub maybe_ty: Option<Type>,
-    pub header_value: Option<String>,
-    pub column_name: String,
-    pub is_active: bool,
 }
 
 impl PartialEq for ColumnSettingsTablistProps {
     fn eq(&self, other: &Self) -> bool {
-        self.selected_column == other.selected_column
-            && self.column_name == other.column_name
-            && self.selected_tab == other.selected_tab
-            && self.tabs == other.tabs
-            && self.is_active == other.is_active
-            && self.header_value == other.header_value
+        self.selected_tab == other.selected_tab && self.tabs == other.tabs
     }
 }
 
@@ -53,28 +43,11 @@ pub fn column_settings_tablist(p: &ColumnSettingsTablistProps) -> Html {
     let match_fn = yew::use_callback(p.clone(), move |tab, p| match tab {
         ColumnSettingsTab::Attributes => {
             html! {
-                <AttributesTab
-                    session={ p.session.clone() }
-                    renderer={ p.renderer.clone() }
-                    custom_events={ p.custom_events.clone() }
-                    presentation={ p.presentation.clone() }
-
-                    selected_column={ p.selected_column.clone() }
-                    on_close={ p.on_close.clone() }
-                    header_value={p.header_value.clone()}
-                    on_input={p.on_expr_input.clone()}
-                />
+                <AttributesTab ..p.attrs_tab.clone() />
             }
         },
         ColumnSettingsTab::Style => html! {
-            <StyleTab
-                session={ p.session.clone() }
-                renderer={ p.renderer.clone() }
-                custom_events={ p.custom_events.clone() }
-
-                column_name={ p.column_name.clone() }
-                ty={ p.maybe_ty.unwrap() }
-            />
+            <StyleTab ..p.style_tab.clone() />
         },
     });
 

rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab.rs

@@ -27,7 +27,7 @@ pub struct StyleTabProps {
     pub session: Session,
     pub renderer: Renderer,
 
-    pub ty: Type,
+    pub ty: Option<Type>,
     pub column_name: String,
 }
 
@@ -40,7 +40,7 @@ pub fn StyleTab(p: &StyleTabProps) -> Html {
                     custom_events={ p.custom_events.clone() }
                     session={ p.session.clone() }
                     renderer={ p.renderer.clone() }
-                    ty={ p.ty }
+                    ty={ p.ty.unwrap() }
                     column_name={ p.column_name.clone() }/>
             </div>
         </div>