lost-sia 3.2.0-alpha0 → 3.2.0

package/src/InfoBoxes/InfoBoxArea.jsx

@@ -0,0 +1,152 @@
+import { Component } from 'react'
+import AnnoDetails from './AnnoDetails'
+import AnnoStats from './AnnoStats'
+import LabelInfo from './LabelInfo'
+
+class InfoBoxes extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      position: {
+        top: 0,
+        left: 0,
+      },
+    }
+  }
+
+  componentDidMount() {
+    this.updateLayout()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.layoutUpdate !== prevProps.layoutUpdate) {
+      this.updateLayout()
+    }
+    if (this.props.commentInputTrigger !== prevProps.commentInputTrigger) {
+      if (!this.props.uiConfig.annoDetails.visible) {
+        this.showAnnoDetails(true)
+      }
+    }
+  }
+
+  updateLayout() {
+    if (this.props.container.current) {
+      const container = this.props.container.current.getBoundingClientRect()
+      this.setState({
+        position: {
+          ...this.state.position,
+          left: container.right - 250,
+          top: container.top,
+        },
+      })
+    }
+  }
+
+  showAnnoDetails(show = true) {
+    this.props.onUiConfigUpdate({
+      ...this.props.uiConfig,
+      annoDetails: {
+        ...this.props.uiConfig.annoDetails,
+        visible: show,
+      },
+    })
+  }
+
+  onDismiss(type) {
+    if (this.props.onUiConfigUpdate) {
+      switch (type) {
+        case 'AnnoDetails':
+          this.showAnnoDetails(false)
+          break
+        case 'LabelInfo':
+          this.props.onUiConfigUpdate({
+            ...this.props.uiConfig,
+            labelInfo: {
+              ...this.props.uiConfig.labelInfo,
+              visible: false,
+            },
+          })
+          break
+        case 'AnnoStats':
+          this.props.onUiConfigUpdate({
+            ...this.props.uiConfig,
+            annoStats: {
+              ...this.props.uiConfig.annoStats,
+              visible: false,
+            },
+          })
+          break
+        default:
+          break
+      }
+    }
+  }
+
+  onCommentUpdate(comment) {
+    if (this.props.onCommentUpdate) {
+      this.props.onCommentUpdate(comment)
+    }
+  }
+
+  onMarkExample(anno) {
+    if (this.props.onMarkExample) {
+      this.props.onMarkExample(anno)
+    }
+  }
+
+  onHideLbl(lbl, hide) {
+    if (this.props.onHideLbl) {
+      this.props.onHideLbl(lbl, hide)
+    }
+  }
+
+  render() {
+    if (!this.props.annos) return null
+    // if (!this.props.selectedAnno) return null
+    return (
+      <div>
+        <LabelInfo
+          selectedAnno={this.props.selectedAnno}
+          possibleLabels={this.props.possibleLabels}
+          defaultPos={this.state.position}
+          onDismiss={() => this.onDismiss('LabelInfo')}
+          visible={this.props.uiConfig.labelInfo.visible}
+          onGetAnnoExample={(exampleArgs) =>
+            this.props.onGetAnnoExample ? this.props.onGetAnnoExample(exampleArgs) : {}
+          }
+          exampleImg={this.props.exampleImg}
+        />
+        <AnnoDetails
+          anno={this.props.selectedAnno}
+          possibleLabels={this.props.possibleLabels}
+          defaultPos={{
+            left: this.state.position.left - 300,
+            top: this.state.position.top,
+          }}
+          onDismiss={() => this.onDismiss('AnnoDetails')}
+          onCommentUpdate={(comment) => this.onCommentUpdate(comment)}
+          onMarkExample={(anno) => this.onMarkExample(anno)}
+          allowedToMarkExample={this.props.allowedToMarkExample}
+          commentInputTrigger={this.props.commentInputTrigger}
+          visible={this.props.uiConfig.annoDetails.visible}
+        />
+        <AnnoStats
+          selectedAnno={this.props.selectedAnno}
+          annos={this.props.annos}
+          possibleLabels={this.props.possibleLabels}
+          defaultPos={{
+            left: this.state.position.left,
+            top: this.state.position.top + 400,
+          }}
+          // defaultPos={this.state.position}
+          onDismiss={() => this.onDismiss('AnnoStats')}
+          onHideLbl={(lbl, hide) => this.onHideLbl(lbl, hide)}
+          visible={this.props.uiConfig.annoStats.visible}
+          imgLoadCount={this.props.imgLoadCount}
+        />
+      </div>
+    )
+  }
+}
+
+export default InfoBoxes

