@perspective-dev/viewer 4.0.0

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

@@ -0,0 +1,231 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+pub mod stub;
+mod symbol;
+
+use itertools::Itertools;
+use perspective_client::clone;
+use perspective_client::config::ColumnType;
+use perspective_js::utils::*;
+use yew::{Callback, Html, Properties, function_component, html};
+
+use crate::components::column_settings_sidebar::style_tab::stub::Stub;
+use crate::components::column_settings_sidebar::style_tab::symbol::SymbolStyle;
+use crate::components::datetime_column_style::DatetimeColumnStyle;
+use crate::components::form::number_field::NumberField;
+use crate::components::number_column_style::NumberColumnStyle;
+use crate::components::string_column_style::StringColumnStyle;
+use crate::components::style_controls::CustomNumberFormat;
+use crate::config::ColumnConfigValueUpdate;
+use crate::custom_events::CustomEvents;
+use crate::derive_model;
+use crate::model::PluginColumnStyles;
+use crate::presentation::Presentation;
+use crate::renderer::Renderer;
+use crate::session::Session;
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct StyleTabProps {
+    pub custom_events: CustomEvents,
+    pub session: Session,
+    pub renderer: Renderer,
+    pub presentation: Presentation,
+
+    pub ty: Option<ColumnType>,
+    pub column_name: String,
+    pub group_by_depth: u32,
+}
+derive_model!(Session, Renderer, Presentation for StyleTabProps);
+
+impl StyleTabProps {
+    fn send_plugin_config(&self, update: ColumnConfigValueUpdate) {
+        clone!(props = self);
+        ApiFuture::spawn(async move {
+            props
+                .presentation
+                .update_columns_config_value(props.column_name.clone(), update);
+            let columns_configs = props.presentation.all_columns_configs();
+            let plugin_config = props.renderer.get_active_plugin()?.save()?;
+            props
+                .renderer
+                .get_active_plugin()?
+                .restore(&plugin_config, Some(&columns_configs))?;
+
+            props.renderer.update(&props.session).await?;
+            let detail = serde_wasm_bindgen::to_value(&columns_configs).unwrap();
+            props.custom_events.dispatch_column_style_changed(&detail);
+            Ok(())
+        })
+    }
+}
+
+#[function_component]
+pub fn StyleTab(props: &StyleTabProps) -> Html {
+    let on_change = yew::use_callback(props.clone(), |config, props| {
+        props.send_plugin_config(config);
+    });
+
+    let config = props.presentation.get_columns_config(&props.column_name);
+    let components = props
+        .get_column_style_control_options(&props.column_name)
+        .map(|opts| {
+            let mut components = vec![];
+
+            if !props.session.get_view_config().group_by.is_empty() {
+                let aggregate_depth = config.as_ref().map(|x| x.aggregate_depth as f64);
+                components.push(("Aggregate Depth", html! {
+                    <AggregateDepthSelector
+                        group_by_depth={props.group_by_depth}
+                        on_change={on_change.clone()}
+                        column_name={props.column_name.to_owned()}
+                        value={aggregate_depth.unwrap_or_default() as u32}
+                    />
+                }));
+            }
+
+            if let Some(default_config) = opts.datagrid_number_style {
+                let config = config
+                    .as_ref()
+                    .map(|config| config.datagrid_number_style.clone());
+
+                components.push(("Number Styles", html! {
+                    <NumberColumnStyle
+                        session={props.session.clone()}
+                        column_name={props.column_name.clone()}
+                        {config}
+                        {default_config}
+                        on_change={on_change.clone()}
+                    />
+                }));
+            }
+            if let Some(default_config) = opts.datagrid_string_style {
+                let config = config
+                    .as_ref()
+                    .map(|config| config.datagrid_string_style.clone());
+
+                components.push(("String Styles", html! {
+                    <StringColumnStyle {config} {default_config} on_change={on_change.clone()} />
+                }));
+            }
+
+            if let Some(default_config) = opts.datagrid_datetime_style {
+                let config = config
+                    .as_ref()
+                    .map(|config| config.datagrid_datetime_style.clone());
+
+                let enable_time_config = props.ty.unwrap() == ColumnType::Datetime;
+                components.push(("Datetime Styles", html! {
+                    <DatetimeColumnStyle
+                        {enable_time_config}
+                        {config}
+                        {default_config}
+                        on_change={on_change.clone()}
+                    />
+                }))
+            }
+
+            if let Some(default_config) = opts.symbols {
+                let restored_config = config
+                    .as_ref()
+                    .map(|config| config.symbols.clone())
+                    .unwrap_or_default();
+
+                components.push(("Symbols", html! {
+                    <SymbolStyle
+                        {default_config}
+                        {restored_config}
+                        on_change={on_change.clone()}
+                        column_name={props.column_name.clone()}
+                        session={props.session.clone()}
+                    />
+                }))
+            }
+
+            if opts.number_string_format.unwrap_or_default() {
+                let restored_config = config
+                    .as_ref()
+                    .and_then(|config| config.number_format.clone())
+                    .unwrap_or_default();
+
+                components.push(("Number Formatting", html! {
+                    <CustomNumberFormat
+                        {restored_config}
+                        on_change={on_change.clone()}
+                        view_type={props.ty.unwrap()}
+                        column_name={props.column_name.clone()}
+                    />
+                }));
+            }
+
+            components
+                .into_iter()
+                .map(|(_title, component)| {
+                    html! {
+                        <fieldset class="style-control">
+                            // <legend >{ title }</legend>
+                            { component }
+                        </fieldset>
+                    }
+                })
+                .collect_vec()
+        })
+        .unwrap_or_else(|error| {
+            vec![html! {
+                <Stub message="Could not render column styles" error={Some(format!("{error:?}"))} />
+            }]
+        });
+
+    html! {
+        <div id="style-tab">
+            <div id="column-style-container" class="tab-section">{ components }</div>
+        </div>
+    }
+}
+
+#[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]
+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/containers/dragdrop_list.rs

