Height of annotating area limited to 450px

[dnowacki-usgs]

This is an issue especially for portrait-oriented images. Even if the browser window is full width, the actual dash frame with the image to be annotated is limited to 450px height, leaving a ton of unused space beneath. It would be great if it continued to expand in height as it does with width.

[dbuscombe-usgs]

Yes, good point. I have tried, fairly hard, to get the program to use more space. But have been unable to figure it out. I can blow the images up, but that isn't a good solution generally. I could perhaps detect the orientation automatically and rotate 90 degrees if portrait ...

Let me know if you have any insight into how to make this happen! I will continue to think

[dbuscombe-usgs]

The code that relates to the image size is, in assets/ml-image-segmentation-style.css:

#left-column {
    position: absolute;
    transform: translate(-10%,0%);
}

and in assets/style.css:

  .ten.columns                    { width: 82.6666666667%; margin-left: 0;}

which can be changed to:

  .ten.columns                    { width: 82.6666666667%; height: 100%; margin-left: 0;}

but that doesn't make the image larger.

This code is supposed to scale the figure to the current image height and width (in plot_utils.py - notice range=(height, 0)):

    if update_ranges:
        width, height = [
            max([pilim(im).size[i] for im in images]) for i in range(2)
        ]

        fig.update_xaxes(
            showgrid=False, range=(0, width), showticklabels=False, zeroline=False
        )
        fig.update_yaxes(
            showgrid=False,
            scaleanchor="x",
            range=(height, 0),
            showticklabels=False,
            zeroline=False,
        )

so the fact that doesn't work means there is something on the dash/html side that I don't understand ...

[dnowacki-usgs]

I think it's that the plotly figure is setting itself to the default height. I was able to make it larger (taller) by adding height=600 in
https://github.com/dbuscombe-usgs/dash_doodler/blob/247a878140c6c7b87afa9db28ab3f786243b071e/plot_utils.py#L37

It's not responsive/doesn't automatically fill available space, but it is a bit easier on the eyes with the additional height.

[dbuscombe-usgs]

Oh, excellent! Thanks Dan

[dbuscombe-usgs]

I think I'll enfore that in app.py

    fig.update_layout(
        {
            "dragmode": "drawopenpath",
            "shapes": shapes,
            "newshape.line.color": stroke_color,
            "newshape.line.width": pen_width,
            "margin": dict(l=0, r=0, b=0, t=0, pad=4),
            "height": 600
        }
    )

[dbuscombe-usgs]

I've made that change and shifted the margins a little, and the control panel is slightly narrower to accommodate the larger image. Thanks @dnowacki-usgs ! The next push will have this change, plus a few performance improvements