Elements are objects that allow users to upload, view, and interact with data within an App.

Elements comprise the base of the Page hierarchy. A Page is a collection of Elements organized logically using Cards.

Element Types

The following are common types of Elements are supported in Apps:

• CustomEvent: Allows users to call custom functions (via the callback() method) by clicking an Element in an App.
• DataSource: Allows users to select/upload data.
• DateTimeRange: Allows users to specify date/time ranges.
• Dropdown: Facilitates the creation of a dropdown menu; a user may select one or more options (multi-select) displayed in a Dropdown element.
• DropdownDataSources: Used to configure data source drop down options that have been set up in the Connections tab.
• Image: Render an image within a Card.
• Infograph: Display high impact metrics for immediate consumption quickly and clearly. Within an Infograph object, users may define:
  • InfographData: Object containing a label and text for the presented metric (information block); users may optionally define:
    • A unit for the presented metric (days, meters, etc.)
    • An icon in the top right corner of the information block (must be an icon in the set of Google Material Icons)
    • InfographDataType: Sets icon types/colors for the information block; supported values are:
      • InfographDataType.INFO
      • InfographDataType.POSITIVE
      • InfographDataType.NEGATIVE
      • InfographDataType.WARNING
      • InfographDataType.NEUTRAL
    • InfographicOrientation: Optionally define how information blocks are arranged in an infographic; supported values include:
      • InfographicOrientation.ROW (horizontal arrangement)
      • InforgraphicOrientation.COLUMN (vertical arrangement)
  • An event that triggers a backend action (see CustomEvent)
• NumericRange: Allows users to specify a numeric range.
• Plot: Display a plot without the use of Virtualitics Explore; supported plot types include:
  • Scatter
  • Waterfall
  • Bar
  • Line
• PlotlyPlot: Display an interactive plot leveraging Plotly. For more, see this article.
• RichText: A Rich Text Element.
• Table: Allows users to display data in a table.
• TextInput: Allows users to provide text input.
• XAIDashboard: Place the Scenario Planning Tool (SPT) on a Page, allowing users to explore machine learning models by modifying inputs and observing changes in outputs. For more, see this article.

Please refer to the Virtualitics SDK for complete technical documentation of each Element type.

Using Elements

Elements are also ubiquitous in Apps. Since Apps require at least one Page, Apps will likely contain at least one Element. The type of Element you need depends on what you are looking to accomplish on the Page.

Here are some examples of when you would need to use an Element:

• You want to display an infographic to summarize the performance of your ML models. You would create an Element of type Infograph.
• You want to display an image you created in matplotlib. You would use convenience functions to create an image and pass the content (bytes) of that image to an Image element.
• You want to allow the user to select one or more items from a dropdown menu (their selection(s) will be used later in the App). You would create an element of type Dropdown, passing in the options available to the user.