@perspective-dev/viewer 4.0.0

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

@@ -0,0 +1,101 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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::collections::HashSet;
+use std::rc::Rc;
+
+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::custom_elements::FilterDropDownElement;
+
+#[derive(Properties, PartialEq)]
+pub struct RowSelectorProps {
+    pub selected_row: Option<String>,
+    pub on_select: yew::Callback<String>,
+    pub dropdown: Rc<FilterDropDownElement>,
+    pub pairs: Vec<SymbolKVPair>,
+    pub index: usize,
+    pub focused: bool,
+    pub set_focused_index: yew::Callback<Option<usize>>,
+    pub column_name: String,
+}
+
+#[function_component(RowSelector)]
+pub fn row_selector(props: &RowSelectorProps) -> Html {
+    let on_select = {
+        clone!(props.dropdown, props.index, props.set_focused_index);
+        props.on_select.reform(move |key| {
+            dropdown.hide().unwrap();
+            set_focused_index.emit(Some(index + 1));
+            key
+        })
+    };
+
+    let ondblclick = {
+        clone!(props.set_focused_index, props.index);
+        yew::Callback::from(move |_| {
+            set_focused_index.emit(Some(index));
+        })
+    };
+
+    let err_class = (props.index != props.pairs.len() - 1).then_some("row-selector-errored");
+
+    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| {
+                pair.key
+                    .as_ref()
+                    .map(|keyval| keyval == rowval)
+                    .unwrap_or_default()
+            })
+        {
+            pairs.remove(i);
+        }
+
+        let exclude: HashSet<_> = pairs
+            .into_iter()
+            .filter_map(|SymbolKVPair { key, .. }| key)
+            .collect();
+
+        html! {
+            <div class={err_class}>
+                <EmptyRow
+                    dropdown={props.dropdown.clone()}
+                    {exclude}
+                    {on_select}
+                    focused={props.focused}
+                    index={props.index}
+                    set_focused_index={props.set_focused_index.clone()}
+                    value={props.selected_row.clone().unwrap_or_default()}
+                    column_name={props.column_name.clone()}
+                />
+            </div>
+        }
+    } else {
+        html! {
+            <div class="row-selector column-selector-column">
+                <div class="column-selector-column-border">
+                    <span class="column_name none" {ondblclick}>
+                        { props.selected_row.clone().unwrap() }
+                    </span>
+                </div>
+            </div>
+        }
+    };
+
+    html! { <div class="row-selector">{ inner }</div> }
+}

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

@@ -0,0 +1,24 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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::collections::HashMap;
+
+use serde::{Deserialize, Serialize};
+
+use crate::components::containers::kvpair::KVPair;
+
+#[derive(Serialize, Deserialize)]
+pub struct SymbolConfig {
+    pub symbols: HashMap<String, String>,
+}
+
+pub type SymbolKVPair = KVPair<Option<String>, String>;

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

@@ -0,0 +1,185 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 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::style::LocalStyle;
+use crate::css;
+use crate::custom_elements::FilterDropDownElement;
+
+#[derive(Properties, PartialEq)]
+pub struct PairsListProps {
+    pub title: String,
+    pub pairs: Vec<SymbolKVPair>,
+    pub update_pairs: Callback<Vec<SymbolKVPair>>,
+    pub id: Option<String>,
+    pub row_dropdown: Rc<FilterDropDownElement>,
+    pub values: Rc<Vec<String>>,
+    pub column_name: String,
+}
+
+pub enum PairsListMsg {
+    SetNextFocus(Option<usize>),
+}
+
+pub struct PairsList {
+    next_focus: Option<usize>,
+}
+
+impl yew::Component for PairsList {
+    type Message = PairsListMsg;
+    type Properties = PairsListProps;
+
+    fn create(_ctx: &yew::Context<Self>) -> Self {
+        Self { next_focus: None }
+    }
+
+    fn update(&mut self, _ctx: &yew::Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            PairsListMsg::SetNextFocus(i) => self.next_focus = i,
+        }
+
+        true
+    }
+
+    fn view(&self, ctx: &yew::Context<Self>) -> Html {
+        let props = ctx.props();
+        let set_focused = ctx.link().callback(PairsListMsg::SetNextFocus);
+        let main_pairs = props
+            .pairs
+            .iter()
+            .enumerate()
+            .map(|(index, pair)| {
+                let focused = self.next_focus.map(|s| s == index).unwrap_or_default();
+                html! {
+                    <PairsListItem
+                        pair={pair.clone()}
+                        {index}
+                        pairs={props.pairs.clone()}
+                        row_dropdown={props.row_dropdown.clone()}
+                        values={props.values.clone()}
+                        update_pairs={props.update_pairs.clone()}
+                        set_focused_index={set_focused.clone()}
+                        column_name={props.column_name.clone()}
+                        {focused}
+                    />
+                }
+            })
+            .collect_vec();
+
+        html! {
+            <>
+                <LocalStyle href={css!("containers/pairs-list")} />
+                <div class="pairs-list" id={props.id.clone()} data-label={props.title.clone()}>
+                    <ul>{ for main_pairs }</ul>
+                </div>
+            </>
+        }
+    }
+}
+
+#[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_selector.rs

