lost-sia 2.0.1-alpha8 → 3.0.0

package/src/Toolbar/ToolbarItems/AnnoToolSelector.tsx

@@ -1,20 +1,18 @@
-import { CButton, CButtonGroup } from "@coreui/react";
-import * as siaIcons from "../../utils/siaIcons";
-import { useState } from "react";
+import { CButtonGroup } from '@coreui/react'
+import * as siaIcons from '../../utils/siaIcons'
 
-import AnnotationTool from "../../models/AnnotationTool";
-import AllowedTools from "../../models/AllowedTools";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
+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,
@@ -23,66 +21,75 @@ const AnnoToolSelector = ({
   onSetSelectedTool,
   onShouldDeleteSelectedAnnotation = () => {},
 }: AnnoToolSelectorProps) => {
-  // const [selectedTool, setSelectedTool] = useState<AnnotationTool>(defaultTool);
-
   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

package/src/Toolbar/ToolbarItems/ImageToolItems/ImageLabelInput.tsx

@@ -0,0 +1,127 @@
+import { useState } from 'react'
+import {
+  CDropdown,
+  CDropdownMenu,
+  CDropdownItem,
+  CFormInput,
+  CDropdownDivider,
+  CDropdownToggle,
+  CTooltip,
+} from '@coreui/react'
+import { Label } from '../../../types'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTag } from '@fortawesome/free-solid-svg-icons'
+import { IconProps } from 'semantic-ui-react'
+import TagLabel from './TagLabel'
+
+type ImageLabelInputProps = {
+  isDisabled: boolean
+  isVisible: boolean
+  selectedLabelsIds: number[]
+  possibleLabels: Label[]
+  isMultilabel?: boolean
+  onLabelSelect: (selectedLabelIds: number[]) => void
+}
+
+const ImageLabelInput = ({
+  isDisabled,
+  isVisible,
+  selectedLabelsIds,
+  possibleLabels,
+  isMultilabel = false,
+  onLabelSelect,
+}: ImageLabelInputProps) => {
+  const [filter, setFilter] = useState('')
+
+  const filteredLabels: Label[] = possibleLabels.filter((label: Label) =>
+    label.name.toLowerCase().includes(filter.toLowerCase()),
+  )
+
+  const updateSelectedLabels = (clickedLabel: Label) => {
+    let newLabelIds: number[] = []
+
+    if (isMultilabel) {
+      newLabelIds = [...selectedLabelsIds]
+      // check if item in list (get its index if so)
+      const foundIndex: number = selectedLabelsIds.indexOf(clickedLabel.id)
+      // add label if not in list, remove label if in list
+      if (foundIndex === -1) {
+        newLabelIds.push(clickedLabel.id)
+      } else {
+        newLabelIds.splice(foundIndex, 1)
+      }
+    }
+    // single-label: just replace list with clicked item
+    else newLabelIds = [clickedLabel.id]
+
+    onLabelSelect(newLabelIds)
+  }
+
+  const getSelectedLabels = () => {
+    const selectedLabels: Label[] = possibleLabels.filter((label: Label) =>
+      selectedLabelsIds.includes(label.id),
+    )
+
+    return selectedLabels
+  }
+
+  const renderLabels = () => {
+    if (selectedLabelsIds.length === 0)
+      return (
+        <div style={{ marginTop: 6 }}>
+          <FontAwesomeIcon icon={faTag as IconProps} />
+        </div>
+      )
+
+    const selectedLabels = getSelectedLabels()
+    return selectedLabels.map((label: Label) => (
+      <TagLabel
+        key={label.name}
+        name={label.name}
+        color={label.color}
+        size={25}
+        triangleSize={17}
+        style={{ marginLeft: 1, marginTop: 5 }}
+      />
+    ))
+  }
+
+  return (
+    <CTooltip content="Add Image Label">
+      <CDropdown visible={isVisible} autoClose={false}>
+        {/* this invisible toggle has to be here, othervise the menu is not showing as intended */}
+        <CDropdownToggle
+          variant="outline"
+          caret={false}
+          color={isDisabled ? 'secondary' : 'primary'}
+          style={{ paddingTop: 0, paddingBottom: 0 }}
+          as="div"
+        >
+          {renderLabels()}
+        </CDropdownToggle>
+        <CDropdownMenu>
+          <div className="px-3 py-2">
+            <CFormInput
+              placeholder="Filter label..."
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              autoFocus
+            />
+          </div>
+          <CDropdownDivider />
+          {filteredLabels.length > 0 ? (
+            filteredLabels.map((label: Label) => (
+              <CDropdownItem key={label.id} onClick={() => updateSelectedLabels(label)}>
+                {label.name}
+              </CDropdownItem>
+            ))
+          ) : (
+            <CDropdownItem disabled>No results</CDropdownItem>
+          )}
+        </CDropdownMenu>
+      </CDropdown>
+    </CTooltip>
+  )
+}
+
+export default ImageLabelInput

