Skip to content

[Reporting] set zoom to 1 for long reports #248785

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

Merged
pmuellr merged 6 commits into from
Feb 3, 2026
Merged

[Reporting] set zoom to 1 for long reports #248785

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
69bb8c6
PreserveLayout to cap browser zoom and allow downscaling for large sc…
darnautov Dec 16, 2025
846899a
simplify zoom calculation; use 2 except for long reports
pmuellr Jan 13, 2026
12d67fd
fix jest test
pmuellr Jan 13, 2026
30975a6
update maximum image height validator
pmuellr Jan 13, 2026
f5f0f7e
Merge branch 'main' into 138812-no-zoom-for-long-reports
pmuellr Jan 29, 2026
9dbbd10
Merge branch 'main' into 138812-no-zoom-for-long-reports
pmuellr Feb 2, 2026
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
3 changes: 2 additions & 1 deletion x-pack/platform/plugins/private/reporting/server/routes/common/request_handler/validator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ const timezoneSchema = z.string().refine((val) => validateTimezone(val) === unde

const dimensionsSchema = z
.object({
height: z.number().positive().max(14400),
// 16000px height is the maximum screenshot Chrome can make
height: z.number().positive().max(16000),
Copy link
Copy Markdown
Contributor

@darnautov darnautov Jan 30, 2026

Choose a reason for hiding this comment

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

Shall we update the docs https://www.elastic.co/docs/explore-analyze/report-and-share by adding the "Certain limitations" sections similar to the CSV exports? cc @nastasha-solomon

Copy link
Copy Markdown
Member

@nastasha-solomon nastasha-solomon Jan 30, 2026

Choose a reason for hiding this comment

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

Yeah, good call. Are there width restrictions for screenshots too?

Copy link
Copy Markdown
Contributor Author

@pmuellr pmuellr Feb 2, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

It seems like it's hard or not practival to make "wide" dashboards in Kibana, that would have problems printing like this. So I'd say we don't have to worry about width issues.

width: z.number().positive().max(14400),
})
.strict();
Expand Down
1 change: 1 addition & 0 deletions x-pack/platform/plugins/shared/screenshotting/server/layouts/create_layout.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ describe('Create Layout', () => {
},
"useReportingBranding": true,
"width": 16,
"zoom": 2,
}
`);
});
Expand Down
15 changes: 15 additions & 0 deletions x-pack/platform/plugins/shared/screenshotting/server/layouts/preserve_layout.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,3 +58,18 @@ it('preserve layout allows customizable selectors', () => {
}
`);
});

it('preserve layout use a default zoom of 2', () => {
const testPreserveLayout = new PreserveLayout({ width: 1000, height: 2000 });
expect(testPreserveLayout.getBrowserZoom()).toBe(2);
expect(testPreserveLayout.getBrowserViewport().height).toBe(4000);
});

it('preserve layout caps browser zoom for extremely large screenshots to avoid Chromium artifacts', () => {
// A very tall layout would exceed Chrome limits at zoom=2.
const testPreserveLayout = new PreserveLayout({ width: 1727, height: 15000 });

// The zoom should be reduced so that output height stays <= 16000 pixels.
expect(testPreserveLayout.getBrowserZoom()).toBe(1);
expect(testPreserveLayout.getBrowserViewport().height).toBeLessThanOrEqual(16000);
});
18 changes: 12 additions & 6 deletions x-pack/platform/plugins/shared/screenshotting/server/layouts/preserve_layout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,18 @@ import type { Layout } from '.';
import { BaseLayout } from './base_layout';
import type { PageSizeParams, PdfImageSize } from './base_layout';

// We use a zoom of two to bump up the resolution of the screenshot a bit.
const ZOOM: number = 2;
// We default to a zoom of two to bump up the resolution of the screenshot a bit.
// However, Chromium/Skia has a height limit of 16384px, so for anything larger
// than 8000, we should use a zoom of one.
// https://github.com/puppeteer/puppeteer/issues/359
const DEFAULT_ZOOM = 2;
const MAX_HEIGHT_PX = 8000;

export class PreserveLayout extends BaseLayout implements Layout {
public readonly selectors: LayoutSelectorDictionary;
public readonly height: number;
public readonly width: number;
private readonly zoom: number;
private readonly scaledHeight: number;
private readonly scaledWidth: number;
private imageSize: PdfImageSize = { height: 0, width: 0 };
Expand All @@ -27,8 +32,9 @@ export class PreserveLayout extends BaseLayout implements Layout {
super('preserve_layout');
this.height = size.height;
this.width = size.width;
this.scaledHeight = size.height * ZOOM;
this.scaledWidth = size.width * ZOOM;
this.zoom = this.height <= MAX_HEIGHT_PX ? DEFAULT_ZOOM : 1;
this.scaledHeight = size.height * this.zoom;
this.scaledWidth = size.width * this.zoom;

this.selectors = { ...DEFAULT_SELECTORS, ...selectors };
}
Expand All @@ -46,14 +52,14 @@ export class PreserveLayout extends BaseLayout implements Layout {
}

public getBrowserZoom() {
return ZOOM;
return this.zoom;
}

public getViewport() {
return {
height: this.height,
width: this.width,
zoom: ZOOM,
zoom: this.zoom,
};
}

Expand Down
Loading