fix: ui adjustments

craco.config.js

@@ -72,6 +72,7 @@ module.exports = {
         'node_modules/(?!(ol|dicom-microscopy-viewer|dicomweb-client|@cornerstonejs|dicomicc|rbush|color-rgba|color-parse|color-name|color-space|quickselect|earcut)/)'
       ]
       config.moduleNameMapper = {
+        'dicom-microscopy-viewer': '<rootDir>/src/__mocks__/dicomMicroscopyViewerMock.js',
         '@cornerstonejs/codec-libjpeg-turbo-8bit/decodewasmjs': '@cornerstonejs/codec-libjpeg-turbo-8bit/dist/libjpegturbowasm_decode',
         '@cornerstonejs/codec-libjpeg-turbo-8bit/decodewasm': '@cornerstonejs/codec-libjpeg-turbo-8bit/dist/libjpegturbowasm_decode.wasm',
         '@cornerstonejs/codec-charls/decodewasmjs': '@cornerstonejs/codec-charls/dist/charlswasm_decode.js',

package.json

@@ -56,7 +56,7 @@
     "craco-less": "^2.0.0",
     "dcmjs": "^0.35.0",
     "detect-browser": "^5.2.1",
-    "dicom-microscopy-viewer": "^0.48.5",
+    "dicom-microscopy-viewer": "^0.48.7",
     "dicomweb-client": "^0.10.3",
     "gh-pages": "^5.0.0",
     "oidc-client": "^1.11.5",

src/App.tsx

@@ -297,17 +297,18 @@ class App extends React.Component<AppProps, AppState> {
   }
 
   handleServerSelection ({ url }: { url: string }): void {
-    console.info('select DICOMweb server: ', url)
-    if (url === '' || window.localStorage.getItem('slim_server_selection_mode') === 'default') {
+    const trimmedUrl = url.trim()
+    console.info('select DICOMweb server: ', trimmedUrl)
+    if (trimmedUrl === '' || window.localStorage.getItem('slim_server_selection_mode') === 'default') {
       this.setState({ clients: this.state.defaultClients })
       return
     }
-    window.localStorage.setItem('slim_selected_server', url)
+    window.localStorage.setItem('slim_selected_server', trimmedUrl)
     const tmpClient = new DicomWebManager({
       baseUri: '',
       settings: [{
         id: 'tmp',
-        url,
+        url: trimmedUrl,
         read: true,
         write: false
       }],

src/__mocks__/dicomMicroscopyViewerMock.js

@@ -0,0 +1,5 @@
+// Mock for dicom-microscopy-viewer to resolve Jest test issues
+module.exports = {
+  // Add any specific exports that might be needed by the tests
+  // This is a basic mock that should allow tests to run
+}

src/components/AnnotationGroupItem.tsx

@@ -648,6 +648,7 @@ AnnotationGroupItemState
       metadata,
       onVisibilityChange,
       onStyleChange,
+      onAnnotationGroupClick,
       ...otherProps
     } = this.props
     return (

src/components/Header.tsx

@@ -74,7 +74,7 @@ interface HeaderState {
 class Header extends React.Component<HeaderProps, HeaderState> {
   constructor (props: HeaderProps) {
     super(props)
-    const cachedServerUrl = window.localStorage.getItem('slim_selected_server')
+    const cachedServerUrl = window.localStorage.getItem('slim_selected_server')?.trim()
     const cachedMode = window.localStorage.getItem('slim_server_selection_mode') as 'default' | 'custom' | null
 
     this.state = {
@@ -132,8 +132,12 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     if (url == null || url === '') {
       return false
     }
+    const trimmedUrl = url.trim()
+    if (trimmedUrl === '') {
+      return false
+    }
     try {
-      const urlObj = new URL(url)
+      const urlObj = new URL(trimmedUrl)
       return urlObj.protocol.startsWith('http') && urlObj.pathname.length > 0
     } catch (TypeError) {
       return false
@@ -318,15 +322,15 @@ class Header extends React.Component<HeaderProps, HeaderState> {
   handleServerSelectionInput = (
     event: React.FormEvent<HTMLInputElement>
   ): void => {
-    const value = event.currentTarget.value
+    const value = event.currentTarget.value.trim()
     this.setState({
       selectedServerUrl: value,
       isServerSelectionDisabled: !this.isValidServerUrl(value)
     })
   }
 
   handleServerSelectionCancellation = (): void => {
-    const cachedServerUrl = window.localStorage.getItem('slim_selected_server')
+    const cachedServerUrl = window.localStorage.getItem('slim_selected_server')?.trim()
     this.setState({
       serverSelectionMode: cachedServerUrl !== null && cachedServerUrl !== undefined && cachedServerUrl !== '' ? 'custom' : 'default',
       selectedServerUrl: cachedServerUrl ?? undefined,
@@ -352,7 +356,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
       return
     }
 
-    const url = this.state.selectedServerUrl
+    const url = this.state.selectedServerUrl?.trim()
     let closeModal = false
     if (url != null && url !== '') {
       if (url.startsWith('http://') || url.startsWith('https://')) {
@@ -450,7 +454,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     const logoUrl = process.env.PUBLIC_URL + '/logo.svg'
 
     const selectedServerUrl = this.state.serverSelectionMode === 'custom'
-      ? this.state.selectedServerUrl
+      ? this.state.selectedServerUrl?.trim()
       : this.props.clients?.default?.baseURL ?? this.props.defaultClients?.default?.baseURL
 
     const urlInfo = selectedServerUrl != null && selectedServerUrl !== ''
@@ -519,7 +523,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
           </Radio.Group>
 
           {this.state.serverSelectionMode === 'custom' && (
-            <Tooltip title={this.state.selectedServerUrl}>
+            <Tooltip title={this.state.selectedServerUrl?.trim()}>
               <Input
                 placeholder='Enter base URL of DICOMweb Study Service'
                 value={this.state.selectedServerUrl}

src/components/SlideViewer.tsx

@@ -1747,10 +1747,10 @@ class SlideViewer extends React.Component<SlideViewerProps, SlideViewerState> {
    * @param value - Code value of the coded finding that got selected
    * @param option - Option that got selected
    */
-  handleAnnotationFindingSelection (
+  handleAnnotationFindingSelection = (
     value: string,
     _option: { label: React.ReactNode }
-  ): void {
+  ): void => {
     this.findingOptions.forEach(finding => {
       if (finding.CodeValue === value) {
         console.info(`selected finding "${finding.CodeMeaning}"`)

src/components/SlideViewer/utils/viewerUtils.ts

@@ -32,6 +32,7 @@ export const constructViewers = ({ clients, slide, preload }: {
       clientMapping: clients,
       metadata: slide.volumeImages,
       controls: ['overview', 'position'],
+      skipThumbnails: true,
       preload,
       errorInterceptor: (error: CustomError) => {
         NotificationMiddleware.onError(

types/dicom-microscopy-viewer/index.d.ts

@@ -14,6 +14,7 @@ import * as dcmjs from 'dcmjs'
       metadata: metadata.VLWholeSlideMicroscopyImage[]
       debug?: boolean
       preload?: boolean
+      skipThumbnails?: boolean
       controls: string[]
       annotationOptions?: object
       errorInterceptor?: (error: CustomError) => void

yarn.lock

@@ -4255,31 +4255,6 @@ color-name@^1.1.4, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-name@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-2.0.0.tgz#03ff6b1b5aec9bb3cf1ed82400c2790dfcd01d2d"
-  integrity sha512-SbtvAMWvASO5TE2QP07jHBMXKafgdZz8Vrsrn96fiL+O92/FN/PLARzUW5sKt013fjAprK2d2iCn2hk2Xb5oow==
-
-color-parse@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/color-parse/-/color-parse-2.0.2.tgz#37b46930424924060988edf25b24e6ffb4a1dc3f"
-  integrity sha512-eCtOz5w5ttWIUcaKLiktF+DxZO1R9KLNY/xhbV6CkhM7sR3GhVghmt6X6yOnzeaM24po+Z9/S1apbXMwA3Iepw==
-  dependencies:
-    color-name "^2.0.0"
-
-color-rgba@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/color-rgba/-/color-rgba-3.0.0.tgz#77090bdcdb2951c1735e20099ddd50401675375b"
-  integrity sha512-PPwZYkEY3M2THEHHV6Y95sGUie77S7X8v+h1r6LSAPF3/LL2xJ8duUXSrkic31Nzc4odPwHgUbiX/XuTYzQHQg==
-  dependencies:
-    color-parse "^2.0.0"
-    color-space "^2.0.0"
-
-color-space@^2.0.0, color-space@^2.0.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/color-space/-/color-space-2.3.1.tgz#1c13ca8ee017585807e65c76de3870cdc7c4fdfb"
-  integrity sha512-5DJdKYwoDji3ik/i0xSn+SiwXsfwr+1FEcCMUz2GS5speGCfGSbBMOLd84SDUBOuX8y4CvdFJmOBBJuC4wp7sQ==
-
 colord@^2.9.1:
   version "2.9.3"
   resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
@@ -4986,10 +4961,10 @@ detective@^5.2.1:
     defined "^1.0.0"
     minimist "^1.2.6"
 
-dicom-microscopy-viewer@^0.48.5:
-  version "0.48.5"
-  resolved "https://registry.yarnpkg.com/dicom-microscopy-viewer/-/dicom-microscopy-viewer-0.48.5.tgz#425d0af54583ca4b0c466860a21eef8b07328e65"
-  integrity sha512-geLgEe4uz74DUYoO5fMnbGeeBju1xmjTLG9QxPdcLsWi0HTWnRGfO+0vRARJeZzR7tH/sQUswoluujUumZLOyg==
+dicom-microscopy-viewer@^0.48.7:
+  version "0.48.7"
+  resolved "https://registry.yarnpkg.com/dicom-microscopy-viewer/-/dicom-microscopy-viewer-0.48.7.tgz#f40248f5e5bd0ac7c47235de3e079d5a96b6a9a9"
+  integrity sha512-Kmt6uQourv5HL29bnPWvy2hm49LL4fvYXhj2BTHtbCHdyLZ3LOWUxNWZR9NzuK7QoiHCA7ZPSFFnkdUfWLzF6g==
   dependencies:
     "@cornerstonejs/codec-charls" "^1.2.3"
     "@cornerstonejs/codec-libjpeg-turbo-8bit" "^1.2.2"
@@ -5001,7 +4976,7 @@ dicom-microscopy-viewer@^0.48.5:
     dicomweb-client "^0.10.3"
     image-type "^4.1"
     mathjs "^11.2"
-    ol "^10.4.0"
+    ol "^10.6.0"
     uuid "^9.0"
 
 dicomicc@^0.1:
@@ -9239,14 +9214,12 @@ oidc-client@^1.11.5:
     crypto-js "^4.0.0"
     serialize-javascript "^4.0.0"
 
-ol@^10.4.0:
-  version "10.4.0"
-  resolved "https://registry.yarnpkg.com/ol/-/ol-10.4.0.tgz#b073dd2b08c3cc31fece1c904a6711e0d289d6e4"
-  integrity sha512-gv3voS4wgej1WVvdCz2ZIBq3lPWy8agaf0094E79piz8IGQzHiOWPs2in1pdoPmuTNvcqGqyUFG3IbxNE6n08g==
+ol@^10.6.0:
+  version "10.6.1"
+  resolved "https://registry.yarnpkg.com/ol/-/ol-10.6.1.tgz#950f3914b4eec978f087b36aa74ce1e18c41ab09"
+  integrity sha512-xp174YOwPeLj7c7/8TCIEHQ4d41tgTDDhdv6SqNdySsql5/MaFJEJkjlsYcvOPt7xA6vrum/QG4UdJ0iCGT1cg==
   dependencies:
     "@types/rbush" "4.0.0"
-    color-rgba "^3.0.0"
-    color-space "^2.0.1"
     earcut "^3.0.0"
     geotiff "^2.1.3"
     pbf "4.0.1"