feat - 194: ROI class based color settings

.github/workflows/container-tests.yml

@@ -20,7 +20,7 @@ jobs:
           node-version: 20.8.1
 
       - name: Build and run containers using docker compose
-        run: docker-compose up -d
+        run: docker compose up -d
 
       - name: Test web page
         run: |

.github/workflows/deploy-to-firebase.yml

@@ -35,3 +35,4 @@ jobs:
           repoToken: "${{ secrets.GITHUB_TOKEN }}"
           firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_SLIM }}"
           projectId: idc-external-006
+          channelId: live

public/config/preview.js

@@ -3,14 +3,20 @@ window.config = {
   servers: [
     {
       id: 'preview',
-      url: 'https://idc-external-006.uc.r.appspot.com/dcm4chee-arc/aets/DCM4CHEE/rs',
+      url: 'https://proxy.imaging.datacommons.cancer.gov/current/viewer-only-no-downloads-see-tinyurl-dot-com-slash-3j3d9jyp/dicomWeb',
       write: false
     }
   ],
+  oidc: {
+    authority: 'https://accounts.google.com',
+    clientId: '293449031882-k4um45hl4g94fsgbnviel0lh38836i9v.apps.googleusercontent.com',
+    scope: 'email profile openid https://www.googleapis.com/auth/cloud-healthcare',
+    grantType: 'implicit'
+  },
   disableWorklist: false,
   disableAnnotationTools: false,
   enableServerSelection: true,
-  mode: "light",
+  mode: 'light',
   preload: true,
   annotations: [
     {
@@ -24,6 +30,6 @@ window.config = {
           color: [255, 255, 255, 0.2]
         }
       }
-    },
+    }
   ]
 }

src/components/AnnotationCategoryItem.tsx

@@ -1,15 +1,26 @@
 import React from 'react'
-import { Menu, Space, Checkbox, Tooltip } from 'antd'
+import { Menu, Space, Checkbox, Tooltip, Popover, Button } from 'antd'
+import { SettingOutlined } from '@ant-design/icons'
 import { Category, Type } from './AnnotationCategoryList'
+import ColorSettingsMenu from './ColorSettingsMenu'
 
