Applying filter on other visualisations of the dashboard when clicked on any value on the vega visualisation

[nyurik]

From @sainath-reancloud on August 23, 2017 5:19

Hello Team,

This plugin solves most of our complex use-cases and it's indeed very useful. Is there a way where we could apply filter on other visualisations of the dashboard, whenever we click on a particular value on the vega visualisation. Similarly where it could emulate the 'filtering by value' provided by out of the box kibana visualisations.

Copied from original issue: nyurik/kibana-vega-vis#13

[nyurik]

From @spalger on August 25, 2017 20:36

The filters are accessible to the vis type, but I'm not confident that there is a way for vega visualizations to automatically set filters based on clicks. Perhaps we could come up with a way to define the filter desired?

@sainath-reancloud can you share the visualization you are building, the item you would like to click, and the filter you would expect to produce? Screenshots would be helpful along with sample data if you can provide it.

Thanks for the request :)

[nyurik]

@sainath-reancloud that's an awesome idea, thanks! It should be possible to do with Vega signals - they can be modified by both the environment and by the Vega JSON. I already use it for the underlying map synchronization - a graph is notified when user moves the map (latitude/longitude/zoom signals), and the graph can position the map to a different location on some event by modifying those signals.

@spalger What's the best way for my code to set Kibana dashboardContext's filter string and fire a global update?

Note: Until #11 is fixed, there will be a full graph regeneration/reinitialization whenever the filter expression is changed, so this might cause some visual disruptions, depending on the graph.

[nyurik]

I started the implementation in https://github.com/nyurik/kibana-vega-vis/compare/indexPattern but the indexPattern I get from the code injector has index id set to undefined. @nreese do yuo know how to properly get the index ID and the context filter string, and also to modify them from code?

[nyurik]

From @nreese on September 8, 2017 14:45

The indexPatterns get method creates a new index pattern when an id argument is not provided.

What are you trying to do? Are you trying to create a new index-pattern or get an existing index-pattern based on the index-pattern title?

[nyurik]

From @spalger on September 11, 2017 19:24

@nyurik I'm not super familiar with this section of things and I assume it's changing a fair amount with the work that @lukasolson and @Bargs have been doing. It looks like you're going to want to checkout the following modules:

• filterBarClickHandler used to listen to click events from Kibana visualizations and create filters based on the queries used by that visualization
• queryFilter service this seems to manage the state of the query box at the top of the page, but I'm not certain
• filterManager service another peice to the puzzel, but I'm not certain how it ties in

[nyurik]

Thanks @spalger. @nreese has sent me some good links too, documenting here for others:

Here is an example of how a map kibana plugin I wrote added geospatical filter pills. Line 7 is an example of how to get an instance of the interface. Line 63 is an example of how to add a new filter. Your code could do the same. When the signal is passed to your visualization, your code can convert that into a filter and add it to kibana. https://github.com/nreese/enhanced_tilemap/blob/master/public/vislib/geoFilter.js#L7
The rest of the code is looking for any filters previously built so that they can be updated instead of making a new filter each time

[nyurik]

From @robinsummerhill on October 3, 2017 13:59

Just adding a link to a tutorial that shows how to use the filterManager service to add a filter to the dashboard: https://www.timroes.de/2015/12/06/writing-kibana-4-plugins-visualizations-using-data/#adding-filters-on-click

[nyurik]

From @seanziee on March 7, 2018 1:26

Yes, needed! That would take the vega visuals to the next level :)

[nyurik]

Update: Per @timroes , there is currently some refactoring going on inside Kibana to make accessing filters easier. I am waiting for that work to complete, and once done, I will add this feature. Essentially I need two functions from Kibana: getContextFilterAsString() and setContextFilterStringAndUpdateScreen(newFilter). Once these two functions are ready, it should be fairly easy to add them to the Vega plugin.

[nyurik]

Done. Will be part of Kibana 6.4

[bphenriques]

Edit: Hmmm. I thought that this propagates signals to other dashboards but after deeper investigation it seems that isn't (see example below). If I am right, what does this do and how can we setup on our dashboards (examples?)?

Hello, can someone provide more context on this functionality? Some instructions would be helpful.
(Kibana 6.4.0 and ES 6.4.0)

For example, consider two visualizations:

• One has a dropdown:

{
  "$schema": "https://vega.github.io/schema/vega/v3.json",
  "config": {
    "kibana": {
      "controlsLocation": "top"    }
  },
  "signals": [
    {
      "name": "%OPT_NAME%",
      "value": "Rule B",
      "bind": {
        "input": "select",
        "options": [
          "OPT A", "OPT B", "OPT C"
        ]
      }
    }
    
  ]
}

And the other has a text that is updated according to the drop down.

{
  $schema: https://vega.github.io/schema/vega/v3.0.json  
  marks: [
   {
      type: "text"
      encode: {
        update: {
          text:  { "signal": "%OPT_NAME%" }          
          baseline: { value: "top" }          
          fontSize: { value: 30 }
          font: { value: "Arial" }
          fill: { value: "#555757" }
          
          // center vertically
          yc: { signal: "height/2 - 45" }          
        }
      }
    }
  ]
}

As expected, the text visualization does not compile because it can't find the %OPT_NAME%. (Expression parse error: "%OPT_NAME%"). However, from what I gather, this is now possible in Kibana 6.4, correct?

I actually find it curious on why I have two dropdowns when I set up just one (I saved the visualisation).

[nyurik]

@bphenriques independent Vega graphs do not communicate with each other via signals. You have to put both the drop down and the click handler into the same graph:

{
  $schema: https://vega.github.io/schema/vega/v3.0.json
  config: {
    kibana: {controlsLocation: "top"}
  }
  signals: [
    {
      name: option
      value: OPT A
      bind: {
        input: select
        options: ["OPT A", "OPT B", "OPT C"]
      }
    }
    {
      name: btn
      on: [
        {
          events: @applyTimeFilterButton:click[!event.shiftKey]
          update:
            '''
            kibanaAddFilter({
                      match: {
                      'myfield': {
                        query: option,
                        type: 'phrase'
                    }}})
                    
            '''
        }
        {
          events: @applyTimeFilterButton:click[event.shiftKey]
          update: kibanaRemoveAllFilters()
        }
      ]
    }
  ]
  marks: [
    {
      type: group
      name: applyTimeFilterButton
      encode: {
        enter: {
          cursor: {value: "pointer"}
          cornerRadius: {value: 6}
          fill: {value: "#f5f5f5"}
          stroke: {value: "#c1c1c1"}
          strokeWidth: {value: 2}
          xc: {signal: "width/2"}
          yc: {signal: "height/2"}
          width: {value: 120}
          height: {value: 30}
        }
        update: {
          opacity: {value: 1}
        }
        hover: {
          opacity: {value: 0.7}
        }
      }
      marks: [
        {
          type: text
          interactive: false
          encode: {
            update: {
              xc: {
                field: {group: "width"}
                mult: 0.5
              }
              yc: {
                field: {group: "height"}
                mult: 0.5
                offset: 2
              }
              align: {value: "center"}
              baseline: {value: "middle"}
              fontWeight: {value: "bold"}
              text: {signal: "'Select ' + option"}
            }
          }
        }
      ]
    }
  ]
}

[bphenriques]

@nyurik Thank you for clearing that out!