Can CircularView be resized

[jrobinso]

Hi, Jim here, can the CircularView be resized after its rendered? I think surely it can, but I've tried a lot of things with no success so asking here. I can successfully resize the container element, which has a property data-testid="circularView", as shown below. However the SVG is not re-rendered, and I can't seem to guess a way to force it to do so.

        circularState = circularState =  createViewState(...)
        
        circularState.session.view.setWidth(size)
        circularState.session.view.setHeight(size /* this is the height of the area inside the border in pixels */)

@garrettjstevens @turner

[cmdcolin]

setWidth and setHeight relate to the size of the container that contains the circular view, and not the circle itself. They are used for various purposes e.g. the lock icon makes it auto-fit to the size of the container, and that is based on the the view.toggleFitToWindowLock() being turned on.

you can try to toggleFitToWindowLock (we might want to have additional setWindowLock(flag:boolean) or something like this but we don't have that currently) or you can use view.setBpPerPx(number) directly, which controls the size of the circle

let me know if that helps

[jrobinso]

view.fitToWindowLock is already true. The setBpPerPx works, a little bit of a hack I record the initial value, then if the size changes I scale it and reset it on the view. Well maybe that's not a hack. Anyway it works.

[jrobinso]

Well I spoke too soon. setBpPerPx works up to certain value, then further increases acutally shrink the rendered circle. In my case the intial width is 450px and bpPerPx is 2000000. If I increase the size to 650px, and bpPerPx to 2666666.6666666665, the circle expands accordingly and it looks fine. If I try 800px, bpPerPx = 3555555.5555555555, the rendered circle shrinks. Increasing it to 2000px, bpPerPx=8888888.88888889, it shrinks further (see screenshot). So I'm stumped. Ideally there would be an auto-fit option, but I can live with setting bpPerPx if I can get it to work.

    setSize(size) {

        const view = this.viewState.session.view;
        view.setWidth(size);
        view.setHeight(size /* this is the height of the area inside the border in pixels */);

        if(!this.origSize) {
            this.origSize = size;
            this.bpPerPx = view.bpPerPx;
        } else {
            const r = size / this.origSize;
            const bpPerPx = r * this.bpPerPx;
            view.setBpPerPx(bpPerPx);
        }

[garrettjstevens]

I'm not sure what happened with the first step where the circle size increases, but the behavior for your the later steps is what is expected. A larger bpPerPx should result in a smaller circle.

[jrobinso]

@garrettjstevens Of course, duh, then the bug is with the first setting. It is repeatable, size increases until some threshold then starts decreasing. However if I send the correct numbers it works in all cases, so strange behavior but maybe we don't care.

[garrettjstevens]

@jrobinso I just thought of an easier way to do this. You probably don't want to manually set the width, since there is a listener that will automatically adjust the width to the width of the view container. Adjusting the height should be sufficient. When you resize, you can set the bpPerPx to the minimum allowed. So setSize might look something like this:

function setSize(size) {
  const view = viewState.session.view
  view.setHeight(size)
  view.setBpPerPx(view.minBpPerPx)
}

[jrobinso]

@garrettjstevens I just tried this, the view.minBpPerPx is nice as I don't have to compute it. But if I don't set the width explicitly the setBpPerPx has no effect. The container width resizes, but the SVG circle does not. So this works

        const view = this.viewState.session.view;
        view.setWidth(size);
        view.setHeight(size);
        view.setBpPerPx(view.minBpPerPx);

This does not, container resizes, circle does not

        const view = this.viewState.session.view;
        view.setHeight(size);
        view.setBpPerPx(view.minBpPerPx);

[jrobinso]

@garrettjstevens I have another question, we can start another topic but this one is yes/no. Is there a listener for "chord hover", when I mouse over a chord it turns black, is there a listener equivalent to onChordClick for this? Anyway to discover available events?

circularState.pluginManager.jexl.addFunction('onChordClick', onChordClick)

[garrettjstevens]

@jrobinso There's not a configurable listener for that event. The best way to see what is configurable is with our graphical config editor, but that isn't really easily available in our embedded components yet. I think you know about the available configurations ("onChordClick," "strokeColor," "strokeColorSelected," and "strokeColorHover"), but if you're curious you can look at the config area on the right side here under "display1": https://s3.amazonaws.com/jbrowse.org/code/jb2/main/index.html?config=test_data%2Fconfig_demo.json&session=share-p8s9xryhYf&password=s8vex