manzt/README.md

## README.md

      
    Raw
  

              README.md
            
          
    minimal higlass vite

pnpm install
pnpm dev

  
## index.html
<!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>

## main.jsx
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} />);

## package.json
{
  "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"
  }
}
	<!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"
	}
	}