# Kibana 6.5 custom visualisation not receiving filters

**URL:** <https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846>\
**Category:** Kibana\
**Created:** [September 17, 2019, 3:21pm UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846 "2019-09-17T15:21:35Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![reillye](https://avatars.discourse-cdn.com/v4/letter/r/c6cbf5/32.png) [@reillye](https://discuss.elastic.co/u/reillye)\
**Post date:** [September 17, 2019, 3:21pm UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/1 "2019-09-17T15:21:35Z")

</div>

Hi,

I have written a custom visualisation for Kibana 6.5, which has its own custom request and response handlers. It queries elasticsearch and returns all the data for the chosen time period in its raw format. I want to be able to filter this data by using the built-in kibana filters, however I do not believe I have written my `requestHandler.js` class to handle these. I know that the `requestHandler` takes 3 parameters: `params` , `queryFilter` and `timeFilter` . I already use `timeFilter` to search for the given time period, but can I use the other two to pass the values from chosen filters from kibana into the query? Is that how it would work? I have seen in [this documentation on filter context](https://www.elastic.co/guide/en/elasticsearch/reference/6.5/query-filter-context.html) that you can add a `filter` to the query. Is this the correct approach?

My code is below for my current visualisation and the request handler, can anyone advise on how I can include filters into my query to ES?

**self\_changing\_vis.js**

```
import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';

import { SelfChangingEditor } from './self_changing_editor';
import { SelfChangingComponent } from './self_changing_components';

import { Schemas } from 'ui/vis/editors/default/schemas';
import optionsTemplate from './options_template.html';
import { RequestHandlerProvider } from './requestHandler.js';
import handleResponse from './responseHandler.js';

const myResponseHandler = (vis, response) => {
  // transform the response (based on vis object?)
  console.log('1: ', response);
  console.log('2 : ', vis);
  return response;
};

function SelfChangingVisType(Private) {
  const VisFactory = Private(VisFactoryProvider);
  const RequestHandler = Private(RequestHandlerProvider);

  return VisFactory.createReactVisualization({
    name: 'self_changing_vis',
    title: 'Skyplot',
    icon: 'visControls',
    description: 'This visualization is able to change its own settings, that you could also set in the editor.',
    visConfig: {
      component: SelfChangingComponent,
      defaults: {
        counter: 0,
        constellation: 'GPS'
      },
    },
    editor: 'default',
    editorConfig: {
      optionsTemplate: optionsTemplate,
      schemas: new Schemas([
        {
          group: 'metrics',
          name: 'metric',
          title: 'Metric',
          min: 1,
          aggFilter: ['!derivative', '!geo_centroid'],
          defaults: [
            { type: 'count', schema: 'metric' }
          ]
        }, {
          group: 'buckets',
          name: 'segment',
          title: 'Bucket Split',
          min: 0,
          max: 1,
          aggFilter: ['!geohash_grid', '!filter']
        }
      ]),
    },
    requestHandler: RequestHandler.handle,
    responseHandler: handleResponse,
  });
}

VisTypesRegistryProvider.register(SelfChangingVisType);

```

**requestHandler.js**

```
const getRequestBody = (params, queryFilter, timeFilter) => {
  console.log('params: ', params);
  console.log('queryFilter: ', queryFilter);
  const requestBody = {
    size: 10000,
    'query': {
      'bool': {
        'must': [
          {
            'range': {
              'timestamp': {
                'gte': timeFilter.from,
                'lte': timeFilter.to
              }
            }
          }
        ]
      }
    },
    'sort': [
        {
            'timestamp': {
                'order': 'asc'
             }
        }
    ]
  };
  return requestBody;
};

export function RequestHandlerProvider(Private, es) {
  return {
    handle(vis) {
      const { timeFilter, queryFilter } = vis.API;
      return new Promise(resolve => {
        const params = vis.params;
        const requestBody = getRequestBody(params, queryFilter, timeFilter._time);
        es.search({
          index: 'observed_range_error',
          body: requestBody
        }).then(result => resolve(result));
      });
    }
  };
}
```

---

<div class="post-metadata">

**Author:** ![bhavyarm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/bhavyarm/32/22392_2.png) [@bhavyarm](https://discuss.elastic.co/u/bhavyarm)\
**Post date:** [September 17, 2019, 7:15pm UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/2 "2019-09-17T19:15:21Z")

</div>

@ppisljar / @lukeelmers can we get some help on this topic please?

Thanks,  
Bhavya

---

<div class="post-metadata">

**Author:** ![reillye](https://avatars.discourse-cdn.com/v4/letter/r/c6cbf5/32.png) [@reillye](https://discuss.elastic.co/u/reillye)\
**Post date:** [September 23, 2019, 2:04pm UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/3 "2019-09-23T14:04:14Z")

</div>

Hi @bhavyarm, thanks for replying. But is no one from the team able to assist me with this?

---

<div class="post-metadata">

**Author:** ![ppisljar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ppisljar/32/11588_2.png) [@ppisljar](https://discuss.elastic.co/u/ppisljar)\
**Post date:** [September 25, 2019, 1:18pm UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/4 "2019-09-25T13:18:11Z")

</div>

Hello, first sorry for late reply.

in `src/ui/public/vis/request_handlers/request_handlers.d.ts` you can find the definition of request handler:

```auto
export interface RequestHandlerParams {
  searchSource: SearchSource;
  aggs: AggConfigs;
  timeRange?: TimeRange;
  query?: Query;
  filters?: Filters;
  forceFetch: boolean;
  queryFilter: QueryFilter;
  uiState: PersistedState;
  partialRows?: boolean;
  metricsAtAllLevels?: boolean;
  minimalColumns?: boolean;
}

export type RequestHandler = <T>(vis: Vis, params: RequestHandlerParams) => T;

```

one of the parameters there is the filter arrray `filters`  
`queryFilter` is actually service that allows you to talk to the filter bar (push new filters)

so to go back to your example ....

change `handle(vis)` to `handle(vis, params)` and then you can destructure params:  
`const { filters, query, timeRange } = params;`

how those filters can be used to produce es query ? best to check our default request handler `src/ui/public/vis/request_handlers/courier.js`

---

<div class="post-metadata">

**Author:** ![reillye](https://avatars.discourse-cdn.com/v4/letter/r/c6cbf5/32.png) [@reillye](https://discuss.elastic.co/u/reillye)\
**Post date:** [October 16, 2019, 2:02pm UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/5 "2019-10-16T14:02:41Z")

</div>

Hi,

Apologies for my delayed response. Thank you very much for this, however I have tried doing what you suggested by destructuring the params with `const { filters, query, timeRange } = params;`but then it tells me that the `filters` value is undefined?

Is your approach correct for kibana version 6.5? Because I've noticed that in the example I was using before that it says to get the params using `const params = vsi.params` , unless these are different params?

Can you advise on what is going wrong here?

`

---

<div class="post-metadata">

**Author:** ![reillye](https://avatars.discourse-cdn.com/v4/letter/r/c6cbf5/32.png) [@reillye](https://discuss.elastic.co/u/reillye)\
**Post date:** [October 22, 2019, 12:11pm UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/6 "2019-10-22T12:11:12Z")

</div>

Hi,

@ppisljar is there no alternatives you can suggest here? It's become a real blocker for me as I can't find a way to get this working. Perhaps @timroes or @lukeelmers could help? They've both been really helpful in the past regarding custom visualisations.

Thanks!

---

<div class="post-metadata">

**Author:** ![ppisljar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ppisljar/32/11588_2.png) [@ppisljar](https://discuss.elastic.co/u/ppisljar)\
**Post date:** [October 24, 2019, 8:51am UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/7 "2019-10-24T08:51:27Z")

</div>

`vis.params` are parameters for your visualization, what you defined as visConfig in your visualization definition.  
`params` passed to request handler are completely different, and are the ones i listed above.

can you check whats in the params that are passed as the second argument to your custom request handler `handle` function ?

all mentioned above is relevant for 6.5 (and will not work in the latest version of kibana)

---

<div class="post-metadata">

**Author:** ![reillye](https://avatars.discourse-cdn.com/v4/letter/r/c6cbf5/32.png) [@reillye](https://discuss.elastic.co/u/reillye)\
**Post date:** [October 30, 2019, 2:13pm UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/8 "2019-10-30T14:13:47Z")

</div>

@ppisljar I updated my code to log the params in the handle method:

```
handle(vis, params) {
  console.log('handle params: ', params);
  .....

```

I've attached a screenshot with the output of this. This is the output of me applying a filer of "constellation: GALILEO" to the visualisation. I can't make much sense of it. Is there anything you can spot in it that is abnormal?

Thanks

 ![Skyplot_params_logging](https://us1.discourse-cdn.com/elastic/original/3X/3/3/33eed3ebb576685cb08a3a93bb683d5c916198cf.png)

---

<div class="post-metadata">

**Author:** ![ppisljar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ppisljar/32/11588_2.png) [@ppisljar](https://discuss.elastic.co/u/ppisljar)\
**Post date:** [October 30, 2019, 2:25pm UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/9 "2019-10-30T14:25:51Z")

</div>

thats indeed weird. is your code available somewhere, that would allow me to test it out ?

---

<div class="post-metadata">

**Author:** ![reillye](https://avatars.discourse-cdn.com/v4/letter/r/c6cbf5/32.png) [@reillye](https://discuss.elastic.co/u/reillye)\
**Post date:** [November 11, 2019, 10:04am UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/10 "2019-11-11T10:04:28Z")

</div>

Hi @ppisljar

Sorry again for delayed response. I have uploaded the source code [here](https://drive.google.com/open?id=1GPOPKeYRX2K8WGnQyaGwtsSHXiXFJ3Uo) for what I have written. If you are able to test it that would be fantastic, as I am really stuck with this and have no idea why it is not working. Even if you can't test but could spot where I am going wrong, that would be really helpful!

Please let me know once you have downloaded a copy of the code so I can remove the link so others cannot access it.

Thanks!

---

<div class="post-metadata">

**Author:** ![reillye](https://avatars.discourse-cdn.com/v4/letter/r/c6cbf5/32.png) [@reillye](https://discuss.elastic.co/u/reillye)\
**Post date:** [November 15, 2019, 11:12am UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/11 "2019-11-15T11:12:54Z")

</div>

@ppisljar Have you had a chance to look at this yet?

---

<div class="post-metadata">

**Author:** ![reillye](https://avatars.discourse-cdn.com/v4/letter/r/c6cbf5/32.png) [@reillye](https://discuss.elastic.co/u/reillye)\
**Post date:** [November 19, 2019, 11:40am UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/12 "2019-11-19T11:40:30Z")

</div>

@bhavyarm @ppisljar is there no one able to offer any help on this?

---

<div class="post-metadata">

**Author:** ![ppisljar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ppisljar/32/11588_2.png) [@ppisljar](https://discuss.elastic.co/u/ppisljar)\
**Post date:** [November 19, 2019, 1:27pm UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/13 "2019-11-19T13:27:21Z")

</div>

sorry for delay, i will try to get back to you in a few days

---

<div class="post-metadata">

**Author:** ![reillye](https://avatars.discourse-cdn.com/v4/letter/r/c6cbf5/32.png) [@reillye](https://discuss.elastic.co/u/reillye)\
**Post date:** [November 20, 2019, 9:54am UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/14 "2019-11-20T09:54:11Z")

</div>

Thank you, much appreciated!

---

<div class="post-metadata">

**Author:** ![reillye](https://avatars.discourse-cdn.com/v4/letter/r/c6cbf5/32.png) [@reillye](https://discuss.elastic.co/u/reillye)\
**Post date:** [November 28, 2019, 1:55pm UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/15 "2019-11-28T13:55:17Z")

</div>

Hi @ppisljar,

Have you had a chance to look at this?

---

<div class="post-metadata">

**Author:** ![ppisljar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ppisljar/32/11588_2.png) [@ppisljar](https://discuss.elastic.co/u/ppisljar)\
**Post date:** [December 2, 2019, 1:42pm UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/16 "2019-12-02T13:42:49Z")

</div>

sorry again for late reply. Seems passing filters in did not yet work in that version, so to get the filters in your request handler you should do:

`params.searchSource.getField('filter')`

and to get query do:

`params.searchSource.getField('query')`

good luck!

---

<div class="post-metadata">

**Author:** ![reillye](https://avatars.discourse-cdn.com/v4/letter/r/c6cbf5/32.png) [@reillye](https://discuss.elastic.co/u/reillye)\
**Post date:** [December 12, 2019, 4:03pm UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/17 "2019-12-12T16:03:05Z")

</div>

Hi @ppisljar,

Thanks for the response, I have tried to log those fields using `console.log('filters: ', params.searchSource.getField('filter')); ` and `console.log('query: ', params.searchSource.getField('query')); ` but I get the following error:

`Cannot read property 'getField' of undefined`

I simply added that log to the `getRequestBody` object, nothing else. It looks like the searchSource field is not defined for the params object. Do you have any idea why this would be? Or what other issue might be causing this?

Thank you!

---

<div class="post-metadata">

**Author:** ![reillye](https://avatars.discourse-cdn.com/v4/letter/r/c6cbf5/32.png) [@reillye](https://discuss.elastic.co/u/reillye)\
**Post date:** [January 6, 2020, 2:45pm UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/18 "2020-01-06T14:45:44Z")

</div>

@ppisljar Any comment to add to the above information I've added?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [February 3, 2020, 2:45pm UTC](https://discuss.elastic.co/t/kibana-6-5-custom-visualisation-not-receiving-filters/199846/19 "2020-02-03T14:45:49Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.