Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(flame): failure when accessing visualViewport.visualViewport from within iFrame #2502

Merged
merged 4 commits into from
Aug 9, 2024
Merged

fix(flame): failure when accessing visualViewport.visualViewport from within iFrame #2502

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c346e06
fix(flame): failure when accessing `visualViewport.visualViewport` fr…
nickofthyme Aug 7, 2024
ceb2456
cleanup: better logical solution
nickofthyme Aug 7, 2024
707a407
refactor: update solution to update whenever available
nickofthyme Aug 8, 2024
bf0bd1a
chore: move check from call site to method
nickofthyme Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions packages/charts/src/chart_types/flame_chart/flame_chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,6 @@ const NODE_TWEEN_DURATION_MS = 500;
const unitRowPitch = (position: Float32Array) => (position.length >= 4 ? (position[1] ?? 0) - (position[3] ?? 0) : 1);
const initialPixelRowPitch = () => 16;
const specValueFormatter = (d: number) => d; // fixme use the formatter from the spec
const browserRootWindow = () => {
let rootWindow = window; // we might be in an iframe, and visualViewport.scale is toplevel only
while (window.parent && window.parent.window !== rootWindow) rootWindow = rootWindow.parent.window;
return rootWindow;
};

const columnToRowPositions = ({ position1, size1 }: FlameSpec['columnarData'], i: number) => ({
x0: position1[i * 2] ?? 0,
Expand Down Expand Up @@ -259,7 +254,7 @@ class FlameComponent extends React.Component<FlameProps> {

// browser pinch zoom handling
this.pinchZoomSetInterval = NaN;
this.pinchZoomScale = browserRootWindow().visualViewport?.scale ?? 1;
this.pinchZoomScale = 1; // we set this to the accurate value next
nickofthyme marked this conversation as resolved.
Show resolved Hide resolved
this.setupViewportScaleChangeListener();

// search
Expand Down Expand Up @@ -371,9 +366,12 @@ class FlameComponent extends React.Component<FlameProps> {
};

private setupViewportScaleChangeListener = () => {
// we might be in an iframe, and `visualViewport` is toplevel only
if (window !== window.parent) return; // Do not setup interval if inside iframe

window.clearInterval(this.pinchZoomSetInterval);
this.pinchZoomSetInterval = window.setInterval(() => {
const pinchZoomScale = browserRootWindow().visualViewport?.scale ?? 1; // not cached, to avoid holding a reference to a `window` object
const pinchZoomScale = window.visualViewport?.scale ?? 1;
if (pinchZoomScale !== this.pinchZoomScale) {
this.pinchZoomScale = pinchZoomScale;
this.setState({});
Expand Down