@perspective-dev/viewer 5.3.1 → 5.5.0

package/src/css/{containers → ui/containers}/context-menu.css

@@ -12,24 +12,30 @@
  */
 
 /* Panel context menu (right-click a panel). The `<perspective-context-menu>`
- * host is body-mounted by `PortalModal` (which owns position/z-index inline)
- * and themed by the document theme rules' modal selector groups — chrome like
- * `background-color`/`color`/`border` lands on the HOST from `defaults.css` /
- * each theme's `perspective-context-menu[theme="X"]` group, exactly like the
- * Copy/Export menus. Only the interior layout + item states live here. */
+ * host is a viewer light-DOM child in the top layer (see `PortalModal`),
+ * themed by the `--psp-*` vars it inherits; its chrome lives here, exactly
+ * like the Copy/Export menus' surface. */
+
+@import "./dropdown-menu-items.css";
 
 :host {
+    overflow: visible;
+    padding: 0;
+    background-color: var(--psp--background-color, #ffffff);
+    color: var(--psp--color, #161616);
+    border: 1px solid var(--psp-inactive--color, #ababab);
+    border-radius: 0 0 2px 2px;
     outline: none;
     user-select: none;
     font-size: 12px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--psp-dropdown--box-shadow);
 }
 
 .context-menu {
     display: flex;
     flex-direction: column;
     min-width: 120px;
-    padding: 4px 0;
+    padding: 0px 0;
 }
 
 .context-menu-item {
@@ -73,17 +79,11 @@
     }
 }
 
-/* Hover flyout. Positioned OUTSIDE the host's box, so the host-level theme
- * chrome (see the :host comment above) doesn't paint it — rebuild the same
- * chrome from the modal selector groups' vars. Edge-adjacent (`left: 100%`,
- * no gap) so the pointer never leaves the hover chain crossing into it;
- * `top: -5px` aligns its first row with the parent row (4px menu padding +
- * 1px border). */
 .context-menu-submenu {
     display: none;
     position: absolute;
     left: 100%;
-    top: -5px;
+    top: -1px;
     max-height: 50vh;
     overflow-y: auto;
     background-color: var(--psp--background-color, white);
@@ -93,10 +93,16 @@
      * foreground. */
     color: var(--psp--color);
     border: 1px solid var(--psp-inactive--color);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--psp-dropdown--box-shadow);
+}
+
+.context-menu-submenu > .new-panel-menu {
+    display: flex;
+    flex-direction: column;
+    padding: 8px;
+    min-width: 120px;
 }
 
