lost-sia 3.2.0-alpha0 → 3.2.0

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

@@ -1,4 +1,5 @@
-import { useState } from 'react'
+import { useState, useRef, useCallback } from 'react'
+import React from 'react'
 import {
   CDropdown,
   CDropdownMenu,
@@ -11,11 +12,13 @@ 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
+  isFullscreen?: boolean
   selectedLabelsIds: number[] | undefined
   possibleLabels: Label[]
   isMultilabel?: boolean
@@ -25,12 +28,30 @@ type ImageLabelInputProps = {
 const ImageLabelInput = ({
   isDisabled,
   isVisible,
+  isFullscreen = false,
   selectedLabelsIds,
   possibleLabels,
   isMultilabel = false,
   onLabelSelect,
 }: ImageLabelInputProps) => {
   const [filter, setFilter] = useState('')
+  const tagElRef = useRef<HTMLDivElement | null>(null)
+  const tagHandlerRef = useRef<((e: WheelEvent) => void) | null>(null)
+  const tagScrollRef = useCallback((el: HTMLDivElement | null) => {
+    // cleanup previous listener
+    if (tagElRef.current && tagHandlerRef.current) {
+      tagElRef.current.removeEventListener('wheel', tagHandlerRef.current)
+    }
+    tagElRef.current = el
+    tagHandlerRef.current = null
+    if (!el) return
+    const handler = (e: WheelEvent) => {
+      e.preventDefault()
+      el.scrollLeft += e.deltaY * 0.2
+    }
+    tagHandlerRef.current = handler
+    el.addEventListener('wheel', handler, { passive: false })
+  }, [])
 
   const filteredLabels: Label[] = possibleLabels.filter((label: Label) =>
     label.name.toLowerCase().includes(filter.toLowerCase()),
@@ -67,22 +88,41 @@ const ImageLabelInput = ({
   const renderLabels = () => {
     if (!selectedLabelsIds || selectedLabelsIds.length === 0)
       return (
-        <div style={{ marginTop: 6 }}>
-          <FontAwesomeIcon icon={faTag} />
+        <div>
+          <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 (
+      <div
+        ref={tagScrollRef}
+        style={
+          {
+            display: 'flex',
+            flexWrap: 'nowrap',
+            overflowX: 'auto',
+            maxWidth: isFullscreen ? '500px' : '300px',
+            alignItems: 'center',
+            gap: '10px',
+            scrollbarWidth: 'thin',
+          } as React.CSSProperties
+        }
+        className="tag-scroll"
+      >
+        {selectedLabels.map((label: Label) => (
+          <TagLabel
+            key={label.name}
+            name={label.name}
+            color={label.color}
+            size={25}
+            triangleSize={17}
+            style={{ flexShrink: 0 }}
+            onRemove={() => updateSelectedLabels(label)}
+          />
+        ))}
+      </div>
+    )
   }
 
   return (
@@ -93,12 +133,12 @@ const ImageLabelInput = ({
           variant="outline"
           caret={false}
           color={isDisabled ? 'secondary' : 'primary'}
-          style={{ paddingTop: 0, paddingBottom: 0 }}
+          // style={{ paddingTop: 0, paddingBottom: 0 }}
           as="div"
         >
           {renderLabels()}
         </CDropdownToggle>
-        <CDropdownMenu>
+        <CDropdownMenu as="div" style={{ padding: 0 }}>
           <div className="px-3 py-2">
             <CFormInput
               placeholder="Filter label..."
@@ -108,15 +148,25 @@ const ImageLabelInput = ({
             />
           </div>
           <CDropdownDivider />
-          {filteredLabels.length > 0 ? (
-            filteredLabels.map((label: Label) => (
-              <CDropdownItem key={label.id} onClick={() => updateSelectedLabels(label)}>
-                {label.name}
-              </CDropdownItem>
-            ))
-          ) : (
-            <CDropdownItem disabled>No results</CDropdownItem>
-          )}
+          <div style={{ maxHeight: '200px', overflowY: 'auto' }}>
+            {filteredLabels.length > 0 ? (
+              filteredLabels.map((label: Label) => {
+                const isSelected = selectedLabelsIds?.includes(label.id)
+
+                return (
+                  <CDropdownItem
+                    key={label.id}
+                    onClick={() => updateSelectedLabels(label)}
+                    active={isSelected}
+                  >
+                    {label.name}
+                  </CDropdownItem>
+                )
+              })
+            ) : (
+              <CDropdownItem disabled>No results</CDropdownItem>
+            )}
+          </div>
         </CDropdownMenu>
       </CDropdown>
     </CTooltip>

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

@@ -1,4 +1,7 @@
 import type { CSSProperties } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faXmark } from '@fortawesome/free-solid-svg-icons'
+import { IconProps } from 'semantic-ui-react'
 
 type TagLabelProps = {
   name: string
@@ -7,6 +10,7 @@ type TagLabelProps = {
   style?: CSSProperties
   triangleSize?: number
   onClick?: () => void
+  onRemove?: () => void
 }
 
 const TagLabel = ({
@@ -16,6 +20,7 @@ const TagLabel = ({
   style = {},
   triangleSize = 22,
   onClick,
+  onRemove,
 }: TagLabelProps) => {
   const containerStyle: CSSProperties = {
     display: 'inline-flex',
@@ -50,6 +55,34 @@ const TagLabel = ({
     <button style={containerStyle} onClick={onClick}>
       <span style={triangleStyle} />
       {name}
+      {onRemove && (
+        <span
+          role="button"
+          tabIndex={0}
+          onClick={(e) => {
+            e.stopPropagation()
+            onRemove()
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.stopPropagation()
+              onRemove()
+            }
+          }}
+          style={{
+            marginLeft: '6px',
+            cursor: 'pointer',
+            opacity: 0.6,
+            fontSize: `${bodySize * 0.4}px`,
+            lineHeight: 1,
+            display: 'inline-flex',
+            alignItems: 'center',
+          }}
+          aria-label="Remove tag"
+        >
+          <FontAwesomeIcon icon={faXmark as IconProps} />
+        </span>
+      )}
     </button>
   )
 }

package/src/Toolbar/ToolbarItems/ImageTools.tsx

@@ -41,6 +41,7 @@ const ImageTools = ({
         <ImageLabelInput
           isDisabled={isDisabled}
           isMultilabel={true}
+          isFullscreen={isFullscreen}
           isVisible={isLabelPopupVisible}
           selectedLabelsIds={imageLabelIds}
           possibleLabels={possibleLabels}

package/src/index.ts

@@ -1,3 +1,4 @@
+import 'semantic-ui-css/semantic.min.css'
 import './SIA.scss'
 
 // export all type definitions
@@ -5,6 +6,5 @@ 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/exampleData/exampleExternalAnnotations.ts

@@ -37,10 +37,10 @@ const point: ExternalAnnotation[] = [
 const line: ExternalAnnotation[] = [
   {
     coordinates: [
-      { x: 0.05, y: 0.05 },
-      { x: 0.2, y: 0.1 },
-      { x: 0.25, y: 0.1 },
-      { x: 0.25, y: 0.2 },
+      { x: 50, y: 50 },
+      { x: 200, y: 100 },
+      { x: 250, y: 100 },
+      { x: 250, y: 200 },
     ],
     labelIds: [5],
     type: AnnotationTool.Line,
@@ -48,11 +48,11 @@ const line: ExternalAnnotation[] = [
   },
   {
     coordinates: [
-      { 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 },
+      { x: 259.883, y: 300.424 },
+      { x: 350, y: 331.5263919270834 },
+      { x: 355, y: 320 },
+      { x: 370, y: 300 },
+      { x: 270, y: 250 },
     ],
     labelIds: [8, 11],
     type: AnnotationTool.Line,
@@ -63,8 +63,8 @@ const line: ExternalAnnotation[] = [
 const bbox: ExternalAnnotation[] = [
   {
     coordinates: [
-      { x: 0.05, y: 0.05 },
-      { x: 0.2, y: 0.2 },
+      { x: 50, y: 50 },
+      { x: 200, y: 200 },
     ],
     labelIds: [5],
     type: AnnotationTool.BBox,
@@ -72,8 +72,8 @@ const bbox: ExternalAnnotation[] = [
   },
   {
     coordinates: [
-      { x: 0.25, y: 0.1 },
-      { x: 0.45, y: 0.15 },
+      { x: 250, y: 100 },
+      { x: 450, y: 150 },
     ],
     labelIds: [8, 11],
     type: AnnotationTool.BBox,
@@ -84,10 +84,10 @@ const bbox: ExternalAnnotation[] = [
 const polygon: ExternalAnnotation[] = [
   {
     coordinates: [
-      { x: 0.05, y: 0.05 },
-      { x: 0.2, y: 0.1 },
-      { x: 0.25, y: 0.1 },
-      { x: 0.25, y: 0.2 },
+      { x: 50, y: 50 },
+      { x: 200, y: 100 },
+      { x: 250, y: 100 },
+      { x: 250, y: 200 },
     ],
     labelIds: [5],
     status: AnnotationStatus.LOADED,
@@ -95,11 +95,11 @@ const polygon: ExternalAnnotation[] = [
   },
   {
     coordinates: [
-      { 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 },
+      { x: 259.883, y: 300.424 },
+      { x: 350, y: 331.5263919270834 },
+      { x: 355, y: 320 },
+      { x: 370, y: 300 },
+      { x: 270, y: 250 },
     ],
     labelIds: [8, 11],
     status: AnnotationStatus.LOADED,

package/dist/SiaViewer.d.ts

@@ -1,19 +0,0 @@
-import { default as Annotation } from './Annotation/logic/Annotation';
-import { ExternalAnnotation, Label, UiConfig } from './types';
-type SiaViewerProps = {
-    image: string;
-    annotations?: ExternalAnnotation[];
-    possibleLabels: Label[];
-    isJunk?: boolean;
-    uiConfig?: Partial<UiConfig>;
-    enableZoom?: boolean;
-    canSelect?: boolean;
-    onSelectAnnotation?: (annotation?: Annotation) => void;
-};
-/**
- * View-only SIA component. Renders image + annotations without a toolbar and
- * blocks all mutations (create / edit / delete / label). Zoom and selection
- * can be toggled via props.
- */
-declare const SiaViewer: ({ image, annotations: propAnnotations, possibleLabels, isJunk, uiConfig: propUiConfig, enableZoom, canSelect, onSelectAnnotation, }: SiaViewerProps) => import("react/jsx-runtime").JSX.Element;
-export default SiaViewer;

package/dist/SiaViewer.js

@@ -1 +0,0 @@
-import{jsx as r}from"react/jsx-runtime";import{useState as s,useEffect as c}from"react";import p from"./Canvas/Canvas.js";import N from"./models/AnnotationMode.js";import h from"./models/AnnotationTool.js";const E={canCreate:!1,canEdit:!1,canLabel:!1,canHaveMultipleLabels:!1},f={nodeRadius:4,strokeWidth:4,imageCentered:!1},y={flex:"1 1 auto",minHeight:0,display:"flex",flexDirection:"column"},H=({image:n,annotations:e,possibleLabels:u,isJunk:m=!1,uiConfig:a,enableZoom:A=!0,canSelect:l=!0,onSelectAnnotation:I=()=>{}})=>{const[S,d]=s([]),[T,t]=s(),[C,g]=s(f);return c(()=>{if(n===void 0||e===void 0){d([]),t(void 0);return}let o=0;const v=e.map(i=>({...i,internalId:o++,mode:N.VIEW,selectedNode:1,status:i.status,annoTime:i.annoTime??0}));d(v),t(void 0)},[e,n]),c(()=>{g({...f,...a})},[a]),r("div",{style:y,onWheelCapture:o=>{A||o.stopPropagation()},children:r(p,{annotations:S,annotationSettings:E,image:n,isImageJunk:m,isPolygonSelectionMode:!1,possibleLabels:u,selectedAnnotation:l?T:void 0,selectedAnnoTool:h.Point,uiConfig:C,onAnnoCreated:()=>{},onAnnoChanged:()=>{},onAnnoCreationFinished:()=>{},onAnnoEditing:()=>{},onNotification:()=>{},onRequestNewAnnoId:()=>0,onSelectAnnotation:l?o=>{t(o),I(o)}:()=>{},onSetIsImageJunk:()=>{},onSetSelectedTool:()=>{},onShouldDeleteAnno:()=>{},onTraverseAnnotationHistory:()=>{}})})};export{H as default};

package/dist/assets/SIA-BV1tYu3P.css

@@ -1 +0,0 @@
-.sia-fullscreen{position:fixed;top:0;left:0;z-index:6000;width:100%;height:100%;background-color:#fff}

package/dist/stories/SIA/SiaViewer.stories.d.ts

@@ -1,52 +0,0 @@
-import { StoryObj } from '@storybook/react';
-export declare const ActionsData: {};
-declare const meta: {
-    title: string;
-    component: ({ image, annotations: propAnnotations, possibleLabels, isJunk, uiConfig: propUiConfig, enableZoom, canSelect, onSelectAnnotation, }: {
-        image: string;
-        annotations?: import('../..').ExternalAnnotation[];
-        possibleLabels: import('../..').Label[];
-        isJunk?: boolean;
-        uiConfig?: Partial<import('../..').UiConfig>;
-        enableZoom?: boolean;
-        canSelect?: boolean;
-        onSelectAnnotation?: (annotation?: import('../../models').Annotation) => void;
-    }) => import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    excludeStories: RegExp;
-    args: {};
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-/**
- * SiaViewer with point annotations. No toolbar, no editing.
- * Try clicking annotations to select them and scrolling to zoom.
- */
-export declare const WithPointAnnotations: Story;
-/**
- * SiaViewer with bbox annotations.
- */
-export declare const WithBBoxAnnotations: Story;
-/**
- * SiaViewer with line annotations.
- */
-export declare const WithLineAnnotations: Story;
-/**
- * SiaViewer with polygon annotations.
- */
-export declare const WithPolygonAnnotations: Story;
-/**
- * SiaViewer with zoom disabled.
- */
-export declare const ZoomDisabled: Story;
-/**
- * SiaViewer with selection disabled. Annotations cannot be clicked.
- */
-export declare const SelectionDisabled: Story;
-/**
- * SiaViewer marked as junk.
- */
-export declare const Junk: Story;

package/src/SiaViewer.tsx

@@ -1,125 +0,0 @@
-import { CSSProperties, useEffect, useState, WheelEvent } from 'react'
-import Canvas from './Canvas/Canvas'
-import Annotation from './Annotation/logic/Annotation'
-import AnnotationMode from './models/AnnotationMode'
-import AnnotationTool from './models/AnnotationTool'
-import { AnnotationSettings, ExternalAnnotation, Label, UiConfig } from './types'
-
-type SiaViewerProps = {
-  image: string
-  annotations?: ExternalAnnotation[]
-  possibleLabels: Label[]
-  isJunk?: boolean
-  uiConfig?: Partial<UiConfig>
-  enableZoom?: boolean
-  canSelect?: boolean
-  onSelectAnnotation?: (annotation?: Annotation) => void
-}
-
-const VIEW_ANNOTATION_SETTINGS: AnnotationSettings = {
-  canCreate: false,
-  canEdit: false,
-  canLabel: false,
-  canHaveMultipleLabels: false,
-}
-
-const DEFAULT_UI_CONFIG: UiConfig = {
-  nodeRadius: 4,
-  strokeWidth: 4,
-  imageCentered: false,
-}
-
-const containerStyle: CSSProperties = {
-  flex: '1 1 auto',
-  minHeight: 0,
-  display: 'flex',
-  flexDirection: 'column',
-}
-
-/**
- * View-only SIA component. Renders image + annotations without a toolbar and
- * blocks all mutations (create / edit / delete / label). Zoom and selection
- * can be toggled via props.
- */
-const SiaViewer = ({
-  image,
-  annotations: propAnnotations,
-  possibleLabels,
-  isJunk = false,
-  uiConfig: propUiConfig,
-  enableZoom = true,
-  canSelect = true,
-  onSelectAnnotation = () => {},
-}: SiaViewerProps) => {
-  const [annotations, setAnnotations] = useState<Annotation[]>([])
-  const [selectedAnnotation, setSelectedAnnotation] = useState<
-    Annotation | undefined
-  >()
-  const [uiConfig, setUiConfig] = useState<UiConfig>(DEFAULT_UI_CONFIG)
-
-  // (re)initialize annotations whenever the annotations or image prop changes
-  useEffect(() => {
-    if (image === undefined || propAnnotations === undefined) {
-      setAnnotations([])
-      setSelectedAnnotation(undefined)
-      return
-    }
-
-    let internalId = 0
-    const next: Annotation[] = propAnnotations.map((externalAnno) => ({
-      ...externalAnno,
-      internalId: internalId++,
-      mode: AnnotationMode.VIEW,
-      selectedNode: 1,
-      status: externalAnno.status,
-      annoTime: externalAnno.annoTime ?? 0,
-    }))
-
-    setAnnotations(next)
-    setSelectedAnnotation(undefined)
-  }, [propAnnotations, image])
-
-  useEffect(() => {
-    setUiConfig({ ...DEFAULT_UI_CONFIG, ...propUiConfig })
-  }, [propUiConfig])
-
-  const stopZoom = (e: WheelEvent) => {
-    if (!enableZoom) e.stopPropagation()
-  }
-
-  return (
-    <div style={containerStyle} onWheelCapture={stopZoom}>
-      <Canvas
-        annotations={annotations}
-        annotationSettings={VIEW_ANNOTATION_SETTINGS}
-        image={image}
-        isImageJunk={isJunk}
-        isPolygonSelectionMode={false}
-        possibleLabels={possibleLabels}
-        selectedAnnotation={canSelect ? selectedAnnotation : undefined}
-        selectedAnnoTool={AnnotationTool.Point}
-        uiConfig={uiConfig}
-        onAnnoCreated={() => {}}
-        onAnnoChanged={() => {}}
-        onAnnoCreationFinished={() => {}}
-        onAnnoEditing={() => {}}
-        onNotification={() => {}}
-        onRequestNewAnnoId={() => 0}
-        onSelectAnnotation={
-          canSelect
-            ? (annotation) => {
-                setSelectedAnnotation(annotation)
-                onSelectAnnotation(annotation)
-              }
-            : () => {}
-        }
-        onSetIsImageJunk={() => {}}
-        onSetSelectedTool={() => {}}
-        onShouldDeleteAnno={() => {}}
-        onTraverseAnnotationHistory={() => {}}
-      />
-    </div>
-  )
-}
-
-export default SiaViewer

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

@@ -1,105 +0,0 @@
-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,
-  },
-}