package/src/Toolbar/ToolbarItems/ImageToolItems/TagLabel.tsx

@@ -1,56 +1,57 @@
-import React from "react";
+import type { CSSProperties } from 'react'
 
 type TagLabelProps = {
-  name: string;
-  color?: string;
-  size?: number;
-  style?: any;
-  triangleSize?: number;
-  onClick?: () => void;
-};
+  name: string
+  color?: string
+  size?: number
+  style?: CSSProperties
+  triangleSize?: number
+  onClick?: () => void
+}
 
 const TagLabel = ({
   name,
-  color = "#2185d0",
+  color = '#2185d0',
   size: bodySize = 32,
   style = {},
   triangleSize = 22,
   onClick,
 }: TagLabelProps) => {
-  const containerStyle = {
-    display: "inline-flex",
-    alignItems: "center",
+  const containerStyle: CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
     backgroundColor: color,
-    color: "#000",
+    color: '#000',
     height: `${bodySize}px`,
     fontSize: `${bodySize * 0.45}px`,
     padding: `0 1rem 0 0.75rem`,
-    borderRadius: "0 0.25rem 0.25rem 0",
+    border: 0,
+    borderRadius: '0 0.25rem 0.25rem 0',
     marginLeft: `${triangleSize / 1.4}px`, // hypothenuse of the halfed square
-    position: "relative",
-    overflow: "visible", // allow triangle to stick out
-    cursor: onClick ? "pointer" : "default",
+    position: 'relative',
+    overflow: 'visible', // allow triangle to stick out
+    cursor: onClick ? 'pointer' : 'default',
     ...style,
-  };
+  }
 
   // A rotated square to simulate a triangle
-  const triangleStyle = {
-    position: "absolute",
+  const triangleStyle: CSSProperties = {
+    position: 'absolute',
     left: `-${triangleSize / 2}px`,
     width: `${triangleSize}px`,
     height: `${triangleSize}px`,
     backgroundColor: color,
-    transform: "rotate(45deg)",
+    transform: 'rotate(45deg)',
     zIndex: -1, // push behind text
-    pointerEvents: "none",
-  };
+    pointerEvents: 'none',
+  }
 
   return (
-    <span style={containerStyle} onClick={onClick}>
+    <button style={containerStyle} onClick={onClick}>
       <span style={triangleStyle} />
       {name}
-    </span>
-  );
-};
+    </button>
+  )
+}
 
-export default TagLabel;
+export default TagLabel

package/src/Toolbar/ToolbarItems/ImageTools.tsx

