Specifying y-axis limits and multiple tracks using the same y-axis are wanted

[zhangzhen]

The following new features are wanted in my case:

1. y-axis needs to be fixed during the zooming and panning.
2. multiple tracks use the same y-axis. The second y-axis makes no sense when two datasets have the same scale. Besides, data is not correctly displayed in this case.

[sehilyi]

Hi Zhen!

1. y-axis needs to be fixed during the zooming and panning.

If you know the min and max values of the y-axis, you can fix the y-axis scale using domain:

y: { field: 'value', type: 'quantitative', domain: [0, 100] }

2. multiple tracks use the same y-axis. The second y-axis makes no sense when two datasets have the same scale.

I assume you are overlaying multiple tracks on top of each other.

You can hide certain axis by specifying an axis property:

y: { field: 'value', type: 'quantitative', axis: "none" } // axis can be "left", "right", "top", "bottom", "none"

Besides, data is not correctly displayed in this case.

Could you share with us details about the issue and the example spec so that we can replicate it?

[zhangzhen]

Could you share with us details about the issue and the example spec so that we can replicate it?

sorry, I cannot replicate it any more.

@sehilyi :
I want to use an input element to specify yMax. As soon as yMax changes, the gosling element will be redrawn. I can use React Hooks to implement this, but how can I fetch the current region, i.e., from start to end positions, where the viewport is in just before I change yMax? Can making use of the property "reactive" achieve that? Perhaps clicking the y-axis shows a popup where one can specify a new yMax. Then the upper limit of the y-axis domain is updated to the newly specified value. But I don't know how to change specs in the corresponding handler. Any ideas are welcome.

Adding more interaction functionality to Gosling is really required in the near future.

[sehilyi]

@zhangzhen Yes, user interactions are something that we will definitely support in the future and are limited at the moment. And, knowing use cases like yours will be really helpful.

I think, for now, the best way in your case would be to use the experimental reactive option. For example, you can find a simple example at gosling-lang/gosling-react which uses this option to change bin size or min color value using sliders:

The core part of the codes is located at src/App.js. Basically, you will need to (1) turn on the reactive option, (2) set ids to tracks so that they are cached, (3) change spec as you want:

// (1)
<gosling.GoslingComponent
        ref={gosRef}
        spec={generateGoslingSpec([+min, 0.001], ...)}
        experimental={{ reactive: true }}
/>

"id": "track-1", // (2)
"data": {
  "url": "https://server.gosling-lang.org/api/v1/tileset_info/?d=cistrome-multivec",
  "type": "multivec",
  "row": "sample",
  "column": "position",
  "value": "peak",
  "categories": ["sample 1", "sample 2", "sample 3", "sample 4"],
  binSize: binSize === 0 ? 1 : binSize
},
...

<div style={{marginLeft: 80}}>
  {'Color Min Value: '}
  <input 
    type="range" 
    min={0}
    max={0.001}
    step={0.0001} 
    value={min}
    className="slider" 
    id="min-slider" 
    style={{ width: 100, display: 'inline', margin: 10}}
    onChange={(e) => setMin(e.currentTarget.value) }
  />
  {min} // (3) this information is used when generating gosling spec
</div>

[sehilyi]

Moved the question right above as a new GitHub issue (#546) since it became quite different from the original question.