-const AnnotationGroupItem = ({
+const AnnotationCategoryItem = ({
   category,
   onChange,
-  checkedAnnotationGroupUids
+  checkedAnnotationUids,
+  onStyleChange,
+  defaultAnnotationStyles
 }: {
   category: Category
   onChange: Function
-  checkedAnnotationGroupUids: Set<string>
+  onStyleChange: Function
+  defaultAnnotationStyles: {
+    [annotationUID: string]: {
+      opacity: number
+      color: number[]
+    }
+  }
+  checkedAnnotationUids: Set<string>
 }): JSX.Element => {
   const { types } = category
 
@@ -21,12 +32,12 @@ const AnnotationGroupItem = ({
   }
 
   const checkAll = types.every((type: Type) =>
-    type.uids.every((uid: string) => checkedAnnotationGroupUids.has(uid))
+    type.uids.every((uid: string) => checkedAnnotationUids.has(uid))
   )
   const indeterminate =
     !checkAll &&
     types.some((type: Type) =>
-      type.uids.some((uid: string) => checkedAnnotationGroupUids.has(uid))
+      type.uids.some((uid: string) => checkedAnnotationUids.has(uid))
     )
 
   const handleChangeCheckedType = ({
@@ -37,7 +48,7 @@ const AnnotationGroupItem = ({
     isVisible: boolean
   }): void => {
     type.uids.forEach((uid: string) => {
-      onChange({ annotationGroupUID: uid, isVisible })
+      onChange({ roiUID: uid, isVisible })
     })
   }
 
@@ -47,7 +58,7 @@ const AnnotationGroupItem = ({
       key={category.CodeMeaning}
     >
       <Space align='start'>
-        <div style={{ paddingLeft: '14px' }}>
+        <div style={{ paddingLeft: '14px', color: 'black' }}>
           <Space direction='vertical' align='end'>
             <Checkbox
               indeterminate={indeterminate}
@@ -60,19 +71,55 @@ const AnnotationGroupItem = ({
               >
                 {category.CodeMeaning}
               </Tooltip>
+              <Popover
+                placement='topLeft'
+                overlayStyle={{ width: '350px' }}
+                title='Display Settings'
+                content={() => (
+                  <ColorSettingsMenu
+                    annotationGroupsUIDs={types.reduce(
+                      (acc: string[], type) => {
+                        return [...acc, ...type.uids]
+                      },
+                      []
+                    )}
+                    onStyleChange={onStyleChange}
+                    defaultStyle={
+                      defaultAnnotationStyles[types[0].uids[0]]
+                    }
+                  />
+                )}
+              >
+                <Button
+                  type='primary'
+                  shape='circle'
+                  style={{ marginLeft: '10px' }}
+                  icon={<SettingOutlined />}
+                />
+              </Popover>
             </Checkbox>
           </Space>
           {types.map((type: Type) => {
             const { CodeMeaning, CodingSchemeDesignator, CodeValue, uids } =
               type
+            const shortenedCodeMeaning = CodeMeaning.slice(0, 22)
+            const displayCodeMeaning = shortenedCodeMeaning === CodeMeaning ? CodeMeaning : `${shortenedCodeMeaning}...`
             const isChecked = uids.every((uid: string) =>
-              checkedAnnotationGroupUids.has(uid)
+              checkedAnnotationUids.has(uid)
             )
             const indeterminateType =
               !isChecked &&
-              uids.some((uid: string) => checkedAnnotationGroupUids.has(uid))
+              uids.some((uid: string) => checkedAnnotationUids.has(uid))
             return (
-              <div key={`${type.CodingSchemeDesignator}:${type.CodeMeaning}`} style={{ paddingLeft: '25px' }}>
+              <div
+                key={`${type.CodingSchemeDesignator}:${type.CodeMeaning}`}
+                style={{
+                  paddingLeft: '25px',
+                  width: '100%',
+                  display: 'flex',
+                  flexDirection: 'row'
+                }}
+              >
                 <Checkbox
                   indeterminate={indeterminateType}
                   checked={isChecked}
@@ -81,14 +128,34 @@ const AnnotationGroupItem = ({
                       type,
                       isVisible: e.target.checked
                     })}
-                >
+                />
+                <div style={{ paddingLeft: '5px' }}>
                   <Tooltip
                     title={`${CodeValue}:${CodingSchemeDesignator}`}
                     mouseEnterDelay={1}
                   >
-                    {CodeMeaning}
+                    {displayCodeMeaning}
                   </Tooltip>
-                </Checkbox>
+                  <Popover
+                    placement='topLeft'
+                    overlayStyle={{ width: '350px' }}
+                    title='Display Settings'
+                    content={() => (
+                      <ColorSettingsMenu
+                        annotationGroupsUIDs={type.uids}
+                        onStyleChange={onStyleChange}
+                        defaultStyle={defaultAnnotationStyles[type.uids[0]]}
+                      />
+                    )}
+                  >
+                    <Button
+                      type='primary'
+                      shape='circle'
+                      style={{ marginLeft: '10px' }}
+                      icon={<SettingOutlined />}
+                    />
+                  </Popover>
+                </div>
               </div>
             )
           })}
@@ -98,4 +165,4 @@ const AnnotationGroupItem = ({
   )
 }
 
-export default AnnotationGroupItem
+export default AnnotationCategoryItem

src/components/AnnotationCategoryList.tsx

@@ -1,8 +1,12 @@
 import React from 'react'
 import { Menu } from 'antd'
-import * as dmv from 'dicom-microscopy-viewer'
 import AnnotationCategoryItem from './AnnotationCategoryItem'
 
+export interface AnnotationCategoryAndType {
+  uid: string
+  type: Omit<Type, 'uids'>
+  category: Omit<Category, 'types'>
+}
 export interface Type {
   CodeValue: string
   CodeMeaning: string
@@ -16,22 +20,22 @@ export interface Category {
   types: Type[]
 }
 
-const getCategories = (annotationGroups: any): Record<string, Category> => {
-  const categories = annotationGroups?.reduce(
+const getCategories = (annotations: any): Record<string, Category> => {
+  const categories = annotations?.reduce(
     (
       categoriesAcc: Record<string, Category & { types: Record<string, Type> }>,
-      annotationGroup: dmv.annotation.AnnotationGroup
+      annotation: AnnotationCategoryAndType
     ) => {
-      const { propertyCategory, propertyType, uid } = annotationGroup
-      const categoryKey = propertyCategory.CodeMeaning
-      const typeKey = propertyType.CodeMeaning
+      const { category, type, uid } = annotation
+      const categoryKey = category.CodeMeaning
+      const typeKey = type.CodeMeaning
 
       const oldCategory = categoriesAcc[categoryKey] ?? {
-        ...propertyCategory,
+        ...category,
         types: {}
       }
       const oldType = oldCategory.types[typeKey] ?? {
-        ...propertyType,
+        ...type,
         uids: []
       }
 
@@ -63,15 +67,24 @@ const getCategories = (annotationGroups: any): Record<string, Category> => {
 }
 
 const AnnotationCategoryList = ({
-  annotationGroups,
+  annotations,
   onChange,
-  checkedAnnotationGroupUids
+  onStyleChange,
+  defaultAnnotationStyles,
+  checkedAnnotationUids
 }: {
-  annotationGroups: dmv.annotation.AnnotationGroup[]
+  annotations: AnnotationCategoryAndType[]
   onChange: Function
-  checkedAnnotationGroupUids: Set<string>
+  onStyleChange: Function
+  defaultAnnotationStyles: {
+    [annotationUID: string]: {
+      opacity: number
+      color: number[]
+    }
+  }
+  checkedAnnotationUids: Set<string>
 }): JSX.Element => {
-  const categories: Record<string, Category> = getCategories(annotationGroups)
+  const categories: Record<string, Category> = getCategories(annotations)
 
   if (Object.keys(categories).length === 0) {
     return <></>
@@ -84,7 +97,9 @@ const AnnotationCategoryList = ({
         key={category.CodeMeaning}
         category={category}
         onChange={onChange}
-        checkedAnnotationGroupUids={checkedAnnotationGroupUids}
+        onStyleChange={onStyleChange}
+        defaultAnnotationStyles={defaultAnnotationStyles}
+        checkedAnnotationUids={checkedAnnotationUids}
       />
     )
   })

src/components/AnnotationGroupItem.tsx

@@ -32,8 +32,8 @@ interface AnnotationGroupItemProps {
     annotationGroupUID: string
     isVisible: boolean
   }) => void
-  onStyleChange: ({ annotationGroupUID, styleOptions }: {
-    annotationGroupUID: string
+  onStyleChange: ({ uid, styleOptions }: {
+    uid: string
     styleOptions: {
       opacity?: number
       color?: number[]
@@ -89,7 +89,7 @@ class AnnotationGroupItem extends React.Component<AnnotationGroupItemProps, Anno
   handleOpacityChange (value: number | null): void {
     if (value != null) {
       this.props.onStyleChange({
-        annotationGroupUID: this.props.annotationGroup.uid,
+        uid: this.props.annotationGroup.uid,
         styleOptions: {
           opacity: value
         }
@@ -121,7 +121,7 @@ class AnnotationGroupItem extends React.Component<AnnotationGroupItemProps, Anno
         }
       }))
       this.props.onStyleChange({
-        annotationGroupUID: this.props.annotationGroup.uid,
+        uid: this.props.annotationGroup.uid,
         styleOptions: { color: color }
       })
     }
@@ -144,7 +144,7 @@ class AnnotationGroupItem extends React.Component<AnnotationGroupItemProps, Anno
         }
       }))
       this.props.onStyleChange({
-        annotationGroupUID: this.props.annotationGroup.uid,
+        uid: this.props.annotationGroup.uid,
         styleOptions: { color: color }
       })
     }
@@ -167,7 +167,7 @@ class AnnotationGroupItem extends React.Component<AnnotationGroupItemProps, Anno
         }
       }))
       this.props.onStyleChange({
-        annotationGroupUID: this.props.annotationGroup.uid,
+        uid: this.props.annotationGroup.uid,
         styleOptions: { color: color }
       })
     }
@@ -212,7 +212,7 @@ class AnnotationGroupItem extends React.Component<AnnotationGroupItemProps, Anno
         }
       })
       this.props.onStyleChange({
-        annotationGroupUID: this.props.annotationGroup.uid,
+        uid: this.props.annotationGroup.uid,
         styleOptions: {
           limitValues: [
             value,
@@ -247,7 +247,7 @@ class AnnotationGroupItem extends React.Component<AnnotationGroupItemProps, Anno
         }
       })
       this.props.onStyleChange({
-        annotationGroupUID: this.props.annotationGroup.uid,
+        uid: this.props.annotationGroup.uid,
         styleOptions: {
           limitValues: [
             this.state.currentStyle.limitValues[0],
@@ -269,7 +269,7 @@ class AnnotationGroupItem extends React.Component<AnnotationGroupItemProps, Anno
       }
     }))
     this.props.onStyleChange({
-      annotationGroupUID: this.props.annotationGroup.uid,
+      uid: this.props.annotationGroup.uid,
       styleOptions: { limitValues: values }
     })
   }
@@ -283,7 +283,7 @@ class AnnotationGroupItem extends React.Component<AnnotationGroupItemProps, Anno
         meaning: option.children
       })
       this.props.onStyleChange({
-        annotationGroupUID: this.props.annotationGroup.uid,
+        uid: this.props.annotationGroup.uid,
         styleOptions: { measurement }
       })
       this.setState(state => ({
@@ -294,7 +294,7 @@ class AnnotationGroupItem extends React.Component<AnnotationGroupItemProps, Anno
       }))
     } else {
       this.props.onStyleChange({
-        annotationGroupUID: this.props.annotationGroup.uid,
+        uid: this.props.annotationGroup.uid,
         styleOptions: {
           color: this.props.defaultStyle.color
         }