feat: add click-to-zoom for segments by igoroctaviano · Pull Request #429 · ImagingDataCommons/slim

igoroctaviano · 2026-08-28T17:02:07Z

dmv-branch: fix/tiled-sparse-segmentation-alignment

Summary

Related to #371

This PR adds two features:

1. Click-to-zoom for segments

Add click-to-zoom functionality for segments, matching the existing behavior of bulk annotations.

Add onClick prop to SegmentItem component
Add onSegmentClick prop to SegmentList component
Add handleSegmentClick method in SlideViewer that calls zoomToSegment on the viewer
Update dicom-microscopy-viewer type definitions with zoomToSegment method

User Experience:

Clicking on a segment's label (name/description area) now zooms to that segment's bounding box
This is consistent with how bulk annotations work
The visibility toggle remains separate from zoom (no auto-zoom on toggle)
The clickable area shows a pointer cursor and has a tooltip "Click to zoom to segment"

2. Optional OIDC configuration in server selection

Add the ability to configure OIDC settings through the server selection modal UI. This allows users to connect to servers that require different authentication providers without needing to redeploy the application.

Add OIDC config textarea input in server selection modal
Add info icon with tooltip showing example JSON format
Validate JSON format and required fields (authority, clientId, scope)
Cache OIDC config in localStorage
Recreate OidcManager when OIDC config is provided
Support optional fields: grantType, authorizationEndpoint, endSessionEndpoint

Example OIDC config JSON:

{
  "authority": "https://accounts.google.com",
  "clientId": "your-client-id.apps.googleusercontent.com",
  "scope": "email profile openid https://www.googleapis.com/auth/cloud-healthcare",
  "grantType": "implicit"
}

The OIDC configuration is optional - if not provided, the existing config from the deployment is used. If provided, it overwrites the current OIDC settings.

Accessibility

Uses semantic <button> element for the clickable segment area
Keyboard accessible (Enter/Space to activate)

Dependencies

This PR depends on the corresponding change in dicom-microscopy-viewer that adds the zoomToSegment method:

fix: correct TILED_SPARSE segmentation alignment and add zoom functionality dicom-microscopy-viewer#280

Test Plan

Tests pass
Click on segment label zooms to segment bounding box
Visibility toggle does not trigger zoom
Keyboard navigation works (Tab to focus, Enter to activate)
OIDC config input validates JSON format
Invalid OIDC config shows error message
Valid OIDC config is cached in localStorage
OIDC config overwrites existing settings when provided

Add onClick handler to SegmentItem to zoom to segment's bounding box when the segment label is clicked. This is consistent with the bulk annotation zoom behavior and provides a better UX than auto-zooming on visibility toggle. Changes: - Add onClick prop to SegmentItem and SegmentList components - Add handleSegmentClick method in SlideViewer - Update dicom-microscopy-viewer types with zoomToSegment method

deepsource-io · 2026-08-28T17:02:53Z

DeepSource Code Review

We reviewed changes in a2912f1...70fcdd8 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 31, 2026 3:48p.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-08-28T17:04:18Z

📦 Firebase Preview - Using Published DMV

This preview is using the published dicom-microscopy-viewer from package.json:


Version	`^0.48.24`

To link a DMV branch for testing (requires an open PR in DMV):

Add dmv-branch: <branch-name> to the PR description, OR

Use the same branch name in both repos (automatic matching)

github-actions · 2026-08-28T17:04:51Z

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

https://idc-external-006--pr429-feat-segment-click-t-apkhs5og.web.app

