Overview

The SWIM User Interface (Frontend) is a dynamic web application that facilitates interaction with third party scientific modeling software.

In general terms, the SWIM UI provides a generic workflow for the specification of model scenarios that run on third party modeling software systems. SWIM is envisioned as a platform that suplements model publications and can be used to engage stakeholders into participatory modeling activities.

The SWIM UI implements original research outcomes for data presentation, model interaction, visualization, and provenance; all of which aid in the understanding of complex scientific models. The research takes into account a wide range of stakeholders that don't necessarily come from a modeling background.

Create Scenario Workflow

Scenario Selection

The first step in the creation of custom model scenarios is the selection of a pre-defined scenario. Predefined scenarios can me mixed and matched across multiple scenario categories. The predefined scenarios available may vary depending on what model is selected before hand.

Scenario-Parameter Relations

A predefined scenario can affect one or multiple model inputs. In this case a climate scenario affects water inflows to the project reservoir.

Input Catalog

Searchable input catalog that can also be filtered by categories.

Customize Inputs

Some parameters can be tweaked through sliders, tables and input fields.

Model Run

Give your custom scenario a name, description and target role before submitting to run.

Summary Dashboard

The result summary view shows general run information and overall scenario results. The summary widgets may vary from model to model and user role.

Output Catalog

The output catalog provides a listing of output variables. One or more outputs can be selected to view side-by-side or to be compared against other runs.

Output Visualization

Side-by-side visualization of user selected outputs. Results can be presented with different types of visualizations such as line plots, bar charts and tables. Additional tools to improve interpretation are available such as dataset combination, dynamic plots and moving averages.

Scenario Cross-Compare

Compare selected outputs side-by-side against other model runs.

Technologies

The SWIM 2 Frontend is driven by the MEAN Stack and a set of additional open source JavaScript libraries.

• MongoDB: NoSQL Database Engine for document-based data models
• Express: Web Framework for Node.js
• Angular: JavaScript-based open-source front-end web framework
• NodeJS: Javascript runtime environment for server side scripting
• MySQL: Relational Database Engine
• ChartJS: JavaScript data visualization library
• D3: JavaScript interactive visualization library
• Angular Material: Material design components for Angular