Add selector for ANN groups

craco.config.js

@@ -79,6 +79,8 @@ module.exports = {
         '@cornerstonejs/codec-openjpeg/decodewasmjs': '@cornerstonejs/codec-openjpeg/dist/openjpegwasm_decode.js',
         '@cornerstonejs/codec-openjpeg/decodewasm': '@cornerstonejs/codec-openjpeg/dist/openjpegwasm_decode.wasm'
       }
+      config.setupFilesAfterEnv = ['<rootDir>/src/setupTests.tsx']
+      config.testEnvironment = 'jsdom'
       return config
     }
   }

package.json

@@ -9,7 +9,7 @@
     "build:firebase": "REACT_APP_CONFIG=gcp PUBLIC_URL=/ craco build",
     "lint": "ts-standard --env jest 'src/**/*.{tsx,ts}'",
     "fmt": "ts-standard --env jest 'src/**/*.{tsx,ts}' --fix",
-    "test": "ts-standard --env jest 'src/**/*.{tsx,ts}' && craco test --setupFiles ./src/setupTests.tsx --watchAll=false",
+    "test": "ts-standard --env jest 'src/**/*.{tsx,ts}' && craco test --watchAll=false",
     "predeploy": "REACT_APP_CONFIG=demo PUBLIC_URL='https://imagingdatacommons.github.io/slim/' craco build",
     "deploy": "gh-pages -d build",
     "clean": "rm -rf ./build ./node_modules"

src/App.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react-router-dom'
 import { Layout, message } from 'antd'
 import { FaSpinner } from 'react-icons/fa'
+// skipcq: JS-C1003
 import * as dwc from 'dicomweb-client'
 
 import AppConfig, { ServerSettings, ErrorMessageSettings } from './AppConfig'