_{(expires Mon, 07 Sep 2026 15:52:14 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 88aacecd98ba54d2f9c8d201a9444e43d1ad8307}

github-actions · 2026-08-28T17:09:53Z

📦 Firebase Preview - Using Published DMV

This preview is using the published dicom-microscopy-viewer from package.json:


Version	`^0.48.24`

To link a DMV branch for testing (requires an open PR in DMV):

Add dmv-branch: <branch-name> to the PR description, OR

Use the same branch name in both repos (automatic matching)

github-actions · 2026-08-28T17:15:51Z

🔗 Firebase Preview - Linked to DMV Branch

This preview is using a linked dicom-microscopy-viewer branch:


Branch	`fix/tiled-sparse-segmentation-alignment`
Commit	`26494ad`
Source	`dmv-branch`

To change the DMV branch, edit dmv-branch: <branch-name> in the PR description.

Add the ability to configure OIDC settings through the server selection modal UI. This allows users to connect to servers that require different authentication providers without needing to redeploy the application. Changes: - Add OIDC config textarea input in server selection modal - Add info icon with tooltip showing example JSON format - Validate JSON format and required fields (authority, clientId, scope) - Cache OIDC config in localStorage - Recreate OidcManager when OIDC config is provided - Support optional fields: grantType, authorizationEndpoint, endSessionEndpoint The OIDC configuration is optional - if not provided, the existing config from the deployment is used. If provided, it overwrites the current OIDC settings.

github-actions · 2026-08-28T17:28:45Z

🔗 Firebase Preview - Linked to DMV Branch

This preview is using a linked dicom-microscopy-viewer branch:


Branch	`fix/tiled-sparse-segmentation-alignment`
Commit	`26494ad`
Source	`dmv-branch`

To change the DMV branch, edit dmv-branch: <branch-name> in the PR description.

- Add normalizeToJson helper to convert JS object notation to JSON (allows unquoted keys like { authority: "..." } instead of requiring { "authority": "..." }) - Load and apply cached OIDC config in componentDidMount - Create new OidcManager with cached config before signIn is called - This ensures OIDC auth flow is triggered on page reload when custom OIDC config is saved in localStorage

github-actions · 2026-08-28T17:35:53Z

🔗 Firebase Preview - Linked to DMV Branch

This preview is using a linked dicom-microscopy-viewer branch:


Branch	`fix/tiled-sparse-segmentation-alignment`
Commit	`26494ad`
Source	`dmv-branch`

To change the DMV branch, edit dmv-branch: <branch-name> in the PR description.

igoroctaviano · 2026-08-28T17:42:51Z

@CPBridge You can try this firebase preview to test the PanopTILs segmentations but since these require authentication you need to set up oidc in the server selector menu of slim and also allow the firebase preview url as valid origin in your oauth (gcp console). You can also test this locally if you link this slim branch with the dmv branch https://github.com/ImagingDataCommons/dicom-microscopy-viewer/tree/fix/tiled-sparse-segmentation-alignment.

- Make parseCachedOidcConfig static in App.tsx (JS-0105) - Make normalizeToJson static in Header.tsx (JS-0105) - Prefix unused onClick destructure with underscore in SegmentItem.tsx (JS-0356)

- Make isValidOidcConfig and parseOidcConfig static in Header.tsx (JS-0105) - Add @parcel/watcher to onlyBuiltDependencies in .npmrc for pnpm 11 compatibility

sonarqubecloud · 2026-08-31T15:49:40Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

github-actions · 2026-08-31T15:51:42Z

🔗 Firebase Preview - Linked to DMV Branch

This preview is using a linked dicom-microscopy-viewer branch:


Branch	`fix/tiled-sparse-segmentation-alignment`
Commit	`26494ad`
Source	`dmv-branch`

To change the DMV branch, edit dmv-branch: <branch-name> in the PR description.

CPBridge · 2026-09-04T18:33:28Z

@igoroctaviano @fedorov I tried this out with the demo files from panoptils and it looks good.

However, the click to zoom behavior isn't really working as I would expect. It pans to roughly the right place but is far more zoomed out than the size of the segment. For example this is the result of clicking on the segment show in yellow (nuclei that you can just about see slightly to the right of the center of this screenshot)

igoroctaviano · 2026-09-04T18:35:15Z

@igoroctaviano @fedorov I tried this out with the demo files from panoptils and it looks good.

However, the click to zoom behavior isn't really working as I would expect. It pans to roughly the right place but is far more zoomed out than the size of the segment. For example this is the result of clicking on the segment show in yellow (nuclei that you can just about see slightly to the right of the center of this screenshot)

I noticed that and forgot to fix. i'll take a look.

igoroctaviano · 2026-09-04T19:29:30Z

@CPBridge Thanks for testing! I've pushed a fix to address the zoom behavior.

The issue: For TILED_SPARSE segmentations with scattered features (like nuclei annotations spread across a large region), the segment's bounding box encompasses ALL frames for that segment. When clicking "zoom to segment", the viewer was fitting the entire bounding box - which could span a very large area, resulting in a very zoomed-out view.

The fix: The zoomToSegment method now checks if the segment's bounding box is larger than 1.5x the viewport at the target zoom level. If so, instead of fitting the entire bounding box, it zooms to the segment's max zoom level centered on the bounding box. This provides a more useful detail view for scattered segments while preserving the fit behavior for compact segments.

The fix is in the dmv branch: ImagingDataCommons/dicom-microscopy-viewer@947fd74

Could you please test again with the panoptils data to see if the zoom behavior is improved?

igoroctaviano · 2026-09-04T19:34:55Z

Update: I revised the fix after code review to avoid potential regressions.

The original 1.5x threshold was too aggressive and could affect normal segments (tumor regions, lesions) that span several tiles but should still be shown in full.

Revised approach: Changed the threshold to 10x viewport size. This ensures:

Normal segments (tumor regions, lesions spanning a few tiles): Still fit their bounding box as before
Scattered segments (nuclei spread across a large slide region): Zoom to max zoom centered on the segment

The 10x threshold is intentionally conservative to only catch truly scattered cases like the panoptils data while preserving expected behavior for standard segmentations.

Updated commit: ImagingDataCommons/dicom-microscopy-viewer@ca2cd23

igoroctaviano added 9 commits August 30, 2026 08:11

fix: address DeepSource issues

67aed33

- Make parseCachedOidcConfig static in App.tsx (JS-0105) - Make normalizeToJson static in Header.tsx (JS-0105) - Prefix unused onClick destructure with underscore in SegmentItem.tsx (JS-0356)

fix: address DeepSource issues and pnpm 11 build script error

9184724

- Make isValidOidcConfig and parseOidcConfig static in Header.tsx (JS-0105) - Add @parcel/watcher to onlyBuiltDependencies in .npmrc for pnpm 11 compatibility

fix: add pnpm build approval config and document runtime OIDC

b78203e

docs: add TILED_SPARSE segmentation and zoom-to-segment to README

b11298c

fix: add @parcel/watcher to allowBuilds in pnpm-workspace.yaml

9ea7481

fix: disable strict-dep-builds to fix CI

3931132

fix: skip pnpm deps status check in Firebase deploy workflow

c3aa1d9

fix: set strict-dep-builds false via pnpm config in workflow

fc8d8ce

fix: set strict-dep-builds false globally in workflow

70fcdd8

Uh oh!

Conversation

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

Uh oh!

Summary

1. Click-to-zoom for segments

2. Optional OIDC configuration in server selection

Accessibility

Dependencies

Test Plan

Uh oh!

deepsource-io Bot commented Aug 28, 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 Aug 28, 2026

📦 Firebase Preview - Using Published DMV

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented Aug 28, 2026

📦 Firebase Preview - Using Published DMV

Uh oh!

github-actions Bot commented Aug 28, 2026

🔗 Firebase Preview - Linked to DMV Branch

Uh oh!

github-actions Bot commented Aug 28, 2026

🔗 Firebase Preview - Linked to DMV Branch

Uh oh!

github-actions Bot commented Aug 28, 2026

🔗 Firebase Preview - Linked to DMV Branch

Uh oh!

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

Uh oh!

Uh oh!

sonarqubecloud Bot commented Aug 31, 2026

Quality Gate passed

Uh oh!

github-actions Bot commented Aug 31, 2026

🔗 Firebase Preview - Linked to DMV Branch

Uh oh!

CPBridge commented Sep 4, 2026

Uh oh!

igoroctaviano commented Sep 4, 2026

Uh oh!

igoroctaviano commented Sep 4, 2026

Uh oh!

igoroctaviano commented Sep 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

igoroctaviano commented Aug 28, 2026 •

edited

Loading

deepsource-io Bot commented Aug 28, 2026 •

edited

Loading

github-actions Bot commented Aug 28, 2026 •

edited

Loading

igoroctaviano commented Aug 28, 2026 •

edited

Loading