Click event on circular stacked tracks

[EmiliaStahlbom]

Hi,

I'm currently trying out gosling and I've run into a problem. As I try to subscribe to click-events through the API everything works fine for linear layouts. However, for a circular layout of stacked tracks, only the innermost track is responding.

Is this a (un)known bug, or am I doing something wrong? I'm using the same specification for the linear and circular, just changing the layout-variable. It's a problem with both 'rect' and 'point' marks.

Any hints or help is appreciated :)

Thanks for a nice tool!
Emilia

[sehilyi]

Hi @EmiliaStahlbom! Thank you for submitting a question to the Discussions!

You are correct that click events are not fully supported in circular layouts with stacked tracks. If you could share your specifications (you may exclude data for privacy), we can take a look at it and see if it is actually an unsupported feature or a bug, or if there is a walkaround.

[EmiliaStahlbom]

Hi Sehi, thank you for the quick response!

My specification is as below:

title: '...',
subtitle: '...',
description: '...',
views: [
    {
  	  layout: 'circular',
  	  static: false,
  	  spacing: 10,
  	  xDomain: {chromosome: "chr1", interval:[0,100]},
  	  "alignment": "stack",
  	  tracks: [
  		  {
  			  style: {outlineWidth: 1, outline: 'black'},
  			  data: {
  				  url: sampleUrl,
  				  type: 'csv',
  				  genomicFields: [ 'index']
  			  },
  			  dataTransform: [
  				  {type: 'filter', field: "value", oneOf:['1']}
  			  ],
  			  mark: 'rect',        
  			  tooltip: [ {field: 'index',alt:'Variant id'}],
  			  x: {field: 'index', type: 'genomic', grid: true, axis: 'none'},
  			  height: 10,
  		  },
  		  {		
  			  data: {
  				  url: profileUrl,
  				  type: 'csv',
  				  genomicFields: [ 'index']
  			  },
  			  experimental: { mouseEvents: true },
  			  style: {outlineWidth: 1, outline: 'black'},
  			  row: {field: 'variable', type: 'nominal', grid:true, legend: true}, 
  			  mark: 'rect',        
  			  x: {field: 'index', type: 'genomic', grid: true},
  			  opacity: {field: 'value', type: 'quantitative'},
  			  color:color,
  			  tooltip: [{field: 'value',alt:'Occurrence frequency' }, {field: 'index',alt:'Variant id'}, {field: 'variable',alt:'Disease id'}],
  		  },
  		  {
  			  style: {outlineWidth: 1, outline: 'black'},
  			  data: {
  				  url: sampleUrl,
  				  type: 'csv',
  				  genomicFields: [ 'index']
  			  },
  			  dataTransform: [
  				  {type: 'filter', field: "value", oneOf:['1']}
  			  ],
  			  mark: 'rect',        
  			  x: {field: 'index', type: 'genomic', grid: true, axis: 'none'},
  			  height: 10,
  			  experimental: { mouseEvents: true },
  		  },	
  	  ],
  	  width: circularRadius * 2,
  	  centerRadius: centerRadius,
    },
]
}

[sehilyi]

Thanks for sharing the code! I can confirm that this is limited support of mouse events in circular layouts in Gosling.js. I will make a separate GH issue to address this as soon as possible.

[sehilyi]

(#992)

[etowahadams]

Hi @EmiliaStahlbom! I just merged a branch that should close this issue (#1005). It will be available when we make the next release of Gosling.

[EmiliaStahlbom]

Thank you very much!

[sehilyi]

@EmiliaStahlbom It should work with the latest version, i.e., 0.13.1!