@@ -396,14 +397,14 @@ class App extends React.Component<AppProps, AppState> {
 
   componentDidMount (): void {
     const path = window.localStorage.getItem('slim_path')
-    if (path === null || path === '') {
+    if (path === null || path === undefined || path === '') {
       window.localStorage.setItem('slim_path', window.location.pathname)
       window.localStorage.setItem('slim_search', window.location.search)
     }
 
     // Restore cached server selection if it exists
     const cachedServerUrl = window.localStorage.getItem('slim_selected_server')
-    if (cachedServerUrl !== null && cachedServerUrl !== '') {
+    if (cachedServerUrl !== null && cachedServerUrl !== undefined && cachedServerUrl !== '') {
       this.handleServerSelection({ url: cachedServerUrl })
     }
 

src/AppConfig.d.ts

@@ -1,3 +1,4 @@
+// skipcq: JS-C1003
 import * as dcmjs from 'dcmjs'
 
 export type DicomWebManagerErrorHandler = (

src/DicomWebManager.ts

@@ -1,5 +1,8 @@
+// skipcq: JS-C1003
 import * as dwc from 'dicomweb-client'
+// skipcq: JS-C1003
 import * as dcmjs from 'dcmjs'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
 
 import { ServerSettings, DicomWebManagerErrorHandler } from './AppConfig'

src/auth/OidcManager.tsx

@@ -133,7 +133,7 @@ export default class OidcManager implements AuthManager {
        * the DICOMweb server.
        */
       const userData = await this._oidc.getUser()
-      if (userData === null || userData.expired) {
+      if (userData === null || userData === undefined || userData.expired) {
         console.info('authenticating user')
         await this._oidc.signinRedirect()
       } else {
@@ -156,7 +156,7 @@ export default class OidcManager implements AuthManager {
    */
   getAuthorization = async (): Promise<string|undefined> => {
     return await this._oidc.getUser().then((userData) => {
-      if (userData !== null) {
+      if (userData !== null && userData !== undefined) {
         return userData.access_token
       } else {
         NotificationMiddleware.onError(
@@ -175,7 +175,7 @@ export default class OidcManager implements AuthManager {
    */
   getUser = async (): Promise<User> => {
     return await this._oidc.getUser().then((userData) => {
-      if (userData === null) {
+      if (userData === null || userData === undefined) {
         NotificationMiddleware.onError(
           NotificationMiddlewareContext.AUTH,
           new CustomError(

src/components/AnnotationGroupItem.tsx

@@ -15,7 +15,9 @@ import {
 } from 'antd'
 import { SettingOutlined } from '@ant-design/icons'
 import { FaEye, FaEyeSlash } from 'react-icons/fa'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
+// skipcq: JS-C1003
 import * as dcmjs from 'dcmjs'
 
 import Description from './Description'
@@ -451,7 +453,7 @@ AnnotationGroupItemState
         size='small'
         disabled={!this.props.isVisible}
       >
-        <></>
+        {null}
       </Select.Option>
     )
 

src/components/AnnotationGroupList.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Menu, Switch } from 'antd'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
+// skipcq: JS-C1003
 import * as dcmjs from 'dcmjs'
 
 import AnnotationGroupItem from './AnnotationGroupItem'

src/components/AnnotationItem.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
+// skipcq: JS-C1003
 import * as dcmjs from 'dcmjs'
 import { Menu, Space, Switch } from 'antd'
 import { FaEye, FaEyeSlash } from 'react-icons/fa'

src/components/AnnotationList.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
 import { Menu, Switch } from 'antd'
 import { FaEye, FaEyeSlash } from 'react-icons/fa'

src/components/Button.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { Button as Btn, Divider, Tooltip } from 'antd'
+import { IconType } from 'react-icons'
 
 interface ButtonProps {
-  icon: any
+  icon: IconType | React.ComponentType<Record<string, never>> | React.ForwardRefExoticComponent<object>
   tooltip?: string
   label?: string
-  onClick?: (options: any) => void
+  onClick?: (options: React.SyntheticEvent) => void
   isSelected?: boolean
 }
 

src/components/CaseViewer.tsx

@@ -1,5 +1,6 @@
 import { Routes, Route, useLocation, useParams } from 'react-router-dom'
 import { Layout, Menu } from 'antd'
+// skipcq: JS-C1003
 import * as dcmjs from 'dcmjs'
 import { useEffect, useState } from 'react'
 
@@ -133,7 +134,7 @@ function ParametrizedSlideViewer ({
 
     if (selectedSlide === null || selectedSlide === undefined) {
       void findReferencedSlide({ clients, studyInstanceUID, seriesInstanceUID }).then((result: ReferencedSlideResult | null) => {
-        if (result !== null) {
+        if (result !== null && result !== undefined) {
           setSelectedSlide(result.slide)
           setDerivedDataset(result.metadata)
         }
@@ -144,16 +145,14 @@ function ParametrizedSlideViewer ({
   }, [slides, clients, studyInstanceUID, seriesInstanceUID, selectedSlide])
 
   const searchParams = new URLSearchParams(location.search)
-  let presentationStateUID: string | null | undefined
+  let presentationStateUID: string | undefined
   if (!searchParams.has('access_token')) {
-    presentationStateUID = searchParams.get('state')
-    if (presentationStateUID === null) {
-      presentationStateUID = undefined
-    }
+    const stateParam = searchParams.get('state')
+    presentationStateUID = stateParam !== null ? stateParam : undefined
   }
 
   let viewer = null
-  if (selectedSlide != null) {
+  if (selectedSlide != null && selectedSlide !== undefined) {
     viewer = (
       <SlideViewer
         clients={clients}
@@ -166,7 +165,7 @@ function ParametrizedSlideViewer ({
         enableAnnotationTools={enableAnnotationTools}
         app={app}
         user={user}
-        derivedDataset={derivedDataset}
+        derivedDataset={derivedDataset ?? undefined}
       />
     )
   }

src/components/ClinicalTrial.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
 
 import Description from './Description'

src/components/DicomTagBrowser/DicomTagBrowser.tsx

@@ -112,7 +112,7 @@ const DicomTagBrowser = ({ clients, studyInstanceUID }: DicomTagBrowserProps): J
           index++
           return ds
         })
-        .filter((set): set is DisplaySet => set !== null)
+        .filter((set): set is DisplaySet => set !== null && set !== undefined)
     }
 
     if (study !== undefined && study.series?.length > 0) {

src/components/Equipment.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
 
 import Description from './Description'

src/components/Header.tsx

@@ -84,7 +84,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
       selectedServerUrl: cachedServerUrl ?? '',
       isServerSelectionModalVisible: false,
       isServerSelectionDisabled: !this.isValidServerUrl(cachedServerUrl),
-      serverSelectionMode: cachedMode === 'custom' && cachedServerUrl !== null && cachedServerUrl !== '' ? 'custom' : 'default'
+      serverSelectionMode: cachedMode === 'custom' && cachedServerUrl !== null && cachedServerUrl !== undefined && cachedServerUrl !== '' ? 'custom' : 'default'
     }
 
     const onErrorHandler = ({ source, error }: {
@@ -328,7 +328,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
   handleServerSelectionCancellation = (): void => {
     const cachedServerUrl = window.localStorage.getItem('slim_selected_server')
     this.setState({
-      serverSelectionMode: cachedServerUrl !== null && cachedServerUrl !== '' ? 'custom' : 'default',
+      serverSelectionMode: cachedServerUrl !== null && cachedServerUrl !== undefined && cachedServerUrl !== '' ? 'custom' : 'default',
       selectedServerUrl: cachedServerUrl ?? undefined,
       isServerSelectionModalVisible: false,
       isServerSelectionDisabled: !this.isValidServerUrl(cachedServerUrl)

src/components/MappingItem.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
 import {
   Button,

src/components/MappingList.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
 import { Menu } from 'antd'
 

src/components/OpticalPathItem.tsx

@@ -20,7 +20,9 @@ import {
   SettingOutlined
 } from '@ant-design/icons'
 import Description from './Description'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
+// skipcq: JS-C1003
 import * as dcmjs from 'dcmjs'
 
 import { SpecimenPreparationStepItems } from '../data/specimens'

src/components/OpticalPathList.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
 import { Button as Btn, Menu, Select, Space, Tooltip } from 'antd'
 import { AppstoreAddOutlined } from '@ant-design/icons'

src/components/Patient.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
 
 import Description from './Description'

src/components/Report.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
+// skipcq: JS-C1003
 import * as dcmjs from 'dcmjs'
 import { Divider } from 'antd'
 import { v4 as generateUUID } from 'uuid'

src/components/SegmentItem.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
 import {
   Button,

src/components/SegmentList.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
 import { Menu } from 'antd'
 

src/components/SlideItem.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { FaSpinner } from 'react-icons/fa'
+// skipcq: JS-C1003
 import * as dmv from 'dicom-microscopy-viewer'
 import { Menu } from 'antd'
 
@@ -45,7 +46,7 @@ class SlideItem extends React.Component<SlideItemProps, SlideItemState> {
     this.setState({ isLoading: true })
     if (this.props.slide.overviewImages.length > 0) {
       const metadata = this.props.slide.overviewImages[0]
-      if (this.overviewViewportRef.current !== null) {
+      if (this.overviewViewportRef.current !== null && this.overviewViewportRef.current !== undefined) {
         this.overviewViewportRef.current.innerHTML = ''
         console.info(
           'instantiate viewer for OVERVIEW image of slide ' +
@@ -81,7 +82,7 @@ class SlideItem extends React.Component<SlideItemProps, SlideItemState> {
 
     const attributes = []
     const description = this.props.slide.description
-    if (description !== null && description !== '') {
+    if (description !== null && description !== undefined && description !== '') {
       attributes.push({
         name: 'Description',
         value: description

src/components/SlideList.tsx

@@ -60,8 +60,7 @@ class SlideList extends React.Component<SlideListProps, SlideListState> {
     }
 
     let selectedKeys
-    if (this.state.selectedSeriesInstanceUID !== undefined &&
-      this.state.selectedSeriesInstanceUID !== null) {
+    if (this.state.selectedSeriesInstanceUID !== null && this.state.selectedSeriesInstanceUID !== undefined) {
       selectedKeys = [this.state.selectedSeriesInstanceUID]
     }