@@ -1,63 +1,66 @@
-import { CButton, CButtonGroup, CPopover } from "@coreui/react";
-import { faBan, faTag, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import ImageLabel from "./ImageToolItems/ImageLabel";
-import Label from "../../models/Label";
+import { CButtonGroup } from '@coreui/react'
+import { faBan } from '@fortawesome/free-solid-svg-icons'
+import { useEffect, useState } from 'react'
+import { Label } from '../../types'
+import ImageLabelInput from './ImageToolItems/ImageLabelInput'
+import IconButton from '../../IconButton'
 
 type ImageToolsProps = {
-  canJunk: boolean;
-  imageLabelIds?: number[];
-  isDisabled?: boolean;
-  isImageJunk?: boolean;
-  possibleLabels: Label[];
-  onImageLabelsChanged?: (selectedImageIds: number[]) => void;
-  onSetIsImageJunk?: (isImageJunk: boolean) => void;
-};
+  canJunk: boolean
+  imageLabelIds?: number[]
+  isDisabled?: boolean
+  isFullscreen?: boolean
+  isImageJunk?: boolean
+  possibleLabels: Label[]
+  onImageLabelsChanged?: (selectedImageIds: number[]) => void
+  onSetIsImageJunk?: (isImageJunk: boolean) => void
+}
 
 const ImageTools = ({
   canJunk,
   isDisabled = false,
+  isFullscreen = false,
   isImageJunk = false,
   imageLabelIds = [],
   possibleLabels,
   onImageLabelsChanged = () => {},
   onSetIsImageJunk = () => {},
 }: ImageToolsProps) => {
-  const customPopoverStyle = {
-    "--cui-popover-max-width": "800px",
-  };
+  const [isLabelPopupVisible, setIsLabelPopupVisible] = useState<boolean>(false)
+
+  // close modal when the fullscreen state changes
+  useEffect(() => {
+    setIsLabelPopupVisible(false)
+  }, [isFullscreen])
 
   return (
     <CButtonGroup role="group" aria-label="Image Tools">
-      <CPopover
-        placement="bottom"
-        content={
-          <ImageLabel
-            selectedLabelIds={imageLabelIds}
-            possibleLabels={possibleLabels}
-            onImageLabelsChanged={onImageLabelsChanged}
-          />
-        }
-        style={customPopoverStyle}
-      >
-        <CButton color="primary" variant="outline" disabled={isDisabled}>
-          <FontAwesomeIcon icon={faTag as IconProp} size="lg" />
-        </CButton>
-      </CPopover>
+      {possibleLabels && (
+        <ImageLabelInput
+          isDisabled={isDisabled}
+          isMultilabel={true}
+          isVisible={isLabelPopupVisible}
+          selectedLabelsIds={imageLabelIds}
+          possibleLabels={possibleLabels}
+          onLabelSelect={(selectedLabelIds: number[]) => {
+            setIsLabelPopupVisible(false)
+            onImageLabelsChanged(selectedLabelIds)
+          }}
+        />
+      )}
 
       {canJunk && (
-        <CButton
+        <IconButton
           color="primary"
-          variant={isImageJunk ? undefined : "outline"}
+          icon={faBan}
+          isOutline={!isImageJunk}
           disabled={isDisabled}
           onClick={() => onSetIsImageJunk(!isImageJunk)}
-        >
-          <FontAwesomeIcon icon={faBan as IconProp} size="lg" />
-        </CButton>
+          tooltip="Junk image"
+        />
       )}
     </CButtonGroup>
-  );
-};
+  )
+}
 
-export default ImageTools;
+export default ImageTools

package/src/Toolbar/ToolbarItems/Instructions.tsx

