From 09362031eea25308ac4caa47169cf93927ef6b9a Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Fri, 28 Aug 2026 13:59:47 -0300
Subject: [PATCH 01/14] feat: add click-to-zoom for segments

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
---
 src/components/SegmentItem.tsx           | 22 ++++++++++++++++++++--
 src/components/SegmentList.tsx           |  2 ++
 src/components/SlideViewer.tsx           |  5 +++++
 types/dicom-microscopy-viewer/index.d.ts |  4 +++-
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/SegmentItem.tsx b/src/components/SegmentItem.tsx
index 81331f86..31d0c26a 100644
--- a/src/components/SegmentItem.tsx
+++ b/src/components/SegmentItem.tsx
@@ -34,6 +34,7 @@ interface SegmentItemProps {
       color?: number[]
     }
   }) => void
+  onClick: (segmentUID: string) => void
 }
 
 interface SegmentItemState {
@@ -111,6 +112,10 @@ class SegmentItem extends React.Component<SegmentItemProps, SegmentItemState> {
     }
   }
 
+  handleClick = (): void => {
+    this.props.onClick(this.props.segment.uid)
+  }
+
   render(): React.ReactNode {
     const attributes: Array<{ name: string; value: string }> = [
       {
@@ -175,6 +180,7 @@ class SegmentItem extends React.Component<SegmentItemProps, SegmentItemState> {
       metadata,
       onVisibilityChange,
       onStyleChange,
+      onClick,
       ...otherProps
     } = this.props
     return (
@@ -223,14 +229,26 @@ class SegmentItem extends React.Component<SegmentItemProps, SegmentItemState> {
               )}
             </Space>
           </div>
-          <div style={{ flex: 1 }}>
+          <button
+            type="button"
+            style={{
+              flex: 1,
+              cursor: 'pointer',
+              background: 'none',
+              border: 'none',
+              padding: 0,
+              textAlign: 'left',
+            }}
+            onClick={this.handleClick}
+            title="Click to zoom to segment"
+          >
             <Description
               header={this.props.segment.label}
               attributes={attributes}
               selectable
               hasLongValues
             />
-          </div>
+          </button>
         </Space>
       </Menu.Item>
     )
diff --git a/src/components/SegmentList.tsx b/src/components/SegmentList.tsx
index 212723f9..a1e55820 100644
--- a/src/components/SegmentList.tsx
+++ b/src/components/SegmentList.tsx
@@ -35,6 +35,7 @@ interface SegmentListProps {
       color?: number[]
     }
   }) => void
+  onSegmentClick: (segmentUID: string) => void
 }
 
 /**
@@ -75,6 +76,7 @@ class SegmentList extends React.Component<
           defaultStyle={this.props.defaultSegmentStyles[uid]}
           onVisibilityChange={this.props.onSegmentVisibilityChange}
           onStyleChange={this.props.onSegmentStyleChange}
+          onClick={this.props.onSegmentClick}
         />
       )
     })
diff --git a/src/components/SlideViewer.tsx b/src/components/SlideViewer.tsx
index a95b4b87..1077453f 100644
--- a/src/components/SlideViewer.tsx
+++ b/src/components/SlideViewer.tsx
@@ -3102,6 +3102,10 @@ class SlideViewer extends React.Component<SlideViewerProps, SlideViewerState> {
     }
   }
 
+  handleSegmentClick = (segmentUID: string): void => {
+    this.volumeViewer.zoomToSegment(segmentUID)
+  }
+
   /**
    * Handle change of segment style.
    */
@@ -4288,6 +4292,7 @@ class SlideViewer extends React.Component<SlideViewerProps, SlideViewerState> {
               visibleSegmentUIDs={this.state.visibleSegmentUIDs}
               onSegmentVisibilityChange={this.handleSegmentVisibilityChange}
               onSegmentStyleChange={this.handleSegmentStyleChange}
+              onSegmentClick={this.handleSegmentClick}
             />
           )}
         </Menu.SubMenu>
diff --git a/types/dicom-microscopy-viewer/index.d.ts b/types/dicom-microscopy-viewer/index.d.ts
index 540d47c9..be81f8ec 100644
--- a/types/dicom-microscopy-viewer/index.d.ts
+++ b/types/dicom-microscopy-viewer/index.d.ts
@@ -156,9 +156,11 @@ declare module 'dicom-microscopy-viewer' {
         segmentUID: string,
         styleOptions?: {
           opacity?: number
-        }
+        },
+        shouldZoomIn?: boolean
       ): void
       hideSegment (segmentUID: string): void
