plot resize with draggable panel

[moontrip]

This is a test for resizing plotly's plot embedded in a draggable (and resizable) panel, like used in SAM.
Tested several ways to make it happen but the only way I could do was to use draggable panel's onPanelResize() that returns current size of the panel. Then, a plot size in which a barplot is utilized for test purpose is determined by the current panel size. Please note that current format has an issue for the actual panel size, thus it is modified to avoid infinite loop of plot resize.

Here is a demo video:

plot.resize.with.draggable.panel.mp4

[bobular]

This looks great. Works very smoothly too.

We should discuss integration into SAM floaters next. Not trivial!

[bobular]

I think we need to use useCallback on the function here and put the dependency back (see below)

[bobular]

Or even just onPanelResize={setPanelDimension}?

[bobular]

useState setters are guaranteed to be stable

[bobular]

I think this needs to be reinstated.

[moontrip]

@bobular By having onPanelResize, it causes infinite loop, thus I removed it in the dependencies, only to use [height, width] dependencies in the next line: Line 117.

[bobular]

Do we need to add mainPlotWidth and mainPlotHeight props here?

export interface VisualizationProps<Options = undefined> {
  options?: Options;
  visualization: Visualization;
  dataElementConstraints?: Record<string, DataElementConstraint>[];
  dataElementDependencyOrder?: string[][];
  updateConfiguration: (configuration: unknown) => void;
  updateThumbnail?: (source: string) => void;
  computation: Computation;
  filters?: Filter[];
  starredVariables: VariableDescriptor[];
  toggleStarredVariable: (targetVariableId: VariableDescriptor) => void;
  totalCounts: PromiseHookState<EntityCounts>;
  filteredCounts: PromiseHookState<EntityCounts>;
  geoConfigs: GeoConfig[];
  otherVizOverviews: VisualizationOverview[];
  computeJobStatus?: JobStatus;
}

Do all the floaters have a "main plot" - the contingency table might not. Can't test right now due to back end problems.

[bobular]

I think maybe we only let the draggable size control the width of the plot, and we set the height according to the aspect ratio of the default size? We probably need to play with it a bit.

[moontrip]

I think maybe we only let the draggable size control the width of the plot, and we set the height according to the aspect ratio of the default size? We probably need to play with it a bit.

First of all thank you for your feedbacks above, @bobular 👍 As for this, actually that's what I wanted to ask/suggest when I alluded at Slack (😅) , because it is arguably the simplest solution without bothering the other components in a floating Viz such as input variable selector at top, plot controls and bottom, etc.