Upgrading plugin 7.6.2 to 7.7.0 : vis.updateState() does not trigger requestHandler anymore

guitoo · June 6, 2020, 11:05am

Hello

I have developed a working simple visualization plugin in v7.6, based on the legacy plugin development framework. On version v7.6, a component UI change props.vis.updateState() does trigger requestHandler function, as expected.

github.com

guyplusplus/Kibana-Plugin-Custom-Form-Filter-Visualization-Legacy/blob/master/kbn_tp_custom_form_filter_accounts/public/custom_form_filter_accounts_vis/custom_form_filter_accounts_components.js#L58


    return null;
  if(!isFinite(s))
    return null;
  return s;
}

onClickButtonApplyFilter = () => {
  this.props.vis.params.filterCounter++;
  this.props.vis.params.age = parseInt(this.filterOutNonNumber(this.state.age));
  this.props.vis.params.minimumBalance = parseFloat(this.filterOutNonNumber(this.state.minimumBalance));
  this.props.vis.updateState();
};

onClickButtonDeleteFilter = () => {
  this.props.vis.params.filterCounter = -1;
  this.props.vis.updateState();
};

onClickButtonClearForm = () => {
  this.props.vis.params.filterCounter = -1;
  this.state.age = "";

After upgrade to 7.7 using the new plugin dev framework, the very same code does not trigger any requestHandler call anymore.

github.com

guyplusplus/Kibana-Plugin-Custom-Form-Filter-Visualization/blob/master/vis_type_custom_form_filter_accounts/public/custom_form_filter_accounts_vis_controller.tsx#L58


    return null;
  if(!isFinite(s))
    return null;
  return s;
}

onClickButtonApplyFilter = () => {
  this.props.visParams.filterCounter++;
  this.props.visParams.age = parseInt(this.filterOutNonNumber(this.state.age));
  this.props.visParams.minimumBalance = parseFloat(this.filterOutNonNumber(this.state.minimumBalance));
  this.props.vis.updateState();
  this.props.vis.forceReload();
};

onClickButtonDeleteFilter = () => {
  this.props.visParams.filterCounter = -1;
  //this.props.setValue('filterCounter', -1);
  //this.props.vis.updateState();
  //this.props.vis.forceReload();
  this.forceUpdate();
};

How can the UI component can trigger a requestHandler call?

Thank you very much.

guy

ppisljar · June 16, 2020, 9:42am

you need to do a few things:

add toExpression property to your visualization definition which should be an async function accepting vis as first parameter and params as second parameter. it needs to return expression string. something like this:

toExpression: async (vis, params) => {
  return `yourReqHandlerFunction param1=${vis.params.something } param2=${vis.data.searchsource.filter}` | your_vis_function param1=${vis.params.something} x={vis_dimension 0}`
},

write your expression function for request handler and register it with expression service
write your expression function for your visualization and register it with expression service
write renderer for your visualization and register it with expression service

best to take a look at some of our code:

build_pipeline.ts --> builds expression strings for our build in charts, and calls toExpression for third party charts (that's currently the only way to get your own request handler working, but we are in the middle of refactoring so things will keep changing during 7.x)
vis_type_metric which registers chart expression function (metric_vis_fn.ts)
data/public/search/expressions/esaggs.ts is our default 'request handler' (by the way we are in the process of adding another one that will allow you to do raw es queries + there is essql in basic so maybe you can use one of the existing data fetching functions ?
https://github.com/elastic/kibana/pull/57694 as a sample renderer for metric vis, note that its still early work in progress.

after we are done with refactorings we will provide blogs that will help you go thru the migration but currently things are very likely to change.

guitoo · June 21, 2020, 11:32am

Peter,

Excellent information, thank you.

For the short term, I changed my approach by using the 'data' service to access the query filter. I just released my plugin fully NP, working on 7.8.0!

Back to the Expression service, is there is high level conceptual documentation? For example I read the markdown_fn.ts code, it is very difficult for me to understand how it behaves and the APIs and concepts behind. It looks fairly similar in purpose to markdown_vis.ts...

Thank you again !

system · July 19, 2020, 11:32am

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

Topic		Replies	Views
requestHandler Kibana	7	1152	May 16, 2019
How to updateState in Kibana 7.8 Kibana	2	296	September 10, 2020
Access filterManager from a custom React visualization plugin - v7.6 or higher Kibana	2	336	June 21, 2020
Kibana editor vis issue Kibana	2	261	July 21, 2020
Kibana plugin 6.0 to 5.6.4 Kibana	3	726	December 13, 2017

Upgrading plugin 7.6.2 to 7.7.0 : vis.updateState() does not trigger requestHandler anymore

Related topics