tooltips are shown in the background overlay if a gosling component is placed in a modal dialog

[zhangzhen]

A tooltip is displayed in the region marked by a red box in the following figure. How can the tooltip be shown in a modal dialog instead?

Can you make the gosling component responsive? The size of views is automatically adjusted to match different device resolutions.

Zhen

[zhangzhen]

I adjusted the z-index of this dialog from 10 to 2. This problem has been solved.

[sehilyi]

Great to hear that you found a way to address the issue. The CSS class names of the tooltip are the following, so you can override the z-index of the tooltips in your application:

<div class="track-mouseover-menu HiGlass-module_track-mouseover-menu-1AoaP">...</div>

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

Original CSS styles of the tooltips defined in HiGlass:

https://github.com/higlass/higlass/blob/54f5aae61d3474f9e868621228270f0c90ef9343/app/styles/HiGlass.module.scss#L54

[zhangzhen]

Can you make the gosling component responsive? The size of views is automatically adjusted to match different device resolutions.

@sehilyi Higlass can expand or shrink its plots when the screen size changes, so I want to expand the gosling component to fill the width of the parent container. Should the width properties of tracks be specified in pixels? How can I do that?

Thanks, Zhen

[sehilyi]

Hi Zhen,

You could use the reactive rendering for this (Complete Code).

One limitation depending on your use case might be that upon the resize, the zoom level is unchanged, instead, the xDomain is changed to show/hide left- and right-most area, which is the fixed behavior in HiGlass.

[zhangzhen]

You could use the reactive rendering for this (Complete Code).

What I really want is that dragging the browser window border performs the resize of the gosling element, not using slider. Can pure css approach this?

Zhen

[sehilyi]

The slider is one example, and you could instead capture the resize event of the container of <GoslingComponent/> and update the spec (i.e., width of tracks), for example:

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

Can pure css approach this?

The pure CSS approach is not supported at the moment.

[sehilyi]

I've created a new GitHub issue, and we can discuss further there #550