diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..ae80b1a --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +/**/*.d.ts diff --git a/.gitignore b/.gitignore index 53a851c..a432ecd 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,4 @@ yarn-error.log* local_ignore/ .eslintcache +/.idea/ diff --git a/babel.config.js b/babel.config.js index 19899b8..ad3d17e 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,4 +1,4 @@ module.exports = { - presets: ['@babel/preset-env', '@babel/preset-react'], + presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'], plugins: ['@babel/plugin-proposal-class-properties'], }; diff --git a/docker-compose.yml b/docker-compose.yml index c2ba0b0..0fa65dd 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -10,5 +10,7 @@ services: volumes: - ./htsget-config-local.json:/htsget-config-local.json - ~/.aws:/root/.aws:ro + - ./vcfs:/vcfs:ro + - ./bams:/bams:ro environment: - AWS_PROFILE=dev diff --git a/htsget-config-local.json b/htsget-config-local.json index a4390dd..640ac16 100644 --- a/htsget-config-local.json +++ b/htsget-config-local.json @@ -36,6 +36,10 @@ { "pattern": "^umccr-primary-data(?P.*)$", "path": "s3://umccr-primary-data{accession}" + }, + { + "pattern": "^local/(?P.*)$", + "path": "/bams/{accession}" } ] }, @@ -78,6 +82,10 @@ { "pattern": "^umccr-primary-data(?P.*)$", "path": "s3://umccr-primary-data{accession}" + }, + { + "pattern": "^local/(?P.*)$", + "path": "/vcfs/{accession}" } ] }, @@ -98,4 +106,4 @@ } } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 3616d1e..444076b 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,8 @@ "dependencies": { "@material-ui/core": "^4.12.3", "@material-ui/icons": "^4.11.2", + "@types/react-router-dom": "^5.3.2", + "@types/url-parse": "^1.4.6", "aws-amplify": "^4.3.8", "aws-amplify-react": "^5.1.9", "classnames": "^2.3.1", @@ -28,7 +30,8 @@ "react-transition-group": "^4.4.2", "recharts": "^2.1.6", "redux": "^4.1.2", - "redux-thunk": "^2.4.0" + "redux-thunk": "^2.4.0", + "url-parse": "^1.5.4" }, "scripts": { "start": "source start.sh", @@ -52,6 +55,7 @@ "@babel/plugin-proposal-class-properties": "^7.16.0", "@babel/preset-env": "^7.16.4", "@babel/preset-react": "^7.16.0", + "@babel/preset-typescript": "^7.16.7", "@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/parser": "^5.4.0", "babel-eslint": "^10.1.0", diff --git a/src/containers/IGV.js b/src/containers/IGV.tsx similarity index 65% rename from src/containers/IGV.js rename to src/containers/IGV.tsx index 8edcebc..8831bb3 100644 --- a/src/containers/IGV.js +++ b/src/containers/IGV.tsx @@ -18,16 +18,17 @@ import { MenuItem, Select, Slide, + SlideProps, Snackbar, TextField, + Theme, Toolbar, Typography, withStyles, } from '@material-ui/core'; -import igv from 'igv'; +import igv, { IGVBrowser, ITrack } from 'igv'; import { getJwtToken } from '../utils/signer'; import config from '../config'; -import * as PropTypes from 'prop-types'; import { API } from 'aws-amplify'; import Moment from 'react-moment'; import HumanReadableFileSize from '../components/HumanReadableFileSize'; @@ -36,14 +37,12 @@ import AddIcon from '@material-ui/icons/Add'; import DeleteSweepIcon from '@material-ui/icons/DeleteSweep'; import ExitToAppIcon from '@material-ui/icons/ExitToApp'; import HelpIcon from '@material-ui/icons/Help'; -import { Link as RouterLink } from 'react-router-dom'; +import { Link as RouterLink, RouteComponentProps } from 'react-router-dom'; import Link from '@material-ui/core/Link'; import genomes from '../utils/genomes'; +import URLParse from 'url-parse'; -const styles = (theme) => ({ - appBar: { - position: 'relative', - }, +const styles = (theme: Theme) => ({ title: { marginLeft: theme.spacing(2), flex: 1, @@ -60,22 +59,46 @@ const styles = (theme) => ({ }, }); -const Transition = React.forwardRef(function Transition(props, ref) { - return ; -}); +function TransitionSlideUp(props: SlideProps) { + return ; +} -class IGV extends Component { - state = { - refGenome: 0, +// we can optionally route to this page with a preset subjectId in the url +type MatchParams = { + subjectId?: string; +}; +type Props = RouteComponentProps & { + classes: any; +}; +type State = { + // the browser IGV instance, or null if we still have not finished loading it + browser: IGVBrowser | null; + + // the string identifier of the reference genome being used... also tracks the state of the - hg38 - hg38_1kg - hg19 - hg18 + hg38 + hg38_1kg + hg19 + hg18