@@ -0,0 +1,55 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 itertools::Itertools;
+use yew::{Callback, Html, Properties, function_component, html};
+
+use crate::components::containers::select::{Select, SelectItem};
+
+#[derive(Properties, PartialEq)]
+pub struct SymbolSelectorProps {
+    pub index: usize,
+    pub selected_value: Option<String>,
+    pub values: Rc<Vec<String>>,
+    pub callback: Callback<String>,
+}
+
+#[function_component(SymbolSelector)]
+pub fn symbol_selector(p: &SymbolSelectorProps) -> Html {
+    let values = yew::use_memo(p.values.clone(), |values| {
+        values.iter().cloned().map(SelectItem::Option).collect_vec()
+    });
+
+    let selected = p
+        .values
+        .iter()
+        .find(|sym| {
+            p.selected_value
+                .as_ref()
+                .map(|selected| *sym == selected)
+                .unwrap_or_default()
+        })
+        .cloned()
+        .unwrap_or_else(|| p.values.get(p.index % values.len()).cloned().unwrap());
+
+    html! {
+        <Select<String>
+            wrapper_class="symbol-selector-wrapper"
+            class="symbol-selector"
+            on_select={p.callback.clone()}
+            {values}
+            {selected}
+        />
+    }
+}

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

@@ -0,0 +1,131 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+mod row_selector;
+mod symbol_config;
+mod symbol_pairs;
+mod symbol_selector;
+
+use std::collections::HashMap;
+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::css;
+use crate::custom_elements::FilterDropDownElement;
+use crate::session::Session;
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct SymbolAttrProps {
+    pub session: Session,
+    pub column_name: String,
+    pub restored_config: Option<HashMap<String, String>>,
+    pub on_change: Callback<ColumnConfigValueUpdate>,
+    pub default_config: KeyValueOpts,
+}
+impl SymbolAttrProps {
+    pub fn next_default_symbol(&self, pairs_len: usize) -> String {
+        let values = &self.default_config.values;
+        values.get(pairs_len % values.len()).cloned().unwrap()
+    }
+}
+
+pub enum SymbolAttrMsg {
+    UpdatePairs(Vec<SymbolKVPair>),
+}
+
+pub struct SymbolStyle {
+    pairs: Vec<SymbolKVPair>,
+    row_dropdown: Rc<FilterDropDownElement>,
+}
+
+impl yew::Component for SymbolStyle {
+    type Message = SymbolAttrMsg;
+    type Properties = SymbolAttrProps;
+
+    fn create(ctx: &yew::Context<Self>) -> Self {
+        let pairs = ctx
+            .props()
+            .restored_config
+            .as_ref()
+            .map(|restored_config| {
+                let mut pairs = restored_config
+                    .iter()
+                    .map(|(key, value)| SymbolKVPair::new(Some(key.to_owned()), value.to_owned()))
+                    .collect_vec();
+
+                pairs.push(SymbolKVPair::new(
+                    None,
+                    ctx.props().next_default_symbol(pairs.len()),
+                ));
+                pairs
+            })
+            .unwrap_or_default();
+        let row_dropdown = Rc::new(FilterDropDownElement::new(ctx.props().session.clone()));
+        Self {
+            pairs,
+            row_dropdown,
+        }
+    }
+
+    fn update(&mut self, ctx: &yew::Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            SymbolAttrMsg::UpdatePairs(mut new_pairs) => {
+                let symbols = new_pairs
+                    .clone()
+                    .into_iter()
+                    .filter_map(|pair| Some((pair.key?, pair.value)))
+                    .collect::<HashMap<_, _>>();
+                let update = Some(symbols).filter(|x| !x.is_empty());
+                ctx.props()
+                    .on_change
+                    .emit(ColumnConfigValueUpdate::Symbols(update));
+
+                let has_last_key = new_pairs
+                    .last()
+                    .map(|pair| pair.key.is_some())
+                    .unwrap_or_default();
+
+                if has_last_key {
+                    let val = ctx.props().next_default_symbol(new_pairs.len());
+                    new_pairs.push(SymbolKVPair::new(None, val))
+                }
+
+                self.pairs = new_pairs;
+                true
+            },
+        }
+    }
+
+    fn view(&self, ctx: &yew::Context<Self>) -> Html {
+        let update_pairs = ctx.link().callback(SymbolAttrMsg::UpdatePairs);
+        html! {
+            <>
+                <LocalStyle href={css!("column-symbol-attributes")} />
+                <PairsList
+                    title="Symbols"
+                    id="attributes-symbols"
+                    pairs={self.pairs.clone()}
+                    row_dropdown={self.row_dropdown.clone()}
+                    column_name={ctx.props().column_name.clone()}
+                    values={Rc::new(ctx.props().default_config.values.clone())}
+                    {update_pairs}
+                />
+            </>
+        }
+    }
+}