Technology

Server Framework

The SPARC Data Portal is build on the Flask web development framework. Component leveraged in this project include:

1. Flask: A python based framework. Flask leverages Jinja 2 as its templating language.
2. Flask Blueprints: Support for modularizing the application. Using blueprints, we allow for different development teams to leverage the front-end tools that they prefer and increase the modularity of the SPARC Data Portal.
3. Flask-Marshmallow: An object serialization/deserialization library

Front-end Framework

The SPARC Portal technology stack has been configured to allow multiple front-end frameworks to be used side-by-side within the web-application.

Using Flask Blueprints, modules are defined within the web-application. Each blueprint is registered in app.py in the root folder of the application and should have its own folder within the project hierarchy. Each blueprint folder should have an html file that will be rendered and a Python file (views.py) configuring the Flask blueprint. A simple module can have the following hierarchy:

/module_name/
|-- __init__.py
|-- views.py
|-- static
|-- templates
    |-- <module_name>.html

The __init__.py file can be empty but is required by Flask. The <module_name>.html file should be formatted as a JinJa 2.0 template and extend the base.html template. This results in a unified header across all modules within the application. Please refer to the Jinja 2 documentation for details. A basic template for the HTML entry file is outlined below. Note that the application supports injection of content in both Header and Body of the HTML file and a Javascript section.

{% extends "base.html" %}
{% block header %}
  <!-- Place additional Header content here -->
{% endblock %}
{% block app %}
  <!-- Place body of HTML here -->
{% endblock %}
{% block javascript %}
  <!-- Place additional Javascript here -->
  <script type="text/javascript" src="_build/bundle.js"></script>
{% endblock %}

In order to support Vue.js modules, a custom Flask configuration is used which replaces the default Jinja markup for variables {{ }} to %% %%. This configuration change can be found in app.py.

Environment variables

The following environment variables are available in production through the Config class (see here):

BLACKFYNN_API_TOKEN
BLACKFYNN_API_SECRET
BLACKFYNN_API_HOST
BLACKFYNN_CONCEPTS_API_HOST

Deployment

The web application is deployed on Heroku.com and is set up to automatically build from the Master branch in the GitHub repository. Heroku will automatically install requirements from the requirements.txt file in the root directory and will install dependencies in the package.json file. A post-build process is used to install and build any of the additional modules defined in the web-application. This is defined in the heroku-postbuild script in package.json.

Modules

The project consist of a number of independent modules. Each module is further described below:

• Dashboard
• Browse
• SPARC-SIM
• SPARC-MAP