Skip to content

fix: allow plotly plots to shrink inside ui.flex/grid layouts#1946

Merged
dsmmcken merged 2 commits intomainfrom
dmckenzie_plot_responsive
Apr 19, 2024
Merged

fix: allow plotly plots to shrink inside ui.flex/grid layouts#1946
dsmmcken merged 2 commits intomainfrom
dmckenzie_plot_responsive

Conversation

@dsmmcken
Copy link
Copy Markdown
Contributor

@dsmmcken dsmmcken commented Apr 18, 2024

  • set responsive config to true which allows plots to properly grow and shrink
  • removed unnecessary useResizeHandler (which only watches window), as we have our own observer
  • fixed failing test by changing locator to plotly parent container. Responsive setting has an absolutely positioned child that makes the other locator have zero height,

Tested with the following script, and resizing golden-layout panels both vertically and horizontally and resizing browser window horizontally and vertically.

from deephaven import ui, empty_table
from deephaven.plot import express as dx

t = empty_table(100).update(["x = i", "y = i"])
p = dx.line(t, x="x", y="y")

@ui.component
def common_example():
    return ui.panel(
        ui.flex(
            ui.text_field(label="Text Field"),
            ui.text_field(label="Text Field"),
            ui.text_field(label="Text Field"),
        ),
        t,
        p
    )

ui_common_example = common_example()


@ui.component
def common_example_row():
    return ui.panel(
        ui.flex(
            ui.text_field(label="Text Field"),
            ui.text_field(label="Text Field"),
            ui.text_field(label="Text Field"),
            direction="column"
        ),
        t,
        p,
        direction="row"
    )

ui_common_example_row = common_example_row()

- set responsive config to true which allows plots to properly grow and shrink
- removed unecessary useResizeHandler (which only watches window), as we have our own observer
@dsmmcken dsmmcken requested a review from mofojed April 18, 2024 19:23
@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 18, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 46.18%. Comparing base (7af32cc) to head (df947a6).
Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1946      +/-   ##
==========================================
- Coverage   46.18%   46.18%   -0.01%     
==========================================
  Files         647      647              
  Lines       38340    38343       +3     
  Branches     9704     9706       +2     
==========================================
  Hits        17709    17709              
- Misses      20578    20581       +3     
  Partials       53       53              
Flag Coverage Δ
unit 46.18% <ø> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Copy Markdown
Member

@mofojed mofojed left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent work!

@dsmmcken dsmmcken merged commit 88fbe86 into main Apr 19, 2024
@dsmmcken dsmmcken deleted the dmckenzie_plot_responsive branch April 19, 2024 14:05
@github-actions github-actions Bot locked and limited conversation to collaborators Apr 19, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants