Skip to content

Commit

Permalink
fix: allow plotly plots to shrink inside ui.flex/grid layouts (#1946)
Browse files Browse the repository at this point in the history
- 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.

```py
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()
```
  • Loading branch information
dsmmcken authored Apr 19, 2024
1 parent b63ab18 commit 88fbe86
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 3 deletions.
5 changes: 4 additions & 1 deletion packages/chart/src/Chart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -332,6 +332,10 @@ class Chart extends Component<ChartProps, ChartState> {
return {
displaylogo: false,

// scales the plot to the container size
// https://github.com/plotly/react-plotly.js/issues/102
responsive: true,

// Display the mode bar if there's an error or downsampling so user can see progress
// Yes, the value is a boolean or the string 'hover': https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L249
displayModeBar:
Expand Down Expand Up @@ -704,7 +708,6 @@ class Chart extends Component<ChartProps, ChartState> {
onRelayout={this.handleRelayout}
onUpdate={this.handlePlotUpdate}
onRestyle={this.handleRestyle}
useResizeHandler
style={{ height: '100%', width: '100%' }}
/>
)}
Expand Down
4 changes: 2 additions & 2 deletions tests/figure.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ test('can open a simple figure', async ({ page }) => {
await openPlot(page, 'simple_plot');
// Now we should be able to check the snapshot on the plotly container
await expect(
page.locator('.iris-chart-panel .plotly.plot-container')
page.locator('.iris-chart-panel .js-plotly-plot')
).toHaveScreenshot();
});

Expand All @@ -15,6 +15,6 @@ test('can set point shape and size', async ({ page }) => {
await openPlot(page, 'trig_figure');
// Now we should be able to check the snapshot on the plotly container
await expect(
page.locator('.iris-chart-panel .plotly.plot-container')
page.locator('.iris-chart-panel .js-plotly-plot')
).toHaveScreenshot();
});

0 comments on commit 88fbe86

Please sign in to comment.