@@ -0,0 +1,325 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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::marker::PhantomData;
+
+use derivative::Derivative;
+use web_sys::*;
+use yew::html::Scope;
+use yew::prelude::*;
+
+use crate::components::column_selector::{EmptyColumn, InPlaceColumn, InvalidColumn};
+use crate::custom_elements::ColumnDropDownElement;
+use crate::dragdrop::*;
+
+/// Must be implemented by `Properties` of children of `DragDropList`, returning
+/// the value a DragDropItem represents.
+pub trait DragDropListItemProps: Properties {
+    type Item: Clone + PartialEq;
+    fn get_item(&self) -> Self::Item;
+}
+
+pub trait DragContext<T> {
+    fn close(index: usize) -> T;
+    fn dragleave() -> T;
+    fn dragenter(index: usize) -> T;
+    fn create(col: InPlaceColumn) -> T;
+    fn is_self_move(effect: DragTarget) -> bool;
+}
+
+#[derive(Properties, Derivative)]
+#[derivative(Clone(bound = ""))]
+pub struct DragDropListProps<T, U>
+where
+    T: Component,
+    U: Component,
+    <U as Component>::Properties: DragDropListItemProps,
+{
+    pub parent: Scope<T>,
+    pub dragdrop: DragDrop,
+    pub name: &'static str,
+    pub column_dropdown: ColumnDropDownElement,
+    pub exclude: HashSet<String>,
+    pub children: ChildrenWithProps<U>,
+
+    #[prop_or_default]
+    pub is_dragover: Option<(
+        usize,
+        <<U as Component>::Properties as DragDropListItemProps>::Item,
+    )>,
+
+    #[prop_or_default]
+    pub allow_duplicates: bool,
+}
+
+impl<T, U> PartialEq for DragDropListProps<T, U>
+where
+    T: Component,
+    U: Component,
+    <U as Component>::Properties: DragDropListItemProps,
+{
+    fn eq(&self, other: &Self) -> bool {
+        self.name == other.name
+            && self.children == other.children
+            && self.allow_duplicates == other.allow_duplicates
+            && self.is_dragover == other.is_dragover
+    }
+}
+
+pub enum DragDropListMsg {
+    Freeze(bool),
+}
+
+/// A sub-selector for a list-like component of a `JsViewConfig`, such as
+/// `filters` and `sort`.  
+///
+/// `DragDropList` is parameterized by two `Component`
+/// types, the parent component `T` and the inner item compnent `U`, which must
+/// additionally implement `DragDropListItemProps` trait on its own `Properties`
+/// associated type.
+///
+/// Before you ask:  yes, `frozen_size` needs to be a float64 since `flex`
+/// containers can have fractional dimensions.
+pub struct DragDropList<T, U, V>
+where
+    T: Component,
+    U: Component,
+    <U as Component>::Properties: DragDropListItemProps,
+    V: DragContext<T::Message> + 'static,
+{
+    parent_type: PhantomData<T>,
+    item_type: PhantomData<U>,
+    draggable_type: PhantomData<V>,
+    elem: NodeRef,
+    frozen_size: Option<f64>,
+}
+
+impl<T, U, V> Component for DragDropList<T, U, V>
+where
+    T: Component,
+    U: Component,
+    <U as Component>::Properties: DragDropListItemProps,
+    V: DragContext<T::Message> + 'static,
+{
+    type Message = DragDropListMsg;
+    type Properties = DragDropListProps<T, U>;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {
+            parent_type: PhantomData,
+            item_type: PhantomData,
+            draggable_type: PhantomData,
+            elem: NodeRef::default(),
+            frozen_size: None,
+        }
+    }
+
+    fn changed(&mut self, _ctx: &Context<Self>, _old: &Self::Properties) -> bool {
+        true
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            // When a dragover occurs and a new Column is inserted into the selector,
+            // the geometry of the selector may expand and cause a parent reflow,
+            // which annoyingly changes the drag status and glitchiness occurs.
+            // By using `Freeze` when a dragenter occurs, the element's width will be
+            // frozen until `drop` or `dragleave`.
+            DragDropListMsg::Freeze(freeze) => {
+                if freeze && self.frozen_size.is_none() {
+                    let elem = self.elem.cast::<HtmlElement>().unwrap();
+                    self.frozen_size = Some({
+                        // `offset_width` and family are `i32`, but Chrome _really_
+                        // uses fractional pixel widths for these which can only be
+                        // recovered by parsing the generated stylesheet ...
+                        let txt = window()
+                            .unwrap()
+                            .get_computed_style(&elem)
+                            .unwrap()
+                            .unwrap()
+                            .get_property_value("width")
+                            .unwrap();
+
+                        // Strip "px" suffix, e.g. "24.876px".
+                        let px = &txt[..txt.len() - 2];
+                        px.parse::<f64>().unwrap()
+                    });
+                    true
+                } else if !freeze {
+                    // Don't render because the invoker will do so through `dragdrop`.
+                    self.frozen_size = None;
+                    false
+                } else {
+                    false
+                }
+            },
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let dragover = Callback::from(|_event: DragEvent| _event.prevent_default());
+
+        // On dragleave, signal the parent but no need to redraw as parent will call
+        // `change()` when resetting props.
+        let drag_container = DragDropContainer::new(
+            {
+                let total = ctx.props().children.len();
+                let parent = ctx.props().parent.clone();
+                let link = ctx.link().clone();
+                move || {
+                    link.send_message(DragDropListMsg::Freeze(true));
+                    parent.send_message(V::dragenter(total))
+                }
+            },
+            {
+                let parent = ctx.props().parent.clone();
+                let link = ctx.link().clone();
+                move || {
+                    link.send_message(DragDropListMsg::Freeze(false));
+                    parent.send_message(V::dragleave())
+                }
+            },
+        );
+
+        let drop = Callback::from({
+            let dragdrop = ctx.props().dragdrop.clone();
+            let link = ctx.link().clone();
+            move |event| {
+                link.send_message(DragDropListMsg::Freeze(false));
+                dragdrop.notify_drop(&event);
+            }
+        });
+
+        let invalid_drag: bool;
+        let mut valid_duplicate_drag = false;
+
+        let columns_html = {
+            let mut columns = ctx
+                .props()
+                .children
+                .iter()
+                .map(|x| (true, Some(x)))
+                .enumerate()
+                .collect::<Vec<_>>();
+
+            invalid_drag = if let Some((x, column)) = &ctx.props().is_dragover {
+                let index = *x;
+                let is_append = index == columns.len();
+                let is_self_move = ctx
+                    .props()
+                    .dragdrop
+                    .get_drag_target()
+                    .map(|x| V::is_self_move(x))
+                    .unwrap_or_default();
+
+                let is_duplicate = columns
+                    .iter()
+                    .position(|x| x.1.1.as_ref().unwrap().props.get_item() == *column);
+
+                valid_duplicate_drag = is_duplicate.is_some() && !ctx.props().allow_duplicates;
+                if let Some(duplicate) = is_duplicate
+                    && !is_append
+                    && (!ctx.props().allow_duplicates || is_self_move)
+                {
+                    columns.remove(duplicate);
+                }
+
+                // If inserting into the middle of the list, use
+                // the length of the existing element to prevent
+                // jitter as the underlying dragover zone moves.
+                if index < columns.len() {
+                    columns.insert(index, (usize::MAX, (false, None)));
+                    false
+                } else if (!is_append && !ctx.props().allow_duplicates)
+                    || ((!is_append || !is_self_move)
+                        && (is_duplicate.is_none() || ctx.props().allow_duplicates))
+                {
+                    columns.push((usize::MAX, (false, None)));
+                    false
+                } else {
+                    true
+                }
+            } else {
+                false
+            };
+
+            columns
+                .into_iter()
+                .enumerate()
+                .map(|(idx, column)| {
+                    let close = ctx.props().parent.callback(move |_| V::close(idx));
+                    let dragenter = ctx.props().parent.callback({
+                        let link = ctx.link().clone();
+                        move |event: DragEvent| {
+                            event.stop_propagation();
+                            event.prevent_default();
+                            link.send_message(DragDropListMsg::Freeze(true));
+                            V::dragenter(idx)
+                        }
+                    });
+
+                    if let (key, (true, Some(column))) = column {
+                        html! {
+                            <div {key} class="pivot-column" ondragenter={dragenter}>
+                                { Html::from(column) }
+                                <span class="row_close" onmousedown={close} />
+                            </div>
+                        }
+                    } else if let (key, (_, Some(column))) = column {
+                        html! {
+                            <div {key} class="pivot-column" ondragenter={dragenter}>
+                                { Html::from(column) }
+                                <span class="row_close" style="opacity: 0.3" />
+                            </div>
+                        }
+                    } else {
+                        let (key, _) = column;
+                        html! {
+                            <div {key} class="pivot-column" ondragenter={dragenter}>
+                                <div class="config-drop" />
+                            </div>
+                        }
+                    }
+                })
+                .collect::<Html>()
+        };
+
+        let column_dropdown = ctx.props().column_dropdown.clone();
+        let exclude = ctx.props().exclude.clone();
+        let on_select = ctx.props().parent.callback(V::create);
+        html! {
+            <div ref={&self.elem} class="rrow">
+                <div
+                    id={ctx.props().name}
+                    ondragover={dragover}
+                    ondragenter={drag_container.dragenter}
+                    ondragleave={drag_container.dragleave}
+                    ref={drag_container.noderef}
+                    ondrop={drop}
+                >
+                    <div class="psp-text-field">
+                        <ul class="psp-text-field__input" for={ctx.props().name}>
+                            { columns_html }
+                            if ctx.props().is_dragover.is_none() | (!invalid_drag && valid_duplicate_drag) {
+                                <EmptyColumn {column_dropdown} {exclude} {on_select} />
+                            } else if invalid_drag {
+                                <InvalidColumn />
+                            }
+                        </ul>
+                        <label class="pivot-selector-label" for={ctx.props().name} />
+                    </div>
+                </div>
+            </div>
+        }
+    }
+}

