WebMEV

• General information
• Running locally
• Deployment
• Documentation
• Settings
• Features and bugs
• Modules and components info
• How to add a new visualization component

General information

The front end Angular 12 application for the MEV web application.

Compodoc documentation: click here

Respository: https://github.com/web-mev/mev-frontend

The application was initially based on a Angular Material Starter project: https://github.com/tomastrajan/angular-ngrx-material-starter However, certain dependencies from that project were not maintained and packages were removed for ease.

Running locally using Vagrant

1. Install Git, VirtualBox, and Vagrant
2. Clone the repository: git clone https://github.com/web-mev/mev-frontend.git
3. cp vagrant/env.tmpl vagrant/env.txt and fill the variables with appropriate values.
   1. The MEV_GOOGLE_OAUTH_CLIENT_ID can be left blank (emptry string) if you do not wish to use Google-based login in local development.
   2. The MEV_SENTRY_DSN can also be left blank (empty string) for local dev. Errors will not be sent to the Sentry service.
   3. The MEV_DROPBOX_KEY can also be left blank (empty string) if you are not using/testing Dropbox in your local development.
4. Start and provision the VM with vagrant up
5. Open http://localhost:8001 in a web browser. Note that the application served on this port is already built and any development changes will not be reflected unless you build again.

For development:

1. SSH in with vagrant ssh
2. Change to the shared directory (shared between your host machine and VM): cd /vagrant (note: not /home/vagrant)
3. To serve the app using Angular web server:

/vagrant/node_modules/@angular/cli/bin/ng serve --host 0.0.0.0 --disable-host-check

Note that Node will warn that the --disable-host-check is a security issue. Since we are working on localhost, this is a moot point.

Also note that the files on your host machine will be located at /vagrant inside the VM.

If you are editing/saving files locally (on your host machine, NOT the VM), Node's "auto detect" feature may not detect any changes which would normally trigger a re-build process. If that is the case, you may try to add an additional flag (--poll) to your serve command, e.g.

/vagrant/node_modules/@angular/cli/bin/ng serve --host 0.0.0.0 --disable-host-check --poll 2000

where the argument value (e.g. 2000 above) is the polling period in milliseconds.

The application will be available on your host machine at http://localhost:4200

If you wish to use Google-based authentication on the development machine (instead of username/password authentication), you will need a proper host pointing to localhost, because Google’s OAuth requires redirect URLs that cannot be localhost. You can add an entry in the hosts file of your machine (e.g. /etc/hosts) to associate mydomain.com to 127.0.0.1 and use the following command:

/vagrant/node_modules/@angular/cli/bin/ng serve --host mydomain.com --disable-host-check --poll 2000

Also: Note that due to high I/O during the provisioning of the VM, we perform a mount (see vagrant/provision.sh for details). If you halt or other stop the VM and do not force re-provisioning, you may find that the /vagrant/node_modules directory is empty and your project will not serve/build/etc. In that case, run the mount command /usr/bin/mount --bind /home/vagrant/node_modules /vagrant/node_modules again (after you SSH into the VM). The /vagrant/node_modules directory should contain a lot of files and subdirectories.

Settings

• File app.component.ts
  Use the following properties to update the application settings:
  -- logo: to update the application logo image
  -- languages: to set the list of available languages
  -- sessionTimeout: to set user idle / session timeout
  -- navigation: to set top navigation bar\

• File environment.prod.ts
  It is environment config to set the apiUrl variable ('http://35.194.76.64/api')

• File themes/default-theme.scss
  Here you can change the color theme, specifying primary, accent and warning colors that will be used on components

• File sentry-error-handler.ts
  Use this file to set a configuration to handle error tracking

• File jwtConfig.ts
  Use this file to update settings for JWT authentication: whiteListedDomains(domains that are allowed to receive the JWT) and blackListedRoutes(routes that are not allowed to receive the JWT token)

Features and bugs

https://docs.google.com/spreadsheets/d/1hyKzuzDYb5nYS1AKZByssyCLNSQS-FxEqEdQ82IakQ8/edit#gid=0

Modules and components info

The structure of the application includes a few main modules:

1. About Module
   Includes the About component which is responsible for the main start webMev page
2. File Manager Module
   Includes components for uploading and managing user files. Users can upload files from local computer, Dropbox, rename files, edit file types, delete files. To add: download files to local computer, download to Dropbox
3. Workspace Manager Module
   Contains the WorkspaceList component for managing user's workspace and a set of modal dialogs to add/edit/delete a workspace
4. Workspace Details Module
   It is used to display the content of a workspace. It contains the WorkspaceDetails component which is used to display list of files (resources) included in the selected workspace. Also contains components for managing workspace metadata (user's custom observation and feature sets saved in the local storage) and modal dialogs for create/edit/delete actions.
5. Analysis Module
   It contains components used on the Analysis Flow, Tools, Analyses Result.
6. D3 Module
   It contains components (D3-charts and tables) used for different types of analyses (HCL, PCA, DESeq2, etc)
7. Shared Module
   Contains commonly used directives, pipes, validators, help functions, shared components

How to add a new visualization component

1. Create a new component in the D3/components folder.
2. Add the outputs property with the @Input() decorator. This property allows the parent component ExecutedOperation to share the result of an executed operation with a visualization component. The outputs property contains the following fields:

• operation,
• job_name,
• outputs,
• inputs,
• error_messages,
  and they can be used in the visualization component.

3. Add the new component to the exports array in d3.module.ts file.
4. Open the AnalysisResult component template and add a ng-container for the newly created visualization component. Specify ngIf expression using a new operation name.