@perspective-dev/viewer 4.0.0

package/src/less/viewer.less

@@ -0,0 +1,368 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+:host {
+    --settings-panel-z-index: 10;
+    --icon--color: #ff0000;
+}
+
+::slotted(*) {
+    pointer-events: var(--override-content-pointer-events);
+}
+
+:host .sidebar_close_button {
+    position: absolute;
+    top: 0;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    z-index: 10000;
+    height: 48px;
+    &:hover {
+        cursor: pointer;
+    }
+
+    .sidebar_close_button_inner {
+        border-radius: 5px 0 0 5px;
+        height: 18px;
+        background-color: var(--plugin--background);
+    }
+
+    .sidebar_close_button_inner:before {
+        display: inline-block;
+        height: 18px;
+        width: 26px;
+        content: "";
+        mask-size: cover;
+        -webkit-mask-size: cover;
+        background-repeat: no-repeat;
+        background-color: var(--icon--color);
+        mask-image: var(--drawer-tab-icon--mask-image);
+        -webkit-mask-image: var(--drawer-tab-icon--mask-image);
+    }
+
+    &:hover .sidebar_close_button_inner:before {
+        mask-image: var(--drawer-tab-icon--hover--mask-image);
+        -webkit-mask-image: var(--drawer-tab-icon--hover--mask-image);
+    }
+}
+
+:host #settings_close_button,
+:host #column_settings_close_button {
+    left: -26px;
+}
+
+:host #debug_close_button.sidebar_close_button .sidebar_close_button_inner {
+    background-attachment: fixed;
+    background: var(--sidebar--background);
+    background-size: 4px;
+
+    &:before {
+        mask-image: var(--drawer-tab-icon--hover--mask-image);
+        -webkit-mask-image: var(--drawer-tab-icon--hover--mask-image);
+    }
+}
+
+:host
+    #debug_close_button.sidebar_close_button:hover
+    .sidebar_close_button_inner:before {
+    mask-image: var(--drawer-tab-icon--mask-image);
+    -webkit-mask-image: var(--drawer-tab-icon--mask-image);
+}
+
+:host #debug_open_button.sidebar_close_button {
+    right: 0px;
+    cursor: pointer;
+    .sidebar_close_button_inner {
+        background-color: transparent;
+    }
+}
+
+:host #debug_open_button.sidebar_close_button .sidebar_close_button_inner {
+    &:before {
+        mask-image: var(--drawer-tab-inverted-icon--mask-image);
+        -webkit-mask-image: var(--drawer-tab-inverted-icon--mask-image);
+    }
+
+    &:hover:before {
+        mask-image: var(--drawer-tab-inverted-icon--hover--mask-image);
+        -webkit-mask-image: var(--drawer-tab-inverted-icon--hover--mask-image);
+    }
+}
+
+:host #debug_close_button.sidebar_close_button {
+    right: 0px;
+}
+
+:host(:hover) {
+    #menu-bar {
+        opacity: 1 !important;
+    }
+
+    #settings_button,
+    #settings_button.titled {
+        opacity: 1;
+    }
+}
+
+:host {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    font-size: 0.75em;
+
+    * {
+        box-sizing: border-box;
+        line-height: 1.25;
+    }
+
+    #app_panel {
+        position: absolute;
+        bottom: 0px;
+        left: 0;
+        right: 0;
+        top: 0;
+        height: auto;
+        flex-direction: row-reverse;
+        & > .split-panel-divider {
+            border-left: 1px solid var(--inactive--color, #6e6e6e);
+            margin-right: -5px;
+        }
+    }
+
+    #modal_panel {
+        flex: 1 1 auto;
+        margin: var(--modal-panel--margin);
+        overflow: hidden;
+    }
+
+    #modal_panel > .split-panel-divider {
+        border-left: 1px solid var(--inactive--color, #6e6e6e);
+        margin-right: -5px;
+    }
+
+    #status_bar {
+        // position: absolute;
+        // bottom: 0;
+        // left: 0;
+        // right: 0;
+        height: var(--status-bar--height, 48px);
+    }
+
+    #main_column {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        position: relative;
+        margin: var(--main-column--margin);
+        border: var(--main-column--border);
+        border-width: var(--main-column--border-width);
+        border-radius: var(--main-column--border-radius);
+    }
+
+    #main_panel_container {
+        position: absolute;
+        top: var(--status-bar--height, 48px);
+        bottom: 0;
+        left: 0;
+        right: 0;
+        box-shadow: var(--plugin--box-shadow, none);
+        background: var(--plugin--background, none);
+        overflow: hidden;
+        border: var(--plugin--border, none);
+
+        &.settings-closed.titled {
+            top: var(--status-bar--height, 48px);
+        }
+
+        &.settings-closed {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+    }
+
+    #settings_panel {
+        position: relative;
+        flex: 0 0 auto;
+        padding: 0pc;
+        padding-left: 8px;
+        box-sizing: border-box;
+        width: 100%;
+        z-index: var(--settings-panel-z-index);
+
+        & > .split-panel-child {
+            overflow: hidden;
+        }
+
+        & > .split-panel-divider {
+            border-top: 1px solid var(--inactive--color, #6e6e6e);
+            border-bottom: 2px solid var(--inactive--color, #6e6e6e);
+            margin-left: -9px;
+            margin-right: 0px;
+            flex: 0 0 4px;
+        }
+    }
+
+    #column_settings_sidebar .split-panel-divider {
+        border-top: 1px solid var(--inactive--color, #6e6e6e);
+        border-bottom: 2px solid var(--inactive--color, #6e6e6e);
+        margin-left: -9px;
+        margin-right: -4px;
+        flex: 0 0 4px;
+    }
+
+    .noselect {
+        -webkit-touch-callout: none;
+        /* iOS Safari */
+        -webkit-user-select: none;
+        /* Safari */
+        -khtml-user-select: none;
+        /* Konqueror HTML */
+        -moz-user-select: none;
+        /* Firefox */
+        -ms-user-select: none;
+        /* Internet Explorer/Edge */
+        user-select: none;
+        /* Non-prefixed version, currently supported by Chrome and Opera */
+    }
+
+    .sidebar_column {
+        background: var(--sidebar--background);
+        background-size: 4px;
+        background-attachment: fixed;
+
+        display: flex;
+        list-style: none;
+        flex-direction: column;
+        flex: 1;
+
+        // Needs 2 because it must take precedence over teh chart legend.
+        z-index: 2;
+    }
+
+    #plugin_selector {
+        margin-top: 3px;
+        border-bottom-width: 1px;
+        border-style: solid;
+        border-color: var(--inactive--color, #c5c9d0);
+        border-top-width: 0px;
+        border-left-width: 0px;
+        border-right-width: 0px;
+    }
+
+    #settings_button {
+        opacity: 0;
+    }
+
+    #settings_button.titled {
+        opacity: 0.2;
+    }
+
+    #settings_button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: var(--settings-button--margin, 14px 0 0 0);
+        padding: 0;
+        background-color: var(--plugin--background);
+        margin-right: 14px;
+        padding: 2px 12px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10000;
+        border: 1px solid var(--inactive--color);
+        border-radius: 2px;
+        font-size: 10px;
+        font-weight: normal;
+
+        &:hover {
+            color: var(--plugin--background, inherit);
+            background-color: var(--icon--color);
+            cursor: pointer;
+        }
+
+        &:before {
+            font-feature-settings: "liga";
+            content: var(--config-button-icon--content, "Configure");
+        }
+    }
+
+    #main_column #settings_button {
+        border: none;
+        opacity: 1;
+        background-color: transparent;
+        margin-right: 0px;
+        padding: 0;
+        border-radius: 0px;
+
+        &:before {
+            display: inline-block;
+            height: 18px;
+            width: 26px;
+            content: "";
+            mask-size: cover;
+            -webkit-mask-size: cover; //40px 35px;
+            background-repeat: no-repeat;
+            background-color: var(--icon--color);
+            mask-image: var(--drawer-tab-icon--mask-image);
+            -webkit-mask-image: var(--drawer-tab-icon--mask-image);
+        }
+    }
+
+    .split-panel.orient-reverse
+        > .split-panel-child:not(:last-child):not(.is-width-override) {
+        max-width: 300px;
+    }
+
+    #expr_panel_header,
+    .sidebar_header {
+        min-height: 48px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        border-bottom: 1px solid var(--inactive--color, #6e6e6e);
+    }
+
+    #expr_panel_header_title,
+    .sidebar_header_title {
+        padding-left: 9px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-right: 30px;
+    }
+
+    #expr_panel_border,
+    .sidebar_border {
+        height: 2px;
+        width: 100%;
+        background-color: var(--inactive--color, #6e6e6e);
+        margin-top: 1px;
+        flex-shrink: 0;
+        flex-grow: 0;
+    }
+
+    .expr_editor_column {
+        z-index: 2;
+        width: 100%;
+    }
+
+    .is-width-override > .expr_editor_column {
+        min-width: unset;
+    }
+}

package/src/rust/components/column_dropdown.rs

@@ -0,0 +1,162 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 web_sys::*;
+use yew::prelude::*;
+
+use super::column_selector::InPlaceColumn;
+use super::modal::*;
+use crate::utils::WeakScope;
+
+static CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/css/column-dropdown.css"));
+
+pub enum ColumnDropDownMsg {
+    SetValues(Vec<InPlaceColumn>, f64),
+    SetCallback(Callback<InPlaceColumn>),
+    ItemDown,
+    ItemUp,
+    ItemSelect,
+}
+
+pub struct ColumnDropDown {
+    values: Option<Vec<InPlaceColumn>>,
+    selected: usize,
+    width: f64,
+    on_select: Option<Callback<InPlaceColumn>>,
+}
+
+#[derive(Properties, PartialEq)]
+pub struct ColumnDropDownProps {
+    #[prop_or_default]
+    pub weak_link: WeakScope<ColumnDropDown>,
+}
+
+impl ModalLink<ColumnDropDown> for ColumnDropDownProps {
+    fn weak_link(&self) -> &'_ WeakScope<ColumnDropDown> {
+        &self.weak_link
+    }
+}
+
+impl Component for ColumnDropDown {
+    type Message = ColumnDropDownMsg;
+    type Properties = ColumnDropDownProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        ctx.set_modal_link();
+        Self {
+            values: Some(vec![]),
+            selected: 0,
+            width: 0.0,
+            on_select: None,
+        }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            ColumnDropDownMsg::SetCallback(callback) => {
+                self.on_select = Some(callback);
+                false
+            },
+            ColumnDropDownMsg::SetValues(values, width) => {
+                self.values = Some(values);
+                self.selected = 0;
+                self.width = width;
+                true
+            },
+            ColumnDropDownMsg::ItemSelect => {
+                if let Some(ref values) = self.values {
+                    match values.get(self.selected) {
+                        None => {
+                            console::error_1(&"Selected out-of-bounds".into());
+                            false
+                        },
+                        Some(x) => {
+                            self.on_select.as_ref().unwrap().emit(x.clone());
+                            false
+                        },
+                    }
+                } else {
+                    console::error_1(&"No Values".into());
+                    false
+                }
+            },
+            ColumnDropDownMsg::ItemDown => {
+                self.selected += 1;
+                if let Some(ref values) = self.values
+                    && self.selected >= values.len()
+                {
+                    self.selected = 0;
+                }
+
+                true
+            },
+            ColumnDropDownMsg::ItemUp => {
+                if let Some(ref values) = self.values
+                    && self.selected < 1
+                {
+                    self.selected = values.len();
+                }
+
+                self.selected -= 1;
+                true
+            },
+        }
+    }
+
+    fn changed(&mut self, _ctx: &Context<Self>, _old: &Self::Properties) -> bool {
+        false
+    }
+
+    fn view(&self, _ctx: &Context<Self>) -> Html {
+        let body = html! {
+            if let Some(ref values) = self.values {
+                if !values.is_empty() {
+                    { for values
+                            .iter()
+                            .enumerate()
+                            .map(|(idx, value)| {
+                                let click = self.on_select.as_ref().unwrap().reform({
+                                    let value = value.clone();
+                                    move |_: MouseEvent| value.clone()
+                                });
+
+                                let row = match value {
+                                    InPlaceColumn::Column(col) => html! {
+                                        <span>{ col }</span>
+                                    },
+                                    InPlaceColumn::Expression(col) =>  html! {
+                                        <span id="add-expression">{ col.name.clone() }</span>
+                                    },
+                                };
+
+                                html! {
+                                    if idx == self.selected {
+                                        <span onmousedown={ click } class="selected">{ row }</span>
+                                    } else {
+                                        <span onmousedown={ click }>{ row }</span>
+                                    }
+                                }
+                            }) }
+                } else {
+                    <span class="no-results" />
+                }
+            }
+        };
+
+        let position = format!(
+            ":host{{min-width:{}px;max-width:{}px}}",
+            self.width, self.width
+        );
+
+        html! { <><style>{ &CSS }</style><style>{ position }</style>{ body }</> }
+    }
+}