Graphical User Interface¶

SimStack II provides a modern web-based user interface for managing scientific workflows, data analysis, and visualization. This guide will walk you through the main features and how to use them effectively.

Note

The GUI does not auto-update and has not been tested on mobile devices.

SimStack Navigation Bar — The main navigation bar at the top of the interface¶

The navigation bar at the top provides access to different sections of the application, including the

Tasks to inspect jobs and their results (also: Simstack II icon)
Submit Panel to submit new workflows (plus icon)
Health Dashboard for the status of the runners and running remote jobs.
Editor work in progress
Profile for user account settings.

Dashboard¶

The dashboard is your central hub for monitoring and managing workflow tasks. It displays a table of all your tasks. Rows are color-coded based on their status for easy identification.

Yellow: Submitted
Blue: Running
Green: Completed
Red: Failed
White: Timed out

You can:

Search and Filter: Search by name or custom name, and filter by task type, category, status, or resource
Sorting: Click on column headers to sort tasks by name, status, or creation date
Bulk Operations: Select multiple tasks to perform batch operations like deletion
Task Details: Click on a task name to view its details, inputs, outputs, and logs
Child Tasks: Expand tasks to see any child tasks that were spawned during execution (recursively)

Note

Simstack II will recover the results of tasks with the same inputs (not parameters), the same task may therefore occur as a subtaks of multiple parent tasks.

Key columns in the dashboard include:

Name: The workflow node name – this is the name of the function that generated the task (Click for details)
Custom Name: User-defined name for the task
Category: Task category for organization
Status: Current status (running, completed, failed, etc.)
Resource: Computational resource used for the task
Created/Started: Timestamps for task creation and execution
Actions: Buttons for viewing, editing, or deleting tasks

Viewing Task Details¶

Task Details View — Detailed view of a workflow task showing parameters, outputs, and logs¶

When you click on a task in the dashboard, you’ll be taken to the task details page, which provides:

Task Information: Name, ID, status, and timestamps
Inputs: Input parameters used for the task
Results: Results and artifacts generated by the task
Artifacts: Tables and visualizations (if available) that can be created from the task outputs after the task has completed without rerunning the task This powerful feature allows users to analyze and visualize data in ways that were not initially anticipated when the workflow was created.
Info Items: All result data of the tasks should be presented in the result section. However, in particular, while debugging, it is useful to have access to input and output files that were used/generated by the task. These files are available in the “Info Items” section for viewing and downloading.
Logs: Execution logs for debugging and monitoring. There are three kinds of logs:
1. Task Logs: Logs generated by the specific workflow task, offering detailed information about the task’s execution process, including any errors or warnings encountered. In most cases these logs are the most relevant for users to understand the behavior of their workflows.
1. System Logs: Logs generated by the Simstack system itself, providing insights into the overall operation and any system-level issues.
2. Runner Logs: Logs produced by the resource runner that executed the task, which can help diagnose issues related to the computational environment or resource allocation.

You can navigate through different tabs to access various aspects of the task data.

Example Chart Artifact — Example image artifact created by ag-charts. The user can interaction with the data and download it as needed.¶

Submitting New Workflows¶

The Submit Panel is the main interface for creating and submitting computational jobs in the system. It provides a comprehensive workflow that guides users through model selection, parameter configuration, and input data specification. To submit a new workflow:

Navigate to the submission page
Select the workflow type from the available options
Fill in the required parameters in the form - Forms are dynamically generated based on the workflow type - Required fields are marked with an asterisk (*) - Help text provides guidance for each parameter
Click “Submit” to start the workflow
You’ll be redirected to the dashboard where you can monitor the task’s progress

The submission forms use React JSON Schema Form, which provides:

Validation: Immediate feedback on invalid inputs
Conditional Fields: Fields that appear based on other selections
File Uploads: For workflows that require input files
Advanced Controls: Sliders, dropdowns, and other interactive elements
Special Fields: for complex objects, e.g. molecular data

The Submit Panel consists of several key sections organized in a logical workflow:

Model Selection (CascadingNodeSelector)
Job Configuration (Custom Name & Category)
Parameter Settings (ParametersAccordion)
Input Data Configuration (Input Mappings)
Template Management (TemplateSelector)
Job Submission

Node Selector¶

The CascadingNodeSelector is the primary interface for browsing and selecting computational models from the available node registry.

Hierarchical Model Organization: Models are organized in a tree structure based on their function mapping, making it easy to navigate through different categories and modules.

Model Tree Structure — *Example of hierarchical model organization which mirrors the directory structure of your project*¶

Favorites System

Users can mark frequently used models as favorites for quick access:

Star icon checkbox for marking/unmarking favorites
Dedicated “Favorites” section at the top of the tree
Persistent favorite status across sessions

Once a model is selected, the ParametersAccordion and Input sections dynamically update to reflect the chosen model’s requirements.

Parameter Settings¶

