Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
sehilyi opened this issue Feb 2, 2021 · 8 comments · May be fixed by #459
Open

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

sehilyi opened this issue Feb 2, 2021 · 8 comments · May be fixed by #459
Labels
D1 Easy to address enhancement New feature or request grammar Something related to the grammar P5 Highest priority

Comments

@sehilyi
Copy link
Member

sehilyi commented Feb 2, 2021 •
edited
Loading 

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 }

image
@sehilyi sehilyi added enhancement New feature or request P5 Highest priority D1 Easy to address labels Feb 2, 2021
@sehilyi sehilyi added the grammar Something related to the grammar label Mar 4, 2021
@sehilyi
Copy link
Member Author

sehilyi commented Mar 20, 2021

What about in circular?

@sehilyi
Copy link
Member Author

sehilyi commented Jun 8, 2021 •
edited
Loading

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
Copy link
Member Author

sehilyi commented Jun 8, 2021 •
edited
Loading

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
Copy link
Member Author

sehilyi commented Jun 9, 2021 •
edited
Loading

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

Jun-09-2021 19-11-13

@sehilyi
Copy link
Member Author

sehilyi commented Jun 17, 2021 •
edited
Loading

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

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

@sehilyi sehilyi pinned this issue Jun 22, 2021
@sehilyi
Copy link
Member Author

sehilyi commented Jun 23, 2021 •
edited
Loading

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 sehilyi mentioned this issue Aug 9, 2021
Merged
12 tasks
@sehilyi sehilyi changed the title Support vertical band connection Support vertical band connection with independent scales on top and bottom axes Aug 12, 2021
@sehilyi
Copy link
Member Author

sehilyi commented Aug 12, 2021

Refer to "ToDo" in #451 for next steps

@sehilyi sehilyi linked a pull request Aug 12, 2021 that will close this issue
Open
12 tasks
@sehilyi
Copy link
Member Author

sehilyi commented Aug 13, 2021 •
edited
Loading

Another example with three views:

Aug-13-2021 11-00-15

"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" }, },)

@sehilyi sehilyi unpinned this issue May 2, 2022
@sehilyi sehilyi mentioned this issue Apr 13, 2023
Open
@sehilyi sehilyi moved this to v1.0 in Gosling.js Roadmap May 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
D1 Easy to address enhancement New feature or request grammar Something related to the grammar P5 Highest priority
Projects
Gosling.js Roadmap
Archived in project
Milestone
No milestone
1 participant
@sehilyi