Skip to content

Instantly share code, notes, and snippets.

@manzt
Created August 31, 2023 21:54
Show Gist options
  • Save manzt/8eb78832b97cb7af10283e57ef5ae6ed to your computer and use it in GitHub Desktop.
Save manzt/8eb78832b97cb7af10283e57ef5ae6ed to your computer and use it in GitHub Desktop.
minimal higlass + vite

minimal higlass vite

pnpm install
pnpm dev
<!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>
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} />);
{
"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