The web application for viewing, exploring, and annotating 1D and 2D genomic data.
HiGlass App is used to run https://higlass.io but you can also use it as the starting point for building your own application around HiGlass. For example, it is used in Novartis' Peax as the frontend application.
URL: https://higlass.io
Help: http://bit.ly/higlass-slack
Note: This is the source code for the web application only! You might want to check out the following repositories as well:
- HiGlass viewer: https://github.com/higlass/higlass
- HiGlass server: https://github.com/higlass/higlass-server
- HiGlass docker: https://github.com/higlass/higlass-docker
- HiGlass manage: https://github.com/higlass/higlass-manage
npm install --save higlass-app
git clone https://github.com/higlass/higlass-app && higlass-app
npm install
Developmental server: npm start
Production build: npm run build
Autoformat JS code: npm run fix
HiGlass App can be configured at build and run time using config.json
and public/config.js
respectively.
config.json
contains the default configuration. For adjustments, copy it to config.dev.json
, config.prod.json
, or config.local.json
. dev
is used in developmental mode, prod
is picked up in production, and local
can be used for local testing. The config is overwritten in the following order: default, dev, prod, local.
Additionally some settings can be overwritten at run time using public/config.js
. For details please see the table below:
Name | Description | Type | Default | config.js name | Configurable via config.js only |
---|---|---|---|---|---|
homepageDemos | If set to true the start page will feature some demo views. |
boolean |
false |
HGAC_HOMEPAGE_DEMOS | no |
server | Define the default higlass server from which view config are loaded by default. | string |
'' (same host, same port) |
HGAC_SERVER | no |
basepath | The base path under which higlass-app will run, e.g., if you set it to /cool higlass-app will be available at https://your-server.com/cool . |
string |
'' (root) |
HGAC_BASEPATH | no |
defaultOptions | Default options that are being passed to hglib . |
object |
none | HGAC_DEFAULT_OPTIONS | no |
defaultViewConfig | Default view config to load. This can either be a uuid or an actual view config. By default, the default view config has the uuid default . |
object or string |
none (internally defaults to default ) |
HGAC_DEFAULT_VIEW_CONFIG | no |
runByOrganization | Name of the organization running the HiGlass instance. | string |
none | HGAC_RUN_BY_ORGANIZATION | yes |
runByOrganizationURL | Optional URL pointing to the host organization's website. | string |
none | HGAC_RUN_BY_ORGANIZATION_URL | yes |
runBySlogan | Slogan to advertise the host organization. | string |
Run by |
HGAC_RUN_BY_SLOGAN | yes |
runByLogoURL | URL pointing to the host organization's logo. | string |
none | HGAC_RUN_BY_LOGO_URL | yes |
runByLogoOnly | If true the footer will only show a logo. Useful when the logo contains the organization name. By default this is false . |
boolean |
false |
HGAC_RUN_BY_LOGO_ONLY | yes |
runByContactURL | URL or mailto link to get in touch with the hosting organization. | string |
none | HGAC_RUN_BY_CONTACT_URL | yes |
HiGlass App is based on react-create-app and implements the following folder structure:
-
/build
[Do not edit.]Contains the build files.
-
Contains the build configs for webpack and converting Markdown into JSX. Except the JSX, the files are derived from react-create-app.
-
/node_modules
[Do not edit.]Contains thrid party libraries.
-
Contains the public index files of HiGlassApp.
-
Contains node scripts for webpack and converting Markdown into JSX. Except the JSX, the files are derived from react-create-app.
-
Entry point for the application source.
-
Flat folder containing Redux actions. All actions should be exported in the
index.js
. -
Flat folder containing presentational components. See Dan's article for a comparison between presentational and container components.
-
Flat folder containing config files. Configs should host all constant variables.
-
Flat folder containing container components. See Dan's article for a comparison between presentational and container components.
-
Flat folder containing factory functions. See Eric's article for an introduction to factory functions.
-
-
Flat folder containing higher-order components. See the React docs for an introduction.
-
Flat folder containing images.
-
Flat folder containing Redux reducers.
-
Flat folder containing generic style components. Note: this is kind of arbitrary but I like to separate reusable CSS classes from
index.scss
such that I can quickly drop them into other apps. -
Flat folder containing utility functions. (Utility function must be pure and should not have any state or side effects!)
-
Flat folder containing all view components. (View components are just like presentational components with the only difference that they are associated to a specific URL. This separation is again arbitrary but I like having all views separated as I consider them uncomposable. Only
Main
should import views.)