+      zoomToSegment (segmentUID: string): void
       setSegmentStyle (
         segmentUID: string,
         styleOptions: {

From a492b947473677b21203582c1a9cbc68414fde03 Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Fri, 28 Aug 2026 14:24:01 -0300
Subject: [PATCH 02/14] feat: add 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.

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.
---
 src/App.tsx               |  35 +++++++-
 src/components/Header.tsx | 166 +++++++++++++++++++++++++++++++++++++-
 2 files changed, 195 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7131bdc1..a031e5d9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,7 +11,11 @@ import {
 } from 'react-router-dom'
 
 import type AppConfig from './AppConfig'
-import type { ErrorMessageSettings, ServerSettings } from './AppConfig'
+import type {
+  ErrorMessageSettings,
+  OidcSettings,
+  ServerSettings,
+} from './AppConfig'
 import type { AuthManager, User } from './auth'
 import OidcManager from './auth/OidcManager'
 import AppLoading from './components/AppLoading'
@@ -200,7 +204,7 @@ interface AppState {
 }
 
 class App extends React.Component<AppProps, AppState> {
-  private readonly auth?: AuthManager
+  private auth?: AuthManager
   private reauthInProgress = false
   private unsubscribeAuthorization?: () => void
 
@@ -537,9 +541,34 @@ class App extends React.Component<AppProps, AppState> {
     }
   }
 
-  handleServerSelection = async ({ url }: { url: string }): Promise<void> => {
+  handleServerSelection = async ({
+    url,
+    oidc,
+  }: {
+    url: string
+    oidc?: OidcSettings
+  }): Promise<void> => {
     const trimmedUrl = url.trim()
     console.info('select DICOMweb server: ', trimmedUrl)
+
+    /** Handle OIDC configuration change */
+    if (oidc != null) {
+      console.info('applying custom OIDC configuration')
+      const { protocol, host } = window.location
+      const baseUri = `${protocol}//${host}`
+      const appUri = joinUrl(this.props.config.path, baseUri)
+      this.auth = new OidcManager(appUri, oidc)
+      /** Re-subscribe to authorization changes */
+      if (this.unsubscribeAuthorization != null) {
+        this.unsubscribeAuthorization()
+      }
+      this.unsubscribeAuthorization = this.auth.onAuthorizationChange(
+        (authorization) => {
+          this.applyAuthorization(authorization)
+        },
+      )
+    }
+
     if (
       trimmedUrl === '' ||
       window.localStorage.getItem('slim_server_selection_mode') === 'default'
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 719dfb42..f7216169 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -3,6 +3,7 @@ import {
   BugOutlined,
   CheckOutlined,
   FileSearchOutlined,
+  InfoCircleOutlined,
   InfoOutlined,
   StopOutlined,
   UnorderedListOutlined,
@@ -27,6 +28,7 @@ import React from 'react'
 import { NavLink } from 'react-router-dom'
 import { v4 as uuidv4 } from 'uuid'
 import appPackageJson from '../../package.json'
+import type { OidcSettings } from '../AppConfig'
 import type { User } from '../auth'
 import { SettingsButton } from '../contexts/SettingsContext'
 import type DicomWebManager from '../DicomWebManager'
@@ -44,6 +46,8 @@ import { normalizeServerUrl } from '../utils/url'
 import Button from './Button'
 import DicomTagBrowser from './DicomTagBrowser/DicomTagBrowser'
 
+const { TextArea } = Input
+
 const aboutModalCopyTooltips: [React.ReactNode, React.ReactNode] = [
   'Copy hash',
   'Copied!',
@@ -178,7 +182,13 @@ interface HeaderProps extends RouteComponentProps {
   clients?: { [key: string]: DicomWebManager }
   defaultClients?: { [key: string]: DicomWebManager }
   showWorklistButton: boolean
-  onServerSelection: ({ url }: { url: string }) => void
+  onServerSelection: ({
+    url,
+    oidc,
+  }: {
+    url: string
+    oidc?: OidcSettings
+  }) => void
   onUserLogout?: () => void
   showServerSelectionButton: boolean
 }
@@ -198,6 +208,10 @@ interface HeaderState {
   /** False only when both custom logo.svg and favicon.ico fail. */
   showLogo: boolean
   logoUrl: string
+  /** Optional OIDC config JSON string entered by user */
+  oidcConfigInput: string
+  /** Whether the OIDC config JSON is valid */
+  isOidcConfigValid: boolean
 }
 
 /**
@@ -213,6 +227,9 @@ class Header extends React.Component<HeaderProps, HeaderState> {
       'slim_server_selection_mode',
     ) as 'default' | 'custom' | null
 
+    const cachedOidcConfig =
+      window.localStorage.getItem('slim_oidc_config') ?? ''
+
     this.state = {
       errorObj: [],
       errorCategory: [],
@@ -229,6 +246,8 @@ class Header extends React.Component<HeaderProps, HeaderState> {
           : 'default',
       showLogo: true,
       logoUrl: `${process.env.PUBLIC_URL}/logo.svg`,
+      oidcConfigInput: cachedOidcConfig,
+      isOidcConfigValid: this.isValidOidcConfig(cachedOidcConfig),
     }
 
     const onErrorHandler = ({
@@ -341,6 +360,75 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     return isGcpDicomStorePath(pathNorm)
   }
 
+  /**
+   * Validates OIDC config JSON string.
+   * Returns true if empty (optional) or if valid JSON with required fields.
+   */
+  isValidOidcConfig = (jsonStr: string | null | undefined): boolean => {
+    if (jsonStr == null || jsonStr.trim() === '') {
+      return true
+    }
+    try {
+      const parsed = JSON.parse(jsonStr.trim())
+      return (
+        typeof parsed === 'object' &&
+        parsed !== null &&
+        typeof parsed.authority === 'string' &&
+        parsed.authority.length > 0 &&
+        typeof parsed.clientId === 'string' &&
+        parsed.clientId.length > 0 &&
+        typeof parsed.scope === 'string' &&
+        parsed.scope.length > 0
+      )
+    } catch {
+      return false
+    }
+  }
+
+  /**
+   * Parses OIDC config JSON string into OidcSettings object.
+   * Returns undefined if empty or invalid.
+   */
+  parseOidcConfig = (
+    jsonStr: string | null | undefined,
+  ): OidcSettings | undefined => {
+    if (jsonStr == null || jsonStr.trim() === '') {
+      return undefined
+    }
+    try {
+      const parsed = JSON.parse(jsonStr.trim())
+      if (
+        typeof parsed === 'object' &&
+        parsed !== null &&
+        typeof parsed.authority === 'string' &&
+        typeof parsed.clientId === 'string' &&
+        typeof parsed.scope === 'string'
+      ) {
+        return {
+          authority: parsed.authority,
+          clientId: parsed.clientId,
+          scope: parsed.scope,
+          grantType: parsed.grantType,
+          authorizationEndpoint: parsed.authorizationEndpoint,
+          endSessionEndpoint: parsed.endSessionEndpoint,
+        }
+      }
+    } catch {
+      /** Invalid JSON */
+    }
+    return undefined
+  }
+
+  handleOidcConfigInput = (
+    event: React.ChangeEvent<HTMLTextAreaElement>,
+  ): void => {
+    const value = event.currentTarget.value
+    this.setState({
+      oidcConfigInput: value,
+      isOidcConfigValid: this.isValidOidcConfig(value),
+    })
+  }
+
   static handleUserMenuButtonClick(e: React.SyntheticEvent): void {
     e.preventDefault()
   }
@@ -633,6 +721,8 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     const cachedServerUrl = window.localStorage
       .getItem('slim_selected_server')
       ?.trim()
+    const cachedOidcConfig =
+      window.localStorage.getItem('slim_oidc_config') ?? ''
     this.setState({
       serverSelectionMode:
         cachedServerUrl !== null &&
@@ -643,6 +733,8 @@ class Header extends React.Component<HeaderProps, HeaderState> {
       selectedServerUrl: cachedServerUrl ?? undefined,
       isServerSelectionModalVisible: false,
       isServerSelectionDisabled: !this.isValidServerUrl(cachedServerUrl),
+      oidcConfigInput: cachedOidcConfig,
+      isOidcConfigValid: this.isValidOidcConfig(cachedOidcConfig),
     })
   }
 
@@ -657,8 +749,19 @@ class Header extends React.Component<HeaderProps, HeaderState> {
       this.state.serverSelectionMode,
     )
 
+    /** Save OIDC config to localStorage */
+    const oidcConfig = this.parseOidcConfig(this.state.oidcConfigInput)
+    if (oidcConfig != null) {
+      window.localStorage.setItem(
+        'slim_oidc_config',
+        this.state.oidcConfigInput.trim(),
+      )
+    } else {
+      window.localStorage.removeItem('slim_oidc_config')
+    }
+
     if (this.state.serverSelectionMode === 'default') {
-      this.props.onServerSelection({ url: '' })
+      this.props.onServerSelection({ url: '', oidc: oidcConfig })
       this.setState({
         isServerSelectionModalVisible: false,
         isServerSelectionDisabled: false,
@@ -672,7 +775,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     if (url !== null && url !== undefined && url !== '') {
       if (this.isValidServerUrl(url)) {
         resolvedUrl = normalizeServerUrl(url)
-        this.props.onServerSelection({ url: resolvedUrl })
+        this.props.onServerSelection({ url: resolvedUrl, oidc: oidcConfig })
         closeModal = true
       }
     }
@@ -875,6 +978,63 @@ class Header extends React.Component<HeaderProps, HeaderState> {
               />
             </Tooltip>
           )}
+
+          <div style={{ marginTop: '16px' }}>
+            <Typography.Text>
+              OIDC Configuration (optional)
+              <Tooltip
+                title={
+                  <div
+                    style={{
+                      whiteSpace: 'pre-wrap',
+                      fontFamily: 'monospace',
+                      fontSize: '11px',
+                    }}
+                  >
+                    {`Example JSON format:
+{
+  "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"
+}`}
+                  </div>
+                }
+                overlayStyle={{ maxWidth: '450px' }}
+              >
+                <InfoCircleOutlined
+                  style={{
+                    marginLeft: '8px',
+                    color: 'rgba(0,0,0,.45)',
+                    cursor: 'help',
+                  }}
+                />
+              </Tooltip>
+            </Typography.Text>
+            <TextArea
+              placeholder='{"authority": "https://...", "clientId": "...", "scope": "..."}'
+              value={this.state.oidcConfigInput}
+              onChange={this.handleOidcConfigInput}
+              rows={4}
+              style={{
+                marginTop: '8px',
+                fontFamily: 'monospace',
+                fontSize: '12px',
+                borderColor:
+                  this.state.oidcConfigInput.trim() !== '' &&
+                  !this.state.isOidcConfigValid
+                    ? '#ff4d4f'
+                    : undefined,
+              }}
+            />
+            {this.state.oidcConfigInput.trim() !== '' &&
+              !this.state.isOidcConfigValid && (
+                <Typography.Text type="danger" style={{ fontSize: '12px' }}>
+                  Invalid JSON format. Required fields: authority, clientId,
+                  scope
+                </Typography.Text>
+              )}
+          </div>
         </Modal>
       </>
     )

From f7b36204e30db016f75b3b216a7cf4d188251ce0 Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Fri, 28 Aug 2026 14:32:31 -0300
Subject: [PATCH 03/14] fix: support JS object notation and persist OIDC config
 on reload

- 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
---
 src/App.tsx               | 60 +++++++++++++++++++++++++++++++++++++--
 src/components/Header.tsx | 23 +++++++++++----
 2 files changed, 75 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a031e5d9..d79a211d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -755,16 +755,72 @@ class App extends React.Component<AppProps, AppState> {
     }
   }
 
+  /**
+   * Parses cached OIDC config from localStorage.
+   * Handles both JSON and JavaScript object notation (unquoted keys).
+   */
+  private parseCachedOidcConfig(): OidcSettings | undefined {
+    const cachedOidcConfig = window.localStorage.getItem('slim_oidc_config')
+    if (cachedOidcConfig == null || cachedOidcConfig.trim() === '') {
+      return undefined
+    }
+    try {
+      /** Convert JS object notation to JSON (quote unquoted keys) */
+      const normalized = cachedOidcConfig
+        .trim()
+        .replace(/([{,]\s*)([a-zA-Z_][a-zA-Z0-9_]*)(\s*:)/g, '$1"$2"$3')
+      const parsed = JSON.parse(normalized)
+      if (
+        typeof parsed === 'object' &&
+        parsed !== null &&
+        typeof parsed.authority === 'string' &&
+        typeof parsed.clientId === 'string' &&
+        typeof parsed.scope === 'string'
+      ) {
+        return {
+          authority: parsed.authority,
+          clientId: parsed.clientId,
+          scope: parsed.scope,
+          grantType: parsed.grantType,
+          authorizationEndpoint: parsed.authorizationEndpoint,
+          endSessionEndpoint: parsed.endSessionEndpoint,
+        }
+      }
+    } catch {
+      /** Invalid format, ignore cached config */
+    }
+    return undefined
+  }
+
   componentDidMount(): void {
-    // Restore cached server selection if it exists
+    /** Restore cached OIDC config and server selection if they exist */
+    const cachedOidcConfig = this.parseCachedOidcConfig()
     const cachedServerUrl = window.localStorage.getItem('slim_selected_server')
+    const cachedMode = window.localStorage.getItem('slim_server_selection_mode')
+
+    /**
+     * Apply cached OIDC config if present (even for default server mode).
+     * This allows users to configure OIDC once and have it persist.
+     */
+    if (cachedOidcConfig != null) {
+      console.info('restoring cached OIDC configuration')
+      const { protocol, host } = window.location
+      const baseUri = `${protocol}//${host}`
+      const appUri = joinUrl(this.props.config.path, baseUri)
+      this.auth = new OidcManager(appUri, cachedOidcConfig)
+    }
+
     if (
+      cachedMode === 'custom' &&
       cachedServerUrl !== null &&
       cachedServerUrl !== undefined &&
       cachedServerUrl !== ''
     ) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      this.handleServerSelection({ url: cachedServerUrl })
+      this.handleServerSelection({
+        url: cachedServerUrl,
+        oidc: cachedOidcConfig,
+      })
     }
 
     if (this.auth != null) {
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index f7216169..95633d2e 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -361,15 +361,25 @@ class Header extends React.Component<HeaderProps, HeaderState> {
   }
 
   /**
-   * Validates OIDC config JSON string.
-   * Returns true if empty (optional) or if valid JSON with required fields.
+   * Converts JavaScript object notation to valid JSON by quoting unquoted keys.
+   * Handles cases like { authority: "value" } -> { "authority": "value" }
+   */
+  normalizeToJson = (str: string): string => {
+    /** Match unquoted keys followed by colon */
+    return str.replace(/([{,]\s*)([a-zA-Z_][a-zA-Z0-9_]*)(\s*:)/g, '$1"$2"$3')
+  }
+
+  /**
+   * Validates OIDC config string (JSON or JS object notation).
+   * Returns true if empty (optional) or if valid with required fields.
    */
   isValidOidcConfig = (jsonStr: string | null | undefined): boolean => {
     if (jsonStr == null || jsonStr.trim() === '') {
       return true
     }
     try {
-      const parsed = JSON.parse(jsonStr.trim())
+      const normalized = this.normalizeToJson(jsonStr.trim())
+      const parsed = JSON.parse(normalized)
       return (
         typeof parsed === 'object' &&
         parsed !== null &&
@@ -386,7 +396,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
   }
 
   /**
-   * Parses OIDC config JSON string into OidcSettings object.
+   * Parses OIDC config string (JSON or JS object notation) into OidcSettings.
    * Returns undefined if empty or invalid.
    */
   parseOidcConfig = (
@@ -396,7 +406,8 @@ class Header extends React.Component<HeaderProps, HeaderState> {
       return undefined
     }
     try {
-      const parsed = JSON.parse(jsonStr.trim())
+      const normalized = this.normalizeToJson(jsonStr.trim())
+      const parsed = JSON.parse(normalized)
       if (
         typeof parsed === 'object' &&
         parsed !== null &&
@@ -414,7 +425,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
         }
       }
     } catch {
-      /** Invalid JSON */
+      /** Invalid format */
     }
     return undefined
   }

From 67aed330484339a572fd1c76266229e1f3f5e252 Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Sun, 30 Aug 2026 08:11:15 -0300
Subject: [PATCH 04/14] fix: address DeepSource issues

- 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)
---
 src/App.tsx                    | 4 ++--
 src/components/Header.tsx      | 6 +++---
 src/components/SegmentItem.tsx | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d79a211d..8243d1b3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -759,7 +759,7 @@ class App extends React.Component<AppProps, AppState> {
    * Parses cached OIDC config from localStorage.
    * Handles both JSON and JavaScript object notation (unquoted keys).
    */
-  private parseCachedOidcConfig(): OidcSettings | undefined {
+  private static parseCachedOidcConfig(): OidcSettings | undefined {
     const cachedOidcConfig = window.localStorage.getItem('slim_oidc_config')
     if (cachedOidcConfig == null || cachedOidcConfig.trim() === '') {
       return undefined
@@ -794,7 +794,7 @@ class App extends React.Component<AppProps, AppState> {
 
   componentDidMount(): void {
     /** Restore cached OIDC config and server selection if they exist */
-    const cachedOidcConfig = this.parseCachedOidcConfig()
+    const cachedOidcConfig = App.parseCachedOidcConfig()
     const cachedServerUrl = window.localStorage.getItem('slim_selected_server')
     const cachedMode = window.localStorage.getItem('slim_server_selection_mode')
 
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 95633d2e..82c9e9ac 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -364,7 +364,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
    * Converts JavaScript object notation to valid JSON by quoting unquoted keys.
    * Handles cases like { authority: "value" } -> { "authority": "value" }
    */
-  normalizeToJson = (str: string): string => {
+  static normalizeToJson(str: string): string {
     /** Match unquoted keys followed by colon */
     return str.replace(/([{,]\s*)([a-zA-Z_][a-zA-Z0-9_]*)(\s*:)/g, '$1"$2"$3')
   }
@@ -378,7 +378,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
       return true
     }
     try {
-      const normalized = this.normalizeToJson(jsonStr.trim())
+      const normalized = Header.normalizeToJson(jsonStr.trim())
       const parsed = JSON.parse(normalized)
       return (
         typeof parsed === 'object' &&
@@ -406,7 +406,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
       return undefined
     }
     try {
-      const normalized = this.normalizeToJson(jsonStr.trim())
+      const normalized = Header.normalizeToJson(jsonStr.trim())
       const parsed = JSON.parse(normalized)
       if (
         typeof parsed === 'object' &&
diff --git a/src/components/SegmentItem.tsx b/src/components/SegmentItem.tsx
index 31d0c26a..c56fdecd 100644
--- a/src/components/SegmentItem.tsx
+++ b/src/components/SegmentItem.tsx
@@ -180,7 +180,7 @@ class SegmentItem extends React.Component<SegmentItemProps, SegmentItemState> {
       metadata,
       onVisibilityChange,
       onStyleChange,
-      onClick,
+      onClick: _onClick,
       ...otherProps
     } = this.props
     return (

From 9184724f70e894347c2099c8d6afce79472049c3 Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Sun, 30 Aug 2026 09:46:11 -0300
Subject: [PATCH 05/14] fix: address DeepSource issues and pnpm 11 build script
 error

- Make isValidOidcConfig and parseOidcConfig static in Header.tsx (JS-0105)
- Add @parcel/watcher to onlyBuiltDependencies in .npmrc for pnpm 11 compatibility
---
 .npmrc                    |  4 ++++
 src/components/Header.tsx | 14 +++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/.npmrc b/.npmrc
index 4c608920..7af46f4e 100644
--- a/.npmrc
+++ b/.npmrc
@@ -3,3 +3,7 @@ shamefully-hoist=true
 
 # react-scripts 5 peer dependency ranges are outdated.
 strict-peer-dependencies=false
+
+# pnpm 11+ requires explicit approval for build scripts from dependencies.
+# Allow @parcel/watcher which is needed by the build process.
+onlyBuiltDependencies[]=@parcel/watcher
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 82c9e9ac..65d3b022 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -247,7 +247,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
       showLogo: true,
       logoUrl: `${process.env.PUBLIC_URL}/logo.svg`,
       oidcConfigInput: cachedOidcConfig,
-      isOidcConfigValid: this.isValidOidcConfig(cachedOidcConfig),
+      isOidcConfigValid: Header.isValidOidcConfig(cachedOidcConfig),
     }
 
     const onErrorHandler = ({
@@ -373,7 +373,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
    * Validates OIDC config string (JSON or JS object notation).
    * Returns true if empty (optional) or if valid with required fields.
    */
-  isValidOidcConfig = (jsonStr: string | null | undefined): boolean => {
+  static isValidOidcConfig(jsonStr: string | null | undefined): boolean {
     if (jsonStr == null || jsonStr.trim() === '') {
       return true
     }
@@ -399,9 +399,9 @@ class Header extends React.Component<HeaderProps, HeaderState> {
    * Parses OIDC config string (JSON or JS object notation) into OidcSettings.
    * Returns undefined if empty or invalid.
    */
-  parseOidcConfig = (
+  static parseOidcConfig(
     jsonStr: string | null | undefined,
-  ): OidcSettings | undefined => {
+  ): OidcSettings | undefined {
     if (jsonStr == null || jsonStr.trim() === '') {
       return undefined
     }
@@ -436,7 +436,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     const value = event.currentTarget.value
     this.setState({
       oidcConfigInput: value,
-      isOidcConfigValid: this.isValidOidcConfig(value),
+      isOidcConfigValid: Header.isValidOidcConfig(value),
     })
   }
 
@@ -745,7 +745,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
       isServerSelectionModalVisible: false,
       isServerSelectionDisabled: !this.isValidServerUrl(cachedServerUrl),
       oidcConfigInput: cachedOidcConfig,
-      isOidcConfigValid: this.isValidOidcConfig(cachedOidcConfig),
+      isOidcConfigValid: Header.isValidOidcConfig(cachedOidcConfig),
     })
   }
 
@@ -761,7 +761,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     )
 
     /** Save OIDC config to localStorage */
-    const oidcConfig = this.parseOidcConfig(this.state.oidcConfigInput)
+    const oidcConfig = Header.parseOidcConfig(this.state.oidcConfigInput)
     if (oidcConfig != null) {
       window.localStorage.setItem(
         'slim_oidc_config',

From b78203e9b0ff3456bc7e4d483d9acd9571252c72 Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Sun, 30 Aug 2026 21:47:01 -0300
Subject: [PATCH 06/14] fix: add pnpm build approval config and document
 runtime OIDC

---
 README.md    | 21 +++++++++++++++++++++
 package.json |  3 +++
 2 files changed, 24 insertions(+)

diff --git a/README.md b/README.md
index b11f5634..9103fb2e 100644
--- a/README.md
+++ b/README.md
@@ -162,6 +162,27 @@ Custom selections are stored in `localStorage`, re-apply the current Bearer toke
 
 See [docs/CONFIGURATION.md](docs/CONFIGURATION.md#runtime-server-selection-header-button) for details.
 
+#### Runtime OIDC Configuration
+
+When `enableServerSelection` is enabled, users can also configure OIDC authentication settings at runtime through the server selection modal. This allows connecting to servers that require different authentication providers without redeploying the application.
+
+To use a custom OIDC provider, enter a JSON configuration in the OIDC config field:
+
+```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"
+}
+```
+
+Required fields: `authority`, `clientId`, `scope`
+
+Optional fields: `grantType`, `authorizationEndpoint`, `endSessionEndpoint`
+
+The OIDC configuration is cached in localStorage. If not provided, the deployment's default OIDC settings are used.
+
 ### Handling mixed content and HTTPS
 
 When deploying Slim with HTTPS, you may encounter mixed content scenarios where your PACS/VNA server returns HTTP URLs in its responses. This commonly occurs when:
diff --git a/package.json b/package.json
index 8ba01350..41056e26 100644
--- a/package.json
+++ b/package.json
@@ -83,5 +83,8 @@
     "react-test-renderer": "^18.2.0",
     "sonarqube-scanner": "^4.3.0",
     "typescript": "^4.7.4"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": ["@parcel/watcher"]
   }
 }

From b11298ce8d32a405aa27d5f155849ecf07303c9e Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Sun, 30 Aug 2026 21:50:17 -0300
Subject: [PATCH 07/14] docs: add TILED_SPARSE segmentation and zoom-to-segment
 to README

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9103fb2e..740f2274 100644
--- a/README.md
+++ b/README.md
@@ -90,11 +90,13 @@ _Slim_ also supports interactive visualization of image annotations and analysis
 
 **Raster graphics:**
 
-- [DICOM Segmentation](https://dicom.nema.org/medical/dicom/current/output/chtml/part03/sect_A.51.html) instances that contain binary or fractional segmentation masks
+- [DICOM Segmentation](https://dicom.nema.org/medical/dicom/current/output/chtml/part03/sect_A.51.html) instances that contain binary or fractional segmentation masks, including TILED_SPARSE segmentations at non-standard resolution levels (e.g., segmentations created from rescaled image patches that don't match any pyramid level)
 - [DICOM Parametric Map](https://dicom.nema.org/medical/dicom/current/output/chtml/part03/sect_A.75.html) instances that contain saliency maps, attention maps, class activation maps, and similar derived images
 
 Fractional segmentations and parametric maps show an in-viewport color legend when at least one overlay is visible. The legend is collapsible and its per-item visibility toggles stay in sync with the switches in the right-hand panel.
 
+Clicking on a segment label in the right-hand panel zooms the viewport to that segment's bounding box, providing quick navigation to regions of interest.
+
 | | DICOM IOD |
 | :-: | :-------- |
 | <img src="docs/screenshots/IDC_CPTAC_C3N-01016-22_segmentation.png" alt="IDC CPTAC Segmentation" width="350"> | Segmentation |

From 9ea74812539d2cc48d4fa8012d8f4ca53393962d Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Mon, 31 Aug 2026 07:03:12 -0300
Subject: [PATCH 08/14] fix: add @parcel/watcher to allowBuilds in
 pnpm-workspace.yaml

---
 package.json        | 3 ---
 pnpm-workspace.yaml | 1 +
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 41056e26..8ba01350 100644
--- a/package.json
+++ b/package.json
@@ -83,8 +83,5 @@
     "react-test-renderer": "^18.2.0",
     "sonarqube-scanner": "^4.3.0",
     "typescript": "^4.7.4"
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": ["@parcel/watcher"]
   }
 }
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 3ead71e1..318f3d3a 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,6 +2,7 @@ shamefullyHoist: true
 strictPeerDependencies: false
 
 allowBuilds:
+  '@parcel/watcher': true
   core-js: true
   core-js-pure: true
   dicom-microscopy-viewer: true

From 39311322cf3471aee6d7f1e60420eb0a1697bf46 Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Mon, 31 Aug 2026 07:29:43 -0300
Subject: [PATCH 09/14] fix: disable strict-dep-builds to fix CI

---
 .npmrc | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.npmrc b/.npmrc
index 7af46f4e..7efa432e 100644
--- a/.npmrc
+++ b/.npmrc
@@ -5,5 +5,5 @@ shamefully-hoist=true
 strict-peer-dependencies=false
 
 # pnpm 11+ requires explicit approval for build scripts from dependencies.
-# Allow @parcel/watcher which is needed by the build process.
-onlyBuiltDependencies[]=@parcel/watcher
+# Disable strict dependency build checking to avoid CI failures.
+strict-dep-builds=false

From c3aa1d9a1d7a8afda9c074a955bcd133cdd970d1 Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Mon, 31 Aug 2026 07:57:15 -0300
Subject: [PATCH 10/14] fix: skip pnpm deps status check in Firebase deploy
 workflow

---
 .github/workflows/deploy-to-firebase.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/deploy-to-firebase.yml b/.github/workflows/deploy-to-firebase.yml
index c89c0760..eb267bca 100644
--- a/.github/workflows/deploy-to-firebase.yml
+++ b/.github/workflows/deploy-to-firebase.yml
@@ -30,6 +30,9 @@ jobs:
       )
     runs-on: ubuntu-latest
     timeout-minutes: 30
+    env:
+      # Skip pnpm's dependency status check which fails on @parcel/watcher build scripts
+      PNPM_SKIP_DEPS_STATUS_CHECK: "true"
     steps:
       - name: Checkout repository
         uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1

From fc8d8ceeeff596228e018eb5723436400e2433d2 Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Mon, 31 Aug 2026 11:16:06 -0300
Subject: [PATCH 11/14] fix: set strict-dep-builds false via pnpm config in
 workflow

---
 .github/workflows/deploy-to-firebase.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/deploy-to-firebase.yml b/.github/workflows/deploy-to-firebase.yml
index eb267bca..4dd0d191 100644
--- a/.github/workflows/deploy-to-firebase.yml
+++ b/.github/workflows/deploy-to-firebase.yml
@@ -30,9 +30,6 @@ jobs:
       )
     runs-on: ubuntu-latest
     timeout-minutes: 30
-    env:
-      # Skip pnpm's dependency status check which fails on @parcel/watcher build scripts
-      PNPM_SKIP_DEPS_STATUS_CHECK: "true"
     steps:
       - name: Checkout repository
         uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
@@ -46,6 +43,9 @@ jobs:
           node-version: 24
           cache: pnpm
 
+      - name: Approve pnpm builds
+        run: pnpm config set strict-dep-builds false --location project
+
       - name: Resolve DMV branch for preview
         id: dmv
         if: github.event_name == 'pull_request'

From 70fcdd8c28310dddde052255c46f7373b5d9f3bb Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Mon, 31 Aug 2026 12:48:10 -0300
Subject: [PATCH 12/14] fix: set strict-dep-builds false globally in workflow

---
 .github/workflows/deploy-to-firebase.yml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/deploy-to-firebase.yml b/.github/workflows/deploy-to-firebase.yml
index 4dd0d191..af0519f3 100644
--- a/.github/workflows/deploy-to-firebase.yml
+++ b/.github/workflows/deploy-to-firebase.yml
@@ -43,8 +43,10 @@ jobs:
           node-version: 24
           cache: pnpm
 
-      - name: Approve pnpm builds
-        run: pnpm config set strict-dep-builds false --location project
+      - name: Disable strict dep builds check globally
+        run: |
+          pnpm config set strict-dep-builds false --global
+          echo "strict-dep-builds=false" >> ~/.npmrc
 
       - name: Resolve DMV branch for preview
         id: dmv

From 5a554f492d10fac0ed84297bed1f0518a33854b0 Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Thu, 10 Sep 2026 15:43:49 -0300
Subject: [PATCH 13/14] feat: badge and disable toggles for absent segments

Show an Absent tag for segments with no frame data (segment.isAbsent),
disable their visibility switch and zoom click, and skip them in
show-all / auto-load so empty Segment Sequence entries are not confusing.
---
 src/components/SegmentItem.tsx           | 56 ++++++++++++++++++------
 src/components/SegmentList.tsx           |  3 ++
 src/components/SlideViewer.tsx           | 19 ++++++++
 types/dicom-microscopy-viewer/index.d.ts |  3 ++
 4 files changed, 67 insertions(+), 14 deletions(-)

diff --git a/src/components/SegmentItem.tsx b/src/components/SegmentItem.tsx
index c56fdecd..be2d845c 100644
--- a/src/components/SegmentItem.tsx
+++ b/src/components/SegmentItem.tsx
@@ -1,5 +1,5 @@
 import { SettingOutlined } from '@ant-design/icons'
-import { Button, Divider, Menu, Popover, Space, Switch } from 'antd'
+import { Button, Divider, Menu, Popover, Space, Switch, Tag } from 'antd'
 // skipcq: JS-C1003
 import type * as dmv from 'dicom-microscopy-viewer'
 import React from 'react'
@@ -53,7 +53,7 @@ class SegmentItem extends React.Component<SegmentItemProps, SegmentItemState> {
     super(props)
 
     /** Initialize with default color if not provided */
-    const defaultColor = this.props.defaultStyle.color ?? [255, 255, 0] // Default yellow
+    const defaultColor = this.props.defaultStyle.color ?? [255, 255, 0]
     this.state = {
       isVisible: this.props.isVisible,
       currentStyle: {
@@ -67,6 +67,9 @@ class SegmentItem extends React.Component<SegmentItemProps, SegmentItemState> {
     checked: boolean,
     _event: React.MouseEvent<HTMLButtonElement>,
   ): void => {
+    if (this.props.segment.isAbsent) {
+      return
+    }
     this.props.onVisibilityChange({
       segmentUID: this.props.segment.uid,
       isVisible: checked,
@@ -113,10 +116,14 @@ class SegmentItem extends React.Component<SegmentItemProps, SegmentItemState> {
   }
 
   handleClick = (): void => {
+    if (this.props.segment.isAbsent) {
+      return
+    }
     this.props.onClick(this.props.segment.uid)
   }
 
   render(): React.ReactNode {
+    const isAbsent = this.props.segment.isAbsent === true
     const attributes: Array<{ name: string; value: string }> = [
       {
         name: 'Property Type',
@@ -142,7 +149,6 @@ class SegmentItem extends React.Component<SegmentItemProps, SegmentItemState> {
       | undefined
     const segmentationType = getSegmentationType(segmentationMetadata)
 
-    // Add SegmentationType from metadata if available
     if (segmentationMetadata?.SegmentationType !== undefined) {
       attributes.push({
         name: 'Segmentation Type',
@@ -195,9 +201,15 @@ class SegmentItem extends React.Component<SegmentItemProps, SegmentItemState> {
               <Switch
                 size="small"
                 onChange={this.handleVisibilityChange}
-                checked={this.props.isVisible}
+                checked={!isAbsent && this.props.isVisible}
+                disabled={isAbsent}
                 checkedChildren={<FaEye />}
                 unCheckedChildren={<FaEyeSlash />}
+                title={
+                  isAbsent
+                    ? 'Segment has no pixel data'
+                    : 'Toggle segment visibility'
+                }
               />
               <Popover
                 placement="left"
@@ -209,10 +221,10 @@ class SegmentItem extends React.Component<SegmentItemProps, SegmentItemState> {
                   type="primary"
                   shape="circle"
                   icon={<SettingOutlined />}
+                  disabled={isAbsent}
                 />
               </Popover>
-              {/* Color indicator - only show for non-fractional segmentation */}
-              {segmentationType !== 'FRACTIONAL' && (
+              {segmentationType !== 'FRACTIONAL' && !isAbsent && (
                 <div
                   style={{
                     width: '20px',
@@ -233,21 +245,37 @@ class SegmentItem extends React.Component<SegmentItemProps, SegmentItemState> {
             type="button"
             style={{
               flex: 1,
-              cursor: 'pointer',
+              cursor: isAbsent ? 'default' : 'pointer',
               background: 'none',
               border: 'none',
               padding: 0,
               textAlign: 'left',
+              opacity: isAbsent ? 0.75 : 1,
             }}
             onClick={this.handleClick}
-            title="Click to zoom to segment"
+            disabled={isAbsent}
+            title={
+              isAbsent
+                ? 'Segment is absent (no pixel data found)'
+                : 'Click to zoom to segment'
+            }
           >
-            <Description
-              header={this.props.segment.label}
-              attributes={attributes}
-              selectable
-              hasLongValues
-            />
+            <Space align="start" size={8}>
+              <Description
+                header={this.props.segment.label}
+                attributes={attributes}
+                selectable={!isAbsent}
+                hasLongValues
+              />
+              {isAbsent && (
+                <Tag
+                  color="default"
+                  title="Listed in Segment Sequence but no frames contain this segment"
+                >
+                  Absent
+                </Tag>
+              )}
+            </Space>
           </button>
         </Space>
       </Menu.Item>
diff --git a/src/components/SegmentList.tsx b/src/components/SegmentList.tsx
index a1e55820..1dd34830 100644
--- a/src/components/SegmentList.tsx
+++ b/src/components/SegmentList.tsx
@@ -48,6 +48,9 @@ class SegmentList extends React.Component<
   handleVisibilityChange = (checked: boolean): void => {
     if (checked) {
       this.props.segments.forEach((segment) => {
+        if (segment.isAbsent) {
+          return
+        }
         this.props.onSegmentVisibilityChange({
           segmentUID: segment.uid,
           isVisible: checked,
diff --git a/src/components/SlideViewer.tsx b/src/components/SlideViewer.tsx
index 1077453f..dfd8cab2 100644
--- a/src/components/SlideViewer.tsx
+++ b/src/components/SlideViewer.tsx
@@ -841,6 +841,12 @@ class SlideViewer extends React.Component<SlideViewerProps, SlideViewerState> {
        */
       const shownSegmentUIDs: string[] = []
       matchingSegments.forEach((segment) => {
+        if (segment.isAbsent) {
+          logger.debug(
+            `auto-load Segmentation: skipping absent segment "${segment.uid}"`,
+          )
+          return
+        }
         try {
           this.volumeViewer.showSegment(segment.uid)
           shownSegmentUIDs.push(segment.uid)
@@ -3082,6 +3088,13 @@ class SlideViewer extends React.Component<SlideViewerProps, SlideViewerState> {
     segmentUID: string
     isVisible: boolean
   }): void => {
+    const segment = this.volumeViewer
+      .getAllSegments()
+      .find((item) => item.uid === segmentUID)
+    if (segment?.isAbsent) {
+      logger.debug(`ignore visibility change for absent segment ${segmentUID}`)
+      return
+    }
     logger.log(`change visibility of segment ${segmentUID}`)
     if (isVisible) {
       logger.log(`show segment ${segmentUID}`)
@@ -3103,6 +3116,12 @@ class SlideViewer extends React.Component<SlideViewerProps, SlideViewerState> {
   }
 
   handleSegmentClick = (segmentUID: string): void => {
+    const segment = this.volumeViewer
+      .getAllSegments()
+      .find((item) => item.uid === segmentUID)
+    if (segment?.isAbsent) {
+      return
+    }
     this.volumeViewer.zoomToSegment(segmentUID)
   }
 
diff --git a/types/dicom-microscopy-viewer/index.d.ts b/types/dicom-microscopy-viewer/index.d.ts
index be81f8ec..a52415a4 100644
--- a/types/dicom-microscopy-viewer/index.d.ts
+++ b/types/dicom-microscopy-viewer/index.d.ts
@@ -414,6 +414,7 @@ declare module 'dicom-microscopy-viewer' {
       studyInstanceUID: string
       seriesInstanceUID: string
       sopInstanceUIDs: string[]
+      isAbsent?: boolean
     }
 
     export class Segment {
@@ -428,6 +429,8 @@ declare module 'dicom-microscopy-viewer' {
       get studyInstanceUID (): string
       get seriesInstanceUID (): string
       get sopInstanceUIDs (): string[]
+      /** True when Segment Sequence lists the segment but no frames exist. */
+      get isAbsent (): boolean
     }
 
   }

From 003e69566dd0f9f8cb8fdaf33ed3b160da6b7e6e Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Thu, 10 Sep 2026 17:23:43 -0300
Subject: [PATCH 14/14] fix: place Absent badge below segment title

Keep the tag inside the card header so it no longer sits beside the
title and overflows the list item.
---
 src/components/Description.tsx |  2 +-
 src/components/SegmentItem.tsx | 40 ++++++++++++++++++++--------------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/Description.tsx b/src/components/Description.tsx
index d07d13b2..99ccbe22 100644
--- a/src/components/Description.tsx
+++ b/src/components/Description.tsx
@@ -13,7 +13,7 @@ export interface AttributeGroup {
 }
 
 interface DescriptionProps {
-  header?: string
+  header?: React.ReactNode
   icon?: React.ComponentType<Record<string, never>>
   attributes: Attribute[]
   selectable?: boolean
diff --git a/src/components/SegmentItem.tsx b/src/components/SegmentItem.tsx
index be2d845c..1812631a 100644
--- a/src/components/SegmentItem.tsx
+++ b/src/components/SegmentItem.tsx
@@ -245,6 +245,7 @@ class SegmentItem extends React.Component<SegmentItemProps, SegmentItemState> {
             type="button"
             style={{
               flex: 1,
+              minWidth: 0,
               cursor: isAbsent ? 'default' : 'pointer',
               background: 'none',
               border: 'none',
@@ -260,22 +261,29 @@ class SegmentItem extends React.Component<SegmentItemProps, SegmentItemState> {
                 : 'Click to zoom to segment'
             }
           >
-            <Space align="start" size={8}>
-              <Description
-                header={this.props.segment.label}
-                attributes={attributes}
-                selectable={!isAbsent}
-                hasLongValues
-              />
-              {isAbsent && (
-                <Tag
-                  color="default"
-                  title="Listed in Segment Sequence but no frames contain this segment"
-                >
-                  Absent
-                </Tag>
-              )}
-            </Space>
+            <Description
+              header={
+                isAbsent ? (
+                  <div
+                    style={{ display: 'flex', flexDirection: 'column', gap: 4 }}
+                  >
+                    <span>{this.props.segment.label}</span>
+                    <Tag
+                      color="default"
+                      style={{ margin: 0, alignSelf: 'flex-start' }}
+                      title="Listed in Segment Sequence but no frames contain this segment"
+                    >
+                      Absent
+                    </Tag>
+                  </div>
+                ) : (
+                  this.props.segment.label
+                )
+              }
+              attributes={attributes}
+              selectable={!isAbsent}
+              hasLongValues
+            />
           </button>
         </Space>
       </Menu.Item>