Skip to main content
Version: 0.9

Frequently Asked Questions

A list of frequently asked questions about Gosling.js.

How to debug gosling specs?

To check whether your gosling spec is valid, you can either

  • copy-and-paste your spec on the online Editor to see if there is any warning message.
  • call a validation function console.log(gosling.validateGoslingSpec(yourSpec));

How to show Gosling Tooltips that are hidden under other components?

You can modify the z-index of the tooltip components to address this issue.

/* override styles of tooltips */
.track-mouseover-menu {
z-index: 1;
}

HiGlass defines the original CSS styles of the tooltips.

The component is rendered in React but there is no visualization

bug_screenshot

For problems like this, please ensure that you have added the following style sheets in your base html file.

<head>
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/higlass@1.11.3/dist/hglib.css">
</head>

Please refer to Use Gosling.js in React App for more details.

How to make Gosling visualizations responsive?

To make Gosling visualizations responsive, you need to listen to the resize event and update the width property accordingly.
Below is an example in React app.

// Change the width upon resize event of the browser
useEffect(() => {
window.addEventListener(
"resize",
debounce(() => {
// this value is used to set `width` of a track when updating spec
setVisPanelWidth( window.innerWidth );
}, 500) // wait for 500ms instead of updating right away
);
}, []);