package/src/InfoBoxes/LabelInfo.jsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react'
+import InfoBox from './InfoBox'
+import SiaPopup from '../SiaPopup'
+import AnnoExampleViewer from '../AnnoExampleViewer'
+const LabelInfo = (props) => {
+  const [showExampleViewer, setShowExampleViewer] = useState(false)
+  const [myLbl, setMyLbl] = useState(undefined)
+  // const { data: exampleImg, mutate: getAnnoExample } = exampleApi.useGetAnnoExampleImg({})
+  useEffect(() => {
+    if (props.selectedAnno) {
+      const selectedLabelIds = props.selectedAnno.labelIds
+      if (selectedLabelIds) {
+        const lbl = props.possibleLabels.find((e) => {
+          return selectedLabelIds[0] === e.id
+        })
+        if (lbl) {
+          if (lbl !== myLbl) {
+            setMyLbl(lbl)
+            if (props.visible)
+              // getAnnoExample({llId:lbl.id, type:'annoBased', drawAnno: true, addContext:0.05})
+              requestImg(lbl, props.selectedAnno)
+          }
+        }
+      }
+    }
+  }, [props.selectedAnno])
+  const onDismiss = () => {
+    if (props.onDismiss) {
+      props.onDismiss()
+    }
+  }
+
+  const requestImg = (lbl, anno) => {
+    if (props.onGetAnnoExample) {
+      props.onGetAnnoExample({ lbl: lbl, anno: anno })
+    }
+  }
+
+  const handleImgClick = () => {
+    // setShowExampleViewer(true)
+    // requestImg(myLbl, props.selectedAnno)
+
+    setShowExampleViewer(true)
+    // getAnnoExample({llId:myLbl.id, type:'annoBased', drawAnno: true, addContext:0.05})
+  }
+
+  const renderExampleImg = () => {
+    if (!props.exampleImg) return null
+    return (
+      <div>
+        <h4 onClick={() => handleImgClick()}>Example:</h4>
+        <SiaPopup
+          trigger={
+            <img
+              src={props.exampleImg.img}
+              onClick={() => handleImgClick()}
+              style={{ borderRadius: 25, width: '100%' }}
+            />
+          }
+          content={'Click on image to view more examples'}
+        />
+      </div>
+    )
+  }
+
+  const renderDescription = () => {
+    // if (props.selectedAnno){
+    // if (myLbl){
+    // const selectedLabelIds = props.selectedAnno.labelIds
+    // if (!selectedLabelIds) return 'No Label'
+    // const lbl = props.possibleLabels.find( e => {
+    //     return selectedLabelIds[0] === e.id
+    // })
+    if (!myLbl) return 'No Label'
+    return (
+      <div>
+        <h4>{myLbl.label}</h4>
+        <div dangerouslySetInnerHTML={{ __html: myLbl.description }} />
+        {renderExampleImg()}
+        <AnnoExampleViewer
+          onRequestExample={() => requestImg(myLbl, props.selectedAnno)}
+          onClose={() => {
+            setShowExampleViewer(false)
+          }}
+          active={showExampleViewer}
+          lbl={myLbl}
+          exampleImg={props.exampleImg}
+        />
+      </div>
+    )
+    // } else {
+    //     return 'No Label'
+    // }
+  }
+
+  return (
+    <InfoBox
+      header="Label Info"
+      content={renderDescription()}
+      visible={props.visible}
+      defaultPos={props.defaultPos}
+      onDismiss={() => onDismiss()}
+    />
+  )
+}
+
+export default LabelInfo

