How To Change Exisiting

A quick summary of How To Change Exisiting

Change existing product/application

Examples below use the lineage application but can be use for any existing Phovea application

There are two ways to set up an existing Phovea App

  1. Create a new directory (this will avoid dependency conflicts with other tools), clone one ore more app repositories, create a workspace, install and run the application from the workspace
  2. Clone an app repository, install, build (optional), and run according to the instruction in the repo readme

The first approach (creating a workspace) is particularly useful when developing multiple plugins, as all the projects within the workspace will share a common npm installation and Docker setup.

Workspace Approach

This approach creates a ''workspace'' which uses Docker and Docker Compose. The workspace setup also creates a PyCharm project.

  1. mkdir workspace
  2. cd workspace
  3. git clone https://github.com/Caleydo/lineage.git (and/or) clone any other repos that you will need).
  4. Create workspace yo phovea:workspace
  5. Install dependencies npm install
  6. Run application npm run start:lineage
  7. Open browser and navigate to http://localhost:8080/

Your directory structure (for one or more projects) will look like this:

workspace --> has the helper/docker files but is not attached to any repo
\- repo1 --> cloned from github
\- repo2 --> cloned from github

If you have several repos in your workspace, you can run:

  1. forEach git pull or
  2. forEach git push

to update all the repos in your workspace.

Direct, non-workspace, Approach

Installing

$ git clone https://github.com/Caleydo/lineage.git
$ cd lineage
$ npm install

Building (optional)

$ npm run build

The build process is optional because it is not required in order to run the application (e.g. during testing/development).

The build process itself includes:

  • running all unit tests -> karma
  • checking code quality -> tslint
  • building the application in production mode (i.e, creates compiled, minified and chunked javascript files that can be loaded using Webpack) == ready to be deployed

Launching

npm run start

Unlike npm run build, npm run start will just build the application in memory without any tests or code quality checks

Notes on using javascript files in a Phovea App

Phovea ignores *.js files on commit. since TypeScript is a superset of javascript it's safe to rename *.js to *.ts files. The only thing you have to take care about is the import and export, since each file is a separate module/file.

The need for import and export is because with TypeScript (and ES6 in general) you cannot use the global scope and every file has his own scope. You need to declare what variables and functions should be exported/imported. Follow the links to learn more about export and import.

Now that you have successfully (hopefully) cloned and examined an existing application, you are ready to build your own application!