package/src/rust/components/containers/dropdown_menu.rs

@@ -0,0 +1,104 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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::marker::PhantomData;
+use std::rc::Rc;
+
+use web_sys::*;
+use yew::prelude::*;
+
+use super::select::SelectItem;
+use crate::components::style::LocalStyle;
+use crate::*;
+
+pub type DropDownMenuItem<T> = SelectItem<T>;
+
+pub type DropDownMenuMsg = ();
+
+#[derive(Properties, PartialEq)]
+pub struct DropDownMenuProps<T>
+where
+    T: Into<Html> + Clone + PartialEq + 'static,
+{
+    pub values: Rc<Vec<DropDownMenuItem<T>>>,
+    pub callback: Callback<T>,
+}
+
+pub struct DropDownMenu<T>
+where
+    T: Into<Html> + Clone + PartialEq + 'static,
+{
+    _props: PhantomData<T>,
+}
+
+impl<T> Component for DropDownMenu<T>
+where
+    T: Into<Html> + Clone + PartialEq + 'static,
+{
+    type Message = DropDownMenuMsg;
+    type Properties = DropDownMenuProps<T>;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {
+            _props: Default::default(),
+        }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
+        false
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let values = &ctx.props().values;
+        let body = if !values.is_empty() {
+            values
+                .iter()
+                .map(|value| match value {
+                    DropDownMenuItem::Option(x) => {
+                        let click = ctx.props().callback.reform({
+                            let value = x.clone();
+                            move |_: MouseEvent| value.clone()
+                        });
+
+                        html! {
+                            <span onmousedown={click} class="selected">{ x.clone().into() }</span>
+                        }
+                    },
+                    DropDownMenuItem::OptGroup(name, xs) => {
+                        html! {
+                            <>
+                                <span class="dropdown-group-label">{ name }</span>
+                                <div class="dropdown-group-container">
+                                    { xs.iter().map(|x| {
+                                    let click = ctx.props().callback.reform({
+                                        let value = x.clone();
+                                        move |_: MouseEvent| value.clone()
+                                    });
+                                    html! {
+                                        <span onmousedown={ click }>
+                                            { x.clone().into() }
+                                        </span>
+                                    }
+                                }).collect::<Html>() }
+                                </div>
+                            </>
+                        }
+                    },
+                })
+                .collect::<Html>()
+        } else {
+            html! { <span class="no-results">{ "No Completions" }</span> }
+        };
+
+        html! { <><LocalStyle href={css!("containers/dropdown-menu")} />{ body }</> }
+    }
+}