Support vertical band connection with independent scales on top and bottom axes

[sehilyi]

mark: 'link',
x: { ... }, // top
xe: { ... }, // bottom
// this property can be instead be a part of mark, e.g., mark: { type: 'link', verticalLink: true }
style: { verticalLink: true } 

[sehilyi]

What about in circular?

[sehilyi]

For example, in viewport tracks (here), x and y scales are updated together by another view:

constructor() {
   const { registerViewportChanged, removeViewportChanged } = context;
   registerViewportChanged(uid, this.viewportChanged.bind(this));
   ...
}

viewportChanged(viewportXScale, viewportYScale) { ... }

where registerViewportChanged is defined as (here):

const fromView = track.fromViewUid;
track.registerViewportChanged = (trackId, listener) => this.addScalesChangedListener(fromView, trackId, listener);

addScalesChangedListener(viewUid, listenerUid, eventHandler) {

   if (!this.scalesChangedListeners[viewUid]) {      
      this.scalesChangedListeners[viewUid] = {};    
   }
   this.scalesChangedListeners[viewUid][listenerUid] = eventHandler;
   if (!this.xScales[viewUid] || !this.yScales[viewUid]) {  return; }
   
   // call the handler for the first time
   eventHandler(this.xScales[viewUid], this.yScales[viewUid]); 
}

Also, setCenter is updating the position and zoom level of tracks.

[sehilyi]

ViewConfig-wise, we should (1) be able to differentiate x and y axes and (2) allow cross-axis lock. So we can do something like the following:

"locksByViewUid": {
      "view-1": { "x": { "lock": "lock-1", "axis": "y" }, "y": { "lock": "lock-2", "axis": "x" } },
      "view-2": { "x": { "lock": "lock-2", "axis": "y" }, "y": { "lock": "lock-1", "axis": "x" } },
    },
    "locksDict": {
      "lock-1": {
        "view-1": [
          1550000000,
          1550000000,
          3380588.876772046
        ],
        "view-2": [
          1550000000.0000002,
          1549999999.9999993,
          3380588.876772046
        ],
        "uid": "lock-1"
      },
      "lock-2": {
        "view-1": [
          1550000000,
          1550000000,
          3380588.876772046
        ],
        "view-2": [
          1550000000.0000002,
          1549999999.9999993,
          3380588.876772046
        ],
        "uid": "lock-2"
      }
    }

To allow using the current way of linking views, the following can be still possible:

// Link x and y axes between two views
"locksByViewUid": {
      "view-1": "lock-1",
      "view-2": "lock-1" ,
},

[sehilyi]

Implemented something visible. This is how it looks with cross axes linking.

[sehilyi]

Currently working on a branch named sehilyi/axis-independent-projection in higlass:

https://github.com/higlass/higlass/tree/sehilyi/axis-independent-projection

[sehilyi]

~~Another issue is to support using two genomic axes (x and y) in a single view. Refer to https://github.com/gosling-lang/gosling.js/pull/38/files which once implemented the dual axes.~~

This is addressed by #451

[sehilyi]

Refer to "ToDo" in https://github.com/gosling-lang/gosling.js/pull/451 for next steps

[sehilyi]

Another example with three views:

"locksByViewUid": {
  "view-1": { 
    "x": // Source axis from `lock-1`
    {
      "lock": "lock-1", 
      "axis": "x" // Target axis to apply to `"view-1"`
    } 
  },
  "view-2": { "y": { "lock": "lock-2", "axis": "x" } },
  "view-3": { "x": { "lock": "lock-2", "axis": "y" }, "x": { "lock": "lock-1", "axis": "x" },  },
},
"locksDict": {
  "lock-1": {
    "view-1": [
      1550000000,
      1550000000,
      3380588.876772046
    ],
    "view-3": [
      1550000000.0000002,
      1549999999.9999993,
      3380588.876772046
    ],
    "uid": "lock-1"
  },
  "lock-2": {
    "view-2": [
      1550000000.0000002,
      1549999999.9999993,
      3380588.876772046
    ],
    "view-3": [
      1550000000.0000002,
      1549999999.9999993,
      3380588.876772046
    ],
    "uid": "lock-2"
  }
}

Linking x-axes between Grey and Red views, and linking between the x-axis of Green and the y-axis of Red. Using a similar approach, I think we can draw vertical bands (I.e., Grey and Green being top and bottom views and Red being the band connection view).

• [ ] Source and target should be switched in the spec (i.e., following is not definable "view-3": { "x": { "lock": "lock-2", "axis": "y" }, "x": { "lock": "lock-1", "axis": "x" }, },)