Home

Local Development

Requirements

Docker (Docker Desktop for Windows)

Setup

Clone the showcase player repo
Navigate to www_dataplayer/
Open a command prompt
Run the following command to start the development container:

    docker-compose up -d workspace

Run the following command to open a bash terminal inside the container:

    docker-compose exec workspace bash

Run the following command to launch the dev website

    npm run serve

Open a web browser
Go to localhost:8080

As changes are made, the site will hot-reload and update. Sometimes you may need to refresh to see changes. Build and Deploy Requirements

Docker (Docker Desktop for Windows)
Biogears AWS Account

Build

Clone the showcase player repo
Navigate to www_dataplayer/
Open a command prompt
Run the following command to build the production site:

    docker-compose run build-gen

Navigate to www_dataplayer/dist to see the build output

Test Production Build Locally

Navigate to www_dataplayer/
Open a command prompt
Run the following command to launch the production site in a docker container:

    docker-compose up -d showcase-player

Open a web browser
Go to localhost

Deploy

Adding New Scenarios

Convert the data files and log files

Clone the showcase player repo
Navigate to www_dataplayer/converters
Place the .csv and .log files to be converted into the inputs folder
    Ensure that both the csv file and the log file have the same name
To convert the datafiles run:

    python convert_datafiles.py

To convert the log files run:

    python convert_logfiles.py

The converted files will be in the outputs folder

Update the scenario list in the player

Go back to the root level of the biogearsengine.com bucket
Open the showcase folder
Download the scenario_list.json file
Open the file in a text editor
For each scenario you are adding to the online player, add an entry to the scenarios array
    Set the name property to what should be displayed in the dropdown list of the showcase player
    Set the filename to be the filename with the "-datafile.json" or "-log.json" suffixes omitted
        Note that both the datafile and the log file must have the same prefix
Upload the scenario_list.json file back to the showcase folder on S3

Desktop Standalone, Offline Version using Electron

The showcase player can also be built as a standalone, offline desktop application using Electron. To build this version:

Clone the showcase player repo
Checkout the electron branch
Navigate to www_dataplayer/
Run the following command:

    npm install

    npm run electron:build

    note: for development, use:

        npm run electron:serve

The build output will be in www_dataplayer/dist_electron
    The player can be installed using Biogears Showcase Player Setup 1.0.0.exe
    An unpacked version can be run directly from the win-unpacked folder without installing

Adding User Uploaded Scenarios Future work to allow users to upload their own scenarios for visualization

Translate the existing data converters from Python to JavaScript
    The web_www repo may already have parts of this step completed
Add another tab for "Load a Scenario"
    Add input boxes for the scenario name, data file and optionally a log file as well
        Could allow for .csv and also data that has already been converted to .json
On submit, parse the .csv and .log files
Ensure the chart is set up to wait until parsing is complete to attempt to load
    Use a v-if to prevent the chart from loading until the scenario object is not null

Other Possible Future Improvements

1. Automated Scenario Data Conversion

Using AWS Lambda, set it up so that when .csv or .log files are uploaded to a specific bucket in S3, they are automatically converted to JSON and added to the scenario list for the showcase player. 3. Add vuex data store to cache scenarios after they have been loaded once during the same session

Save the downloaded data and log files to a vuex store to prevent them from having to be re-downloaded when changing tabs. 2. Add the Scenario Timeline to the new showcase player

The existing Scenario Timeline is written using JQuery for the Highcharts showcase player. Rewrite this using Vue in a way that works and interacts with the new D3 showcase player.