Multiscale Visualization of Structural Variants

By: Armita Safa, Janet Li and Neera Patadia

Overview

Our project is implemented as a web application using the React UI library. create-react-app was used to generate the boilerplate.

data/: Data and Python scripts for data preparation

public/: Generated by create-react-app, this file contains the app's entrypoint, index.html. We have soft-linked our data to this directory as well, so it can be fetched during runtime

src/: Source code for the React application. App.test.js, index.js, logo.svg, reportWebVitals.js and setupTests.js were all generated by create-react-app and not altered by us

• components/: All React components written by us.
  • BarChart.js: stacked bar chart component, implemented using D3.js
  • BarChartXAxis.js and BarChartYAxis.js: X and Y axes for BarChart component
  • ClinicalSignificance.js: visually encoded "tag" for Clinical Significance column in MatchTable
  • GenomePlots.js: Circos plot and linked linear track. We defined the spec for the plots, which Gosling.js renders.
  • Legend.js: Describes the custom colour map.
  • MatchTable.js: Table of HG002 matches. Data and state management are handled by hooks in the react-table library.
  • Similarity.js: visual encoding for Similarity column in MatchTable
• App.js: generated by react-react-app and altered by us. This file defines the main structure of the app and handles the majority of the data fetching, state management and responsivity
• index.css: styles for the entire application

Setup

Setting up and running the app requires npm.

To install the dependencies, run:

npm i --legacy-peer-deps

Then, to run the app (in development mode), simply run:

npm start

The react app will be listening on port 3000.