@perspective-dev/viewer 4.0.0 → 4.1.0

package/src/rust/components/column_selector/pivot_column.rs

@@ -11,7 +11,6 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 use perspective_client::config::ColumnType;
-// use perspective_client::ColumnType;
 use web_sys::*;
 use yew::prelude::*;
 
@@ -19,15 +18,20 @@ use crate::components::containers::dragdrop_list::*;
 use crate::components::type_icon::TypeIcon;
 use crate::dragdrop::*;
 use crate::session::*;
+use crate::utils::*;
+use crate::*;
 
-pub struct PivotColumn {}
-
-#[derive(Properties)]
+#[derive(Properties, PerspectiveProperties!)]
 pub struct PivotColumnProps {
-    pub session: Session,
+    /// Column name.
     pub column: String,
-    pub dragdrop: DragDrop,
+
+    /// The drag starte of this column, if applicable.
     pub action: DragTarget,
+
+    // State
+    pub session: Session,
+    pub dragdrop: DragDrop,
 }
 
 impl PartialEq for PivotColumnProps {
@@ -44,10 +48,16 @@ impl DragDropListItemProps for PivotColumnProps {
     }
 }
 
+pub struct PivotColumn;
+
 impl Component for PivotColumn {
     type Message = ();
     type Properties = PivotColumnProps;
 
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self
+    }
+
     fn view(&self, ctx: &Context<Self>) -> Html {
         let dragstart = Callback::from({
             let event_name = ctx.props().column.to_owned();
@@ -80,14 +90,9 @@ impl Component for PivotColumn {
             >
                 <div class="pivot-column-border">
                     <TypeIcon ty={col_type} />
-                    // <TypeIcon ty={ColumnType::String} />
                     <span class="column_name">{ ctx.props().column.clone() }</span>
                 </div>
             </div>
         }
     }
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
 }

package/src/rust/components/column_selector/sort_column.rs

@@ -12,6 +12,7 @@
 
 use perspective_client::config::*;
 use perspective_client::utils::PerspectiveResultExt;
+use perspective_js::utils::ApiFuture;
 use web_sys::*;
 use yew::prelude::*;
 
@@ -21,16 +22,15 @@ use crate::dragdrop::*;
 use crate::model::*;
 use crate::renderer::*;
 use crate::session::*;
+use crate::utils::*;
 use crate::*;
 
-/// A `SortColumn` includes the column name and `SortDir` arrow, a clickable
-/// button which cycles through the available `SortDir` states.
-pub struct SortColumn {}
-
-#[derive(Properties)]
+#[derive(Properties, PerspectiveProperties!)]
 pub struct SortColumnProps {
     pub sort: Sort,
     pub idx: usize,
+
+    // State
     pub session: Session,
     pub renderer: Renderer,
     pub dragdrop: DragDrop,
@@ -42,8 +42,6 @@ impl PartialEq for SortColumnProps {
     }
 }
 
-derive_model!(Renderer, Session for SortColumnProps);
-
 impl DragDropListItemProps for SortColumnProps {
     type Item = Sort;
 
@@ -56,6 +54,10 @@ pub enum SortColumnMsg {
     SortDirClick(bool),
 }
 
+/// A `SortColumn` includes the column name and `SortDir` arrow, a clickable
+/// button which cycles through the available `SortDir` states.
+pub struct SortColumn {}
+
 impl Component for SortColumn {
     type Message = SortColumnMsg;
     type Properties = SortColumnProps;

package/src/rust/components/column_selector.rs

@@ -15,7 +15,7 @@ mod add_expression_button;
 mod aggregate_selector;
 mod config_selector;
 mod empty_column;
-mod expression_toolbar;
+mod expr_edit_button;
 mod filter_column;
 mod inactive_column;
 mod invalid_column;
@@ -27,6 +27,7 @@ use std::rc::Rc;
 
 pub use empty_column::*;
 pub use invalid_column::*;
+use perspective_js::utils::ApiFuture;
 use web_sys::*;
 use yew::prelude::*;
 
@@ -37,38 +38,34 @@ use self::inactive_column::*;
 use super::containers::scroll_panel::*;
 use super::containers::split_panel::{Orientation, SplitPanel};
 use super::style::LocalStyle;
-use super::viewer::ColumnLocator;
 use crate::components::containers::scroll_panel_item::ScrollPanelItem;
 use crate::custom_elements::ColumnDropDownElement;
 use crate::dragdrop::*;
 use crate::model::*;
-use crate::presentation::Presentation;
+use crate::presentation::ColumnLocator;
 use crate::renderer::*;
 use crate::session::*;
 use crate::utils::*;
 use crate::*;
 
-#[derive(Properties)]
+#[derive(Properties, PerspectiveProperties!)]
 pub struct ColumnSelectorProps {
-    pub session: Session,
-    pub renderer: Renderer,
-    pub dragdrop: DragDrop,
-    pub presentation: Presentation,
-
+    /// Fires when the expression/config column is open.
     pub on_open_expr_panel: Callback<ColumnLocator>,
 
     /// This is passed to the add_expression_button for styling.
     pub selected_column: Option<ColumnLocator>,
 
+    /// Fires when this component is resized via the UI.
     #[prop_or_default]
     pub on_resize: Option<Rc<PubSub<()>>>,
 
-    #[prop_or_default]
-    pub on_dimensions_reset: Option<Rc<PubSub<()>>>,
+    // State
+    pub session: Session,
+    pub renderer: Renderer,
+    pub dragdrop: DragDrop,
 }
 
-derive_model!(DragDrop, Renderer, Session for ColumnSelectorProps);
-
 impl PartialEq for ColumnSelectorProps {
     fn eq(&self, rhs: &Self) -> bool {
         self.selected_column == rhs.selected_column
@@ -102,34 +99,40 @@ impl Component for ColumnSelector {
     type Properties = ColumnSelectorProps;
 
     fn create(ctx: &Context<Self>) -> Self {
+        let ColumnSelectorProps {
+            dragdrop,
+            renderer,
+            session,
+            ..
+        } = ctx.props();
         let table_sub = {
             let cb = ctx.link().callback(|_| ColumnSelectorMsg::TableLoaded);
-            ctx.props().session.table_loaded.add_listener(cb)
+            session.table_loaded.add_listener(cb)
         };
 
         let view_sub = {
             let cb = ctx.link().callback(|_| ColumnSelectorMsg::ViewCreated);
-            ctx.props().session.view_created.add_listener(cb)
+            session.view_created.add_listener(cb)
         };
 
         let drop_sub = {
             let cb = ctx.link().callback(ColumnSelectorMsg::Drop);
-            ctx.props().dragdrop.drop_received.add_listener(cb)
+            dragdrop.drop_received.add_listener(cb)
         };
 
         let drag_sub = {
             let cb = ctx.link().callback(ColumnSelectorMsg::Drag);
-            ctx.props().dragdrop.dragstart_received.add_listener(cb)
+            dragdrop.dragstart_received.add_listener(cb)
         };
 
         let dragend_sub = {
             let cb = ctx.link().callback(|_| ColumnSelectorMsg::DragEnd);
-            ctx.props().dragdrop.dragend_received.add_listener(cb)
+            dragdrop.dragend_received.add_listener(cb)
         };
 
         let named = maybe! {
             let plugin =
-                ctx.props().renderer.get_active_plugin().ok()?;
+                renderer.get_active_plugin().ok()?;
 
             Some(plugin.config_column_names()?.length() as usize)
         };
@@ -140,7 +143,7 @@ impl Component for ColumnSelector {
             move || link.send_message(ColumnSelectorMsg::HoverActiveIndex(None))
         });
 
-        let column_dropdown = ColumnDropDownElement::new(ctx.props().session.clone());
+        let column_dropdown = ColumnDropDownElement::new(session.clone());
         Self {
             _subscriptions: [table_sub, view_sub, drop_sub, drag_sub, dragend_sub],
             named_row_count,
@@ -211,20 +214,25 @@ impl Component for ColumnSelector {
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let config = ctx.props().session.get_view_config();
-
+        let ColumnSelectorProps {
+            session,
+            renderer,
+            dragdrop,
+            ..
+        } = ctx.props();
+        let config = session.get_view_config();
         let is_aggregated = config.is_aggregated();
         let columns_iter = ctx.props().column_selector_iter_set(&config);
         let onselect = ctx.link().callback(|()| ViewCreated);
         let ondragenter = ctx.link().callback(HoverActiveIndex);
         let ondragover = Callback::from(|_event: DragEvent| _event.prevent_default());
         let ondrop = Callback::from({
-            let dragdrop = ctx.props().dragdrop.clone();
+            clone!(dragdrop);
             move |event| dragdrop.notify_drop(&event)
         });
 
         let ondragend = Callback::from({
-            let dragdrop = ctx.props().dragdrop.clone();
+            clone!(dragdrop);
             move |_| dragdrop.notify_drag_end()
         });
 
@@ -242,8 +250,7 @@ impl Component for ColumnSelector {
                 + config.split_by.len()
                 + config.filter.len()
                 + config.sort.len()) as f64,
-            ctx.props()
-                .session
+            session
                 .metadata()
                 .get_features()
                 .map(|x| {
@@ -272,11 +279,11 @@ impl Component for ColumnSelector {
         let config_selector = html_nested! {
             <ScrollPanelItem key="config_selector" {size_hint}>
                 <ConfigSelector
-                    dragdrop={&ctx.props().dragdrop}
-                    session={&ctx.props().session}
-                    renderer={&ctx.props().renderer}
                     onselect={onselect.clone()}
                     ondragenter={ctx.link().callback(|()| ViewCreated)}
+                    {dragdrop}
+                    {renderer}
+                    {session}
                 />
             </ScrollPanelItem>
         };
@@ -310,13 +317,12 @@ impl Component for ColumnSelector {
                             {is_editing}
                             {name}
                             {on_open_expr_panel}
-                            dragdrop={&ctx.props().dragdrop}
-                            session={&ctx.props().session}
-                            renderer={&ctx.props().renderer}
-                            presentation={&ctx.props().presentation}
                             {ondragenter}
                             ondragend={&ondragend}
                             onselect={&onselect}
+                            {dragdrop}
+                            {renderer}
+                            {session}
                         />
                     </ScrollPanelItem>
                 }
@@ -336,14 +342,13 @@ impl Component for ColumnSelector {
                             {idx}
                             visible={vc.is_visible}
                             name={vc.name.to_owned()}
-                            dragdrop={&ctx.props().dragdrop}
-                            session={&ctx.props().session}
-                            renderer={&ctx.props().renderer}
-                            presentation={&ctx.props().presentation}
                             {is_editing}
                             onselect={&onselect}
                             ondragend={&ondragend}
                             on_open_expr_panel={&ctx.props().on_open_expr_panel}
+                            {dragdrop}
+                            {renderer}
+                            {session}
                         />
                     </ScrollPanelItem>
                 }

package/src/rust/components/column_settings_sidebar/save_settings.rs

@@ -43,7 +43,9 @@ pub fn save_settings(props: &SaveSettingsProps) -> Html {
                     </button>
                 </div>
             }
-            <div id="save-settings">
+            <div
+                id="save-settings"
+            >
                 if props.is_save {
                     <button
                         id="psp-expression-editor-button-reset"

package/src/rust/components/column_settings_sidebar/style_tab/agg_depth_selector.rs

@@ -0,0 +1,58 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 perspective_client::clone;
+use yew::{Callback, Html, Properties, function_component, html};
+
+use crate::components::form::number_field::NumberField;
+use crate::config::ColumnConfigValueUpdate;
+
+// ░░░█▀█░█▀▄░█▀█░█▀█░█▀▀░█▀▄░▀█▀░▀█▀░█▀▀░█▀▀░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ░░░█▀▀░█▀▄░█░█░█▀▀░█▀▀░█▀▄░░█░░░█░░█▀▀░▀▀█░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ░░░▀░░░▀░▀░▀▀▀░▀░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░▀▀▀░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+#[derive(Properties, PartialEq)]
+pub struct AggregateDepthSelectorProps {
+    pub on_change: Callback<ColumnConfigValueUpdate>,
+    pub value: u32,
+    pub group_by_depth: u32,
+    pub column_name: String,
+}
+
+#[function_component]
+pub fn AggregateDepthSelector(props: &AggregateDepthSelectorProps) -> Html {
+    let state = yew::use_state_eq(|| 0);
+    yew::use_effect_with((props.column_name.to_owned(), props.group_by_depth), {
+        clone!(state, props.value);
+        move |deps| state.set(std::cmp::min(deps.1, value))
+    });
+
+    let on_change = yew::use_callback(
+        (state.setter(), props.on_change.clone()),
+        |x: Option<f64>, deps| {
+            deps.0.set(x.unwrap_or_default() as u32);
+            deps.1.emit(ColumnConfigValueUpdate::AggregateDepth(
+                x.unwrap_or_default() as u32,
+            ))
+        },
+    );
+
+    html! {
+        <NumberField
+            label="aggregate-depth"
+            {on_change}
+            min=0.0
+            max={props.group_by_depth as f64}
+            default=0.0
+            current_value={*state as f64}
+        />
+    }
+}

package/src/rust/components/column_settings_sidebar/style_tab/symbol/row_selector.rs

@@ -17,8 +17,8 @@ use itertools::Itertools;
 use perspective_client::clone;
 use yew::{Html, Properties, function_component, html};
 
-use super::symbol_config::SymbolKVPair;
 use crate::components::empty_row::EmptyRow;
+use crate::config::SymbolKVPair;
 use crate::custom_elements::FilterDropDownElement;
 
 #[derive(Properties, PartialEq)]
@@ -55,15 +55,15 @@ pub fn row_selector(props: &RowSelectorProps) -> Html {
 
     let inner = if props.selected_row.is_none() || props.focused {
         let mut pairs = props.pairs.clone();
-        if let Some(ref rowval) = props.selected_row
-            && let Some((i, _)) = pairs.iter().find_position(|pair| {
+        if let Some(ref rowval) = props.selected_row {
+            if let Some((i, _)) = pairs.iter().find_position(|pair| {
                 pair.key
                     .as_ref()
                     .map(|keyval| keyval == rowval)
                     .unwrap_or_default()
-            })
-        {
-            pairs.remove(i);
+            }) {
+                pairs.remove(i);
+            }
         }
 
         let exclude: HashSet<_> = pairs

package/src/rust/components/column_settings_sidebar/style_tab/symbol/symbol_pairs.rs

@@ -15,10 +15,9 @@ use std::rc::Rc;
 use itertools::Itertools;
 use yew::{Callback, Html, Properties, html};
 
-use super::symbol_config::SymbolKVPair;
-use crate::components::column_settings_sidebar::style_tab::symbol::row_selector::RowSelector;
-use crate::components::column_settings_sidebar::style_tab::symbol::symbol_selector::SymbolSelector;
+use crate::components::column_settings_sidebar::style_tab::symbol::symbol_pairs_item::PairsListItem;
 use crate::components::style::LocalStyle;
+use crate::config::SymbolKVPair;
 use crate::css;
 use crate::custom_elements::FilterDropDownElement;
 
@@ -92,94 +91,3 @@ impl yew::Component for PairsList {
         }
     }
 }
-
-#[derive(Properties, PartialEq)]
-pub struct PairsListItemProps {
-    pub pair: SymbolKVPair,
-    pub index: usize,
-    pub pairs: Vec<SymbolKVPair>,
-    pub update_pairs: Callback<Vec<SymbolKVPair>>,
-    pub row_dropdown: Rc<FilterDropDownElement>,
-    pub values: Rc<Vec<String>>,
-    pub focused: bool,
-    pub set_focused_index: Callback<Option<usize>>,
-    pub column_name: String,
-}
-
-pub enum PairListItemMsg {
-    Remove,
-    UpdateKey(Option<String>),
-    UpdateValue(String),
-}
-
-pub struct PairsListItem {}
-impl yew::Component for PairsListItem {
-    type Message = PairListItemMsg;
-    type Properties = PairsListItemProps;
-
-    fn create(_ctx: &yew::Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn update(&mut self, ctx: &yew::Context<Self>, msg: Self::Message) -> bool {
-        let p = ctx.props();
-        match msg {
-            PairListItemMsg::Remove => {
-                let mut new_pairs = p.pairs.clone();
-                new_pairs.remove(p.index);
-                p.update_pairs.emit(new_pairs);
-                true
-            },
-            PairListItemMsg::UpdateKey(key) => {
-                let next = p.pair.update_key(key);
-                let mut new_pairs = p.pairs.clone();
-                new_pairs[p.index] = next;
-                p.update_pairs.emit(new_pairs);
-                true
-            },
-            PairListItemMsg::UpdateValue(val) => {
-                let next = p.pair.update_value(val);
-                let mut new_pairs = p.pairs.clone();
-                new_pairs[p.index] = next;
-                p.update_pairs.emit(new_pairs);
-                true
-            },
-        }
-    }
-
-    fn view(&self, ctx: &yew::Context<Self>) -> Html {
-        let props = ctx.props();
-        let on_remove = ctx.link().callback(|_| PairListItemMsg::Remove);
-        let on_key_update = ctx.link().callback(|s| PairListItemMsg::UpdateKey(Some(s)));
-        let on_value_update = ctx.link().callback(PairListItemMsg::UpdateValue);
-
-        let remove_style =
-            (ctx.props().index == ctx.props().pairs.len() - 1).then_some("visibility: hidden");
-
-        html! {
-            <li class="pairs-list-item">
-                <RowSelector
-                    selected_row={props.pair.key.clone()}
-                    on_select={on_key_update.clone()}
-                    dropdown={props.row_dropdown.clone()}
-                    pairs={props.pairs.clone()}
-                    index={props.index}
-                    focused={props.focused}
-                    set_focused_index={props.set_focused_index.clone()}
-                    column_name={props.column_name.clone()}
-                />
-                <SymbolSelector
-                    index={props.index}
-                    callback={on_value_update}
-                    values={props.values.clone()}
-                    selected_value={props.pair.value.clone()}
-                />
-                <span
-                    class="toggle-mode is_column_active"
-                    style={remove_style}
-                    onclick={on_remove.clone()}
-                />
-            </li>
-        }
-    }
-}

package/src/rust/components/column_settings_sidebar/style_tab/symbol/symbol_pairs_item.rs

@@ -0,0 +1,111 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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::rc::Rc;
+
+use yew::{Callback, Html, Properties, html};
+
+use crate::components::column_settings_sidebar::style_tab::symbol::row_selector::RowSelector;
+use crate::components::column_settings_sidebar::style_tab::symbol::symbol_selector::SymbolSelector;
+use crate::config::SymbolKVPair;
+use crate::custom_elements::FilterDropDownElement;
+
+#[derive(Properties, PartialEq)]
+pub struct PairsListItemProps {
+    pub pair: SymbolKVPair,
+    pub index: usize,
+    pub pairs: Vec<SymbolKVPair>,
+    pub update_pairs: Callback<Vec<SymbolKVPair>>,
+    pub row_dropdown: Rc<FilterDropDownElement>,
+    pub values: Rc<Vec<String>>,
+    pub focused: bool,
+    pub set_focused_index: Callback<Option<usize>>,
+    pub column_name: String,
+}
+
+pub enum PairListItemMsg {
+    Remove,
+    UpdateKey(Option<String>),
+    UpdateValue(String),
+}
+
+pub struct PairsListItem {}
+impl yew::Component for PairsListItem {
+    type Message = PairListItemMsg;
+    type Properties = PairsListItemProps;
+
+    fn create(_ctx: &yew::Context<Self>) -> Self {
+        Self {}
+    }
+
+    fn update(&mut self, ctx: &yew::Context<Self>, msg: Self::Message) -> bool {
+        let p = ctx.props();
+        match msg {
+            PairListItemMsg::Remove => {
+                let mut new_pairs = p.pairs.clone();
+                new_pairs.remove(p.index);
+                p.update_pairs.emit(new_pairs);
+                true
+            },
+            PairListItemMsg::UpdateKey(key) => {
+                let next = p.pair.update_key(key);
+                let mut new_pairs = p.pairs.clone();
+                new_pairs[p.index] = next;
+                p.update_pairs.emit(new_pairs);
+                true
+            },
+            PairListItemMsg::UpdateValue(val) => {
+                let next = p.pair.update_value(val);
+                let mut new_pairs = p.pairs.clone();
+                new_pairs[p.index] = next;
+                p.update_pairs.emit(new_pairs);
+                true
+            },
+        }
+    }
+
+    fn view(&self, ctx: &yew::Context<Self>) -> Html {
+        let props = ctx.props();
+        let on_remove = ctx.link().callback(|_| PairListItemMsg::Remove);
+        let on_key_update = ctx.link().callback(|s| PairListItemMsg::UpdateKey(Some(s)));
+        let on_value_update = ctx.link().callback(PairListItemMsg::UpdateValue);
+
+        let remove_style =
+            (ctx.props().index == ctx.props().pairs.len() - 1).then_some("visibility: hidden");
+
+        html! {
+            <li class="pairs-list-item">
+                <RowSelector
+                    selected_row={props.pair.key.clone()}
+                    on_select={on_key_update.clone()}
+                    dropdown={props.row_dropdown.clone()}
+                    pairs={props.pairs.clone()}
+                    index={props.index}
+                    focused={props.focused}
+                    set_focused_index={props.set_focused_index.clone()}
+                    column_name={props.column_name.clone()}
+                />
+                <SymbolSelector
+                    index={props.index}
+                    callback={on_value_update}
+                    values={props.values.clone()}
+                    selected_value={props.pair.value.clone()}
+                />
+                <span
+                    class="toggle-mode is_column_active"
+                    style={remove_style}
+                    onclick={on_remove.clone()}
+                />
+            </li>
+        }
+    }
+}

package/src/rust/components/column_settings_sidebar/style_tab/symbol.rs

@@ -11,8 +11,9 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 mod row_selector;
-mod symbol_config;
+
 mod symbol_pairs;
+mod symbol_pairs_item;
 mod symbol_selector;
 
 use std::collections::HashMap;
@@ -21,10 +22,9 @@ use std::rc::Rc;
 use itertools::Itertools;
 use yew::{Callback, Html, Properties, html};
 
-use self::symbol_config::SymbolKVPair;
 use crate::components::column_settings_sidebar::style_tab::symbol::symbol_pairs::PairsList;
 use crate::components::style::LocalStyle;
-use crate::config::{ColumnConfigValueUpdate, KeyValueOpts};
+use crate::config::{ColumnConfigValueUpdate, KeyValueOpts, SymbolKVPair};
 use crate::css;
 use crate::custom_elements::FilterDropDownElement;
 use crate::session::Session;