Embeddables.md

Panel loaded on a dashboard

// dashboard_panel.js
async componentDidMount() {
  this.props.renderEmbeddable(this.panelElement, this.props.panel);
}

render() {
  return (
    <div
      id="embeddedPanel"
      className="panel-content"
      ref={panelElement => this.panelElement = panelElement}
    />
  );
}

// Inside the embeddable - a click happened internally and we want to notify dashboard to expose the drill down context menu
onClickDataPoint(filters) {
  // Panel handler exposes a bunch of functions to the embeddable. Very similar to your kibanaDataApi, but internally
  // it has the panel id (rather than forcing the embeddable to pass panel id along... maybe there is a better way to do this).
  this.panelHandler.applyFilters(filters);
  
  // Trying to think how this would be represented in a functional world, using the changeState function you have,
  // how can we represent in pure state 'display the drill down link context menu using this filter'?  Perhaps
  changeState({ exposeDrillDownLinkSetupMenu: true, showDrillDownLinkContextMenu: true, stagedFilterIds: [id1, id2], appliedFilterIds: [id1, id2] });
  
  // but using raw 
}