feat: improve annotation styles

src/components/AnnotationCategoryItem.tsx

@@ -18,6 +18,7 @@ const AnnotationCategoryItem = ({
     [annotationUID: string]: {
       opacity: number
       color: number[]
+      contourOnly: boolean
     }
   }
   checkedAnnotationUids: Set<string>

src/components/AnnotationCategoryList.tsx

@@ -80,6 +80,7 @@ const AnnotationCategoryList = ({
     [annotationUID: string]: {
       opacity: number
       color: number[]
+      contourOnly: boolean
     }
   }
   checkedAnnotationUids: Set<string>

src/components/ColorSettingsMenu.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
-import { Col, Divider, InputNumber, Row, Slider } from 'antd'
+import { Checkbox, Col, Divider, InputNumber, Row, Slider } from 'antd'
 
 interface ColorSettingsMenuProps {
   annotationGroupsUIDs: string[]
   defaultStyle: {
     opacity: number
     color: number[]
+    contourOnly: boolean
   }
   onStyleChange: Function
 }
@@ -14,6 +15,7 @@ interface ColorSettingsMenuState {
   currentStyle: {
     opacity: number
     color?: number[]
+    contourOnly: boolean
   }
 }
 
@@ -34,7 +36,8 @@ ColorSettingsMenuState
     this.state = {
       currentStyle: {
         opacity: this.props.defaultStyle.opacity,
-        color: this.props.defaultStyle.color
+        color: this.props.defaultStyle.color,
+        contourOnly: this.props.defaultStyle.contourOnly
       }
     }
   }
@@ -46,14 +49,16 @@ ColorSettingsMenuState
           uid,
           styleOptions: {
             color: this.state.currentStyle.color,
-            opacity: value
+            opacity: value,
+            contourOnly: this.state.currentStyle.contourOnly
           }
         })
       })
       this.setState({
         currentStyle: {
           opacity: value,
-          color: this.state.currentStyle.color
+          color: this.state.currentStyle.color,
+          contourOnly: this.state.currentStyle.contourOnly
         }
       })
     }
@@ -69,15 +74,17 @@ ColorSettingsMenuState
       this.setState((state) => ({
         currentStyle: {
           color: color,
-          opacity: state.currentStyle.opacity
+          opacity: state.currentStyle.opacity,
+          contourOnly: state.currentStyle.contourOnly
         }
       }))
       this.props.annotationGroupsUIDs.forEach((uid) => {
         this.props.onStyleChange({
           uid,
           styleOptions: {
             color: color,
-            opacity: this.state.currentStyle.opacity
+            opacity: this.state.currentStyle.opacity,
+            contourOnly: this.state.currentStyle.contourOnly
           }
         })
       })
@@ -94,15 +101,17 @@ ColorSettingsMenuState
       this.setState((state) => ({
         currentStyle: {
           color: color,
-          opacity: state.currentStyle.opacity
+          opacity: state.currentStyle.opacity,
+          contourOnly: state.currentStyle.contourOnly
         }
       }))
       this.props.annotationGroupsUIDs.forEach((uid) => {
         this.props.onStyleChange({
           uid,
           styleOptions: {
             color: color,
-            opacity: this.state.currentStyle.opacity
+            opacity: this.state.currentStyle.opacity,
+            contourOnly: this.state.currentStyle.contourOnly
           }
         })
       })
@@ -119,7 +128,8 @@ ColorSettingsMenuState
       this.setState((state) => ({
         currentStyle: {
           color: color,
-          opacity: state.currentStyle.opacity
+          opacity: state.currentStyle.opacity,
+          contourOnly: state.currentStyle.contourOnly
         }
       }))
 
@@ -128,13 +138,35 @@ ColorSettingsMenuState
           uid,
           styleOptions: {
             color: color,
-            opacity: this.state.currentStyle.opacity
+            opacity: this.state.currentStyle.opacity,
+            contourOnly: this.state.currentStyle.contourOnly
           }
         })
       })
     }
   }
 
+  handleShowOutlineOnly (value: boolean): void {
+    this.setState({
+      currentStyle: {
+        opacity: this.state.currentStyle.opacity,
+        color: this.state.currentStyle.color,
+        contourOnly: value
+      }
+    })
+
+    this.props.annotationGroupsUIDs.forEach((uid) => {
+      this.props.onStyleChange({
+        uid,
+        styleOptions: {
+          color: this.state.currentStyle.color,
+          opacity: this.state.currentStyle.opacity,
+          contourOnly: value
+        }
+      })
+    })
+  }
+
   getCurrentColor (): string {
     const rgb2hex = (values: number[]): string => {
       const r = values[0]
@@ -259,6 +291,15 @@ ColorSettingsMenuState
             />
           </Col>
         </Row>
+        <Row justify='start' align='middle' gutter={[8, 8]}>
+          <Checkbox
+            value={this.state.currentStyle.contourOnly}
+            onChange={(event) =>
+              this.handleShowOutlineOnly(event.target.checked)}
+          >
+            Show outline only
+          </Checkbox>
+        </Row>
       </div>
     )
   }

src/components/HoveredRoiTooltip.tsx

@@ -1,11 +1,11 @@
 const HoveredRoiTooltip = ({
   xPosition,
   yPosition,
-  attributes
+  rois
 }: {
   xPosition: number
   yPosition: number
-  attributes: Array<{ name: string, value: string }>
+  rois: Array<{ index: number, roiUid: string, attributes: Array<{ name: string, value: string }>}>
 }): JSX.Element => {
   return (
     <div
@@ -21,11 +21,22 @@ const HoveredRoiTooltip = ({
         pointerEvents: 'none'
       }}
     >
-      {attributes.map((attr) => (
-        <div key={attr.name}>
-          {attr.name}: <span style={{ fontWeight: 500 }}>{attr.value}</span>
-        </div>
-      ))}
+      {rois.map((roi, i) => {
+        const attributes = roi.attributes
+        return (
+          <div key={roi.roiUid}>
+            <span>ROI {roi.index}</span>
+            {attributes.map((attr) => {
+              return (
+                <div key={attr.name + roi.roiUid}>
+                  {attr.name}: <span style={{ fontWeight: 500 }}>{attr.value}</span>
+                </div>
+              )
+            })}
+          </div>
+
+        )
+      })}
     </div>
   )
 }