lost-sia 2.0.1-alpha13 → 2.0.1-alpha14

package/src/InfoBoxes/LabelInfo.jsx

@@ -1,51 +1,51 @@
-import React, { useEffect, useState } from "react";
-import InfoBox from "./InfoBox";
-import SiaPopup from "../SiaPopup";
-import AnnoExampleViewer from "../AnnoExampleViewer";
+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 [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;
+      const selectedLabelIds = props.selectedAnno.labelIds
       if (selectedLabelIds) {
         const lbl = props.possibleLabels.find((e) => {
-          return selectedLabelIds[0] === e.id;
-        });
+          return selectedLabelIds[0] === e.id
+        })
         if (lbl) {
           if (lbl !== myLbl) {
-            setMyLbl(lbl);
+            setMyLbl(lbl)
             if (props.visible)
               // getAnnoExample({llId:lbl.id, type:'annoBased', drawAnno: true, addContext:0.05})
-              requestImg(lbl, props.selectedAnno);
+              requestImg(lbl, props.selectedAnno)
           }
         }
       }
     }
-  }, [props.selectedAnno]);
+  }, [props.selectedAnno])
   const onDismiss = () => {
     if (props.onDismiss) {
-      props.onDismiss();
+      props.onDismiss()
     }
-  };
+  }
 
   const requestImg = (lbl, anno) => {
     if (props.onGetAnnoExample) {
-      props.onGetAnnoExample({ lbl: lbl, anno: anno });
+      props.onGetAnnoExample({ lbl: lbl, anno: anno })
     }
-  };
+  }
 
   const handleImgClick = () => {
     // setShowExampleViewer(true)
     // requestImg(myLbl, props.selectedAnno)
 
-    setShowExampleViewer(true);
+    setShowExampleViewer(true)
     // getAnnoExample({llId:myLbl.id, type:'annoBased', drawAnno: true, addContext:0.05})
-  };
+  }
 
   const renderExampleImg = () => {
-    if (!props.exampleImg) return null;
+    if (!props.exampleImg) return null
     return (
       <div>
         <h4 onClick={() => handleImgClick()}>Example:</h4>
@@ -54,14 +54,14 @@ const LabelInfo = (props) => {
             <img
               src={props.exampleImg.img}
               onClick={() => handleImgClick()}
-              style={{ borderRadius: 25, width: "100%" }}
+              style={{ borderRadius: 25, width: '100%' }}
             />
           }
-          content={"Click on image to view more examples"}
+          content={'Click on image to view more examples'}
         />
       </div>
-    );
-  };
+    )
+  }
 
   const renderDescription = () => {
     // if (props.selectedAnno){
@@ -71,7 +71,7 @@ const LabelInfo = (props) => {
     // const lbl = props.possibleLabels.find( e => {
     //     return selectedLabelIds[0] === e.id
     // })
-    if (!myLbl) return "No Label";
+    if (!myLbl) return 'No Label'
     return (
       <div>
         <h4>{myLbl.label}</h4>
@@ -80,18 +80,18 @@ const LabelInfo = (props) => {
         <AnnoExampleViewer
           onRequestExample={() => requestImg(myLbl, props.selectedAnno)}
           onClose={() => {
-            setShowExampleViewer(false);
+            setShowExampleViewer(false)
           }}
           active={showExampleViewer}
           lbl={myLbl}
           exampleImg={props.exampleImg}
         />
       </div>
-    );
+    )
     // } else {
     //     return 'No Label'
     // }
-  };
+  }
 
   return (
     <InfoBox
@@ -101,7 +101,7 @@ const LabelInfo = (props) => {
       defaultPos={props.defaultPos}
       onDismiss={() => onDismiss()}
     />
-  );
-};
+  )
+}
 
-export default LabelInfo;
+export default LabelInfo

package/src/SIASettingButton.jsx