package/src/SIA.scss

@@ -7,3 +7,16 @@
   height: 100%;
   background-color: #ffff;
 }
+
+.tag-scroll::-webkit-scrollbar {
+  height: 4px;
+}
+
+.tag-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.tag-scroll::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.25);
+  border-radius: 2px;
+}

package/src/SIASettingButton.jsx

@@ -0,0 +1,126 @@
+import React, { Component } from 'react'
+
+import * as tbe from './types/toolbarEvents'
+import { faCog } from '@fortawesome/free-solid-svg-icons'
+import { CFormSwitch, CPopover } from '@coreui/react'
+import ToolbarItem from './ToolbarItem'
+class SIASettingButton extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  triggerEvent(e, data) {
+    if (this.props.onSettingEvent) {
+      this.props.onSettingEvent(e, data)
+    }
+  }
+  toggleAnnoDetails() {
+    this.triggerEvent(tbe.SHOW_ANNO_DETAILS)
+  }
+
+  toggleLabelInfo() {
+    this.triggerEvent(tbe.SHOW_LABEL_INFO)
+  }
+
+  toggleAnnoStats() {
+    this.triggerEvent(tbe.SHOW_ANNO_STATS)
+  }
+
+  handleStrokeWidthChange(e) {
+    this.triggerEvent(tbe.EDIT_STROKE_WIDTH, parseInt(e.target.value))
+  }
+
+  handleNodeRadiusChange(e) {
+    this.triggerEvent(tbe.EDIT_NODE_RADIUS, parseInt(e.target.value))
+  }
+
+  renderInfoBoxContent() {
+    return (
+      <div>
+        <h4>Info Boxes</h4>
+        <CFormSwitch
+          checked={this.props.uiConfig.annoDetails.visible}
+          label="Annotation Details"
+          size="xl"
+          onClick={() => this.toggleAnnoDetails()}
+        />
+        <CFormSwitch
+          checked={this.props.uiConfig.labelInfo.visible}
+          label="Label Info"
+          size="xl"
+          onClick={() => this.toggleLabelInfo()}
+        />
+        <CFormSwitch
+          checked={this.props.uiConfig.annoStats.visible}
+          label="Anno Stats"
+          size="xl"
+          onClick={() => this.toggleAnnoStats()}
+        />
+      </div>
+    )
+  }
+  renderInfoBoxes() {
+    if (!this.props.enabled) return null
+    if (this.props.enabled === true) {
+      return this.renderInfoBoxContent()
+    } else {
+      if (this.props.enabled.infoBoxes) {
+        return this.renderInfoBoxContent()
+      }
+    }
+  }
+
+  renderAnnoStyle() {
+    if (!this.props.enabled) return null
+    if (this.props.enabled === true) {
+      return this.renderAnnoStyleContent()
+    } else {
+      if (this.props.enabled.annoStyle) {
+        return this.renderAnnoStyleContent()
+      }
+    }
+  }
+  renderAnnoStyleContent() {
+    return (
+      <div>
+        <h4 style={{ marginTop: 25 }}>Anno Appearance</h4>
+        <div>Stroke width: {this.props.uiConfig.strokeWidth}</div>
+        <input
+          type="range"
+          min={1}
+          max={10}
+          value={this.props.uiConfig.strokeWidth}
+          onChange={(e) => this.handleStrokeWidthChange(e)}
+        />
+        <div>Node radius: {this.props.uiConfig.nodeRadius}</div>
+        <input
+          type="range"
+          min={1}
+          max={10}
+          value={this.props.uiConfig.nodeRadius}
+          onChange={(e) => this.handleNodeRadiusChange(e)}
+        />
+      </div>
+    )
+  }
+
+  render() {
+    if (!this.props.uiConfig) return null
+    const popupContent = (
+      <div>
+        {this.renderInfoBoxes()}
+        {this.renderAnnoStyle()}
+      </div>
+    )
+    return (
+      <CPopover content={popupContent} placement="right">
+        <span>
+          <ToolbarItem faIcon={faCog} />
+        </span>
+      </CPopover>
+    )
+  }
+}
+
+export default SIASettingButton

