@perspective-dev/viewer 4.3.0 → 4.4.1

package/src/less/column-dropdown.less

@@ -1,95 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@import "dom/scrollbar.less";
-
-@mixin icon {
-    background-repeat: no-repeat;
-    background-color: var(--icon--color);
-    content: "";
-    display: inline-block;
-    -webkit-mask-size: cover;
-    mask-size: cover;
-}
-
-:host {
-    box-sizing: border-box;
-    position: fixed;
-    z-index: 10000;
-    outline: none;
-    font-size: 0.75em;
-    border: inherit;
-    // box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-    user-select: none;
-    background-color: var(--icon--color, #fff) !important;
-    color: var(--plugin--background, #333) !important;
-    // padding: 6px 8px;
-    border: 1px solid var(--icon--color) !important;
-    max-width: 300px;
-    overflow: hidden;
-    max-height: 600px;
-    overflow: auto;
-    @include scrollbar;
-
-    display: flex;
-    flex-direction: column;
-
-    .selected {
-        background-color: var(--plugin--background) !important;
-        color: var(--icon--color) !important;
-    }
-
-    span {
-        cursor: pointer;
-        padding: 4px 5px;
-    }
-
-    .no-results {
-        padding: 3px 24px 6px 11px;
-        color: var(--error--color);
-        font-size: 8px;
-    }
-
-    .no-results:before {
-        content: var(--no-results--content, "Invalid Column");
-    }
-
-    #add-expression {
-        &:before {
-            @include icon;
-            width: 14px;
-            height: 12px;
-            margin-right: 5px;
-            -webkit-mask-image: var(--add-expression-icon--mask-image);
-            mask-image: var(--add-expression-icon--mask-image);
-        }
-    }
-}
-
-:host(:hover) {
-    .selected {
-        background-color: var(--icon--color, #fff) !important;
-        color: var(--plugin--background, #333) !important;
-    }
-
-    span:hover,
-    span.selected:hover {
-        background-color: var(--plugin--background) !important;
-        color: var(--icon--color) !important;
-    }
-}
-
-:host(.no-results) {
-    overflow: hidden;
-    background-color: transparent !important;
-    border: none !important;
-}

package/src/less/dom/checkbox.less

@@ -1,100 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@mixin icon {
-    background-repeat: no-repeat;
-    background-color: var(--icon--color);
-    content: "";
-    display: inline-block;
-    -webkit-mask-size: cover;
-    mask-size: cover;
-}
-
-:host {
-    input[type="checkbox"].alternate {
-        appearance: none;
-        height: 14px;
-        width: 14px;
-        padding: 0px;
-        cursor: pointer;
-        outline: none;
-        margin: 0 5px;
-
-        &:before {
-            @include icon;
-            width: 14px;
-            height: 14px;
-            font-family: var(--button--font-family, inherit);
-            background-color: var(--icon--color, #ccc);
-            -webkit-mask-image: var(--inactive-column-selector--content, none);
-            mask-image: var(--inactive-column-selector--content, none);
-        }
-
-        &:hover {
-            border-radius: 2px;
-            outline: 1px solid var(--icon--color);
-        }
-
-        &:checked:hover {
-            background-color: var(--icon--color, #ccc);
-            &:before {
-                background-color: var(--plugin--background, #ccc);
-            }
-        }
-
-        &:checked:before {
-            -webkit-mask-image: var(--active-column-selector--content, none);
-            mask-image: var(--active-column-selector--content, none);
-        }
-    }
-
-    input[type="checkbox"] {
-        float: left;
-        appearance: none;
-        height: 14px;
-        width: 14px;
-        padding: 0px;
-        cursor: pointer;
-        outline: none;
-        margin: 0 5px 0 0;
-
-        &:checked:before {
-            -webkit-mask-image: var(--column-checkbox-on--mask-image);
-            mask-image: var(--column-checkbox-on--mask-image);
-        }
-
-        &[disabled]:before {
-            opacity: 0.2s;
-        }
-
-        &:before {
-            @include icon;
-            height: 13px;
-            width: 13px;
-            -webkit-mask-image: var(--column-checkbox-off--mask-image);
-            mask-image: var(--column-checkbox-off--mask-image);
-        }
-
-        &:hover {
-            background-color: transparent;
-        }
-
-        &:hover:before {
-            -webkit-mask-image: var(--column-checkbox-hover--mask-image);
-            mask-image: var(--column-checkbox-hover--mask-image);
-        }
-    }
-
-    input[type="checkbox"]:not(:disabled) {
-        cursor: pointer;
-    }
-}

package/src/less/plugin-selector.less

@@ -1,183 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@import "dom/scrollbar.less";
-
-:host {
-    #settings_panel {
-        #plugin_selector_container.open ~ * {
-            opacity: 0;
-        }
-
-        #plugin_selector_container {
-            min-height: var(
-                --plugin-selector--height,
-                var(--status-bar--height, 48px)
-            );
-            display: flex;
-            white-space: nowrap;
-            flex-direction: column;
-            flex: 0 0 auto;
-
-            // Overflow the padding bounds of the container
-            // TODO these bounds exist to protext the resizer and scrollbar (left &
-            // right resp) but we really should find a way to remove it and delegate
-            // to sub-containers.
-            margin: 0 0px 0 -9px;
-
-            #plugin_selector_border {
-                height: 2px;
-                min-height: 2px;
-                width: 100%;
-                background-color: var(--inactive--color, #6e6e6e);
-                margin-top: 2px;
-            }
-
-            .plugin-selector-options {
-                overflow-y: auto;
-                @include scrollbar;
-            }
-
-            &.open {
-                position: absolute;
-                margin: 0;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-
-                // This element is first in the container but visually "overlaps"
-                // when expanded
-                z-index: 3;
-                color: var(--icon--color, #042121);
-                // background: var(--plugin--background);
-
-                .plugin-select-item {
-                    padding-left: 8px;
-                }
-            }
-
-            .plugin-select-item-name {
-                padding-left: 10px;
-                font-size: 1.33333em;
-            }
-
-            .plugin-select-item-name:before {
-                // This value is set in a `style` tag from Yew!
-                content: var(--default-column-title);
-            }
-
-            .plugin-select-item {
-                // width: 48px;
-                padding-left: 9px;
-                height: var(
-                    --plugin-selector--height,
-                    var(--status-bar--height, 48px)
-                );
-                min-height: var(
-                    --plugin-selector--height,
-                    var(--status-bar--height, 48px)
-                );
-                display: flex;
-                align-items: center;
-                border-bottom: 1px solid transparent;
-                box-shadow: 0px 1px var(--inactive--color, #6e6e6e);
-                cursor: pointer;
-            }
-
-            // Hadn't seen this technique before, makes sizing/positioning these
-            // trivial.  There's some indication this doesn't work on non-chrome
-            // https://stackoverflow.com/questions/36259410/how-to-set-size-of-svg-image-in-before-pseudo-class
-            // https://stackoverflow.com/questions/21509982/change-svg-fill-color-in-before-or-after-css
-            .plugin-select-item:before {
-                content: "";
-                display: inline-block;
-                height: 35px;
-                width: 40px;
-                -webkit-mask-size: cover;
-                mask-size: cover;
-                background-repeat: no-repeat;
-                background-color: var(--icon--color);
-            }
-
-            .plugin-select-item:hover {
-                background-color: var(--icon--color, #042121);
-                color: var(--plugin--background, #fdfffd);
-            }
-
-            .plugin-select-item:hover:before {
-                background-color: var(--plugin--background, #fdfffd);
-            }
-
-            .plugin-select-item[data-plugin="Candlestick"]:before {
-                // mask-image: var(--plugin-selector-candlestick--content);
-                -webkit-mask-image: var(--plugin-selector-candlestick--content);
-            }
-
-            .plugin-select-item[data-plugin="Heatmap"]:before {
-                -webkit-mask-image: var(--plugin-selector-heatmap--content);
-            }
-
-            .plugin-select-item[data-plugin="Map Scatter"]:before {
-                -webkit-mask-image: var(--plugin-selector-map-scatter--content);
-            }
-
-            .plugin-select-item[data-plugin="OHLC"]:before {
-                -webkit-mask-image: var(--plugin-selector-ohlc--content);
-            }
-
-            .plugin-select-item[data-plugin="Sunburst"]:before {
-                -webkit-mask-image: var(--plugin-selector-sunburst--content);
-            }
-
-            .plugin-select-item[data-plugin="Treemap"]:before {
-                -webkit-mask-image: var(--plugin-selector-treemap--content);
-            }
-
-            .plugin-select-item[data-plugin="X Bar"]:before {
-                -webkit-mask-image: var(--plugin-selector-x-bar--content);
-            }
-
-            .plugin-select-item[data-plugin="X/Y Line"]:before {
-                -webkit-mask-image: var(--plugin-selector-x-y-line--content);
-            }
-
-            .plugin-select-item[data-plugin="X/Y Scatter"]:before {
-                -webkit-mask-image: var(--plugin-selector-x-y-scatter--content);
-            }
-
-            .plugin-select-item[data-plugin="Y Area"]:before {
-                -webkit-mask-image: var(--plugin-selector-y-area--content);
-            }
-
-            .plugin-select-item[data-plugin="Y Bar"]:before {
-                -webkit-mask-image: var(--plugin-selector-y-bar--content);
-            }
-
-            .plugin-select-item[data-plugin="Y Line"]:before {
-                -webkit-mask-image: var(--plugin-selector-y-line--content);
-            }
-
-            .plugin-select-item[data-plugin="Y Scatter"]:before {
-                -webkit-mask-image: var(--plugin-selector-y-scatter--content);
-            }
-
-            .plugin-select-item[data-plugin="Datagrid"]:before {
-                -webkit-mask-image: var(--plugin-selector-datagrid--content);
-            }
-        }
-
-        #plugin_selector {
-            flex-grow: 1;
-        }
-    }
-}

package/src/less/type-icon.less

@@ -1,68 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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 #selected-columns .type-icon,
-:host #sub-columns .type-icon {
-    position: absolute;
-    left: 15px;
-}
-
-:host .type-icon {
-    height: 13px;
-    width: 13px;
-    background-repeat: no-repeat;
-    background-color: var(--icon--color);
-    content: "";
-    display: inline-block;
-    -webkit-mask-size: cover;
-    mask-size: cover;
-    flex-shrink: 0;
-
-    &.none {
-        content: none;
-    }
-
-    &.integer {
-        -webkit-mask-image: var(--column-type-integer--mask-image);
-        mask-image: var(--column-type-integer--mask-image);
-    }
-
-    &.float {
-        -webkit-mask-image: var(--column-type-float--mask-image);
-        mask-image: var(--column-type-float--mask-image);
-    }
-
-    &.string {
-        -webkit-mask-image: var(--column-type-string--mask-image);
-        mask-image: var(--column-type-string--mask-image);
-    }
-
-    &.boolean {
-        -webkit-mask-image: var(--column-type-boolean--mask-image);
-        mask-image: var(--column-type-boolean--mask-image);
-    }
-
-    &.date {
-        -webkit-mask-image: var(--column-type-date--mask-image);
-        mask-image: var(--column-type-date--mask-image);
-    }
-
-    &.datetime {
-        -webkit-mask-image: var(--column-type-datetime--mask-image);
-        mask-image: var(--column-type-datetime--mask-image);
-    }
-
-    &.expression {
-        -webkit-mask-image: var(--add-expression-icon--mask-image);
-        mask-image: var(--add-expression-icon--mask-image);
-    }
-}

package/src/rust/components/error_message.rs

@@ -1,56 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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::prelude::*;
-use yew::{Properties, function_component, html};
-
-use crate::components::style::LocalStyle;
-use crate::css;
-use crate::session::Session;
-use crate::utils::AddListener;
-
-#[derive(PartialEq, Properties)]
-pub struct ErrorMessageProps {
-    pub session: Session,
-}
-
-#[function_component(ErrorMessage)]
-pub fn error_message(p: &ErrorMessageProps) -> yew::Html {
-    let error = use_state(|| p.session.get_error());
-    use_effect_with(
-        (error.setter(), p.session.clone()),
-        |(set_error, session)| {
-            let sub = session.table_errored.add_listener({
-                clone!(set_error);
-                move |y| set_error.set(Some(y))
-            });
-
-            || drop(sub)
-        },
-    );
-
-    html! {
-        <>
-            <LocalStyle href={css!("render-warning")} />
-            <div
-                class="plugin_information plugin_information--warning"
-                id="plugin_information--size"
-            >
-                <span class="plugin_information__icon" />
-                <span class="plugin_information__text" id="plugin_information_count">
-                    if let Some(msg) = error.as_ref() { { msg } }
-                </span>
-            </div>
-        </>
-    }
-}

package/src/rust/custom_elements/column_dropdown.rs

@@ -1,123 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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 perspective_client::clone;
-use perspective_client::config::Expression;
-use perspective_js::json;
-use perspective_js::utils::global;
-use wasm_bindgen::JsCast;
-use wasm_bindgen::prelude::*;
-use web_sys::*;
-use yew::html::ImplicitClone;
-use yew::{Callback, props};
-
-use crate::components::column_dropdown::*;
-use crate::components::column_selector::InPlaceColumn;
-use crate::custom_elements::modal::*;
-use crate::session::Session;
-use crate::*;
-
-#[wasm_bindgen]
-#[derive(Clone)]
-pub struct ColumnDropDownElement {
-    modal: ModalElement<ColumnDropDown>,
-    session: Session,
-}
-
-impl ImplicitClone for ColumnDropDownElement {}
-
-impl ColumnDropDownElement {
-    pub fn new(session: Session) -> Self {
-        let dropdown = global::document()
-            .create_element("perspective-dropdown")
-            .unwrap()
-            .unchecked_into::<HtmlElement>();
-
-        let props = props!(ColumnDropDownProps {});
-        let modal = ModalElement::new(dropdown, props, false, None);
-        Self { modal, session }
-    }
-
-    pub fn autocomplete(
-        &self,
-        target: HtmlInputElement,
-        exclude: HashSet<String>,
-        callback: Callback<InPlaceColumn>,
-    ) -> Option<()> {
-        let input = target.value();
-        let metadata = self.session.metadata();
-        let mut values: Vec<InPlaceColumn> = vec![];
-        let small_input = input.to_lowercase();
-        for col in metadata.get_table_columns()? {
-            if !exclude.contains(col) && col.to_lowercase().contains(&small_input) {
-                values.push(InPlaceColumn::Column(col.to_owned()));
-            }
-        }
-
-        for col in self.session.metadata().get_expression_columns() {
-            if !exclude.contains(col) && col.to_lowercase().contains(&small_input) {
-                values.push(InPlaceColumn::Column(col.to_owned()));
-            }
-        }
-
-        clone!(self.modal, self.session);
-        ApiFuture::spawn(async move {
-            if !exclude.contains(&input) {
-                let is_expr = session.validate_expr(&input).await?.is_none();
-
-                if is_expr {
-                    values.push(InPlaceColumn::Expression(Expression::new(
-                        None,
-                        input.into(),
-                    )));
-                }
-            }
-
-            let classes = modal.custom_element.class_list();
-            let no_results = json!(["no-results"]);
-            if values.is_empty() {
-                classes.add(&no_results).unwrap();
-            } else {
-                classes.remove(&no_results).unwrap();
-            }
-
-            modal.send_message_batch(vec![
-                ColumnDropDownMsg::SetCallback(callback),
-                ColumnDropDownMsg::SetValues(values, target.get_bounding_client_rect().width()),
-            ]);
-
-            modal.open(target.unchecked_into(), None).await
-        });
-
-        Some(())
-    }
-
-    pub fn item_select(&self) {
-        self.modal.send_message(ColumnDropDownMsg::ItemSelect);
-    }
-
-    pub fn item_down(&self) {
-        self.modal.send_message(ColumnDropDownMsg::ItemDown);
-    }
-
-    pub fn item_up(&self) {
-        self.modal.send_message(ColumnDropDownMsg::ItemUp);
-    }
-
-    pub fn hide(&self) -> ApiResult<()> {
-        self.modal.hide()
-    }
-
-    pub fn connected_callback(&self) {}
-}