@@ -1,38 +1,38 @@
-import React, { Component } from "react";
+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";
+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 = {};
+    super(props)
+    this.state = {}
   }
 
   triggerEvent(e, data) {
     if (this.props.onSettingEvent) {
-      this.props.onSettingEvent(e, data);
+      this.props.onSettingEvent(e, data)
     }
   }
   toggleAnnoDetails() {
-    this.triggerEvent(tbe.SHOW_ANNO_DETAILS);
+    this.triggerEvent(tbe.SHOW_ANNO_DETAILS)
   }
 
   toggleLabelInfo() {
-    this.triggerEvent(tbe.SHOW_LABEL_INFO);
+    this.triggerEvent(tbe.SHOW_LABEL_INFO)
   }
 
   toggleAnnoStats() {
-    this.triggerEvent(tbe.SHOW_ANNO_STATS);
+    this.triggerEvent(tbe.SHOW_ANNO_STATS)
   }
 
   handleStrokeWidthChange(e) {
-    this.triggerEvent(tbe.EDIT_STROKE_WIDTH, parseInt(e.target.value));
+    this.triggerEvent(tbe.EDIT_STROKE_WIDTH, parseInt(e.target.value))
   }
 
   handleNodeRadiusChange(e) {
-    this.triggerEvent(tbe.EDIT_NODE_RADIUS, parseInt(e.target.value));
+    this.triggerEvent(tbe.EDIT_NODE_RADIUS, parseInt(e.target.value))
   }
 
   renderInfoBoxContent() {
@@ -58,26 +58,26 @@ class SIASettingButton extends Component {
           onClick={() => this.toggleAnnoStats()}
         />
       </div>
-    );
+    )
   }
   renderInfoBoxes() {
-    if (!this.props.enabled) return null;
+    if (!this.props.enabled) return null
     if (this.props.enabled === true) {
-      return this.renderInfoBoxContent();
+      return this.renderInfoBoxContent()
     } else {
       if (this.props.enabled.infoBoxes) {
-        return this.renderInfoBoxContent();
+        return this.renderInfoBoxContent()
       }
     }
   }
 
   renderAnnoStyle() {
-    if (!this.props.enabled) return null;
+    if (!this.props.enabled) return null
     if (this.props.enabled === true) {
-      return this.renderAnnoStyleContent();
+      return this.renderAnnoStyleContent()
     } else {
       if (this.props.enabled.annoStyle) {
-        return this.renderAnnoStyleContent();
+        return this.renderAnnoStyleContent()
       }
     }
   }