-/* Non-interactive group label (e.g. client names in the "New" sub-menu). */
 .context-menu-header {
     padding: 4px 12px 2px;
     cursor: default;

package/src/css/ui/containers/dropdown-menu-items.css

@@ -0,0 +1,66 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+.dropdown-group-label {
+    font-size: 0.75em;
+    color: var(--psp-inactive--color);
+    &:not(:first-of-type) {
+        margin-top: 16px;
+    }
+}
+
+.dropdown-group-label[data-label="new-from-table"]::before {
+    content: var(--psp-label--new-from-table--content, var(--psp-missing));
+}
+
+.dropdown-group-label[data-label="new-from-panel"]::before {
+    content: var(--psp-label--new-from-panel--content, var(--psp-missing));
+}
+
+.dropdown-group-sublabel {
+    font-size: 0.75em;
+    text-transform: uppercase;
+    color: var(--psp-inactive--color);
+    margin-top: 6px;
+}
+
+.dropdown-group-container {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+}
+
+.dropdown-group-label,
+.dropdown-group-sublabel,
+.dropdown-group-container > span,
+.no-results {
+    display: inline-flex;
+    align-items: center;
+    margin: 0 -8px;
+    padding: 0 8px;
+}
+
+.dropdown-menu-item {
+    cursor: pointer;
+    min-height: 22px;
+    &:hover {
+        background-color: var(--psp--color);
+        color: var(--psp--background-color);
+    }
+}
+
+.no-results {
+    font-style: italic;
+    padding: 6px 24px;
+    color: #ccc;
+}

package/src/css/{containers → ui/containers}/dropdown-menu.css

@@ -11,15 +11,17 @@
  * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
  */
 
+@import "./dropdown-menu-items.css";
+
 :host {
-    position: fixed;
-    z-index: 10000;
+    overflow: visible;
+    background-color: var(--psp--background-color, #ffffff);
+    color: var(--psp--color, #161616);
+    border: 1px solid var(--psp-inactive--color, #ababab);
+    border-radius: 0 0 2px 2px;
     outline: none;
-    font-size: 0.75em;
-    border: inherit;
-    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    box-shadow: var(--psp-dropdown--box-shadow);
     user-select: none;
-    background-color: white;
     padding: 8px;
 
     display: flex;
@@ -45,51 +47,4 @@
         color: var(--psp-error--color, #ff0000);
         border-color: var(--psp-error--color, #ff0000);
     }
-
-    .selected {
-        background-color: rgba(0, 0, 0, 0.05);
-    }
-
-    .dropdown-group-label {
-        color: var(--psp-inactive--color);
-
-        &:not(:first-of-type) {
-            margin-top: 16px;
-        }
-    }
-
-    .dropdown-group-container {
-        display: flex;
-        flex-direction: column;
-        margin: 0;
-    }
-
-    span {
-        min-height: 22px;
-        display: inline-flex;
-        align-items: center;
-        margin: 0 -8px;
-        padding: 0 8px;
-    }
-
-    .dropdown-group-container span {
-        cursor: pointer;
-    }
-
-    .no-results {
-        font-style: italics;
-        padding: 6px 24px;
-        color: #ccc;
-    }
-}
-
-:host(:hover) {
-    .selected {
-        background-color: transparent;
-    }
-
-    .dropdown-group-container span:hover {
-        background-color: var(--psp--color);
-        color: var(--psp--background-color);
-    }
 }

package/src/css/{containers → ui/containers}/tabs.css

@@ -13,7 +13,8 @@
 
 :host {
     #format-tab {
-        overflow: auto;
+        overflow-y: auto;
+        overflow-x: hidden;
         scrollbar-gutter: stable;
     }
 

package/src/css/viewer.css

@@ -14,6 +14,7 @@
 :host {
     --settings-panel-z-index: 10;
     --psp--color: #ff0000;
+    --psp-missing: "__MISSING__";
 }
 
 :host(.shift-active) .shift-alt-icon {
@@ -89,7 +90,9 @@
     pointer-events: var(--override-content-pointer-events);
 }
 
-::slotted(:not([slot^="statusbar-extra"]):not([slot^="tab-"])) {
+::slotted(
+    :not([slot^="statusbar-extra"]):not([slot^="tab-"]):not([slot="modal"])
+) {
     position: absolute;
     inset: 0;
     background-color: var(--psp--background-color) !important;
@@ -100,7 +103,10 @@
         -1.75px 2.75px 0 2.75px var(--psp-inactive--color);
 }
 
-.overlay ::slotted(:not([slot^="statusbar-extra"]):not([slot^="tab-"])) {
+.overlay
+    ::slotted(
+        :not([slot^="statusbar-extra"]):not([slot^="tab-"]):not([slot="modal"])
+    ) {
     box-shadow:
         2.25px 2.25px 0 2.25px var(--psp--background-color),
         -2.25px 2.25px 0 2.25px var(--psp--background-color),
@@ -338,7 +344,6 @@
         z-index: 0;
         position: relative;
         height: 100%;
-        box-shadow: var(--plugin--box-shadow, none);
         overflow: hidden;
         border: var(--psp-plugin--border, none);
         background: var(
@@ -487,8 +492,9 @@
         }
 
         & > .split-panel-divider {
+            background-color: #00000020;
             border-top: 1px solid var(--psp-inactive--color, #6e6e6e);
-            border-bottom: 2px solid var(--psp-inactive--color, #6e6e6e);
+            border-bottom: 1px solid var(--psp-inactive--color, #6e6e6e);
             margin-left: -9px;
             margin-right: 0px;
             flex: 0 0 4px;
@@ -584,9 +590,11 @@
         }
 
         .settings_tab {
+            overflow: hidden;
+            text-overflow: ellipsis;
             border-right: 1px solid var(--psp-inactive--color);
             cursor: pointer;
-            padding: 6px 8px;
+            padding: 5px 8px 7px 8px;
             font-size: var(--label--font-size, 0.75em);
             text-transform: uppercase;
             flex: 0 1 100px;
@@ -605,7 +613,7 @@
             background-color: transparent;
             border-bottom: 1px solid transparent;
             box-shadow: 0px 9px 0px -8px var(--psp-inactive--color);
-            height: calc(100% - 1px);
+            height: 23px;
         }
     }
 
@@ -639,36 +647,28 @@
     }
 
     .sidebar_border {
-        height: 2px;
+        height: 3px;
+        border-bottom: 1px solid var(--psp-inactive--color, #6e6e6e);
         width: 100%;
-        background-color: var(--psp-inactive--color, #6e6e6e);
-        margin-top: 1px;
+        background-color: rgba(0, 0, 0, 0.15);
         flex-shrink: 0;
         flex-grow: 0;
     }
 
     #query_tabbar_tab:before {
-        content: var(--psp-label--query-tab--content);
+        content: var(--psp-label--query-tab--content, var(--psp-missing));
     }
 
     #plugin_tabbar_tab:before {
-        content: var(--psp-label--plugin-tab--content);
+        content: var(--psp-label--plugin-tab--content, var(--psp-missing));
     }
 
     #debug_tabbar_tab:before {
-        content: var(--psp-label--debug-tab--content);
+        content: var(--psp-label--debug-tab--content, var(--psp-missing));
     }
 
     #chat_tabbar_tab:before {
-        content: var(--psp-label--chat-tab--content);
-    }
-
-    label#stack-label:before {
-        content: var(--psp-label--stack--content, "Stack");
-    }
-
-    label#alt_axis-label:before {
-        content: var(--psp-label--alt-axis--content, "Alt Axis");
+        content: var(--psp-label--chat-tab--content, var(--psp-missing));
     }
 }
 
@@ -853,7 +853,10 @@
             user-select: none;
             &:before {
                 text-transform: uppercase;
-                content: var(--psp-label--chat-reasoning--content);
+                content: var(
+                    --psp-label--chat-reasoning--content,
+                    var(--psp-missing)
+                );
                 font-size: var(--psp-label--font-size, 0.75em);
             }
         }
@@ -898,7 +901,7 @@
         align-items: flex-end;
 
         /* The prompt is a `MirroredTextarea` (see
-         * `form/mirrored-textarea.css`): it is exactly as tall as its
+         * `ui/form/mirrored-textarea.css`): it is exactly as tall as its
          * text, so this wrapper owns the visible box and caps how far
          * that growth goes before it scrolls instead. */
         #chat_input_scroll {
@@ -933,7 +936,10 @@
                      * `placeholder` attribute is untranslatable and is
                      * kept only for assistive tech. */
                     &.is-empty:before {
-                        content: var(--psp-label--chat-placeholder--content);
+                        content: var(
+                            --psp-label--chat-placeholder--content,
+                            var(--psp-missing)
+                        );
                         color: var(--psp-inactive--color, #6e6e6e);
                     }
                 }
@@ -965,11 +971,11 @@
         }
 
         #chat_send_button:before {
-            content: var(--psp-label--chat-send--content);
+            content: var(--psp-label--chat-send--content, var(--psp-missing));
         }
 
         #chat_stop_button:before {
-            content: var(--psp-label--chat-stop--content);
+            content: var(--psp-label--chat-stop--content, var(--psp-missing));
         }
     }
 

