fix: improve slide-list overview preview sizing (#399) by igoroctaviano · Pull Request #400 · ImagingDataCommons/slim

igoroctaviano · 2026-07-15T17:19:18Z

Summary

Fixes slide-list preview sizing when THUMBNAIL or large OVERVIEW images use the full-slide TotalPixelMatrix extent but the rendered PNG is much smaller (Heuristic for sizing overview needs improvements #399).
Adds computeOverviewPreviewResizeFactor to derive OverviewImageViewer.resizeFactor from the 100px preview tile and matrix dimensions (replaces the removed fixed 0.3 thumbnail heuristic from fix: Thumbnail fallback and multiple thumbnail using dicom tag browser #340).
Defers viewer mount until the preview container is laid out, then keeps the map sized via ResizeObserver.
Adds client-side overview mini-map clamping (clampOverviewMapInViewport) for the volume viewer until the published DMV bundle includes the same sizing fix.
Fixes mangled series UIDs from nested antd Menus and replaces nested slide Menu with a plain list.

Root cause

With resizeFactor: 1, DMV builds an extent from the full matrix while retrieveInstanceRendered returns a small overview/thumbnail PNG — the preview shows a tiny image or fails to fit the tile.

Test plan

Unit tests for computeOverviewPreviewResizeFactor, recoverSeriesInstanceUID, and fitOverviewMapSize
tsc --noEmit and biome check
Slide list: https://andrey-slim-test.web.app/studies/2.25.243635437123528859218332833285423941731/series/1.3.6.1.4.1.5962.99.1.3205152386.1735416465.1639587724930.2.0
Slide list: https://andrey-slim-test.web.app/studies/2.25.68707238542984918932186646266538960593/series/1.3.6.1.4.1.5962.99.1.1861242316.418152757.1638243814860.2.0
Confirm OVERVIEW and THUMBNAIL fallbacks both fill the preview tile
Volume viewer: tall/wide slides — overview mini-map usable and aligned with toolbar

Closes #399

Compute OverviewImageViewer resizeFactor from preview tile dimensions and TotalPixelMatrix size so THUMBNAIL/OVERVIEW extent matches the rendered PNG. Restores fit after #340 removed the fixed 0.3 thumbnail heuristic (#399).

deepsource-io · 2026-07-15T17:20:15Z

DeepSource Code Review

We reviewed changes in 43c2852...ef2edc4 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade	Security Reliability Complexity Hygiene

Code Review Summary

Analyzer	Status	Updated (UTC)	Details
JavaScript		Aug 10, 2026 8:50p.m.	Review ↗

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

github-actions · 2026-07-15T17:22:05Z

Visit the preview URL for this PR (updated for commit ef2edc4):

https://idc-external-006--pr400-fix-399-overview-siz-6kevhuiw.web.app

_{(expires Mon, 17 Aug 2026 20:52:53 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 88aacecd98ba54d2f9c8d201a9444e43d1ad8307}

Google Healthcare rejects fractional viewport=w,h (HTTP 400). Derive resizeFactor so cols*factor and rows*factor are integers; fall back to factor 1 when no integer downscale fits the slide-list tile.

fedorov · 2026-08-05T17:42:34Z

@igoroctaviano this is how the second slide looks like right now... is this expected?

igoroctaviano · 2026-08-05T17:55:45Z

@igoroctaviano this is how the second slide looks like right now... is this expected?

Yes, if it's a wide and low case. The heuristic is using the slide dimensions to make it easier to see the overview while navigating. I can set it to be fixed height and width if that makes sense too.

fedorov · 2026-08-06T16:36:56Z

I admit I do not know what is a good heuristic, but when overview has the same size as the actual image, I am not sure the heuristic is good. Why is wide-and-low taking entire width, but narrow-and-tall does not take the full height?

But after all, it is not a big deal - I think this is better than what we had before, so let's merge and refine later.

Prefer a shared viewport fraction on both axes and cap growth at 60% so wide slides no longer spill to full width while tall slides get matching height treatment.

igoroctaviano · 2026-08-06T22:38:47Z

Addressed the wide vs tall asymmetry in the overview mini-map heuristic (also mirrored in ImagingDataCommons/dicom-microscopy-viewer#266):

Prefer the same viewport fraction on both axes (45%)
Grow only toward a hard max of 60% so wide slides no longer spill to nearly full width
Apply the same min-side floor and max-fraction cap for tall slides

Wide and tall extremes now get matching treatment instead of width-first expansion.

Retarget DMV's locked overview resolution in place after Slim resizes the mini-map, re-pinning the slide center so OverviewMap resetExtent cannot crop the view when zooming.

Put MemoryFooter in an AppShell column below the viewer, size the mini-map with an OL-style fixed box, and keep overlay left/bottom insets aligned without the collapse control adding layout chrome.

Mirror antd Badge layout (line-height: 1 + translate(50%, -50%)) so AppShell overflow no longer crops pills pinned by the header line-height.

sonarqubecloud · 2026-08-10T20:51:22Z

Quality Gate passed

Issues
20 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.3% Duplication on New Code

See analysis details on SonarQube Cloud

* fix: improve overview map sizing and integer viewport dimensions Size the volume overview mini-map with a minimum height and preferred width so wide/thin slides stay usable, and round non-volume viewport pixel sizes to integers for DICOMweb servers that reject fractional viewport values. Companion to ImagingDataCommons/slim#400. * fix: size overview mini-map symmetrically for wide and tall slides Match Slim's preferred/max fraction heuristic so wide slides stay under 60% viewport width and tall slides grow with the same height treatment. * fix: lock overview resolution to post-layout map size Derive the fixed overview view resolution from OpenLayers' size after updateSize so border/padding cannot crop the full-slide mini-map. * fix: tighten overview overlay insets and collapse button layout Size the mini-map with an OL-style fixed box, pin equal 8px control insets, and keep the collapse control overlaid when expanded so it cannot add dead space under the map after toggle.

fix: use integer DICOMweb viewport sizes for overview previews

fa881bf

Google Healthcare rejects fractional viewport=w,h (HTTP 400). Derive resizeFactor so cols*factor and rows*factor are integers; fall back to factor 1 when no integer downscale fits the slide-list tile.

igoroctaviano changed the title ~~fix: improve slide-list overview preview sizing (#399)~~ WIP fix: improve slide-list overview preview sizing (#399) Jul 15, 2026

Fix overview map

b7a3717

igoroctaviano changed the title ~~WIP fix: improve slide-list overview preview sizing (#399)~~ fix: improve slide-list overview preview sizing (#399) Jul 15, 2026

igoroctaviano mentioned this pull request Jul 15, 2026

fix: improve overview map sizing and integer viewport dimensions ImagingDataCommons/dicom-microscopy-viewer#266

Merged

3 tasks

igoroctaviano added 2 commits August 6, 2026 19:36

Merge branch 'master' into fix/399-overview-sizing

c243048

fix: size overview mini-map symmetrically for wide and tall slides

2681183

Prefer a shared viewport fraction on both axes and cap growth at 60% so wide slides no longer spill to full width while tall slides get matching height treatment.

igoroctaviano added 5 commits August 7, 2026 12:13

Merge branch 'master' into fix/399-overview-sizing

cacb56b

Merge branch 'master' into fix/399-overview-sizing

d0735fb

fix: keep full-slide overview after clamp and zoom

c430fe9

Retarget DMV's locked overview resolution in place after Slim resizes the mini-map, re-pinning the slide center so OverviewMap resetExtent cannot crop the view when zooming.

fix: equalize overview overlay insets and keep map above memory footer

d2c6f5f

Put MemoryFooter in an AppShell column below the viewer, size the mini-map with an OL-style fixed box, and keep overlay left/bottom insets aligned without the collapse control adding layout chrome.

fix: keep debug count badges on the bug button corner

ef2edc4

Mirror antd Badge layout (line-height: 1 + translate(50%, -50%)) so AppShell overflow no longer crops pills pinned by the header line-height.

igoroctaviano merged commit 15ed58b into master Aug 11, 2026
7 of 8 checks passed

Navigation Menu

Uh oh!

fix: improve slide-list overview preview sizing (#399) - #400

fix: improve slide-list overview preview sizing (#399)#400
igoroctaviano merged 10 commits into
masterfrom
fix/399-overview-sizing

igoroctaviano commented Jul 15, 2026 •

edited

Loading

Uh oh!

deepsource-io Bot commented Jul 15, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 15, 2026 •

edited

Loading

Uh oh!

fedorov commented Aug 5, 2026

Uh oh!

igoroctaviano commented Aug 5, 2026

Uh oh!

fedorov commented Aug 6, 2026

Uh oh!

igoroctaviano commented Aug 6, 2026

Uh oh!

sonarqubecloud Bot commented Aug 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

igoroctaviano commented Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Root cause

Related

Test plan

Uh oh!

deepsource-io Bot commented Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

DeepSource Code Review

PR Report Card

Code Review Summary

Uh oh!

github-actions Bot commented Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fedorov commented Aug 5, 2026

Uh oh!

igoroctaviano commented Aug 5, 2026

Uh oh!

fedorov commented Aug 6, 2026

Uh oh!

igoroctaviano commented Aug 6, 2026

Uh oh!

sonarqubecloud Bot commented Aug 10, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

igoroctaviano commented Jul 15, 2026 •

edited

Loading

deepsource-io Bot commented Jul 15, 2026 •

edited

Loading

github-actions Bot commented Jul 15, 2026 •

edited

Loading