Merge pull request #2780 from tarekquao/master

Column type icon matches the datatype type of the field in column selectors (where, group by, sortby, filter)
finos · Oct 18, 2024 · a82abfd · a82abfd
2 parents 788e11c + 7110dd0
commit a82abfd
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 5 deletions.
diff --git a/rust/perspective-viewer/src/rust/components/column_selector/config_selector.rs b/rust/perspective-viewer/src/rust/components/column_selector/config_selector.rs
@@ -514,6 +514,7 @@ impl Component for ConfigSelector {
                             html_nested! {
                                 <PivotColumn
                                     dragdrop={ &ctx.props().dragdrop }
+                                    session={ &ctx.props().session }
                                     action={ DragTarget::GroupBy }
                                     column={ group_by.clone() }>
                                 </PivotColumn>
@@ -540,6 +541,7 @@ impl Component for ConfigSelector {
                             html_nested! {
                                 <PivotColumn
                                     dragdrop={ &ctx.props().dragdrop }
+                                    session={ &ctx.props().session }
                                     action={ DragTarget::SplitBy }
                                     column={ split_by.clone() }>
                                 </PivotColumn>

diff --git a/rust/perspective-viewer/src/rust/components/column_selector/filter_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/filter_column.rs
@@ -458,6 +458,8 @@ impl Component for FilterColumn {
         }
         .unwrap_or_default();
 
+        let final_col_type = col_type.expect("Unknown column");
+
         html! {
             <div
                 class="pivot-column-draggable"
@@ -467,7 +469,8 @@ impl Component for FilterColumn {
             >
                 <LocalStyle href={css!("filter-item")} />
                 <div class="pivot-column-border">
-                    <TypeIcon ty={ColumnType::String} />
+                    // <TypeIcon ty={ColumnType::String} />
+                    <TypeIcon ty={final_col_type} />
                     <span class="column_name">{ filter.column().to_owned() }</span>
                     <FilterOpSelector
                         class="filterop-selector"

diff --git a/rust/perspective-viewer/src/rust/components/column_selector/pivot_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/pivot_column.rs
@@ -10,18 +10,20 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use perspective_client::ColumnType;
+// use perspective_client::ColumnType;
 use web_sys::*;
 use yew::prelude::*;
 
 use crate::components::containers::dragdrop_list::*;
 use crate::components::type_icon::TypeIcon;
 use crate::dragdrop::*;
+use crate::session::*;
 
 pub struct PivotColumn {}
 
 #[derive(Properties)]
 pub struct PivotColumnProps {
+    pub session: Session,
     pub column: String,
     pub dragdrop: DragDrop,
     pub action: DragTarget,
@@ -61,6 +63,13 @@ impl Component for PivotColumn {
             move |_event| dragdrop.notify_drag_end()
         });
 
+        let col_type = ctx
+            .props()
+            .session
+            .metadata()
+            .get_column_table_type(&ctx.props().column)
+            .expect("Unknown column");
+
         html! {
             <div
                 class="pivot-column-draggable"
@@ -69,7 +78,8 @@ impl Component for PivotColumn {
                 ondragend={dragend}
             >
                 <div class="pivot-column-border">
-                    <TypeIcon ty={ColumnType::String} />
+                    <TypeIcon ty={col_type} />
+                    // <TypeIcon ty={ColumnType::String} />
                     <span class="column_name">{ ctx.props().column.clone() }</span>
                 </div>
             </div>

diff --git a/rust/perspective-viewer/src/rust/components/column_selector/sort_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/sort_column.rs
@@ -11,7 +11,7 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 use perspective_client::config::*;
-use perspective_client::ColumnType;
+// use perspective_client::ColumnType;
 use web_sys::*;
 use yew::prelude::*;
 
@@ -101,6 +101,13 @@ impl Component for SortColumn {
             move |_event| dragdrop.notify_drag_end()
         });
 
+        let col_type = ctx
+            .props()
+            .session
+            .metadata()
+            .get_column_table_type(&ctx.props().sort.0.to_owned())
+            .expect("Unknown column");
+
         html! {
             <div
                 class="pivot-column-draggable"
@@ -109,7 +116,8 @@ impl Component for SortColumn {
                 ondragend={dragend}
             >
                 <div class="pivot-column-border">
-                    <TypeIcon ty={ColumnType::String} />
+                    <TypeIcon ty={col_type} />
+                    // <TypeIcon ty={ColumnType::String} />
                     <span class="column_name">{ ctx.props().sort.0.to_owned() }</span>
                     <span
                         class={format!("sort-icon {}", ctx.props().sort.1)}

diff --git a/rust/perspective-viewer/src/rust/components/form/code_editor.rs b/rust/perspective-viewer/src/rust/components/form/code_editor.rs
@@ -75,6 +75,28 @@ fn on_keydown(event: KeyboardEvent, deps: &(UseStateSetter<u32>, Callback<()>))
         event.prevent_default();
         deps.1.emit(())
     }
+
+    // handle the tab key press
+    if event.key() == "Tab" {
+        event.prevent_default();
+
+        let caret_pos = elem.selection_start().unwrap().unwrap_or_default() as usize;
+
+        let mut initial_text = elem.value();
+
+        initial_text.insert(caret_pos, '\t');
+
+        elem.set_value(&initial_text);
+
+        let input_event = web_sys::InputEvent::new("input").unwrap();
+        let _ = elem.dispatch_event(&input_event).unwrap();
+
+        // place caret after inserted tab
+        let new_caret_pos = (caret_pos + 1) as u32;
+        let _ = elem.set_selection_range(new_caret_pos, new_caret_pos);
+
+        elem.focus().unwrap();
+    }
 }
 
 /// Scrolling callback

diff --git a/rust/perspective-viewer/test/js/column_settings/attributes_tab.spec.ts b/rust/perspective-viewer/test/js/column_settings/attributes_tab.spec.ts
@@ -95,6 +95,39 @@ test.describe("Attributes Tab", () => {
             view.columnSettingsSidebar.attributesTab.saveBtn
         ).toBeDisabled();
     });
+    test("Tab Button Click enters 4 spaces.", async ({ page }) => {
+        let view = new PageView(page);
+        await view.restore({
+            expressions: { expr: "12345" },
+            columns: ["expr", "Row ID"],
+            settings: true,
+        });
+        let expr = await view.settingsPanel.activeColumns.getColumnByName(
+            "expr"
+        );
+        await expr.editBtn.click();
+        await view.columnSettingsSidebar.openTab("Attributes");
+
+        let sidebar = view.columnSettingsSidebar;
+        let attributesTab = sidebar.attributesTab;
+
+        let textarea = attributesTab.expressionEditor.textarea;
+
+        await textarea.type("foo", { delay: 100 });
+        expect(await textarea.evaluate((input) => input!.value)).toStrictEqual(
+            "foo12345"
+        );
+
+        await textarea.type("\t", { delay: 100 });
+        const expected = await textarea.evaluate((input) => input!.value);
+
+        expect(expected).toContain("\t");
+
+        const caretPosition = await textarea.evaluate(
+            (input) => input!.selectionStart
+        );
+        expect(caretPosition).toBe(4); // length of foo + length of '\t' = 4;
+    });
     test("Reset button", async ({ page }) => {
         let view = new PageView(page);
         await view.restore({