@@ -6,101 +6,98 @@ import {
   CCol,
   CContainer,
   CRow,
-} from "@coreui/react";
+} from '@coreui/react'
 
 type Instruction = {
-  title: string;
-  description: string[];
-};
+  title: string
+  description: string[]
+}
 
 const Instructions = () => {
   const instructionContent: Instruction[] = [
     {
-      title: "How to draw?",
+      title: 'How to draw?',
       description: [
-        "1.) Select a Tool in the toolbar",
-        "2.) Draw with RIGHT CLICK on Canvas",
+        '1.) Select a Tool in the toolbar',
+        '2.) Draw with RIGHT CLICK on Canvas',
       ],
     },
     {
-      title: "How to delete an annotation?",
+      title: 'How to delete an annotation?',
       description: [
-        "1.) Select an annotation with LEFT CLICK",
-        "2.) Press DELETE or BACKSPACE",
+        '1.) Select an annotation with LEFT CLICK',
+        '2.) Press DELETE or BACKSPACE',
       ],
     },
     {
-      title: "How to assign a label?",
+      title: 'How to assign a label?',
       description: [
-        "1.) Select an annotation with LEFT CLICK ",
-        "2.) Hit ENTER ",
-        "3.) Type into the input field ",
-        "4.) Hit ENTER to confirm ",
-        "5.) Hit ESCAPE to close the input field",
+        '1.) Select an annotation with LEFT CLICK ',
+        '2.) Hit ENTER ',
+        '3.) Type into the input field ',
+        '4.) Hit ENTER to confirm ',
+        '5.) Hit ESCAPE to close the input field',
       ],
     },
     {
-      title: "Undo/ Redo",
-      description: ["Undo: Hit STRG + Z ", "Redo: Hit STRG + R"],
+      title: 'Undo/ Redo',
+      description: ['Undo: Hit STRG + Z ', 'Redo: Hit STRG + R'],
     },
     {
-      title: "Add/ Remove a node to Line/Polygon",
+      title: 'Add/ Remove a node to Line/Polygon',
       description: [
-        "Add: Hit STRG + Click left on the line",
-        "Remove: Hit STRG + Click left on the node to delete",
+        'Add: Hit STRG + Click left on the line',
+        'Remove: Hit STRG + Click left on the node to delete',
       ],
     },
     {
-      title: "Remove a node",
-      description: ["Hold CTRL and left click on the node"],
+      title: 'Remove a node',
+      description: ['Hold CTRL and left click on the node'],
     },
     {
-      title: "Edit Line/Polygon",
+      title: 'Edit Line/Polygon',
       description: [
-        "1.) Click on the Annotation you want to edit.",
+        '1.) Click on the Annotation you want to edit.',
         ' 2.) Press "e". New nodes can now be added using right click',
       ],
     },
     {
-      title: "Zoom/ Move Canvas",
+      title: 'Zoom/ Move Canvas',
       description: [
-        "Zoom: Use MOUSE WHEEL to zoom in/out",
-        "Move: Hold MOUSE WHEEL and move mouse. Or Use W/A/S/D keys to move camera up/left/down/right",
+        'Zoom: Use MOUSE WHEEL to zoom in/out',
+        'Move: Hold MOUSE WHEEL and move mouse. Or Use W/A/S/D keys to move camera up/left/down/right',
       ],
     },
     {
-      title: "TAB navigation",
-      description: ["You can traverse all visible annotation by hitting TAB."],
+      title: 'TAB navigation',
+      description: ['You can traverse all visible annotation by hitting TAB.'],
     },
     {
-      title: "Next/Prev image navigation",
+      title: 'Next/Prev image navigation',
       description: [
-        "Get next image by hitting ARROW_RIGHT key.",
-        "Get previous image by hitting ARROW_LEFT key.",
+        'Get next image by hitting ARROW_RIGHT key.',
+        'Get previous image by hitting ARROW_LEFT key.',
       ],
     },
     {
-      title: "Copy and Paste annotations",
-      description: [
-        "Copy: 1.) Select annotation 2.) Hit STRG + C",
-        "Paste: STRG + V",
-      ],
+      title: 'Copy and Paste annotations',
+      description: ['Copy: 1.) Select annotation 2.) Hit STRG + C', 'Paste: STRG + V'],
     },
     {
-      title: "Mark image as junk",
-      description: ["Press J key"],
+      title: 'Mark image as junk',
+      description: ['Press J key'],
     },
     {
-      title: "Assign a comment to a 2D annoation",
-      description: ["1.) Select annotation", "2.) Hit C key"],
+      title: 'Assign a comment to a 2D annoation',
+      description: ['1.) Select annotation', '2.) Hit C key'],
     },
-  ];
+  ]
 
   const renderCards = () => {
     return instructionContent.map((instruction) => {
       const stepsContent = instruction.description.map((step) => (
         <CCardText key={step}>{step}</CCardText>
-      ));
+      ))
       return (
         <CCol xs={12} md={4} lg={3} key={instruction.title}>
           <CCard>
@@ -110,15 +107,15 @@ const Instructions = () => {
             </CCardBody>
           </CCard>
         </CCol>
-      );
-    });
-  };
+      )
+    })
+  }
 
   return (
     <CContainer>
       <CRow xs={{ gutterY: 2 }}>{renderCards()}</CRow>
     </CContainer>
-  );
-};
+  )
+}
 
-export default Instructions;
+export default Instructions

package/src/Toolbar/ToolbarItems/InstructionsModal.tsx

@@ -1,10 +1,10 @@
-import { CModal, CModalBody, CModalHeader } from "@coreui/react";
-import Instructions from "./Instructions";
+import { CModal, CModalBody, CModalHeader } from '@coreui/react'
+import Instructions from './Instructions'
 
 type InstructionsModalProps = {
-  isOpen: boolean;
-  setIsOpen: (boolean) => void;
-};
+  isOpen: boolean
+  setIsOpen: (boolean) => void
+}
 
 const InstructionsModal = ({ isOpen, setIsOpen }: InstructionsModalProps) => {
   return (
@@ -14,7 +14,7 @@ const InstructionsModal = ({ isOpen, setIsOpen }: InstructionsModalProps) => {
         <Instructions />
       </CModalBody>
     </CModal>
-  );
-};
+  )
+}
 
-export default InstructionsModal;
+export default InstructionsModal