lost-sia 3.2.0-alpha0 → 3.2.0

package/dist/stories/Canvas/CanvasWithOffset.stories.d.ts

@@ -2,9 +2,9 @@ import { StoryObj } from '@storybook/react';
 import { default as AnnotationTool } from '../../models/AnnotationTool';
 import { UiConfig } from '../../types';
 export declare const ActionsData: {
-    onAnnoEvent: import('@vitest/spy').Mock<(...args: any[]) => any>;
-    onKeyDown: import('@vitest/spy').Mock<(...args: any[]) => any>;
-    onKeyUp: import('@vitest/spy').Mock<(...args: any[]) => any>;
+    onAnnoEvent: any;
+    onKeyDown: any;
+    onKeyUp: any;
 };
 declare const meta: {
     title: string;
@@ -22,9 +22,9 @@ declare const meta: {
     tags: string[];
     excludeStories: RegExp;
     args: {
-        onAnnoEvent: import('@vitest/spy').Mock<(...args: any[]) => any>;
-        onKeyDown: import('@vitest/spy').Mock<(...args: any[]) => any>;
-        onKeyUp: import('@vitest/spy').Mock<(...args: any[]) => any>;
+        onAnnoEvent: any;
+        onKeyDown: any;
+        onKeyUp: any;
     };
 };
 export default meta;

package/dist/stories/Toolbar/ImageTools/TagLabel.stories.d.ts

@@ -1,13 +1,14 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ name, color, size: bodySize, style, triangleSize, onClick, }: {
+    component: ({ name, color, size: bodySize, style, triangleSize, onClick, onRemove, }: {
         name: string;
         color?: string;
         size?: number;
         style?: import('react').CSSProperties;
         triangleSize?: number;
         onClick?: () => void;
+        onRemove?: () => void;
     }) => import("react/jsx-runtime").JSX.Element;
     argTypes: {};
     parameters: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lost-sia",
-  "version": "3.2.0-alpha0",
+  "version": "3.2.0",
   "description": "Single Image Annotation Tool",
   "license": "MIT",
   "repository": "l3p-cv/lost-sia",
@@ -63,7 +63,9 @@
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "react-draggable": "^4.5.0",
-    "sass": "^1.95.0"
+    "sass": "^1.95.0",
+    "semantic-ui-css": "2.5.0",
+    "semantic-ui-react": "^2.0.3"
   },
   "peerDependencies": {
     "@coreui/react": "^5.9.1",
@@ -79,7 +81,6 @@
     "@storybook/addon-links": "^10.1.6",
     "@storybook/react": "^10.1.6",
     "@storybook/react-vite": "^10.1.6",
-    "@storybook/test": "^8.6.15",
     "@types/react": "^19.2.7",
     "@typescript-eslint/eslint-plugin": "^8.46.1",
     "@typescript-eslint/parser": "^8.46.1",

package/src/AnnoExampleViewer.jsx

@@ -0,0 +1,69 @@
+import Prompt from './Prompt'
+import React from 'react'
+import { Card, Image } from 'semantic-ui-react'
+
+const LabelExampleViewer = (props) => {
+  const requestExample = (e) => {
+    e.stopPropagation()
+    if (props.onRequestExample) {
+      props.onRequestExample()
+    }
+  }
+  const renderContent = () => {
+    if (!props.lbl) return null
+    if (!props.exampleImg) return null
+    const description = (
+      <div>
+        {props.lbl.description}
+        <h4>Comment:</h4>
+        {props.exampleImg.anno ? props.exampleImg.anno.comment : 'no comment'}
+      </div>
+    )
+    return (
+      <div>
+        <Card
+
+        // image={props.exampleImg.img}
+        // description={props.lbl.description}
+        // header={props.lbl.label}
+        // // description={props.exampleImg.anno.comment}
+        // extra={props.exampleImg.anno.comment}
+        >
+          <Image
+            onClick={(e) => requestExample(e)}
+            src={props.exampleImg.img}
+            wrapped
+            ui={false}
+          />
+          <Card.Content>
+            <Card.Header>{props.lbl.label}</Card.Header>
+            {/* <Card.Description>{props.lbl.description}</Card.Description> */}
+            <Card.Description>{description}</Card.Description>
+            {/* <Card.Description>{props.exampleImg.anno.comment}</Card.Description> */}
+          </Card.Content>
+        </Card>
+        {/* <Header inverted>{props.lbl.label}</Header>
+            {props.lbl.description}
+            <Image src={props.exampleImg.img} centered size='medium'></Image> */}
+      </div>
+    )
+  }
+
+  const handlePromptClick = () => {
+    if (props.onClose) {
+      props.onClose()
+    }
+  }
+
+  return (
+    <Prompt
+      onClick={() => {
+        handlePromptClick()
+      }}
+      active={props.active}
+      content={renderContent()}
+    />
+  )
+}
+
+export default LabelExampleViewer

package/src/Canvas/Canvas.tsx

@@ -133,8 +133,12 @@ const Canvas = ({
     y: svgTranslation.y,
   }
 
-  // label input will be opened if a position is set here
-  const [labelInputPosition, setLabelInputPosition] = useState<Point>()
+  // stage coordinates of the annotation whose label popup is open.
+  // stored as Point[] so the pixel position can be recomputed on every render
+  // (zoom changes svgScale/svgTranslation, so we need a live recalculation each frame)
+  const [labelInputPosition, setLabelInputPosition] = useState<Point[] | undefined>(
+    undefined,
+  )
   const [isLabelInputVisible, setIsLabelInputVisible] = useState<boolean>(false)
 
   // svg element - used to trap focus
@@ -347,10 +351,31 @@ const Canvas = ({
       topLeftPoint,
       pageToStageOffset,
       svgScale,
-      svgTranslation,
+      centeredSvgTranslation,
     )
   }
 
+  // Estimated max dimensions of the LabelInput dropdown (filter bar + ~8 label items).
+  // Used to clamp the popup anchor so it never escapes the canvas bounds.
+  const LABEL_POPUP_WIDTH = 250
+  const LABEL_POPUP_HEIGHT = 350
+
+  /** Clamps a viewport-space popup position so the dropdown stays inside the visible canvas area.
+   * Uses the canvas bounding rect so the popup is always reachable even when the annotation
+   * is outside the visible viewport (e.g. after zooming in while drawing).
+   */
+  const clampToViewport = (pos: Point): Point => {
+    const canvasRect = canvasRef.current?.getBoundingClientRect()
+    const minX = canvasRect?.left ?? 0
+    const minY = canvasRect?.top ?? 0
+    const maxX = (canvasRect?.right ?? window.innerWidth) - LABEL_POPUP_WIDTH
+    const maxY = (canvasRect?.bottom ?? window.innerHeight) - LABEL_POPUP_HEIGHT
+    return {
+      x: Math.min(Math.max(pos.x, minX), maxX),
+      y: Math.min(Math.max(pos.y, minY), maxY),
+    }
+  }
+
   const handleKeyAction = (keyAction: KeyAction) => {
     switch (keyAction) {
       case KeyAction.EDIT_LABEL:
@@ -361,7 +386,7 @@ const Canvas = ({
             imgSize,
             stageSize,
           )
-          setLabelInputPosition(getAnnoTopLeftPagePosition(stageCoords))
+          setLabelInputPosition(stageCoords)
           setIsLabelInputVisible(true)
         }
         break
@@ -779,10 +804,8 @@ const Canvas = ({
 
     onSelectAnnotation(percentagedAnnotation)
 
-    // get top left point of annotation
-    if (annotationSettings.canLabel) {
-      setLabelInputPosition(getAnnoTopLeftPagePosition(annotation.coordinates))
-    }
+    // store stage coords so popup position is recomputed live on every render
+    setLabelInputPosition(annotation.coordinates)
   }
 
   const handleOnAnnoChanged = (annotation: Annotation) => {
@@ -921,15 +944,21 @@ const Canvas = ({
         flexDirection: 'column',
       }}
     >
-      {annotationSettings.canLabel && (
       <div
-        style={{
-          position: 'absolute',
-          left: labelInputPosition?.x ?? 0,
-          top: labelInputPosition?.y ?? 0,
-          display: labelInputPosition?.y === undefined ? 'none' : 'inherit',
-          zIndex: isLabelInputVisible ? 7000 : -1,
-        }}
+        style={(() => {
+          // recompute pixel position on every render so the popup tracks the annotation
+          const pagePos = labelInputPosition
+            ? clampToViewport(getAnnoTopLeftPagePosition(labelInputPosition))
+            : undefined
+          return {
+            // position: fixed resolves left/top against the viewport.
+            position: 'fixed' as const,
+            left: pagePos ? pagePos.x - window.scrollX : 0,
+            top: pagePos ? pagePos.y - window.scrollY : 0,
+            display: pagePos === undefined ? 'none' : 'inherit',
+            zIndex: isLabelInputVisible ? 7000 : -1,
+          }
+        })()}
       >
         <LabelInput
           defaultLabelId={defaultLabelId}
@@ -976,7 +1005,6 @@ const Canvas = ({
           }}
         />
       </div>
-      )}
 
       {isImageJunk && (
         <div

package/src/Canvas/LabelInput.tsx

@@ -79,15 +79,17 @@ const LabelInput = ({
             />
           </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) => (
+                <CDropdownItem key={label.id} onClick={() => updateSelectedLabels(label)}>
+                  {label.name}
+                </CDropdownItem>
+              ))
+            ) : (
+              <CDropdownItem disabled>No results</CDropdownItem>
+            )}
+          </div>
         </CDropdownMenu>
       </CDropdown>
     </>

package/src/InfoBoxes/AnnoDetails.jsx

@@ -0,0 +1,165 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { List, TextArea, Form, Label, Icon } from 'semantic-ui-react'
+import InfoBox from './InfoBox'
+import PopUp from '../SiaPopup'
+
+const AnnoDetails = (props) => {
+  const [comment, setComment] = useState('')
+  const [example, setExample] = useState(false)
+  const [showSaveBtn, setShowSaveBtn] = useState(false)
+  const tARef = useRef()
+  useEffect(() => {
+    if (props.anno) {
+      if (props.anno.comment) {
+        setComment(props.anno.comment)
+      } else {
+        setComment('')
+      }
+    }
+  }, [props.anno])
+
+  useEffect(() => {
+    if (tARef.current) {
+      tARef.current.focus()
+    }
+  }, [props.commentInputTrigger])
+
+  const onDismiss = () => {
+    if (props.onDismiss) {
+      props.onDismiss()
+    }
+  }
+
+  const onCommentUpdate = () => {
+    if (props.onCommentUpdate) {
+      props.onCommentUpdate(comment)
+    }
+    setShowSaveBtn(false)
+  }
+
+  const onMarkExampleClick = () => {
+    // setExample(!example)
+    if (props.onMarkExample) {
+      props.onMarkExample(props.anno)
+    }
+  }
+
+  const renderSaveBtn = () => {
+    if (showSaveBtn) {
+      return <Label as="a" corner="right" icon="save" color="red"></Label>
+    }
+  }
+
+  const renderComment = () => {
+    return (
+      <div>
+        <Form onClick={() => {}}>
+          {renderSaveBtn()}
+          <TextArea
+            placeholder="Write a comment"
+            ref={tARef}
+            value={comment}
+            rows={2}
+            onBlur={() => onCommentUpdate()}
+            onFocus={() => setShowSaveBtn(true)}
+            onChange={(e) => setComment(e.target.value)}
+          ></TextArea>
+        </Form>
+      </div>
+    )
+  }
+  const renderLabels = () => {
+    if (props.anno) {
+      const selectedLabelIds = props.anno.labelIds
+      if (!selectedLabelIds) return 'No Label'
+
+      let lbls = ''
+      props.anno.labelIds.forEach((lbl, idx) => {
+        const labelObject = props.possibleLabels.find((el) => {
+          return el.id === lbl
+        })
+        if (idx > 0) lbls += ', '
+        lbls += labelObject.label
+      })
+      if (!lbls) return 'No Label'
+      return lbls
+    } else {
+      return 'No Label'
+    }
+  }
+
+  const renderExampleMark = () => {
+    if (!props.allowedToMarkExample) return null
+    let color = 'grey'
+    let iconName = 'bookmark outline'
+    if (props.anno) {
+      if (props.anno.isExample) {
+        color = 'yellow'
+        iconName = 'bookmark'
+      }
+    }
+    const mark = (
+      <Label
+        as="a"
+        color={color}
+        style={{ opacity: 0.8 }}
+        size="medium"
+        corner="left"
+        onClick={() => {
+          onMarkExampleClick()
+        }}
+      >
+        <Icon name={iconName} />
+      </Label>
+    )
+    return (
+      <PopUp
+        content="Mark this annotation as example for other annotators"
+        trigger={mark}
+      />
+    )
+  }
+
+  const renderDescription = () => {
+    if (props.anno) {
+      return (
+        <div>
+          {renderExampleMark()}
+          {/* <Header> 
+                            Labels
+                        </Header>
+                        <div>
+                            {renderLabels()}
+                        </div> */}
+          <List>
+            <List.Item icon="at" content={props.anno.id} />
+            <List.Item icon="tag" content={renderLabels()} />
+            <List.Item
+              icon="time"
+              content={`${props.anno.annoTime.toLocaleString('us', {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+              })} seconds`}
+            />
+            {/* <List.Item icon='time' content={props.anno.annoTime} /> */}
+          </List>
+          {renderComment()}
+        </div>
+      )
+    } else {
+      return 'No annotation selected!'
+    }
+  }
+
+  return (
+    <InfoBox
+      header={'Annotation Details'}
+      content={renderDescription()}
+      visible={props.visible}
+      defaultPos={props.defaultPos}
+      onDismiss={(e) => onDismiss()}
+    />
+  )
+}
+
+export default AnnoDetails

package/src/InfoBoxes/AnnoStats.jsx

@@ -0,0 +1,106 @@
+import React, { useState, useEffect } from 'react'
+import { List, Label } from 'semantic-ui-react'
+import InfoBox from './InfoBox'
+import * as colorlut from '../utils/color'
+// import actions from '../../../../actions'
+// import * as transform from '../utils/transform'
+// const { siaShowImgBar } = actions
+
+const AnnoStats = (props) => {
+  const [hideList, setHideList] = useState([])
+
+  useEffect(() => {
+    setHideList([])
+  }, [props.imgLoadCount])
+
+  const onDismiss = () => {
+    if (props.onDismiss) {
+      props.onDismiss()
+    }
+  }
+
+  const onLblClick = (lbl) => {
+    let hideLbl = false
+    if (hideList.includes(lbl.id)) {
+      setHideList(hideList.filter((e) => e !== lbl.id))
+      hideLbl = false
+    } else {
+      // hideList.push(lbl.id)
+      setHideList([...hideList, lbl.id])
+      hideLbl = true
+    }
+    if (props.onHideLbl) {
+      props.onHideLbl(lbl, hideLbl)
+    }
+  }
+
+  const renderRow = (s) => {
+    const opacity = hideList.includes(s.id) ? 0.5 : 1.0
+    return (
+      <List.Item key={s.id}>
+        <List.Content>
+          <Label
+            as="a"
+            tag
+            style={{ background: s.color, opacity: opacity }}
+            onClick={() => onLblClick(s)}
+          >
+            {s.label}
+            <Label.Detail>{s.amount}</Label.Detail>
+          </Label>
+        </List.Content>
+      </List.Item>
+    )
+  }
+
+  const renderRows = () => {
+    let stats = {}
+    props.annos.forEach((a) => {
+      // // console.log('render rows', a)
+      if (a.status !== 'deleted') {
+        a.labelIds.forEach((lblId) => {
+          if (lblId in stats) {
+            stats[lblId] += 1
+          } else {
+            stats[lblId] = 1
+          }
+        })
+        if (a.labelIds.length === 0) {
+          if ((-1) in stats) {
+            stats[-1] += 1
+          } else {
+            stats[-1] = 1
+          }
+        }
+      }
+    })
+    const res = Object.entries(stats).map(([key, value]) => {
+      let lbl = props.possibleLabels.find((e) => {
+        return e.id === parseInt(key)
+      })
+      if (!lbl) {
+        lbl = { id: -1, label: 'No Label', color: colorlut.getDefaultColor() }
+      }
+
+      lbl.amount = value
+      // return renderRow({class:idToLbl[key], amount:value, color:idToColor[key]})
+      return renderRow(lbl)
+    })
+    return res
+  }
+  const renderDescription = () => {
+    return <List>{renderRows()}</List>
+  }
+
+  return (
+    <InfoBox
+      header={'Annotations per Label'}
+      content={renderDescription()}
+      visible={props.visible}
+      defaultPos={props.defaultPos}
+      onDismiss={(e) => onDismiss()}
+    />
+  )
+}
+
+export default AnnoStats

package/src/InfoBoxes/InfoBox.jsx

@@ -0,0 +1,76 @@
+import React, { Component } from 'react'
+import { Header, Message } from 'semantic-ui-react'
+import Draggable from 'react-draggable'
+
+class InfoBox extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      style: {
+        position: 'fixed',
+        top: 200,
+        left: 200,
+        width: 250,
+      },
+    }
+  }
+
+  componentDidMount() {
+    this.updateStyle()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.defaultPos !== prevProps.defaultPos) {
+      this.updateStyle()
+    }
+  }
+
+  handleOnStop(e) {
+    if (this.props.onStop) {
+      this.props.onStop(e)
+    }
+  }
+
+  updateStyle() {
+    this.setState({
+      style: { ...this.state.style, ...this.props.defaultPos },
+    })
+  }
+
+  onDismiss(e) {
+    if (this.props.onDismiss) {
+      this.props.onDismiss(e)
+    }
+  }
+
+  render() {
+    if (!this.props.visible) return null
+    return (
+      <Draggable handle=".handle" onStop={(e) => this.handleOnStop(e)}>
+        <div style={this.state.style}>
+          <Message
+            style={{ opacity: 0.98 }}
+            onDismiss={(e) => {
+              this.onDismiss(e)
+            }}
+            size="small"
+          >
+            <Header
+              textAlign="center"
+              as="h5"
+              className="handle"
+              style={{ cursor: 'grab' }}
+            >
+              {this.props.header}
+            </Header>
+            {/* <Message.Header textAlign='center' className="handle" style={{cursor: 'grab'}}>{this.props.header}</Message.Header> */}
+            <hr />
+            <Message.Content>{this.props.content}</Message.Content>
+          </Message>
+        </div>
+      </Draggable>
+    )
+  }
+}
+
+export default InfoBox