@@ -102,25 +102,25 @@ class SIASettingButton extends Component {
           onChange={(e) => this.handleNodeRadiusChange(e)}
         />
       </div>
-    );
+    )
   }
 
   render() {
-    if (!this.props.uiConfig) return null;
+    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;
+export default SIASettingButton

package/src/Sia.tsx

@@ -114,6 +114,7 @@ const Sia2 = ({
     const removedAnno: Annotation = _annotations.splice(annoListIndex, 1)[0]
 
     setAnnotations(_annotations)
+    setSelectedAnnotation(undefined)
 
     // inform the outside world about our changes
     onAnnoDeleted(removedAnno, _annotations)
@@ -167,6 +168,33 @@ const Sia2 = ({
     return newInternalId
   }
 
+  const handleAnnoEditing = (annotation: Annotation) => {
+    const _annotations: Annotation[] = [...annotations]
+
+    // annotation is being edited - remove it from current annotations for this time
+    const selectedAnnotationIndex: number = _annotations.findIndex(
+      (annotation: Annotation) =>
+        annotation.internalId === selectedAnnotation?.internalId,
+    )
+
+    if (selectedAnnotationIndex === -1) return
+
+    // remove the old anno
+    const removedAnno: Annotation = _annotations.splice(selectedAnnotationIndex, 1)[0]
+
+    // do deletion state update without the new anno!
+    onAnnoDeleted(removedAnno, _annotations)
+
+    // add the new anno
+    const newAnnoations: Annotation[] = [..._annotations]
+    newAnnoations.push(annotation)
+
+    // update the list
+    setAnnotations(newAnnoations)
+
+    setSelectedAnnotation(annotation)
+  }
+
   const handleImageJunk = (newJunkState: boolean) => {
     setIsImageJunk(newJunkState)
     onIsImageJunk(newJunkState)
@@ -409,18 +437,7 @@ const Sia2 = ({
               // inform the outer world about our changes
               onAnnoCreationFinished(changedAnno, _annotations)
             }}
-            onAnnoEditing={(annotation: Annotation) => {
-              const _annotations: Annotation[] = [...annotations]
-
-              const selectedAnnotationId: number = _annotations.findIndex(
-                (annotation: Annotation) =>
-                  annotation.internalId === selectedAnnotation?.internalId,
-              )
-
-              _annotations[selectedAnnotationId] = annotation
-
-              setAnnotations(_annotations)
-            }}
+            onAnnoEditing={handleAnnoEditing}
             onSetIsImageJunk={handleImageJunk}
             onNotification={onNotification}
             onRequestNewAnnoId={createNewInternalAnnotationId}

package/src/Toolbar/Toolbar.tsx

@@ -1,28 +1,28 @@
-import { CCol, CRow } from "@coreui/react";
+import { CCol, CRow } from '@coreui/react'
 
-import AnnoToolSelector from "./ToolbarItems/AnnoToolSelector";
-import ImageTools from "./ToolbarItems/ImageTools";
-import AnnotationTool from "../models/AnnotationTool";
-import AccessibilityTools from "./ToolbarItems/AccessibilityTools";
-import { ReactElement } from "react";
-import { AllowedTools, AnnotationSettings, Label } from "../types";
+import AnnoToolSelector from './ToolbarItems/AnnoToolSelector'
+import ImageTools from './ToolbarItems/ImageTools'
+import AnnotationTool from '../models/AnnotationTool'
+import AccessibilityTools from './ToolbarItems/AccessibilityTools'
+import { ReactElement } from 'react'
+import { AllowedTools, AnnotationSettings, Label } from '../types'
 
 type ToolbarProps = {
-  annotationSettings: AnnotationSettings;
-  allowedTools: AllowedTools;
-  additionalButtons?: ReactElement | undefined;
-  isImageJunk?: boolean;
-  imageLabelIds?: number[];
-  isDisabled?: boolean;
-  isFullscreen?: boolean;
-  possibleLabels: Label[];
-  selectedTool: AnnotationTool;
-  onImageLabelsChanged?: (selectedImageIds: number[]) => void;
-  onSetIsFullscreen?: (isFullscreen: boolean) => void;
-  onSetIsImageJunk?: (isImageJunk: boolean) => void;
-  onSetSelectedTool?: (selectedTool: AnnotationTool) => void;
-  onShouldDeleteSelectedAnnotation?: () => void;
-};
+  annotationSettings: AnnotationSettings
+  allowedTools: AllowedTools
+  additionalButtons?: ReactElement | undefined
+  isImageJunk?: boolean
+  imageLabelIds?: number[]
+  isDisabled?: boolean
+  isFullscreen?: boolean
+  possibleLabels: Label[]
+  selectedTool: AnnotationTool
+  onImageLabelsChanged?: (selectedImageIds: number[]) => void
+  onSetIsFullscreen?: (isFullscreen: boolean) => void
+  onSetIsImageJunk?: (isImageJunk: boolean) => void
+  onSetSelectedTool?: (selectedTool: AnnotationTool) => void
+  onShouldDeleteSelectedAnnotation?: () => void
+}
 
 const Toolbar = ({
   annotationSettings,
@@ -77,7 +77,7 @@ const Toolbar = ({
 
       {additionalButtons && additionalButtons}
     </CRow>
-  );
-};
+  )
+}
 
-export default Toolbar;
+export default Toolbar

package/src/Toolbar/ToolbarItems/AccessibilityTools.tsx

@@ -1,15 +1,14 @@
-import { CButton, CButtonGroup } from "@coreui/react";
-import { faMaximize, faQuestion } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { useState } from "react";
-import InstructionsModal from "./InstructionsModal";
+import { CButtonGroup } from '@coreui/react'
+import { faMaximize, faQuestion } from '@fortawesome/free-solid-svg-icons'
+import { useState } from 'react'
+import InstructionsModal from './InstructionsModal'
+import IconButton from '../../IconButton'
 
 type AccessibilityToolsProps = {
-  isDisabled?: boolean;
-  isFullscreen?: boolean;
-  onSetIsFullscreen?: (isFullscreen: boolean) => void;
-};
+  isDisabled?: boolean
+  isFullscreen?: boolean
+  onSetIsFullscreen?: (isFullscreen: boolean) => void
+}
 
 const AccessibilityTools = ({
   isDisabled = false,
@@ -17,53 +16,34 @@ const AccessibilityTools = ({
   onSetIsFullscreen = () => {},
 }: AccessibilityToolsProps) => {
   const [isInstructionsModalVisible, setIsInstructionsModalVisible] =
-    useState<boolean>(false);
+    useState<boolean>(false)
 
   return (
     <CButtonGroup role="group" aria-label="Basic example">
-      {/* <CButton
+      <IconButton
         color="primary"
+        icon={faMaximize}
+        isOutline={!isFullscreen}
         disabled={isDisabled}
-        variant="outline"
-        onClick={() => {}}
-      >
-        <FontAwesomeIcon icon={faFilter as IconProp} size="lg" />
-      </CButton> */}
-
-      <CButton
-        color="primary"
-        disabled={isDisabled}
-        variant={isFullscreen ? undefined : "outline"}
         onClick={() => onSetIsFullscreen(!isFullscreen)}
-      >
-        <FontAwesomeIcon icon={faMaximize as IconProp} size="lg" />
-      </CButton>
-
-      {/* 
-      <CButton
-        color="primary"
-        disabled={isDisabled}
-        variant="outline"
-        onClick={() => {}}
-      >
-        <FontAwesomeIcon icon={faCog as IconProp} size="lg" />
-      </CButton> */}
+        tooltip="Toggle fullscreen"
+      />
 
-      <CButton
+      <IconButton
         color="primary"
+        icon={faQuestion}
+        isOutline={true}
         disabled={isDisabled}
-        variant="outline"
         onClick={() => setIsInstructionsModalVisible(true)}
-      >
-        <FontAwesomeIcon icon={faQuestion as IconProp} size="lg" />
-      </CButton>
+        tooltip="Open instructions"
+      />
 
       <InstructionsModal
         isOpen={isInstructionsModalVisible}
         setIsOpen={setIsInstructionsModalVisible}
       />
     </CButtonGroup>
-  );
-};
+  )
+}
 
-export default AccessibilityTools;
+export default AccessibilityTools

package/src/Toolbar/ToolbarItems/AnnoToolSelector.tsx

@@ -1,19 +1,18 @@
-import { CButton, CButtonGroup } from "@coreui/react";
-import * as siaIcons from "../../utils/siaIcons";
+import { CButtonGroup } from '@coreui/react'
+import * as siaIcons from '../../utils/siaIcons'
 
-import AnnotationTool from "../../models/AnnotationTool";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
-import { AllowedTools } from "../../types";
+import AnnotationTool from '../../models/AnnotationTool'
+import { faTrash } from '@fortawesome/free-solid-svg-icons'
+import { AllowedTools } from '../../types'
+import IconButton from '../../IconButton'
 
 type AnnoToolSelectorProps = {
-  allowedTools: AllowedTools;
-  isDisabled?: boolean;
-  selectedTool: AnnotationTool;
-  onSetSelectedTool: (selectedTool: AnnotationTool) => void;
-  onShouldDeleteSelectedAnnotation?: () => void;
-};
+  allowedTools: AllowedTools
+  isDisabled?: boolean
+  selectedTool: AnnotationTool
+  onSetSelectedTool: (selectedTool: AnnotationTool) => void
+  onShouldDeleteSelectedAnnotation?: () => void
+}
 
 const AnnoToolSelector = ({
   allowedTools,
@@ -25,61 +24,72 @@ const AnnoToolSelector = ({
   return (
     <CButtonGroup role="group" aria-label="Basic example">
       {allowedTools.point && (
-        <CButton
+        // <CButton
+        //   color="primary"
+        //   disabled={isDisabled}
+        //   variant={selectedTool == AnnotationTool.Point ? undefined : 'outline'}
+        //   onClick={() => onSetSelectedTool(AnnotationTool.Point)}
+        // >
+        //   {siaIcons.pointIcon()}
+        // </CButton>
+        <IconButton
           color="primary"
+          text={siaIcons.pointIcon()}
+          isOutline={selectedTool != AnnotationTool.Point}
           disabled={isDisabled}
-          variant={selectedTool == AnnotationTool.Point ? undefined : "outline"}
           onClick={() => onSetSelectedTool(AnnotationTool.Point)}
-        >
-          {siaIcons.pointIcon()}
-        </CButton>
+          tooltip="Create Point Annotation"
+          margin={0}
+        />
       )}
 
       {allowedTools.line && (
-        <CButton
+        <IconButton
           color="primary"
+          text={siaIcons.lineIcon()}
+          isOutline={selectedTool != AnnotationTool.Line}
           disabled={isDisabled}
-          variant={selectedTool == AnnotationTool.Line ? undefined : "outline"}
           onClick={() => onSetSelectedTool(AnnotationTool.Line)}
-        >
-          {siaIcons.lineIcon()}
-        </CButton>
+          tooltip="Create Line Annotation"
+          margin={0}
+        />
       )}
 
       {allowedTools.bbox && (
-        <CButton
+        <IconButton
           color="primary"
+          text={siaIcons.bBoxIcon()}
+          isOutline={selectedTool != AnnotationTool.BBox}
           disabled={isDisabled}
-          variant={selectedTool == AnnotationTool.BBox ? undefined : "outline"}
           onClick={() => onSetSelectedTool(AnnotationTool.BBox)}
-        >
-          {siaIcons.bBoxIcon()}
-        </CButton>
+          tooltip="Create BBox Annotation"
+          margin={0}
+        />
       )}
 
       {allowedTools.polygon && (
-        <CButton
+        <IconButton
           color="primary"
+          text={siaIcons.polygonIcon()}
+          isOutline={selectedTool != AnnotationTool.Polygon}
           disabled={isDisabled}
-          variant={
-            selectedTool == AnnotationTool.Polygon ? undefined : "outline"
-          }
           onClick={() => onSetSelectedTool(AnnotationTool.Polygon)}
-        >
-          {siaIcons.polygonIcon()}
-        </CButton>
+          tooltip="Create Polygon Annotation"
+          margin={0}
+        />
       )}
 
-      <CButton
+      <IconButton
         color="primary"
-        variant="outline"
+        icon={faTrash}
+        isOutline={true}
         disabled={isDisabled}
         onClick={onShouldDeleteSelectedAnnotation}
-      >
-        <FontAwesomeIcon icon={faTrash as IconProp} size="lg" />
-      </CButton>
+        tooltip="Delete selected annotation"
+        margin={0}
+      />
     </CButtonGroup>
-  );
-};
+  )
+}
 
-export default AnnoToolSelector;
+export default AnnoToolSelector