WIP: feat 194 class based color settings - bulk annotations

.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: idc-slim-preview

package.json

@@ -76,6 +76,7 @@
     "react-error-boundary": "^3.1.4"
   },
   "resolutions": {
-    "nth-check": "2.0.1"
+    "nth-check": "2.0.1",
+    "wrap-ansi": "7.0.0"
   }
 }

public/config/preview.js

@@ -3,10 +3,16 @@ 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,

src/components/AnnotationCategoryItem.tsx

@@ -1,14 +1,25 @@
 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 = ({
   category,
   onChange,
-  checkedAnnotationGroupUids
+  checkedAnnotationGroupUids,
+  onStyleChange,
+  defaultAnnotationGroupStyles
 }: {
   category: Category
   onChange: Function
+  onStyleChange: Function
+  defaultAnnotationGroupStyles: {
+    [annotationGroupUID: string]: {
+      opacity: number
+      color: number[]
+    }
+  }
   checkedAnnotationGroupUids: Set<string>
 }): JSX.Element => {
   const { types } = category
@@ -60,6 +71,32 @@ 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={
+                      defaultAnnotationGroupStyles[types[0].uids[0]]
+                    }
+                  />
+                )}
+              >
+                <Button
+                  type='primary'
+                  shape='circle'
+                  style={{ marginLeft: '10px' }}
+                  icon={<SettingOutlined />}
+                />
+              </Popover>
             </Checkbox>
           </Space>
           {types.map((type: Type) => {
@@ -72,7 +109,10 @@ const AnnotationGroupItem = ({
               !isChecked &&
               uids.some((uid: string) => checkedAnnotationGroupUids.has(uid))
             return (
-              <div key={`${type.CodingSchemeDesignator}:${type.CodeMeaning}`} style={{ paddingLeft: '25px' }}>
+              <div
+                key={`${type.CodingSchemeDesignator}:${type.CodeMeaning}`}
+                style={{ paddingLeft: '25px' }}
+              >
                 <Checkbox
                   indeterminate={indeterminateType}
                   checked={isChecked}
@@ -88,6 +128,27 @@ const AnnotationGroupItem = ({
                   >
                     {CodeMeaning}
                   </Tooltip>
+                  <Popover
+                    placement='topLeft'
+                    overlayStyle={{ width: '350px' }}
+                    title='Display Settings'
+                    content={() => (
+                      <ColorSettingsMenu
+                        annotationGroupsUIDs={type.uids}
+                        onStyleChange={onStyleChange}
+                        defaultStyle={
+                          defaultAnnotationGroupStyles[type.uids[0]]
+                        }
+                      />
+                    )}
+                  >
+                    <Button
+                      type='primary'
+                      shape='circle'
+                      style={{ marginLeft: '10px' }}
+                      icon={<SettingOutlined />}
+                    />
+                  </Popover>
                 </Checkbox>
               </div>
             )

src/components/AnnotationCategoryList.tsx

@@ -65,10 +65,19 @@ const getCategories = (annotationGroups: any): Record<string, Category> => {
 const AnnotationCategoryList = ({
   annotationGroups,
   onChange,
+  onStyleChange,
+  defaultAnnotationGroupStyles,
   checkedAnnotationGroupUids
 }: {
   annotationGroups: dmv.annotation.AnnotationGroup[]
   onChange: Function
+  onStyleChange: Function
+  defaultAnnotationGroupStyles: {
+    [annotationGroupUID: string]: {
+      opacity: number
+      color: number[]
+    }
+  }
   checkedAnnotationGroupUids: Set<string>
 }): JSX.Element => {
   const categories: Record<string, Category> = getCategories(annotationGroups)
@@ -84,6 +93,8 @@ const AnnotationCategoryList = ({
         key={category.CodeMeaning}
         category={category}
         onChange={onChange}
+        onStyleChange={onStyleChange}
+        defaultAnnotationGroupStyles={defaultAnnotationGroupStyles}
         checkedAnnotationGroupUids={checkedAnnotationGroupUids}
       />
     )