make dropdowns more performant

attempt to fix plotly#103

packages/dash-core-components/dash_core_components/__init__.py

@@ -31,11 +31,15 @@
 _css_dist = [
     {
         "relative_package_path": [
+            "[email protected]",
             "[email protected]",
-            "[email protected]"
+            "[email protected]/styles.css",
+            "[email protected]/styles.css"
         ],
         "external_url": [
             "https://unpkg.com/[email protected]/dist/react-select.min.css",
+            "https://unpkg.com/[email protected]/styles.css",
+            "https://unpkg.com/[email protected]/styles.css",
             "https://unpkg.com/[email protected]/assets/index.css"
         ],
         "namespace": "dash_core_components"

packages/dash-core-components/dash_core_components/react-virtualized-select@3.1.0.css

@@ -0,0 +1,22 @@
+.VirtualSelectGrid {
+  z-index: 1;
+}
+
+.VirtualizedSelectOption {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0 .5rem;
+}
+.VirtualizedSelectFocusedOption {
+  background-color: rgba(0, 126, 255, 0.1);
+}
+.VirtualizedSelectDisabledOption {
+  opacity: 0.5;
+}
+.VirtualizedSelectSelectedOption {
+  font-weight: bold;
+}

packages/dash-core-components/dash_core_components/react-virtualized@9.9.0.css

@@ -0,0 +1,107 @@
+/* Collection default theme */
+
+.ReactVirtualized__Collection {
+}
+
+.ReactVirtualized__Collection__innerScrollContainer {
+}
+
+/* Grid default theme */
+
+.ReactVirtualized__Grid {
+}
+
+.ReactVirtualized__Grid__innerScrollContainer {
+}
+
+/* Table default theme */
+
+.ReactVirtualized__Table {
+}
+
+.ReactVirtualized__Table__Grid {
+}
+
+.ReactVirtualized__Table__headerRow {
+  font-weight: 700;
+  text-transform: uppercase;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+     -moz-box-orient: horizontal;
+     -moz-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-align-items: center;
+     -moz-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.ReactVirtualized__Table__row {
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+     -moz-box-orient: horizontal;
+     -moz-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-align-items: center;
+     -moz-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.ReactVirtualized__Table__headerTruncatedText {
+  display: inline-block;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ReactVirtualized__Table__headerColumn,
+.ReactVirtualized__Table__rowColumn {
+  margin-right: 10px;
+  min-width: 0px;
+}
+.ReactVirtualized__Table__rowColumn {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ReactVirtualized__Table__headerColumn:first-of-type,
+.ReactVirtualized__Table__rowColumn:first-of-type {
+  margin-left: 10px;
+}
+.ReactVirtualized__Table__sortableHeaderColumn {
+  cursor: pointer;
+}
+
+.ReactVirtualized__Table__sortableHeaderIconContainer {
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+     -moz-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.ReactVirtualized__Table__sortableHeaderIcon {
+  -webkit-flex: 0 0 24px;
+     -moz-box-flex: 0;
+      -ms-flex: 0 0 24px;
+          flex: 0 0 24px;
+  height: 1em;
+  width: 1em;
+  fill: currentColor;
+}
+
+/* List default theme */
+
+.ReactVirtualized__List {
+}

packages/dash-core-components/package.json

@@ -34,7 +34,9 @@
     "react-dom": "^15.4.0",
     "react-markdown": "^2.4.5",
     "react-select": "^1.0.0-rc.3",
-    "react-syntax-highlighter": "^5.0.0"
+    "react-select-fast-filter-options": "^0.2.2",
+    "react-syntax-highlighter": "^5.0.0",
+    "react-virtualized-select": "^3.1.0"
   },
   "devDependencies": {
     "component-playground": "^1.3.2",

packages/dash-core-components/src/components/Dropdown.react.js

@@ -1,6 +1,7 @@
 import R from 'ramda';
 import React, {Component, PropTypes} from 'react';
-import ReactDropdown from 'react-select';
+import ReactDropdown from 'react-virtualized-select';
+import createFilterOptions from 'react-select-fast-filter-options';
 
 const DELIMETER = ',';
 
@@ -17,11 +18,19 @@ const DELIMETER = ',';
 export default class Dropdown extends Component {
     constructor(props) {
         super(props);
-        this.state = {value: props.value};
+        this.state = {
+            value: props.value,
+            filterOptions: createFilterOptions({options: props.options})
+        };
     }
 
     componentWillReceiveProps(newProps) {
         this.setState({value: newProps.value});
+        if (newProps.options !== this.props.options) {
+            this.setState({
+                filterOptions: createFilterOptions(newProps.options)
+            });
+        }
     }
 
     render() {
@@ -36,6 +45,7 @@ export default class Dropdown extends Component {
         return (
             <div id={id}>
                 <ReactDropdown
+                    filterOptions={this.state.filterOptions}
                     options={options}
                     value={selectedValue}
                     onChange={selectedOption => {