Enhance chart picker dropdown

[jackparmer]

The current chart picker dropdown won't scale to all of plotly's trace types when reintegrated with chart studio. I suggest making a design similar to the Feed and shipping it by default with this project:

For which the icons are here

Developer requirements:

• Configurability of the chart names and which charts are displayed. Then we can eventually pass on this configurability to on-premises users who have corporate guidelines for how charts are named.
• Configurability of the what the columns are called, their order, and which chart go in which column.
• Bring-your-own chart picker components should still be technically possible for users who do not like this design, would prefer a simple dropdown. etc.

Related to: plotly/plotly.js#2221

@fabric-8 is looking into design improvements.

[jackparmer]

Added some of the new charts types on the horizon to this font file (mainly polar and 3d volume types). Thought this may be useful as either icon placeholders or the icons used in the final version.

http://plotly-icons.getforge.io/

Plotly Icons.zip

[aulneau]

@jackparmer nice! we've created a new repo for icons to be importable via import {PlotTypeIcon} from 'plotly-icons'; which you can see here -> https://github.com/plotly/plotly-icons and see previews of them here. This is how icons are being displayed in the react-plotly.js-editor.

I went through all the icons I could find in streambed and added them, but I'll make a PR with any new icons from this zip.

[fabric-8]

So here's the rebrush:
https://www.figma.com/file/fZWLt6JFr2lKxJNcP3CbCX6m/Streambed?node-id=223%3A1

Idea is to go for a modal instead of "dropdown" as it's easier to have additional interactions in there (show example / search / etc. icons when hovering a chart) and allows for more real estate.

assets are in the design repo

[nicolaskruchten]

I like the modal idea, it would let us add more contextual help eventually if needed like an "I'm not sure, help me figure it out" type wizard, or something ML-powered :)

As a broader comment, is it best to have this be called "chart type" as opposed to "trace type"? You can put lines on bars etc, so adding a line trace doesn't a line chart make, necessarily...

[VeraZab]

yeah, 'trace type' is what that picker adds actually, so it would be better :)

[nicolaskruchten]

Note: this picker should prevent the addition of 3d traces when 2d traces already exist, and vice-versa