Visualize refactor

[ppisljar]

this PR was merged into feature/visualize branch and replaced by this PR: #11786

searching is moved out of visualize editor app (kibana/public/visualize/editor) into visualize component (ui/public/visualize) which was already handling search response.

this simplifies the code (some weird event handling was happening there before to communicate changes between visualize app editor, component and side editor.

it also makes using component easier (embedding it in other apps). before you would need to do all the same things visualize editor app does (handling the search). now all you need to do is provide savedVis and states:

<visualize saved-vis="savedVisObject" app-state="appState" ui-state="uiState" />

i am undecided if you (the embedding app) should be responsible for providing access to filter bar, time picker and query bar or should component be aware of those things ? the following option makes embedding a lot easier. we could still provide the possibility for the embedding app to override some of that behavior.

oh, and this also solves the double rendering (at least in some scenarios). before if you would in any point series chart change a chart type (from line to bar for example) you would see that it double renders (you would first see the line chart and then bar chart ... keeps happening on any other option change)

this is part 1 of visualize changes i want to do ... but i want to get some early feedback as other parts will be based on this.

i tried to capture the changes in this diagram:

some more diagrams of the new approach:

simple components with very specific functions:

one way data flow:

[ppisljar]

this is here so that component doesn't need to know about this top level components directly, however it depends on them ... i am not sure if i should just move this inside component ?

[spalger]

Mutating the vis like this isn't a good idea. If <visualize> is going to use the timeFilter and queryFilter it should explicitly/outwardly depend on them.

[ppisljar]

using visualizations inside of other apps

<visualize> component:

• used to show saved visualizations
• receives savedVis and appState as input
• knows a lot about kibana, like time picker, filter panel and query bar.
• it monitor those and is responsible for calling approp. request and response handlers

usage:

<visualize saved-vis="savedVisObject" app-state="appStateObject" />

<visualization> component

• used to show visualizations on-the-fly
• receives data, config and uiState
• only knows how to render visualization, nothing about kibana

usage:

<visualization data="data" config="config" ui-state="uiState" />

creating new visualizations

new basic visualization type (like metric, tagcloud, table)

• create and register new visType
• render function which receives .... and renders the chart
• editorConfig and editorTemplate

advanced visualization type (like timelion, thor)

• create and register new Editor, RequestHandler and ResponseHandler
• all of the basic vis type things

new vislib visualization

• extend vislib to do something new
• create and register new VisType extending VislibVisType
• all you need to provide is editorConfig and editorTemplate

[ppisljar]

at this point this completely breaks every existing visualization (mostly due to renaming of properties and moving files around)

[thomasneirynck]

[EDIT] nevermind, this refers to the above error: #11001 (comment)

---

I'm having trouble running the code, getting the following error when creating a new visualization.

Uncaught TypeError: visType is not a function
    at new VisConfig (:5601/cqg/bundles/kibana.bundle.js?v=8467:113326)
    at Vis.render (:5601/cqg/bundles/kibana.bundle.js?v=8467:111810)
    at VislibVisType.render (:5601/cqg/bundles/kibana.bundle.js?v=8467:159298)
    at :5601/cqg/bundles/kibana.bundle.js?v=8467:117666
    at complete (:5601/cqg/bundles/commons.bundle.js?v=8467:7917)
    at delayed (:5601/cqg/bundles/commons.bundle.js?v=8467:7927)