package/src/rust/agent/tools.rs

@@ -22,7 +22,7 @@ use wasm_bindgen::prelude::*;
 
 use super::client::protocol::{FunctionDef, ToolDef};
 use super::docs::{DocsBundle, DocsCell};
-use crate::config::{ColumnConfigSchema, ControlSpec};
+use crate::config::{Alignment, ColumnConfigSchema, ControlSpec};
 use crate::custom_elements::viewer::PerspectiveViewerElement;
 use crate::queries::{
     get_column_config_schema, get_plugin_config_schema, get_viewer_config, validate_expr,
@@ -628,6 +628,78 @@ fn control_schema_entries(spec: &ControlSpec) -> Vec<(String, Value)> {
         ControlSpec::String { key, default, .. } => {
             vec![(key.clone(), json!({ "type": "string", "default": default }))]
         },
+        ControlSpec::Font {
+            key,
+            default,
+            size,
+            bold,
+            italic,
+        } => {
+            let mut out = vec![(
+                key.clone(),
+                json!({
+                    "type": "string",
+                    "description": "A CSS font family: a generic keyword (`inherit`, `monospace`, `sans-serif`, `serif`, `system-ui`) or an installed font name",
+                    "default": default,
+                }),
+            )];
+
+            if let Some(size) = size {
+                let mut node = json!({
+                    "type": "number",
+                    "description": "Font size in CSS pixels",
+                    "default": size.default,
+                });
+
+                if let Some(min) = size.min {
+                    node["minimum"] = json!(min);
+                }
+
+                if let Some(max) = size.max {
+                    node["maximum"] = json!(max);
+                }
+
+                out.push((size.key.clone(), node));
+            }
+
+            for (toggle, description) in [(bold, "Bold text"), (italic, "Italic text")] {
+                if let Some(toggle) = toggle {
+                    out.push((
+                        toggle.key.clone(),
+                        json!({ "type": "boolean", "description": description, "default": toggle.default }),
+                    ));
+                }
+            }
+
+            out
+        },
+        ControlSpec::Alignment {
+            key,
+            default,
+            corners,
+        } => {
+            let cells: &[Alignment] = if *corners {
+                &Alignment::CORNERS
+            } else {
+                &Alignment::ALL
+            };
+
+            let mut node = json!({
+                "type": "string",
+                "enum": cells.iter().map(|x| x.as_str()).collect::<Vec<_>>(),
+                "description": if *corners {
+                    "Anchor corner of a 3×3 grid: `top-left`, `top-right`, `bottom-left` or `bottom-right`"
+                } else {
+                    "Anchor cell of a 3×3 grid: a corner `top-left|top-right|bottom-left|bottom-right`, an edge `top|left|right|bottom`, or `center`"
+                },
+            });
+
+            if let Some(default) = default {
+                node["default"] = json!(default.as_str());
+            }
+
+            vec![(key.clone(), node)]
+        },
         ControlSpec::Color { key, default } => vec![(
             key.clone(),
             json!({
@@ -683,10 +755,6 @@ fn control_schema_entries(spec: &ControlSpec) -> Vec<(String, Value)> {
             "date_format".to_owned(),
             json!({ "description": "Datetime display format: a style preset or custom format fields" }),
         )],
-        ControlSpec::StringFormat => vec![(
-            "format".to_owned(),
-            json!({ "description": "String display format" }),
-        )],
         ControlSpec::NumberSeriesStyle { .. } => vec![
             (
                 "chart_type".to_owned(),
@@ -977,7 +1045,7 @@ impl PerspectiveViewerElement {
 
         let before = self.agent_panel_names();
         let js_config = js_sys::JSON::parse(&args.config.to_string())?;
-        let added = self.addPanel(js_config.unchecked_into());
+        let added = self.addPanel(js_config.unchecked_into(), None);
         let result = wasm_bindgen_futures::JsFuture::from(js_sys::Promise::from(added)).await;
         let id = match result {
             Ok(id) => id
@@ -1048,7 +1116,12 @@ impl PerspectiveViewerElement {
         let columns_config = serde_json::to_value(&viewer_config.columns_config)?;
         let plugin_schema = {
             let view_config = panel.session.get_view_config();
-            get_plugin_config_schema(&panel.renderer, &view_config).ok()
+            get_plugin_config_schema(
+                &panel.renderer,
+                &view_config,
+                Some(&viewer_config.panel.plugin_config),
+            )
+            .ok()
         };
 
         let column_schema = match &args.column {

package/src/rust/components/chat_panel.rs

@@ -18,7 +18,7 @@
 use yew::prelude::*;
 
 use crate::agent::{AgentSlot, ChatEntry, render_markdown};
-use crate::components::form::mirrored_textarea::MirroredTextarea;
+use crate::ui::MirroredTextarea;
 
 #[derive(Properties, PartialEq)]
 struct ChatReasoningProps {

package/src/rust/components/{form/code_editor.rs → code_editor.rs}

@@ -10,6 +10,8 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+mod highlight;
+
 use std::rc::Rc;
 
 use perspective_client::ExprValidationError;
@@ -17,10 +19,10 @@ use wasm_bindgen::JsCast;
 use web_sys::*;
 use yew::prelude::*;
 
-use crate::components::form::highlight::highlight;
-use crate::components::form::mirrored_textarea::MirroredTextarea;
+use self::highlight::highlight;
 use crate::components::function_dropdown::{FunctionDropDownElement, FunctionDropDownPortal};
 use crate::exprtk::{Cursor, tokenize};
+use crate::ui::MirroredTextarea;
 use crate::utils::*;
 
 #[derive(Properties, PartialEq)]

package/src/rust/components/column_dropdown.rs

@@ -21,9 +21,9 @@ use yew::html::ImplicitClone;
 use yew::prelude::*;
 
 use super::column_selector::InPlaceColumn;
-use super::portal::PortalModal;
 use super::style::StyleSurface;
 use crate::session::Session;
+use crate::ui::PortalModal;
 use crate::utils::*;
 use crate::*;
 
@@ -216,7 +216,7 @@ impl Component for ColumnDropDownPortal {
             html! {
                 <PortalModal
                     tag_name="perspective-dropdown"
-                    surface={StyleSurface::ColumnDropdown}
+                    sheet={StyleSurface::ColumnDropdown.sheet()}
                     {target}
                     own_focus=false
                     {on_close}

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

@@ -70,6 +70,13 @@ pub struct ActiveColumnProps {
     #[prop_or_default]
     pub is_window: bool,
 
+    /// Whether this column's `columns_config` entry holds overridden keys.
+    #[prop_or_default]
+    pub is_modified: bool,
+
+    #[prop_or_default]
+    pub is_last_column: bool,
+
     /// Whether the expression/config edit button should be shown.  Computed
     /// by the parent (`is_expression || can_render_column_styles`).
     #[prop_or_default]
@@ -100,6 +107,7 @@ impl PartialEq for ActiveColumnProps {
             && self.is_editing == rhs.is_editing
             && self.is_expression == rhs.is_expression
             && self.is_window == rhs.is_window
+            && self.is_modified == rhs.is_modified
             && self.show_edit_btn == rhs.show_edit_btn
             && self.col_type == rhs.col_type
             && self.metadata == rhs.metadata
@@ -216,6 +224,10 @@ impl Component for ActiveColumn {
             outer_classes.push("dragdrop-hover");
         }
 
+        if ctx.props().is_modified {
+            outer_classes.push("is-modified");
+        }
+
         let name = match &ctx.props().name {
             ActiveColumnState {
                 label,
@@ -287,7 +299,7 @@ impl Component for ActiveColumn {
                     <div
                         class={outer_classes}
                         data-label={label}
-                        style={format!("--default-column-title:var(--column-selector-column-{path}--content)")}
+                        style={format!("--default-column-title:var(--psp-label--column-{path}--content)")}
                         data-index={ctx.props().idx.to_string()}
                         ondragenter={ondragenter.clone()}
                     >
@@ -301,7 +313,7 @@ impl Component for ActiveColumn {
                     <div
                         class={outer_classes}
                         data-label={label}
-                        style={format!("--default-column-title:var(--column-selector-column-{path}--content)")}
+                        style={format!("--default-column-title:var(--psp-label--column-{path}--content)")}
                         data-index={ctx.props().idx.to_string()}
                         ondragenter={ondragenter.clone()}
                     >
@@ -310,7 +322,9 @@ impl Component for ActiveColumn {
                 }
             },
             ((label, ColumnState::Named(name)), Some(col_type)) => {
-                let is_required = ctx.props().get_is_required(ctx.props().idx);
+                let is_required =
+                    ctx.props().is_last_column || ctx.props().get_is_required(ctx.props().idx);
+
                 let remove_column = if is_required {
                     None
                 } else {
@@ -330,11 +344,12 @@ impl Component for ActiveColumn {
                     let event_name = name.to_owned();
                     let presentation = ctx.props().presentation.clone();
                     move |event: DragEvent| {
-                        presentation.set_drag_image(&event).unwrap();
-                        presentation.notify_drag_start(
-                            event_name.to_string(),
-                            DragEffect::Move(DragTarget::Active),
-                        );
+                        if presentation.set_drag_image(&event) {
+                            presentation.notify_drag_start(
+                                event_name.to_string(),
+                                DragEffect::Move(DragTarget::Active),
+                            );
+                        }
 
                         MouseLeave(false)
                     }
@@ -359,7 +374,7 @@ impl Component for ActiveColumn {
                     <div
                         class={outer_classes}
                         data-label={label}
-                        style={format!("--default-column-title:var(--column-selector-column-{path}--content)")}
+                        style={format!("--default-column-title:var(--psp-label--column-{path}--content)")}
                         data-index={ctx.props().idx.to_string()}
                         {onmouseover}
                         {onmouseout}

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

@@ -16,10 +16,10 @@ use itertools::Itertools;
 use perspective_client::config::*;
 use yew::prelude::*;
 
-use crate::components::containers::select::*;
 use crate::renderer::*;
 use crate::session::*;
 use crate::tasks::apply_and_render;
+use crate::ui::{Select, SelectItem};
 use crate::utils::{PtrEqRc, spawn_owned};
 
 #[derive(Properties)]

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

@@ -21,8 +21,7 @@ use super::filter_column::*;
 use super::pivot_column::*;
 use super::sort_column::*;
 use crate::components::column_dropdown::{ColumnDropDownElement, ColumnDropDownPortal};
-use crate::components::containers::dragdrop_list::*;
-use crate::components::containers::select::{Select, SelectItem};
+use crate::components::dragdrop_list::*;
 use crate::components::filter_dropdown::{FilterDropDownElement, FilterDropDownPortal};
 use crate::config::PluginStaticConfig;
 use crate::presentation::Presentation;
@@ -30,6 +29,7 @@ use crate::renderer::*;
 use crate::session::drag_drop_update::*;
 use crate::session::*;
 use crate::tasks::apply_and_render;
+use crate::ui::{Select, SelectItem};
 use crate::utils::*;
 
 #[derive(Clone, Properties)]