Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Vega] Implement context filter modification #17586

Merged
merged 6 commits into from
Jul 2, 2018
Merged

Conversation

nyurik
Copy link
Contributor

@nyurik nyurik commented Apr 5, 2018

Implements #17210

API:

  • kibanaAddFilter - adds ES query filter to the filter bar
kibanaAddFilter(
  { "match": { "extension.keyword": { "query": "jpg", "type": "phrase"  }}}   // ES Query language
  { } // Optional filter metadata, e.g. enabled/disabled, etc
)
  • kibanaRemoveFilter(query, [meta]) - same params as adding
  • kibanaRemoveAllFilters()
  • kibanaSetTimeFilter(start, end) sets time range for the dashboard - works with numbers, strings, and dates.

Extensive example: https://gist.github.com/nyurik/3c579fb8e81c8a981d4b267ad1767227

  • select portion of the graph, move that portion around, resize on each side by the edge handles, and either double click or click apply to set the time.
  • click any of the extensions to add a filter
  • click on the extension again (when there is only one) to remove that filter
  • double click the graph to reset the time to last 15 days

screenshot from 2018-04-09 08-37-13

Simple testing code (click or shift click to set/unset)

{
  $schema: https://vega.github.io/schema/vega/v3.json
  title: click anywhere to set, shift click to remove
  signals: [
    {
      name: myFilter
      value: {
        match: {
          extension.keyword: {query: "jpg", type: "phrase"}
        }
      }
    }
    {
      name: btn
      on: [
        {events: "view:click[!event.shiftKey]", update: "kibanaAddFilter(myFilter)"}
        {events: "view:click[event.shiftKey]", update: "kibanaRemoveFilter(myFilter)"}
      ]
    }
  ]
}

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.

@nyurik nyurik requested a review from timroes April 5, 2018 21:03
@nyurik nyurik added Feature:Visualizations Generic visualization features (in case no more specific feature label is available) v6.3.0 Feature:Vega Vega visualizations v7.0.0 labels Apr 5, 2018
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@alexfrancoeur
Copy link

@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?

screen shot 2018-04-09 at 8 07 08 pm

@nyurik
Copy link
Contributor Author

nyurik commented Apr 10, 2018

@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 nyurik changed the title [WIP][Vega] Implement context filter modification [Vega] Implement context filter modification Apr 10, 2018
@nyurik
Copy link
Contributor Author

nyurik commented Apr 11, 2018

@Bargs, could you take a look at the filter approach I'm using. (@alexfrancoeur suggested i poke you on this)

@elasticmachine
Copy link
Contributor

💔 Build Failed

@nyurik
Copy link
Contributor Author

nyurik commented Apr 11, 2018

jenkins, test this

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💔 Build Failed

@nyurik
Copy link
Contributor Author

nyurik commented Jun 28, 2018

@ppisljar are you sure that patch fixed it? jenkins fails to retest for some reason

Copy link
Contributor

@timroes timroes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got only a couple of minor issues, the only thing blocking for me is the proper check in the _parseTimeRange method, the rest looks good and seems to be working.

@@ -60,8 +60,8 @@ VisTypesRegistryProvider.register((Private) => {
responseHandler: 'none',
options: {
showIndexSelection: false,
showQueryBar: false,
showFilterBar: false,
showQueryBar: true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For what do we actually show the query bar? Since we cannot manipulate the query?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we use this[handlerFunc](...args) directly?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good catch!

// 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()) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done. BTW, note that moment({a:1}) is, for some weird reason, is a valid date :(

@elasticmachine
Copy link
Contributor

💔 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
@elasticmachine
Copy link
Contributor

💔 Build Failed

@nyurik
Copy link
Contributor Author

nyurik commented Jul 2, 2018

sigh, jenkins, please retest

@nyurik
Copy link
Contributor Author

nyurik commented Jul 2, 2018

jenkins retest this

Copy link
Contributor

@timroes timroes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested with the given spec, and also tested the kibanaSetTimeFilter with different configuration (Chrome, Linux). Everything seems to work as expected. LGTM.

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Copy link
Contributor

@thomasneirynck thomasneirynck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great addition! 🔥

@nyurik nyurik merged commit e177849 into elastic:master Jul 2, 2018
@nyurik nyurik deleted the add_filter branch July 2, 2018 16:48
nyurik added a commit to nyurik/kibana that referenced this pull request Jul 2, 2018
* [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'}"
        }
      ]
    }
  ]
}
```
nyurik added a commit that referenced this pull request Jul 2, 2018
* [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'}"
        }
      ]
    }
  ]
}
```
@elasticmachine
Copy link
Contributor

💔 Build Failed

@acro-yoshioka
Copy link

Implements #17210

API:

  • kibanaAddFilter - adds ES query filter to the filter bar
kibanaAddFilter(
  { "match": { "extension.keyword": { "query": "jpg", "type": "phrase"  }}}   // ES Query language
  { } // Optional filter metadata, e.g. enabled/disabled, etc
)

Please tell me how to specify meta.
I would like to specify the label of the Content Filter.

@nyurik
Copy link
Contributor Author

nyurik commented Nov 6, 2018

@acro-yoshioka I don't think it is possible at the moment, please create a new issue for that. CC: @timroes

@acro-yoshioka
Copy link

@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 !
I understand that the 2nd arg about Optional filter metadata is not implemented.

@francisca-lima
Copy link

Any solution yet? Thank you!

@streamich streamich mentioned this pull request Mar 19, 2020
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Vega Vega visualizations Feature:Visualizations Generic visualization features (in case no more specific feature label is available) v6.4.0 v7.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants