feat: improve annotation styles (#253)

* feat: improve annotation styles * chore: diminish duplicate code
ImagingDataCommons · Dec 9, 2024 · b65b459 · b65b459
1 parent 03714b3
commit b65b459
Show file tree

Hide file tree

Showing 5 changed files with 184 additions and 110 deletions.
diff --git a/src/components/AnnotationCategoryItem.tsx b/src/components/AnnotationCategoryItem.tsx
@@ -18,6 +18,7 @@ const AnnotationCategoryItem = ({
     [annotationUID: string]: {
       opacity: number
       color: number[]
+      contourOnly: boolean
     }
   }
   checkedAnnotationUids: Set<string>

diff --git a/src/components/AnnotationCategoryList.tsx b/src/components/AnnotationCategoryList.tsx
@@ -80,6 +80,7 @@ const AnnotationCategoryList = ({
     [annotationUID: string]: {
       opacity: number
       color: number[]
+      contourOnly: boolean
     }
   }
   checkedAnnotationUids: Set<string>

diff --git a/src/components/ColorSettingsMenu.tsx b/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,16 +49,12 @@ 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
-        }
-      })
+      this.updateCurrentStyle({ opacity: value })
     }
   }
 
@@ -66,18 +65,14 @@ ColorSettingsMenuState
         this.state.currentStyle.color[1],
         this.state.currentStyle.color[2]
       ]
-      this.setState((state) => ({
-        currentStyle: {
-          color: color,
-          opacity: state.currentStyle.opacity
-        }
-      }))
+      this.updateCurrentStyle({ color })
       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
           }
         })
       })
@@ -91,18 +86,14 @@ ColorSettingsMenuState
         Array.isArray(value) ? value[0] : value,
         this.state.currentStyle.color[2]
       ]
-      this.setState((state) => ({
-        currentStyle: {
-          color: color,
-          opacity: state.currentStyle.opacity
-        }
-      }))
+      this.updateCurrentStyle({ color })
       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
           }
         })
       })
@@ -116,25 +107,35 @@ ColorSettingsMenuState
         this.state.currentStyle.color[1],
         Array.isArray(value) ? value[0] : value
       ]
-      this.setState((state) => ({
-        currentStyle: {
-          color: color,
-          opacity: state.currentStyle.opacity
-        }
-      }))
-
+      this.updateCurrentStyle({ color })
       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
           }
         })
       })
     }
   }
 
+  handleShowOutlineOnly (value: boolean): void {
+    this.updateCurrentStyle({ 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]
@@ -150,6 +151,24 @@ ColorSettingsMenuState
     }
   }
 
+  updateCurrentStyle ({
+    color,
+    opacity,
+    contourOnly
+  }: {
+    color?: number[]
+    opacity?: number
+    contourOnly?: boolean
+  }): void {
+    this.setState((state) => ({
+      currentStyle: {
+        opacity: opacity ?? state.currentStyle.opacity,
+        color: color ?? state.currentStyle.color,
+        contourOnly: contourOnly ?? state.currentStyle.contourOnly
+      }
+    }))
+  }
+
   render (): React.ReactNode {
     let colorSettings
     if (this.state.currentStyle.color != null) {
@@ -259,6 +278,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>
     )
   }

diff --git a/src/components/HoveredRoiTooltip.tsx b/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>
   )
 }