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

[Research][Embeddable Variables] Initial Project Description #134706

Open
ThomThomson opened this issue Jun 17, 2022 · 3 comments
Open

[Research][Embeddable Variables] Initial Project Description #134706

ThomThomson opened this issue Jun 17, 2022 · 3 comments
Labels
enhancement New value added to drive a business result Feature:Dashboard Dashboard related features Feature:Embeddables Relating to the Embeddable system Feature:Input Control Input controls visualization impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. loe:x-large Extra Large Level of Effort Project:Controls Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas

Comments

@ThomThomson
Copy link
Contributor

ThomThomson commented Jun 17, 2022

Describe the project

There are a few use cases - for example #134592 and #134591 which require Embeddable Containers to pass input to their children which overrides the child's input. We will need to provide a mechanism for this type of inheritance. This mechanism should act as a standardized system for any future / existing requirements that involve a container storing state which should override one or more configuration options on its children.

In general, a generic container should not store state for any specific type of embeddable without a system in place to handle it generically. This issue is an initial exploration of how something like that could be built.

Rough Diagram

Screen Shot 2022-06-21 at 5 03 28 PM

Concepts

Variable Controls

A new and totally separate type of Control should be built that interacts with variables instead of data. Creating / editing these controls would be a separate experience from the data controls, but they should exist in the same bar and look similar.

Each variable type will come with its own variable control embeddable, factory, and its own inline editor the same as controls do. UX-wise, when creating a variable control the user will be prompted with a list of types that they need to choose from.

Variable controls store all of their configuration with the Control Group Input, including initial / default selections. These controls publish their selections as output to the Control Group which in turn publishes all of its Variables into its output along with its filters.

A container like the Dashboard Container could subscribe to these output changes, and update its Variable Store accordingly.

Variable Store

Any embeddable container could implement a new interface IVariableStore which would be used to store variables.

The IVariableStore interface would look something like

interface Variable {
  type: string;
  id: string;
  value: string;
}

export interface VariableStore {
  byId: { [id: string]: Variable };
  byType: { [type: string]: Variable[] };
}

export interface IVariableStore {
  getCurrentStore: () => 
  getVariablesByType: (type: string) => Variable[];
  getVariableById: (id: string) => Variable;
  addVariable: (variable: Variable) => void;
}

Note The variable store is meant to be ephemeral. It should not be stored in a saved object. The variable store is only an intermediary, and a communication method for inheritance. Any variable values which are saved should be saved in the Control Group to allow for extract / inject / migrations.

Variable Slots

Any embeddable could implement a new interface IVariableSlotEmbeddable which would provide methods for getting all variable slots. These can be hardcoded, or determined by the embeddables current state. Each Variable slot would follow an interface similar to:

{
  type: string // used to determine which type of variable can be applied here.
  key: string // a key of this embeddable's input type, it determines which key this variable would override
  displayName: string // a title to be shown to the user when selecting a value for this variable.
  variableId: string; // The user-defined variable that should go in this slot.
}

Variable Inheritance

If a container extends IVariableStoreEmbeddable it can pass the appropriate variables down to the child during the getInputForChild method. First the container would check if the current embeddable extends IVariableSlotEmbeddable, and if it does the container would:

Loop through the child embeddable's variable slots
  if that slot is assigned (has a variableId)
    If the variable has a value assigned to that id use the value
    Else fallback to the child's default value.
  add the appropriate value to the input to pass down to the child.

Variable Assign Action

If the embeddable extends IVariableSlotEmbeddable, and its parent extends IVariableStoreEmbeddable a new action should be compatible which opens a flyout that allows users to select variables by their ID / display name for each slot that the embeddable features.

@ThomThomson ThomThomson added Feature:Dashboard Dashboard related features Feature:Input Control Input controls visualization enhancement New value added to drive a business result Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas Team:AppServicesSv Project:Controls labels Jun 17, 2022
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app-services (Team:AppServicesSv)

@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-presentation (Team:Presentation)

@exalate-issue-sync exalate-issue-sync bot added the impact:needs-assessment Product and/or Engineering needs to evaluate the impact of the change. label Jul 21, 2022
@petrklapka petrklapka added Feature:Embedding Embedding content via iFrame and removed Team:AppServicesSv labels Dec 12, 2022
@ThomThomson ThomThomson mentioned this issue Jan 26, 2023
5 tasks
@ThomThomson ThomThomson added impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. and removed impact:needs-assessment Product and/or Engineering needs to evaluate the impact of the change. labels Jan 26, 2023
@ThomThomson ThomThomson changed the title [Embeddable Variables] Initial Structure Thoughts [Research][Embeddable Variables] Initial Structure Thoughts Jan 26, 2023
@Heenawter Heenawter added the loe:x-large Extra Large Level of Effort label Mar 15, 2023
@ThomThomson ThomThomson added Feature:Embeddables Relating to the Embeddable system and removed Feature:Embedding Embedding content via iFrame labels Jun 14, 2023
@teresaalvarezsoler
Copy link

Related: #160001

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New value added to drive a business result Feature:Dashboard Dashboard related features Feature:Embeddables Relating to the Embeddable system Feature:Input Control Input controls visualization impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. loe:x-large Extra Large Level of Effort Project:Controls Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas
Projects
None yet
Development

No branches or pull requests

5 participants