lost-sia 3.1.2 → 3.2.0-alpha0

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

@@ -11,13 +11,12 @@ import {
 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[]
+  selectedLabelsIds: number[] | undefined
   possibleLabels: Label[]
   isMultilabel?: boolean
   onLabelSelect: (selectedLabelIds: number[]) => void
@@ -41,9 +40,9 @@ const ImageLabelInput = ({
     let newLabelIds: number[] = []
 
     if (isMultilabel) {
-      newLabelIds = [...selectedLabelsIds]
+      newLabelIds = [...(selectedLabelsIds ?? [])]
       // check if item in list (get its index if so)
-      const foundIndex: number = selectedLabelsIds.indexOf(clickedLabel.id)
+      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)
@@ -59,17 +58,17 @@ const ImageLabelInput = ({
 
   const getSelectedLabels = () => {
     const selectedLabels: Label[] = possibleLabels.filter((label: Label) =>
-      selectedLabelsIds.includes(label.id),
+      selectedLabelsIds?.includes(label.id),
     )
 
     return selectedLabels
   }
 
   const renderLabels = () => {
-    if (selectedLabelsIds.length === 0)
+    if (!selectedLabelsIds || selectedLabelsIds.length === 0)
       return (
         <div style={{ marginTop: 6 }}>
-          <FontAwesomeIcon icon={faTag as IconProps} />
+          <FontAwesomeIcon icon={faTag} />
         </div>
       )
 
@@ -88,7 +87,7 @@ const ImageLabelInput = ({
 
   return (
     <CTooltip content="Add Image Label">
-      <CDropdown visible={isVisible} autoClose={false}>
+      <CDropdown visible={isVisible} autoClose="outside">
         {/* this invisible toggle has to be here, othervise the menu is not showing as intended */}
         <CDropdownToggle
           variant="outline"

package/src/Toolbar/ToolbarItems/ImageTools.tsx

@@ -29,6 +29,8 @@ const ImageTools = ({
   const [isLabelPopupVisible, setIsLabelPopupVisible] = useState<boolean>(false)
 
   // close modal when the fullscreen state changes
+  // NOTE: imageLabelIds intentionally excluded — adding it would close the dropdown on every
+  // label click in multi-label mode, before the user finishes selecting labels.
   useEffect(() => {
     setIsLabelPopupVisible(false)
   }, [isFullscreen])

package/src/index.ts

@@ -1,4 +1,3 @@
-import 'semantic-ui-css/semantic.min.css'
 import './SIA.scss'
 
 // export all type definitions
@@ -6,5 +5,6 @@ export * from './types'
 
 export { default as IconButton } from './IconButton'
 export { default as Sia } from './Sia'
+export { default as SiaViewer } from './SiaViewer'
 export { default as transform } from './utils/transform'
 export { default as TagLabel } from './Toolbar/ToolbarItems/ImageToolItems/TagLabel'

package/src/stories/SIA/SiaViewer.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import SiaViewer from '../../SiaViewer'
+
+import exampleImage from '../exampleData/exampleImage'
+import exampleLabels from '../exampleData/exampleLabels'
+import exampleExternalAnnotations from '../exampleData/exampleExternalAnnotations'
+
+export const ActionsData = {}
+
+const meta = {
+  title: 'Components/SiaViewer',
+  component: SiaViewer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/,
+  args: {
+    ...ActionsData,
+  },
+} satisfies Meta<typeof SiaViewer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultArgs = {
+  ...ActionsData,
+  image: exampleImage,
+  possibleLabels: exampleLabels.voc,
+}
+
+/**
+ * SiaViewer with point annotations. No toolbar, no editing.
+ * Try clicking annotations to select them and scrolling to zoom.
+ */
+export const WithPointAnnotations: Story = {
+  args: {
+    ...defaultArgs,
+    annotations: exampleExternalAnnotations.point,
+  },
+}
+
+/**
+ * SiaViewer with bbox annotations.
+ */
+export const WithBBoxAnnotations: Story = {
+  args: {
+    ...defaultArgs,
+    annotations: exampleExternalAnnotations.bbox,
+  },
+}
+
+/**
+ * SiaViewer with line annotations.
+ */
+export const WithLineAnnotations: Story = {
+  args: {
+    ...defaultArgs,
+    annotations: exampleExternalAnnotations.line,
+  },
+}
+
+/**
+ * SiaViewer with polygon annotations.
+ */
+export const WithPolygonAnnotations: Story = {
+  args: {
+    ...defaultArgs,
+    annotations: exampleExternalAnnotations.polygon,
+  },
+}
+
+/**
+ * SiaViewer with zoom disabled.
+ */
+export const ZoomDisabled: Story = {
+  args: {
+    ...defaultArgs,
+    annotations: exampleExternalAnnotations.polygon,
+    enableZoom: false,
+  },
+}
+
+/**
+ * SiaViewer with selection disabled. Annotations cannot be clicked.
+ */
+export const SelectionDisabled: Story = {
+  args: {
+    ...defaultArgs,
+    annotations: exampleExternalAnnotations.polygon,
+    canSelect: false,
+  },
+}
+
+/**
+ * SiaViewer marked as junk.
+ */
+export const Junk: Story = {
+  args: {
+    ...defaultArgs,
+    annotations: exampleExternalAnnotations.polygon,
+    isJunk: true,
+  },
+}

package/src/stories/exampleData/exampleExternalAnnotations.ts

@@ -37,10 +37,10 @@ const point: ExternalAnnotation[] = [
 const line: ExternalAnnotation[] = [
   {
     coordinates: [
-      { x: 50, y: 50 },
-      { x: 200, y: 100 },
-      { x: 250, y: 100 },
-      { x: 250, y: 200 },
+      { x: 0.05, y: 0.05 },
+      { x: 0.2, y: 0.1 },
+      { x: 0.25, y: 0.1 },
+      { x: 0.25, y: 0.2 },
     ],
     labelIds: [5],
     type: AnnotationTool.Line,
@@ -48,11 +48,11 @@ const line: ExternalAnnotation[] = [
   },
   {
     coordinates: [
-      { x: 259.883, y: 300.424 },
-      { x: 350, y: 331.5263919270834 },
-      { x: 355, y: 320 },
-      { x: 370, y: 300 },
-      { x: 270, y: 250 },
+      { x: 0.26, y: 0.3 },
+      { x: 0.35, y: 0.33 },
+      { x: 0.36, y: 0.32 },
+      { x: 0.37, y: 0.3 },
+      { x: 0.27, y: 0.25 },
     ],
     labelIds: [8, 11],
     type: AnnotationTool.Line,
@@ -63,8 +63,8 @@ const line: ExternalAnnotation[] = [
 const bbox: ExternalAnnotation[] = [
   {
     coordinates: [
-      { x: 50, y: 50 },
-      { x: 200, y: 200 },
+      { x: 0.05, y: 0.05 },
+      { x: 0.2, y: 0.2 },
     ],
     labelIds: [5],
     type: AnnotationTool.BBox,
@@ -72,8 +72,8 @@ const bbox: ExternalAnnotation[] = [
   },
   {
     coordinates: [
-      { x: 250, y: 100 },
-      { x: 450, y: 150 },
+      { x: 0.25, y: 0.1 },
+      { x: 0.45, y: 0.15 },
     ],
     labelIds: [8, 11],
     type: AnnotationTool.BBox,
@@ -84,10 +84,10 @@ const bbox: ExternalAnnotation[] = [
 const polygon: ExternalAnnotation[] = [
   {
     coordinates: [
-      { x: 50, y: 50 },
-      { x: 200, y: 100 },
-      { x: 250, y: 100 },
-      { x: 250, y: 200 },
+      { x: 0.05, y: 0.05 },
+      { x: 0.2, y: 0.1 },
+      { x: 0.25, y: 0.1 },
+      { x: 0.25, y: 0.2 },
     ],
     labelIds: [5],
     status: AnnotationStatus.LOADED,
@@ -95,11 +95,11 @@ const polygon: ExternalAnnotation[] = [
   },
   {
     coordinates: [
-      { x: 259.883, y: 300.424 },
-      { x: 350, y: 331.5263919270834 },
-      { x: 355, y: 320 },
-      { x: 370, y: 300 },
-      { x: 270, y: 250 },
+      { x: 0.26, y: 0.3 },
+      { x: 0.35, y: 0.33 },
+      { x: 0.36, y: 0.32 },
+      { x: 0.37, y: 0.3 },
+      { x: 0.27, y: 0.25 },
     ],
     labelIds: [8, 11],
     status: AnnotationStatus.LOADED,

package/src/types.ts

@@ -53,6 +53,7 @@ export type SIANotification = {
 export type ToolCoordinates = {
   coordinates: Point[]
   type: AnnotationTool
+  labelIds?: number[]
 }
 
 export type UiConfig = {