Genomic axis hides chr<N> labels

When looking at the whole genome, it would be great if the chr would not randomly disappear. I know that it checks if there is enough space to show the labels, but the threshold should be configurable.

In the example at https://gosling.js.org/?example=doc_bar, it randomly hides chr5, chr6, ...:

As an alternative, is there a way to change to just when zoomed out?

@puehringer I'm not 100% sure, but I believe that there might be a prioritization function somewhere that determines which labels get dropped first (at least that how it is done in the gene annotation track in HiGlass). @sehilyi Can probably comment on how the Gosling genomic axis is implemented and if there is a way to change how and when labels etc. are dropped.

Hi @puehringer! The current logic is that if labels overlap each other, one of the labels is hidden randomly:

gosling.js/src/tracks/gosling-genomic-axis/axis-track.ts

Lines 672 to 686 in 108d496

    
           .sort((a, b) => b.importance - a.importance) 
        
           .forEach(({ text, rope }: any) => { 
        
               text.updateTransform(); 
        
               const b = text.getBounds(); 
        
               const m = 5; 
        
               const boxWithMargin = { 
        
                   minX: b.x - m, 
        
                   minY: b.y - m, 
        
                   maxX: b.x + b.width + m * 2, 
        
                   maxY: b.y + b.height + m * 2 
        
               }; 
        
               if (!tree.collides(boxWithMargin)) { 
        
                   // if not overlapping, add a new boundingbox 
        
                   tree.insert(boxWithMargin); 
        
               } else {

A hard-coded 5px margin is used when calculating collisions. I think Gosling can expose this as a user option, e.g., axisLabelMargin: 0 for no margin, axisLabelMargin: -1 for not hiding labels at all.

These are some possible examples:

Zero margins (`axisLabelMargin: 0`)

No hiding (`axisLabelMargin: -1`)

Hi @sehilyi, this looks close to what we are looking for! Any change we can have an option to simply show the labels without the "chr"? That way, the "No hiding (axisLabelMargin: -1)" case would have plenty of space to show all chromosomes.

Hi @puehringer, could you take a look at #996 to see whether it would support your use case? I added two options as part of the Gosling theme, so the usage would be <GoslingComponent spec={spec} theme={{ base: 'light', axis: { labelMargin: -1, excludeLabelChrPrefix: true } }}/>.

Hi @puehringer, could you take a look at #996 to see whether it would support your use case? I added two options as part of the Gosling theme, so the usage would be <GoslingComponent spec={spec} theme={{ base: 'light', axis: { labelMargin: -1, excludeLabelChrPrefix: true } }}/>.

@sehilyi I tested these 2 options for our use case and this is exactly what we need.

	.sort((a, b) => b.importance - a.importance)
	.forEach(({ text, rope }: any) => {
	text.updateTransform();
	const b = text.getBounds();
	const m = 5;
	const boxWithMargin = {
	minX: b.x - m,
	minY: b.y - m,
	maxX: b.x + b.width + m * 2,
	maxY: b.y + b.height + m * 2
	};
	if (!tree.collides(boxWithMargin)) {
	// if not overlapping, add a new boundingbox
	tree.insert(boxWithMargin);
	} else {

Zero margins (axisLabelMargin: 0)

No hiding (axisLabelMargin: -1)

Zero margins (`axisLabelMargin: 0`)

No hiding (`axisLabelMargin: -1`)