package/src/Sia.tsx

@@ -95,24 +95,38 @@ const Sia = ({
     defaultAnnotationTool ?? AnnotationTool.Point,
   )
 
+  // refs to always have the latest state without stale closure issues
+  const annotationsRef = useRef<Annotation[]>(annotations)
+  useEffect(() => {
+    annotationsRef.current = annotations
+  }, [annotations])
+
+  const annotationHistoryIndexRef = useRef<number | undefined>(annotationHistoryIndex)
+  useEffect(() => {
+    annotationHistoryIndexRef.current = annotationHistoryIndex
+  }, [annotationHistoryIndex])
+
   const updateAnnotationHistory = (annotations: Annotation[]) => {
     const _annotations = [...annotations]
-    const _annotationHistory = [...annotationHistory]
 
-    // user did some changes from within the past
-    // time to create an alternative timeline and delete the original one
-    if (annotationHistoryIndex !== undefined) {
-      // remove everything after the state the user is
-      _annotationHistory.splice(annotationHistoryIndex + 1)
-    }
+    setAnnotationHistory((prevHistory) => {
+      const _annotationHistory = [...prevHistory]
 
-    // update the list with out latest change (it is always living in the present)
-    _annotationHistory.push(_annotations)
+      // user did some changes from within the past
+      // time to create an alternative timeline and delete the original one
+      if (annotationHistoryIndexRef.current !== undefined) {
+        // remove everything after the state the user is
+        _annotationHistory.splice(annotationHistoryIndexRef.current + 1)
+      }
+
+      // update the list with out latest change (it is always living in the present)
+      _annotationHistory.push(_annotations)
+      return _annotationHistory
+    })
 
     // keep history index marker in the present
+    annotationHistoryIndexRef.current = undefined
     setAnnotationHistoryIndex(undefined)
-
-    setAnnotationHistory(_annotationHistory)
   }
 
   // for adjusting the container/canvas size
@@ -137,17 +151,19 @@ const Sia = ({
   const [usedInternalIds, setUsedInternalIds] = useState<number[]>([])
 
   const deleteAnnotationByInternalId = (internalId: number) => {
-    // get index of selected annotation
-    const annoListIndex: number = annotations.findIndex(
+    const currentAnnotations = annotationsRef.current
+    const annoListIndex: number = currentAnnotations.findIndex(
       (anno) => anno.internalId === internalId,
     )
 
-    // dereference list to force state update
-    const _annotations: Annotation[] = [...annotations]
+    if (annoListIndex === -1) return
+
+    const _annotations: Annotation[] = [...currentAnnotations]
 
     // remove annotation
     const removedAnno: Annotation = _annotations.splice(annoListIndex, 1)[0]
 
+    annotationsRef.current = _annotations
     setAnnotations(_annotations)
     setSelectedAnnotation(undefined)
     updateAnnotationHistory(_annotations)
@@ -206,7 +222,7 @@ const Sia = ({
   }
 
   const handleAnnoEditing = (annotation: Annotation) => {
-    const _annotations: Annotation[] = [...annotations]
+    const _annotations: Annotation[] = [...annotationsRef.current]
 
     // annotation is being edited - remove it from current annotations for this time
     const selectedAnnotationIndex: number = _annotations.findIndex(
@@ -498,34 +514,29 @@ const Sia = ({
             possibleLabels={possibleLabels}
             uiConfig={uiConfig}
             onAnnoCreated={(annotation: Annotation) => {
-              setAnnotations((prev) => {
-                const _annotations = [...prev, annotation]
-                onAnnoCreated(annotation, _annotations)
-                return _annotations
-              })
+              const _annotations = [...annotationsRef.current, annotation]
+              annotationsRef.current = _annotations
+              setAnnotations(_annotations)
+              onAnnoCreated(annotation, _annotations)
               setSelectedAnnotation(annotation)
               // dont update history here - we dont have a finished anno at this point
             }}
             onAnnoChanged={(changedAnno: Annotation) => {
-              setAnnotations((prev) => {
-                // update annotation list
-                const annoListIndex: number = prev.findIndex(
-                  (anno) => anno.internalId === changedAnno.internalId,
-                )
-
-                // only fire event if item found
-                if (annoListIndex === -1) return prev
+              const annoListIndex: number = annotationsRef.current.findIndex(
+                (anno) => anno.internalId === changedAnno.internalId,
+              )
 
-                const _annotations: Annotation[] = [...prev]
+              if (annoListIndex !== -1) {
+                const _annotations: Annotation[] = [...annotationsRef.current]
                 _annotations[annoListIndex] = changedAnno
+                annotationsRef.current = _annotations
+                setAnnotations(_annotations)
 
                 // only update history for full/finished annotations
                 if (changedAnno.status !== AnnotationStatus.CREATING) {
                   updateAnnotationHistory(_annotations)
                 }
-
-                return _annotations
-              })
+              }
 
               // inform the outside world about our change
               // (kept outside the updater — side effects must not run inside setState)
@@ -551,30 +562,35 @@ const Sia = ({
                     ]
                   : []
 
-              setAnnotations((prev) => {
-                // update annotation list
-                const _annotations: Annotation[] = [...prev]
-
-                // remove the source annotations that were consumed by the polygon operation
-                for (const annotation of annosToDelete) {
-                  const annoListIndex: number = _annotations.findIndex(
-                    (anno) => anno.internalId === annotation.internalId,
-                  )
-                  if (annoListIndex !== -1) _annotations.splice(annoListIndex, 1)
-                }
+              const _annotations: Annotation[] = [...annotationsRef.current]
 
-                if (hasAnnoJustBeenCreated) _annotations.push(finishedAnno)
-                else {
-                  const annoListIndex: number = prev.findIndex(
-                    (anno) => anno.internalId === finishedAnno.internalId,
-                  )
-                  _annotations[annoListIndex] = finishedAnno
-                }
+              // remove annotations consumed by polygon operation
+              for (const annotation of annosToDelete) {
+                const annoListIndex: number = _annotations.findIndex(
+                  (anno) => anno.internalId === annotation.internalId,
+                )
+                if (annoListIndex !== -1) _annotations.splice(annoListIndex, 1)
+              }
 
-                updateAnnotationHistory(_annotations)
+              if (hasAnnoJustBeenCreated) {
+                // replace the CREATING entry with the finished CREATED version
+                const existingIdx = _annotations.findIndex(
+                  (a) => a.internalId === finishedAnno.internalId,
+                )
+                if (existingIdx !== -1) _annotations.splice(existingIdx, 1)
+                _annotations.push(finishedAnno)
+              } else {
+                const annoListIndex: number = _annotations.findIndex(
+                  (anno) => anno.internalId === finishedAnno.internalId,
+                )
+                if (annoListIndex !== -1) _annotations[annoListIndex] = finishedAnno
+              }
 
-                return _annotations
-              })
+              annotationsRef.current = _annotations
+              setAnnotations(_annotations)
+              updateAnnotationHistory(_annotations)
+              setSelectedAnnotation(finishedAnno)
+              onSelectAnnotation(finishedAnno)
 
               // Notify the server about the deletions (outside of the updater/setState!!!)
               for (const annotation of annosToDelete) {