ImagingDataCommons · igoroctaviano · Feb 20, 2026 · Feb 20, 2026
diff --git a/craco.config.js b/craco.config.js
@@ -11,6 +11,7 @@ module.exports = {
             modifyVars: {
               '@layout-header-background': '#007ea3',
               '@primary-color': '#007ea3',
+              '@collapse-header-bg': '#e0f2f7',
               '@processing-color': '#8cb8c6',
               '@success-color': '#3f9c35',
               '@warning-color': '#eeaf30',

diff --git a/src/App.dark.less b/src/App.dark.less
@@ -28,8 +28,41 @@
   overflow: visible;
 }
 
+.ant-collapse-header {
+  font-weight: 600;
+  border-top: 1px solid rgba(0, 126, 163, 0.5);
+  border-bottom: 1px solid rgba(0, 126, 163, 0.5);
+}
+
+.ant-collapse-item + .ant-collapse-item .ant-collapse-header {
+  margin-top: -1px;
+}
+
 .ant-menu-submenu-title {
   font-size: 'medium';
+  background-color: rgba(0, 126, 163, 0.25);
+  font-weight: 600;
+  border-top: 1px solid rgba(0, 126, 163, 0.5);
+  border-bottom: 1px solid rgba(0, 126, 163, 0.5);
+}
+
+.ant-menu-submenu + .ant-menu-submenu .ant-menu-submenu-title {
+  margin-top: -1px;
+}
+
+/* First section in sidebar has no top border */
+.ant-layout-sider .ant-menu-inline > .ant-menu-submenu:first-child > .ant-menu-submenu-title {
+  border-top: none;
+}
+
+/* Settings drawer header border - matches section dividers (darker for contrast) */
+.slim-settings-drawer .ant-drawer-header {
+  border-bottom: 1px solid rgba(0, 126, 163, 0.5);
+}
+
+/* Remove gap between submenu header and list content */
+.ant-layout-sider .ant-list-item {
+  padding: 0;
 }
 
 .ol-overviewmap-box {

diff --git a/src/App.light.less b/src/App.light.less
@@ -28,8 +28,41 @@
   overflow: visible;
 }
 
+.ant-collapse-header {
+  font-weight: 600;
+  border-top: 1px solid rgba(0, 126, 163, 0.3);
+  border-bottom: 1px solid rgba(0, 126, 163, 0.3);
+}
+
+.ant-collapse-item + .ant-collapse-item .ant-collapse-header {
+  margin-top: -1px;
+}
+
 .ant-menu-submenu-title {
   font-size: 'medium';
+  background-color: #e0f2f7;
+  font-weight: 600;
+  border-top: 1px solid rgba(0, 126, 163, 0.3);
+  border-bottom: 1px solid rgba(0, 126, 163, 0.3);
+}
+
+.ant-menu-submenu + .ant-menu-submenu .ant-menu-submenu-title {
+  margin-top: -1px;
+}
+
+/* First section in sidebar has no top border */
+.ant-layout-sider .ant-menu-inline > .ant-menu-submenu:first-child > .ant-menu-submenu-title {
+  border-top: none;
+}
+
+/* Settings drawer header border - matches section dividers */
+.slim-settings-drawer .ant-drawer-header {
+  border-bottom: 1px solid rgba(0, 126, 163, 0.3);
+}
+
+/* Remove gap between submenu header and list content */
+.ant-layout-sider .ant-list-item {
+  padding: 0;
 }
 
 .ol-overviewmap-box {

diff --git a/src/App.tsx b/src/App.tsx
@@ -20,6 +20,7 @@ import Header from './components/Header'
 import InfoPage from './components/InfoPage'
 import MemoryFooter from './components/MemoryFooter'
 import Worklist from './components/Worklist'
+import { SettingsProvider } from './contexts/SettingsContext'
 import { ValidationProvider } from './contexts/ValidationContext'
 import DicomWebManager from './DicomWebManager'
 import { StorageClasses } from './data/uids'
@@ -558,57 +559,61 @@ class App extends React.Component<AppProps, AppState> {
             <Route
               path="/studies/:studyInstanceUID/*"
               element={
-                <Layout style={layoutStyle}>
-                  <Header
-                    app={appInfo}
-                    user={this.state.user}
-                    showWorklistButton={enableWorklist}
-                    onServerSelection={this.handleServerSelection}
-                    onUserLogout={isLogoutPossible ? onLogout : undefined}
-                    showServerSelectionButton={enableServerSelection}
-                    clients={this.state.clients}
-                    defaultClients={this.state.defaultClients}
-                  />
-                  <Layout.Content style={layoutContentStyle}>
-                    <ParametrizedCaseViewer
-                      clients={this.state.clients}
-                      user={this.state.user}
-                      config={this.props.config}
+                <SettingsProvider>
+                  <Layout style={layoutStyle}>
+                    <Header
                       app={appInfo}
+                      user={this.state.user}
+                      showWorklistButton={enableWorklist}
+                      onServerSelection={this.handleServerSelection}
+                      onUserLogout={isLogoutPossible ? onLogout : undefined}
+                      showServerSelectionButton={enableServerSelection}
+                      clients={this.state.clients}
+                      defaultClients={this.state.defaultClients}
                     />
-                  </Layout.Content>
-                  {enableMemoryMonitoring && (
-                    <MemoryFooter enabled={enableMemoryMonitoring} />
-                  )}
-                </Layout>
+                    <Layout.Content style={layoutContentStyle}>
+                      <ParametrizedCaseViewer
+                        clients={this.state.clients}
+                        user={this.state.user}
+                        config={this.props.config}
+                        app={appInfo}
+                      />
+                    </Layout.Content>
+                    {enableMemoryMonitoring && (
+                      <MemoryFooter enabled={enableMemoryMonitoring} />
+                    )}
+                  </Layout>
+                </SettingsProvider>
               }
             />
             <Route
               path="/projects/:project/locations/:location/datasets/:dataset/dicomStores/:dicomStore/study/:studyInstanceUID/*"
               element={
-                <Layout style={layoutStyle}>
-                  <Header
-                    app={appInfo}
-                    user={this.state.user}
-                    showWorklistButton={enableWorklist}
-                    onServerSelection={this.handleServerSelection}
-                    onUserLogout={isLogoutPossible ? onLogout : undefined}
-                    showServerSelectionButton={enableServerSelection}
-                    clients={this.state.clients}
-                    defaultClients={this.state.defaultClients}
-                  />
-                  <Layout.Content style={layoutContentStyle}>
-                    <ParametrizedCaseViewer
-                      clients={this.state.clients}
-                      user={this.state.user}
-                      config={this.props.config}
+                <SettingsProvider>
+                  <Layout style={layoutStyle}>
+                    <Header
                       app={appInfo}
+                      user={this.state.user}
+                      showWorklistButton={enableWorklist}
+                      onServerSelection={this.handleServerSelection}
+                      onUserLogout={isLogoutPossible ? onLogout : undefined}
+                      showServerSelectionButton={enableServerSelection}
+                      clients={this.state.clients}
+                      defaultClients={this.state.defaultClients}
                     />
-                  </Layout.Content>
-                  {enableMemoryMonitoring && (
-                    <MemoryFooter enabled={enableMemoryMonitoring} />
-                  )}
-                </Layout>
+                    <Layout.Content style={layoutContentStyle}>
+                      <ParametrizedCaseViewer
+                        clients={this.state.clients}
+                        user={this.state.user}
+                        config={this.props.config}
+                        app={appInfo}
+                      />
+                    </Layout.Content>
+                    {enableMemoryMonitoring && (
+                      <MemoryFooter enabled={enableMemoryMonitoring} />
+                    )}
+                  </Layout>
+                </SettingsProvider>
               }
             />
             <Route

diff --git a/src/components/ClusteringSettings.tsx b/src/components/ClusteringSettings.tsx
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,9 +1,9 @@
 import {
   ApiOutlined,
+  BugOutlined,
   CheckOutlined,
   FileSearchOutlined,
   InfoOutlined,
-  SettingOutlined,
   StopOutlined,
   UnorderedListOutlined,
   UserOutlined,
@@ -29,6 +29,7 @@ import { NavLink } from 'react-router-dom'
 import { v4 as uuidv4 } from 'uuid'
 import appPackageJson from '../../package.json'
 import type { User } from '../auth'
+import { SettingsButton } from '../contexts/SettingsContext'
 import type DicomWebManager from '../DicomWebManager'
 import NotificationMiddleware, {
   NotificationMiddlewareEvents,
@@ -602,7 +603,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
           style={{ zIndex: 1001 }}
         >
           <Button
-            icon={SettingOutlined}
+            icon={BugOutlined}
             tooltip="Debug info"
             onClick={this.handleDebugButtonClick}
           />
@@ -683,9 +684,10 @@ class Header extends React.Component<HeaderProps, HeaderState> {
               <Space direction="horizontal">
                 {worklistButton}
                 {infoButton}
-                {debugButton}
                 {dicomTagBrowserButton}
                 {serverSelectionButton}
+                {debugButton}
+                <SettingsButton />
                 {user}
               </Space>
             </Col>

diff --git a/src/components/SlideItem.tsx b/src/components/SlideItem.tsx
@@ -1,4 +1,4 @@
-import { Menu } from 'antd'
+import { Menu, Typography } from 'antd'
 // skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
 import React from 'react'
@@ -146,6 +146,21 @@ class SlideItem extends React.Component<SlideItemProps, SlideItemState> {
             )}
             <ValidationWarning slide={this.props.slide} />
           </div>
+          {this.props.slide.seriesDescription !== undefined &&
+          this.props.slide.seriesDescription !== null &&
+          this.props.slide.seriesDescription !== '' ? (
+            <Typography.Text
+              type="secondary"
+              style={{
+                display: 'block',
+                marginTop: 4,
+                fontSize: '0.75rem',
+                lineHeight: 1.2,
+              }}
+            >
+              {this.props.slide.seriesDescription}
+            </Typography.Text>
+          ) : null}
         </Description>
       </Menu.Item>
     )