The ParametersAccordion section provides comprehensive job parameter configuration options.

Resource Selection

Configure computational resources for job execution:

Dropdown selection from allowed resources
Default option available if no specific resource needed
Dynamic loading of available resources from the system

Queue Configuration

Specify execution queue for job scheduling:

Selection from allowed queues list
When the SLURM queue is selected, additional SLURM parameters become available

SLURM Parameters (when using “slurm-queue”)

Additional SLURM-specific configuration options become available when the SLURM queue is selected, including:

Job allocation parameters
Resource requirements
Time limits
Node specifications

Execution Options

Control job execution behavior:

Force Rerun: Force execution even if cached results exist
Recompute Artifacts: Regenerate all output artifacts regardless of cache status

Custom Name & Category Editor

Provides job identification and organization:

Custom Name Field

User-defined name for the job
Defaults to “submitted-job”
Automatically saved to localStorage per operation

Category Field

Organizational category for the job
Defaults to “submission”
Persistent storage with operation-specific recall

Model Input Section¶

The Input section handles data configuration for each input mapping required by the selected model. For each input mapping defined by the selected model:

Input Mapping Card — *Individual input mapping configuration card*¶

Dynamic Form Generation

Automatically generated forms based on input mapping schema
Real-time validation and data binding
Memoized form components for optimal performance

Template Management

Load existing input templates
Save current configuration as template
Update existing templates on submission
Template-specific parameter inheritance

Health Dashboard¶

The Health Dashboard provides real-time monitoring of system components and resource utilization. It displays:

Runner Events: Status updates from resource runners
System Health: Overall health status of different components
Resource Utilization: CPU, memory, and storage usage statistics

This dashboard is particularly useful for administrators and users who need to monitor the performance of their workflows and the system as a whole.

Data Visualization¶

SimStack II provides powerful data visualization capabilities using AG-Charts:

Interactive Charts: Zoom, pan, and hover for details
Multiple Chart Types: Line, bar, scatter, pie charts, and more
Customization: Adjust colors, labels, and other visual properties
Export: Save charts as images for reports or presentations

To access visualizations:

Navigate to a completed task
Select the “Visualization” tab
Choose from available chart types based on the task’s outputs
Interact with the chart to explore the data

Data Tables¶

For tabular data, SimStack II uses AG-Grid to provide interactive tables with:

Sorting and Filtering: Click column headers to sort, use filters to find specific data
Column Resizing: Adjust column widths by dragging
Row Selection: Select rows for export or further analysis
Pagination: Navigate through large datasets with ease
Export: Download data as CSV or Excel files

User Account Management¶

SimStack II provides user account management features:

Login/Logout: Secure authentication system
Registration: Create a new account with email verification
Profile Settings: Update personal information and preferences
API Tokens: Generate and manage API tokens for programmatic access

Tips for Effective Use¶

Custom Names: Give your tasks meaningful custom names for easier identification
Categories: Use categories to organize related tasks
Regular Monitoring: Check the Health Dashboard periodically to ensure system health
Batch Operations: Use bulk selection for efficient management of multiple tasks
Search and Filters: Utilize search and filters to quickly find specific tasks

Exposing Workflows in the GUI¶

Concept¶

The components of the graphical user interface are illustrated below. With a Next-js frontend, we use one of the most modern web-frameworks with a large community supporting a plethora of packages.

The challenge in Simstack II is to exploit the features of Next-JS frontend without forcing the developer to write Next-JS or server components. In Simstack II each user has his/her own MongoDB database, there is an additional database used exclusively for authentication.

Note

Only one instance of a mongodb database server, of the fastapi server and of the next-js frontend is required per installation.

The workflow developer customizes the appearance of workflows for submission, data analysis and data visualization using three main mechanisms:

React JSON Schema Form
AG-Grid is used to generate interactive tables (via Artifacts)
AG-Charts is used to generate interactive graphs (via Artifacts)

Customizing Simstack Models¶

Note

General information about Simstack models

The JSON Schema and UI Schema are used to define the structure and appearance of forms in the GUI. The JSON Schema defines the data structure, while the UI Schema controls how the form is rendered.

JSON Schema Example:

{
  "type": "object",
  "required": ["name", "resource"],
  "properties": {
    "name": {
      "type": "string",
      "title": "Workflow Name"
    },
    "resource": {
      "type": "string",
      "title": "Computational Resource",
      "enum": ["local", "cluster", "cloud"]
    },
    "parameters": {
      "type": "object",
      "properties": {
        "iterations": {
          "type": "integer",
          "minimum": 1,
          "maximum": 1000,
          "default": 100,
          "title": "Number of Iterations"
        }
      }
    }
  }
}

UI Schema Example:

{
  "resource": {
    "ui:widget": "select"
  },
  "parameters": {
    "iterations": {
      "ui:widget": "range"
    }
  }
}

These schemas are used to generate dynamic forms for workflow submission and editing.