[Vega] Implement context filter modification #17586
Conversation
nyurik
added
Feature:Visualizations
💚 Build Succeeded |
💚 Build Succeeded |
💚 Build Succeeded |
💚 Build Succeeded |
💚 Build Succeeded |
|
@nyurik I tested this out a bit. Didn't have time to add a filter to an already existing chart, but it does seem to work great. Filters are applied to the dashboard and update all other visualizations appropriately. My only feedback is around the "apply filter" button after selecting rom a time range. Is there any reason why we don't automatically apply the filter if you've selected a timeframe? That would match all other charts. Can this be done or was it the way the example you provided was configured?
|
|
@alexfrancoeur that's just how I designed that specific graph - I wanted to be able to readjust the selected range -- dragging the sides or the whole thing, before confirming (button click or range doubleclick) that's the range I want. But from Vega's perspective, you can do these commands at any point, even on load - e.g. if the data contains something bad, zoom in right away. |
nyurik
changed the title
|
@Bargs, could you take a look at the filter approach I'm using. (@alexfrancoeur suggested i poke you on this) |
💔 Build Failed |
|
jenkins, test this |
💚 Build Succeeded |
💔 Build Failed |
💚 Build Succeeded |
💔 Build Failed |
|
@ppisljar are you sure that patch fixed it? jenkins fails to retest for some reason |
| @@ -60,8 +60,8 @@ VisTypesRegistryProvider.register((Private) => { | |||
| responseHandler: 'none', | |||
| options: { | |||
| showIndexSelection: false, | |||
| showQueryBar: false, | |||
| showFilterBar: false, | |||
| showQueryBar: true, | |||
There was a problem hiding this comment.
For what do we actually show the query bar? Since we cannot manipulate the query?
There was a problem hiding this comment.
Why can't we? My understanding is that this bar allows users to delete and examine the queries when they are developing the vis. I have been using it to test things extensively. I'm not sure about the dashboard impact, but i guess it is similar there.
| // in case functions don't match the list above | ||
| throw new Error(`${funcName}() is not defined for this graph`); | ||
| } | ||
| await this[handlerFunc].apply(this, args); |
There was a problem hiding this comment.
Can't we use this[handlerFunc](...args) directly?
| // Try to parse as relative dates too (absolute dates will also be accepted) | ||
| const startDate = dateMath.parse(start); | ||
| const endDate = dateMath.parse(end); | ||
| if (!startDate.isValid() || !endDate.isValid()) { |
There was a problem hiding this comment.
startDate and endDate could be undefined in case the user specified an invalid format. I think we should fix that if for also checking for that.
There was a problem hiding this comment.
done. BTW, note that moment({a:1}) is, for some weird reason, is a valid date :(
💔 Build Failed |
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ``` changed Vega signal to custom func rough draft implementation support timefilter, filter removal use buildQueryFilter wrapper rebase and sync with tooltip func error handling, filters (WIP) console.log to dbg removeFilter manual merge of upstream patch
💔 Build Failed |
|
sigh, jenkins, please retest |
|
jenkins retest this |
💚 Build Succeeded |
* [Vega] Implement context filter modification elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
* [Vega] Implement context filter modification #17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
💔 Build Failed |
Please tell me how to specify meta. |
|
@acro-yoshioka I don't think it is possible at the moment, please create a new issue for that. CC: @timroes |
Thank you for your comment ! |
|
Any solution yet? Thank you! |
Implements #17210
API:
kibanaAddFilter- adds ES query filter to the filter barkibanaRemoveFilter(query, [meta])- same params as addingkibanaRemoveAllFilters()kibanaSetTimeFilter(start, end)sets time range for the dashboard - works with numbers, strings, and dates.Extensive example: https://gist.github.com/nyurik/3c579fb8e81c8a981d4b267ad1767227
Simple testing code (click or shift click to set/unset)
Release Summary: Vega now allows modifying filters and the time range in Kibana, by adding utility functions, that can be called in your signal handlers. Check the PR description for a description of the functions.