{"id":19270884,"url":"https://github.com/lebinary/genome-browser","last_synced_at":"2025-04-21T20:33:57.805Z","repository":{"id":46022801,"uuid":"350184323","full_name":"lebinary/genome-browser","owner":"lebinary","description":"Genome browser to visualize and analyze genomic data","archived":false,"fork":false,"pushed_at":"2021-11-22T09:44:18.000Z","size":2488,"stargazers_count":13,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-01T16:08:29.351Z","etag":null,"topics":["bioinformatics","bioinformatics-analysis","biology","biostatistics","c-plus-plus","genome","genome-annotation","genomes","genomics","genomics-visualization","interactive","interactive-map","interactive-storytelling","interactive-visualizations","javascript","react","reactjs"],"latest_commit_sha":null,"homepage":"https://www.youtube.com/watch?v=jPPwD95kp28\u0026ab_channel=BinhLe","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lebinary.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-22T02:43:25.000Z","updated_at":"2024-09-03T16:13:32.000Z","dependencies_parsed_at":"2022-08-24T09:22:12.787Z","dependency_job_id":null,"html_url":"https://github.com/lebinary/genome-browser","commit_stats":null,"previous_names":["lebinary/genome-browser","lebinh190998/genome-browser"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lebinary%2Fgenome-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lebinary%2Fgenome-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lebinary%2Fgenome-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lebinary%2Fgenome-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lebinary","download_url":"https://codeload.github.com/lebinary/genome-browser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250128526,"owners_count":21379531,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bioinformatics","bioinformatics-analysis","biology","biostatistics","c-plus-plus","genome","genome-annotation","genomes","genomics","genomics-visualization","interactive","interactive-map","interactive-storytelling","interactive-visualizations","javascript","react","reactjs"],"created_at":"2024-11-09T20:27:56.478Z","updated_at":"2025-04-21T20:33:56.653Z","avatar_url":"https://github.com/lebinary.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\u003c!--\n*** Thanks for checking out the Best-README-Template. If you have a suggestion\n*** that would make this better, please fork the repo and create a pull request\n*** or simply open an issue with the tag \"enhancement\".\n*** Don't forget to give the project a star!\n*** Thanks again! Now go create something AMAZING! :D\n--\u003e\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\u003c!--\n*** I'm using markdown \"reference style\" links for readability.\n*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).\n*** See the bottom of this document for the declaration of the reference variables\n*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.\n*** https://www.markdownguide.org/basic-syntax/#reference-style-links\n--\u003e\n\u003c!-- [![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![MIT License][license-shield]][license-url]\n[![LinkedIn][linkedin-shield]][linkedin-url] --\u003e\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"public/logo192.png\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\n  \u003ch3 align=\"center\"\u003eGenome Browser\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    Genome Browser is an interative tools to visualize and analyze genomic data.\n    \u003c!-- \u003cbr /\u003e\n    \u003ca href=\"https://github.com/othneildrew/Best-README-Template\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e --\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://youtu.be/jPPwD95kp28\"\u003eView Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://www.npmjs.com/package/genome-browser\"\u003eView Package\u003c/a\u003e\n    .\n    \u003ca href=\"https://github.com/lebinh190998/genome-browser/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/lebinh190998/genome-browser/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#built-with\"\u003eBuilt With\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003c!-- \u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e --\u003e\n        \u003cli\u003e\u003ca href=\"#scripts\"\u003eScripts\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#use-as-a-package\"\u003eUse as a package\u003c/a\u003e\u003c/li\u003e\n    \u003c!-- \u003cli\u003e\u003ca href=\"#roadmap\"\u003eRoadmap\u003c/a\u003e\u003c/li\u003e --\u003e\n    \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n    \u003c!-- \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e --\u003e\n    \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n    \u003c!-- \u003cli\u003e\u003ca href=\"#acknowledgments\"\u003eAcknowledgments\u003c/a\u003e\u003c/li\u003e --\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n## About The Project\n\n\u003ca href=\"https://www.youtube.com/watch?v=jPPwD95kp28\u0026ab_channel=BinhLe\"\u003e\n  \u003cimg align=\"center\" src=\"public/cover.png\" alt=\"Cover Image\" width=\"800\" height=\"400\"\u003e\n    \u003cimg align=\"center\" src=\"public/GB_2.png\" alt=\"Cover Image\" width=\"800\" height=\"400\"\u003e\n\u003c/a\u003e\n\nInspired by \"igv\" and \"varsome\" genome browsers, I built an interactive genome browser tool from scratch using Reactjs which helps bioinformatics researchers visualize and analyze their data.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n### Built With\n\nFrameworks/libraries used to bootstrap this project.\n\n- [React.js](https://reactjs.org/)\n- [Python](https://www.python.org/)\n- [C++](https://www.cplusplus.com/)\n- [HTML Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)\n- [MaterialUI](https://mui.com/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n\n## Getting Started\n\nTo get a local copy up and running follow these simple example steps.\n\n### Scripts\n\n1. Clone the repo\n   ```sh\n   git clone https://github.com/lebinh190998/genome-browser.git\n   ```\n2. Install NPM packages\n   ```sh\n   npm install\n   ```\n3. Run server file\n   ```sh\n   cd server/\n   ```\n   ```sh\n   python genome_browser_server.py\n   ```\n4. Run locally\n   ```sh\n   npm start\n   ```\n5. Build production version (Optional)\n   ```sh\n   npm run build\n   ```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- USAGE EXAMPLES --\u003e\n\n## Use as a package\n\u003ca href=\"https://www.npmjs.com/package/genome-browser\"\u003eView Package\u003c/a\u003e\n\n1. Download genome-browser package\n   ```sh\n   npm install genome-browser\n   ```\n2. Import into your project\n   ```js\n   import { GenomeBrowserApp } from 'genome-browser';\n   ```\n3. Use the application as a component\n   ```js\n   \u003cdiv\u003e\n     \u003cGenomeBrowserApp /\u003e\n   \u003c/div\u003e\n   ```\n4. Some useful props you can use\n\n   a. Choose desired chromosome\n\n   ```js\n   \u003cGenomeBrowserApp chrNum='chr1' /\u003e\n   ```\n\n   b. Choose desired human genome: 'hg38' or 'hg19'\n\n   ```js\n   \u003cGenomeBrowserApp id='hg38' /\u003e\n   ```\n\n   c. Host your own server with your genome data\n\n   ```js\n   \u003cGenomeBrowserApp serverUrl='http://3.143.149.107:8000' /\u003e\n   ```\n\n   d. Choose your preferred starting and ending positions:\n\n   ```js\n   \u003cGenomeBrowserApp pos1='1287123' pos2='1287193' /\u003e\n   ```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## Contributing\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nIf you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag \"enhancement\".\nDon't forget to give the project a star! Thanks again!\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LICENSE --\u003e\n\u003c!-- ## License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e --\u003e\n\n\u003c!-- CONTACT --\u003e\n\n## Contact\n\nLe Binh - [@lebinh1909](https://www.linkedin.com/in/binhle19/) - lebinh190998@gmail.com\n\nProject Link: [https://github.com/lebinh190998/porfolio](https://github.com/lebinh190998/genome-browser)\n\n\u003c!-- Production: [https://lebinhporfolio.netlify.app/](https://lebinhporfolio.netlify.app/) --\u003e\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- ACKNOWLEDGMENTS --\u003e\n\u003c!-- ## Acknowledgments\n\nUse this space to list resources you find helpful and would like to give credit to. I've included a few of my favorites to kick things off!\n\n* [Choose an Open Source License](https://choosealicense.com)\n* [GitHub Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet)\n* [Malven's Flexbox Cheatsheet](https://flexbox.malven.co/)\n* [Malven's Grid Cheatsheet](https://grid.malven.co/)\n* [Img Shields](https://shields.io)\n* [GitHub Pages](https://pages.github.com)\n* [Font Awesome](https://fontawesome.com)\n* [React Icons](https://react-icons.github.io/react-icons/search)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e --\u003e\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n\u003c!-- [contributors-shield]: https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg?style=for-the-badge\n[contributors-url]: https://github.com/othneildrew/Best-README-Template/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=for-the-badge\n[forks-url]: https://github.com/othneildrew/Best-README-Template/network/members\n[stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=for-the-badge\n[stars-url]: https://github.com/othneildrew/Best-README-Template/stargazers\n[issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=for-the-badge\n[issues-url]: https://github.com/othneildrew/Best-README-Template/issues\n[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=for-the-badge\n[license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge\u0026logo=linkedin\u0026colorB=555\n[linkedin-url]: https://linkedin.com/in/othneildrew\n[product-screenshot]: images/screenshot.png --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flebinary%2Fgenome-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flebinary%2Fgenome-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flebinary%2Fgenome-browser/lists"}