pnpm install
pnpm dev
Created
August 31, 2023 21:54
-
-
Save manzt/8eb78832b97cb7af10283e57ef5ae6ed to your computer and use it in GitHub Desktop.
minimal higlass + vite
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>HiGlass Vite</title> | |
| </head> | |
| <script type="module" src="main.jsx"></script> | |
| <body> | |
| <div id="root"></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import * as React from "react"; | |
| import * as ReactDOM from "react-dom/client"; | |
| import { HiGlassComponent } from "higlass"; | |
| import "higlass/dist/hglib.css"; | |
| const VIEW_CONFIG = "https://higlass.io/api/v1/viewconfig/?d=default"; | |
| function HiGlassBrowser({ viewConfig }) { | |
| let ref = React.useRef(); | |
| React.useEffect(() => { | |
| function handleLocation(location) { | |
| console.log(location); | |
| } | |
| // subscribe to the location event | |
| ref.current.api.on("location", handleLocation); | |
| return () => { | |
| // unsubscribe from the location event | |
| ref.current.api.off("location", handleLocation); | |
| }; | |
| }, []); | |
| return ( | |
| <> | |
| <button>Zoom to MYC</button> | |
| <HiGlassComponent ref={ref} viewConfig={viewConfig} />; | |
| </> | |
| ); | |
| } | |
| let root = ReactDOM.createRoot(document.querySelector("#root")); | |
| root.render(<HiGlassBrowser viewConfig={VIEW_CONFIG} />); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "scripts": { | |
| "dev": "vite", | |
| "build": "vite build", | |
| "serve": "vite preview" | |
| }, | |
| "dependencies": { | |
| "higlass": "^1.12.4", | |
| "react": "^18.2.0", | |
| "react-dom": "^18.2.0" | |
| }, | |
| "devDependencies": { | |
| "vite": "^4.4.9" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment