See if we can use react-virtualized-select where appropriate

[JobLeonard]

https://bvaughn.github.io/react-virtualized-select/

• Dropdown menu that also allows you to type, with autocomplete!
• Has both single- and multiselect
• Is virtualized, meaning that it is optimised to minimise DOM rendering and is still fast even with huge lists
• Allows for custom renderers for extra graphical information, which may come in handy in the plotting interfaces

Looks like this will be useful in most places we are using dropdown or fields for labels at the moment.

Will look into this once we get everything working again; let's break only one thing at a time ;)

[JobLeonard]

This was implemented in the submission form, and now for some mysterious reason, it has broken while that part of the app has not been touched in my latest edits. Will look into it.

[JobLeonard]

Implemented by using react-select as the dropdown element in the <DropdownMenu> component (which. This effectively implements it everywhere we use <DropdownMenu> for free, which is quite a lot of places.

BTW, sinc I haven't explained what <DropdownMenu> does before, it's a component I made to make it easy to generate dropdowns that dispatch. It lets us replace the following:

const colOptions = Object.keys(dataSet.colAttrs).sort().map((name) => {
        return (
            <li key={name}>
                <a onClick={ () => {
                    dispatch({
                        type: 'SET_SPARKLINE_PROPS',
                        colAttr: name,
                    });
                } }>
                    {name}
                </a>
            </li>
        );
    });

/* ... */

<div className='btn-group btn-block'>
    <button
        type='button'
        className='btn btn-block btn-default dropdown-toggle'
        data-toggle='dropdown'
        aria-haspopup='true'
        aria-expanded='false'>
        {sparklineState.colAttr + "  "}<span className='caret'></span>
    </button>
    <ul className='dropdown-menu btn-block scrollable-menu'>
        {colOptions}
    </ul>
</div>

with:

<DropdownMenu
    buttonName={sparklineState.colAttr}
    attributes={ Object.keys(dataSet.colAttrs).sort() }
    attrType={'SET_SPARKLINE_PROPS'}
    attrName={'colAttr'}
    dispatch={dispatch}
    />

Pretty nice, huh? Makes the whole thing easier to read and maintain.