Pages are the objects that govern the appearance of the frontend in Virtualitics Predict.

A Page object can be thought of as a web page canvas at any given point in a Flow. While frontend and backend tasks are performed in Steps, Pages must be invoked to display and/or update the content on Pages in Virtualitics Predict.

Important: A Step must be associated with a Page object on which that Step will run.

Situations where a developer would create a Page in a Flow include when:

• A user must upload a dataset from their local device.
• A user must specify query parameters before connecting to and querying a database in a Step.
• A user wants to display tables and charts to visually inspect ingested data before modeling.
• A user wants to display tables, charts, and metrics to evaluate the performance of a ML model.
• A developer wants to allow users to interrogate a ML model using embedded explainable AI tools.

Pages are like Flows and Steps in that they are ubiquitous within Virtualitics Predict. Any Flow you write needs at least one Page.

Exploring Pages

A hierarchical structure has been built into Pages to allow developers fine-grained control over content layout on pages:

• Pages: Parent object containing everything a user might see in Virtualitics Predict at the conclusion of a Step.
• Sections:
  • Pages must have at least one Section.
  • Sections operate as dividers between Cards and Elements, and can be used to display groups of Elements with titles (headings) and descriptions.
• Cards:
  • A Section will likely consist of one or more Cards.
  • A Card object contains all Elements to be displayed on a given card-style UI element.
• Elements (Page Elements):
  • Elements must exist in Cards.
  • Please refer to the Page Elements article for an overview of the Elements supported in Virtualitics Predict.

Page Layouts

A combination of Sections, Cards, and Elements can be used to customize Pages, providing end users with a streamlined data input/processing process and consumable tables and plots. 

In the example below, you'll see a Page with:

• A Page title (“Merging Data & Engineering Features”)
  • One Section (no title; contains two Cards)
    
    • Card #1: “Visualizing Training Data Gearbox Lifetime”
      • This Card contains a single Dashboard Element, including three bar plots (each bar chart is a Plot Element) in two rows:
        
        • Row #1: Single Bar Plot (“Overview of Component Lifetime in Training Data”)
        • Row #2: Two Bar Plot; each bar chart takes up the same width within the row
    • Card #2: “Visualizing Training Data Gearbox Failures”
      • This Card also contains a single Dashboard Element with three (bar) Plot Elements arranged in two Rows.

For more information on building Pages, see the Virtualitics SDK documentation.