lost-sia 2.0.0-alpha0 → 2.0.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lost-sia",
-  "version": "2.0.0-alpha0",
+  "version": "2.0.0-alpha10",
   "description": "Single Image Annotation Tool",
   "license": "MIT",
   "repository": "l3p-cv/lost-sia",
@@ -32,7 +32,10 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "publishpkg": "npm publish",
-    "test": "vitest run"
+    "test": "vitest run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "format": "prettier --write src/"
   },
   "dependencies": {
     "@coreui/react": "^5.0.0",
@@ -53,6 +56,15 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-interactions": "^8.1.5",
+    "@storybook/addon-links": "^8.1.5",
+    "@storybook/addon-onboarding": "^8.1.5",
+    "@storybook/blocks": "^8.1.5",
+    "@storybook/react": "^8.1.5",
+    "@storybook/react-vite": "^8.1.5",
+    "@storybook/test": "^8.1.5",
     "@vitejs/plugin-react": "^4.3.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.0.1",
@@ -63,14 +75,19 @@
     "eslint-plugin-promise": "^6.2.0",
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "glob": "^10.4.1",
+    "prettier": "^3.3.3",
+    "prop-types": "^15.8.1",
+    "react-redux": "^9.1.2",
+    "redux": "^5.0.1",
+    "storybook": "^8.1.5",
     "vite": "^5.2.12",
     "vitest": "^1.6.0"
   },
   "eslintConfig": {
     "extends": [
-      "plugin:storybook/recommended",
       "plugin:storybook/recommended"
     ]
   }
-}
+}

package/src/AnnoExampleViewer.jsx

@@ -1,57 +1,70 @@
-import Prompt from './Prompt'
-import React from 'react'
-import { Card, Divider, Header, Image } from 'semantic-ui-react'
+import Prompt from "./Prompt";
+import React from "react";
+import { Card, Divider, Header, Image } from "semantic-ui-react";
 
 const LabelExampleViewer = (props) => {
-
-    const requestExample = (e) => {
-        e.stopPropagation()
-        if (props.onRequestExample){
-            props.onRequestExample()
-        }
+  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>
-              {/* <Divider horizontal> Description </Divider> */}
-            {props.lbl.description}
-              <Divider horizontal> comment </Divider>
-            { 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>
+  };
+  const renderContent = () => {
+    if (!props.lbl) return null;
+    if (!props.exampleImg) return null;
+    const description = (
+      <div>
+        {/* <Divider horizontal> Description </Divider> */}
+        {props.lbl.description}
+        <Divider horizontal> comment </Divider>
+        {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>
-    }
+      </div>
+    );
+  };
 
-    const handlePromptClick = () => {
-        if (props.onClose){
-            props.onClose()
-        }
+  const handlePromptClick = () => {
+    if (props.onClose) {
+      props.onClose();
     }
+  };
 
-    return <Prompt onClick={() => {handlePromptClick()}}
-            active={props.active} content={renderContent()} 
-        />
-
-}
+  return (
+    <Prompt
+      onClick={() => {
+        handlePromptClick();
+      }}
+      active={props.active}
+      content={renderContent()}
+    />
+  );
+};
 
-export default LabelExampleViewer
+export default LabelExampleViewer;

package/src/AnnoLabelInput.jsx

@@ -1,99 +1,109 @@
-import React, { Component } from 'react'
-import LabelInput from './LabelInput'
-import * as constraints from './utils/constraints'
-import * as annoStatus from './types/annoStatus'
+import React, { Component } from "react";
+import LabelInput from "./LabelInput";
+import * as constraints from "./utils/constraints";
+import * as annoStatus from "./types/annoStatus";
 
 class AnnoLabelInput extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      top: 400,
+      left: 100,
+      label: undefined,
+      visibility: "hidden",
+      possibleLabels: [],
+    };
+    this.inputGroupRef = React.createRef();
+  }
 
-    constructor(props) {
-        super(props)
-        this.state = {
-            top: 400,
-            left: 100,
-            label: undefined,
-            visibility: 'hidden',
-            possibleLabels: []
-        }
-        this.inputGroupRef = React.createRef()
-    }
-
-    componentWillMount() {
-        this.setPosition()
-    }
-
-    componentDidUpdate(prevProps) {
-        if (this.props.visible) {
-            this.setPosition()
-        }
-
+  componentWillMount() {
+    this.setPosition();
+  }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.visible) {
+      this.setPosition();
     }
+  }
 
-    /*************
-     * LOGIC     *
-     *************/
-    setPosition() {
-
-        if (this.props.mousePos) {
-            const top = this.props.mousePos.y + this.props.svg.top - 10
-            const left = this.props.mousePos.x + this.props.svg.left - 10
-            if (this.state.top !== top || this.state.left !== left) {
-                this.setState({
-                    top: top,
-                    left: left,
-                })
-            }
-        }
-    }
-
-    onClose() {
-        if (this.props.onClose) {
-            this.props.onClose()
-        }
+  /*************
+   * LOGIC     *
+   *************/
+  setPosition() {
+    if (this.props.mousePos) {
+      const top = this.props.mousePos.y + this.props.svg.top - 10;
+      const left = this.props.mousePos.x + this.props.svg.left - 10;
+      if (this.state.top !== top || this.state.left !== left) {
+        this.setState({
+          top: top,
+          left: left,
+        });
+      }
     }
+  }
 
-    annoLabelUpdate(anno) {
-        if (this.props.onLabelUpdate) {
-            this.props.onLabelUpdate(anno)
-        }
+  onClose() {
+    if (this.props.onClose) {
+      this.props.onClose();
     }
+  }
 
-    updateAnnoLabel(label) {
-        if (!constraints.allowedToLabel(
-            this.props.allowedActions, this.props.selectedAnno)) return
-        this.annoLabelUpdate({
-            ...this.props.selectedAnno,
-            labelIds: label,
-            status: this.props.selectedAnno.status !== annoStatus.NEW ? annoStatus.CHANGED : annoStatus.NEW
-        })
+  annoLabelUpdate(anno) {
+    if (this.props.onLabelUpdate) {
+      this.props.onLabelUpdate(anno);
     }
+  }
 
+  updateAnnoLabel(label) {
+    if (
+      !constraints.allowedToLabel(
+        this.props.allowedActions,
+        this.props.selectedAnno,
+      )
+    )
+      return;
+    this.annoLabelUpdate({
+      ...this.props.selectedAnno,
+      labelIds: label,
+      status:
+        this.props.selectedAnno.status !== annoStatus.NEW
+          ? annoStatus.CHANGED
+          : annoStatus.NEW,
+    });
+  }
 
-    /*************
-     * RENDERING *
-    **************/
-    render() {
-        if (!this.props.visible) return null
-        return (
-            <div ref={this.inputGroupRef} style={{ position: 'fixed', top: this.state.top, left: this.state.left }}>
-                <LabelInput svg={this.props.svg}
-                    onClose={() => this.onClose()}
-                    initLabelIds={this.props.selectedAnno.labelIds}
-                    relatedId={this.props.selectedAnno.id}
-                    visible={this.props.visible}
-                    onLabelUpdate={label => this.updateAnnoLabel(label)}
-                    possibleLabelsProp={this.props.possibleLabels}
-                    multilabels={this.props.multilabels}
-                    disabled={!this.props.allowedActions.label}
-                    renderPopup
-                    focusOnRender
-                    open={true}
-                    defaultLabel={this.props.defaultLabel}
-                />
-            </div>
-        )
-    }
-
+  /*************
+   * RENDERING *
+   **************/
+  render() {
+    if (!this.props.visible) return null;
+    return (
+      <div
+        ref={this.inputGroupRef}
+        style={{
+          position: "fixed",
+          top: this.state.top,
+          left: this.state.left,
+        }}
+      >
+        <LabelInput
+          svg={this.props.svg}
+          onClose={() => this.onClose()}
+          initLabelIds={this.props.selectedAnno.labelIds}
+          relatedId={this.props.selectedAnno.id}
+          visible={this.props.visible}
+          onLabelUpdate={(label) => this.updateAnnoLabel(label)}
+          possibleLabelsProp={this.props.possibleLabels}
+          multilabels={this.props.multilabels}
+          disabled={!this.props.allowedActions.label}
+          renderPopup
+          focusOnRender
+          open={true}
+          defaultLabel={this.props.defaultLabel}
+        />
+      </div>
+    );
+  }
 }
 
-export default AnnoLabelInput
+export default AnnoLabelInput;

package/src/AnnoToolBar.jsx

@@ -1,89 +1,108 @@
-import React, {Component} from 'react'
+import React, { Component } from "react";
 
-import * as transform from './utils/transform'
+import * as transform from "./utils/transform";
 
-class AnnoToolBar extends Component{
+class AnnoToolBar extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      top: 400,
+      left: 100,
+      width: 50,
+      label: undefined,
+      visibility: "hidden",
+      possibleLabels: [],
+    };
+    this.inputGroupRef = React.createRef();
+  }
 
-    constructor(props){
-        super(props)
-        this.state = {
-            top: 400,
-            left: 100,
-            width: 50,
-            label: undefined,
-            visibility: 'hidden',
-            possibleLabels: []
-        }
-        this.inputGroupRef = React.createRef()
-    }
+  componentWillMount() {
+    this.setPosition();
+  }
 
-    componentWillMount(){
-        this.setPosition()
+  componentDidUpdate(prevProps) {
+    if (this.props.visible) {
+      this.setPosition();
     }
-    
-    componentDidUpdate(prevProps){
-        if (this.props.visible){
-            this.setPosition()
-        } 
+  }
 
-        
+  /*************
+   * LOGIC     *
+   *************/
+  setPosition() {
+    if (this.props.selectedAnno) {
+      // const center = transform.getCenter(this.props.selectedAnno.data, this.props.selectedAnno.type)
+      // const annoBox = transform.getBox(this.props.selectedAnno.data, this.props.selectedAnno.type)
+      let topPoint = transform.getTopPoint(this.props.selectedAnno.data);
+      topPoint = transform.getMostLeftPoint(topPoint)[0];
+      const inputRect = this.inputGroupRef.current.getBoundingClientRect();
+      let top =
+        this.props.svg.top +
+        (topPoint.y + this.props.svg.translateY) * this.props.svg.scale -
+        44;
+      let left =
+        this.props.svg.left +
+        (topPoint.x + this.props.svg.translateX) * this.props.svg.scale -
+        inputRect.width / 2.0 -
+        1;
+      // if (left < this.props.svg.left) left = this.props.svg.left
+      // if (left+inputRect.width > this.props.svg.left+this.props.svg.width){
+      //     left = this.props.svg.left+this.props.svg.width - inputRect.width
+      // }
+      if (top < 0)
+        top =
+          this.props.svg.top +
+          (topPoint.y + this.props.svg.translateY + 10) * this.props.svg.scale;
+      if (this.state.top !== top || this.state.left !== left) {
+        this.setState({
+          top,
+          left,
+          // width: annoBox[1].x - annoBox[0].x
+        });
+      }
     }
+  }
 
-    /*************
-     * LOGIC     *
-     *************/
-    setPosition(){
-        if (this.props.selectedAnno){
-            // const center = transform.getCenter(this.props.selectedAnno.data, this.props.selectedAnno.type)
-            // const annoBox = transform.getBox(this.props.selectedAnno.data, this.props.selectedAnno.type)
-            let topPoint = transform.getTopPoint(this.props.selectedAnno.data)
-            topPoint = transform.getMostLeftPoint(topPoint)[0]
-            const inputRect = this.inputGroupRef.current.getBoundingClientRect()
-            let top = this.props.svg.top + (topPoint.y + this.props.svg.translateY) *this.props.svg.scale - 44
-            let left = this.props.svg.left + (topPoint.x + this.props.svg.translateX) *this.props.svg.scale - inputRect.width /2.0 - 1
-            // if (left < this.props.svg.left) left = this.props.svg.left
-            // if (left+inputRect.width > this.props.svg.left+this.props.svg.width){
-            //     left = this.props.svg.left+this.props.svg.width - inputRect.width
-            // }
-            if (top < 0) top = this.props.svg.top + (topPoint.y + this.props.svg.translateY + 10) *this.props.svg.scale 
-            if (this.state.top !== top || this.state.left !== left){  
-                this.setState({
-                    top,
-                    left,
-                    // width: annoBox[1].x - annoBox[0].x
-                })
-            }
-        }
+  onClose() {
+    if (this.props.onClose) {
+      this.props.onClose();
     }
+  }
 
-    onClose(){
-        if (this.props.onClose){
-            this.props.onClose()
-        }
+  handleClick(e) {
+    if (this.props.onClick) {
+      this.props.onClick(e);
     }
+  }
 
-    handleClick(e){
-        if (this.props.onClick){
-            this.props.onClick(e)
-        }
-    }
-    
-    renderDaviIcon(){
-        return <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
-                // x="0px" y="0px"
-                // width="1190.549px" height="841.891px" 
-                viewBox="0 0 1190.549 841.891" 
-                width="60px"
-                onClick={e => this.handleClick(e)}
-            >
-            <g id="Info">
-                <path id="Maps" fill={this.props.color} d="M620.561,817.217c-1.568-3.62-3.771-7.101-4.611-10.885
+  renderDaviIcon() {
+    return (
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        // x="0px" y="0px"
+        // width="1190.549px" height="841.891px"
+        viewBox="0 0 1190.549 841.891"
+        width="60px"
+        onClick={(e) => this.handleClick(e)}
+      >
+        <g id="Info">
+          <path
+            id="Maps"
+            fill={this.props.color}
+            d="M620.561,817.217c-1.568-3.62-3.771-7.101-4.611-10.885
                     c-24.452-109.811-74.341-207.569-139.215-298.675c-27.507-38.628-55.814-77.404-77.438-119.371
                     C324.363,242.85,402.696,58.71,574.209,26.508c145.509-27.32,282.953,75.871,296.543,222.773
                     c4.659,50.356-7.471,97.96-32.152,141.022c-27.812,48.526-58.75,95.364-90.073,141.758
                     c-50.917,75.411-91.062,155.558-113.421,244.091c-2.438,9.652-3.936,19.543-6.271,29.227c-0.992,4.104-3.023,7.961-4.584,11.93
-                    C623.021,817.277,621.789,817.247,620.561,817.217z"/>
-                <path id="Text" fillRule="evenodd" clipRule="evenodd" fill="#FFFFFF" d="M724.709,250.898
+                    C623.021,817.277,621.789,817.247,620.561,817.217z"
+          />
+          <path
+            id="Text"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            fill="#FFFFFF"
+            d="M724.709,250.898
                     c-0.055-3.974,0.047-7.949,0.033-11.923c-0.007-1.228-1.54-2.767-2.76-2.777c-2.428-0.021-4.862-0.015-7.29-0.015
                     c-22.466,0.001-44.934,0.005-67.404,0.009c-2.475,0.001-3.658,1.154-3.658,3.588c-0.001,47.365-0.001,94.73-0.001,142.096
                     c0,13.526,0,27.05,0.001,40.577c0,2.305,1.274,3.584,3.562,3.59c6.623,0.004,9.256-0.07,19.873,0.004
@@ -96,37 +115,39 @@ class AnnoToolBar extends Component{
                     c0-8.392,0-16.781,0-25.173c0-0.321,0.228-5.156,4.091-9.277c3.864-4.122,8.014-3.822,8.445-3.822
                     c25.835,0.003,51.672,0.002,77.507,0.002c46.813,0.001,140.443,0.001,140.443,0.001s6.153-0.088,10.926-0.052
                     c0.3-0.008,5.713,0.363,9.178,3.994c3.46,3.631,3.046,8.407,3.046,8.635c-0.007,12.862,0.079,25.725-0.003,38.587
-                    c-0.074,8.051-6.938,12.819-13.703,12.847C731.482,263.519,724.956,259.059,724.709,250.898z"/>
-            </g>
-        </svg>
-    }
+                    c-0.074,8.051-6.938,12.819-13.703,12.847C731.482,263.519,724.956,259.059,724.709,250.898z"
+          />
+        </g>
+      </svg>
+    );
+  }
 
-    /*************
-     * RENDERING *
-    **************/
-    render(){
-        if (!this.props.visible) return null
-        return (
-            <div ref={this.inputGroupRef} 
-                style={{
-                    position:'fixed', 
-                    top:this.state.top, 
-                    left:this.state.left,
-                    cursor: 'pointer',
-                }}
-            >
-            {/* <Button icon circular basic
+  /*************
+   * RENDERING *
+   **************/
+  render() {
+    if (!this.props.visible) return null;
+    return (
+      <div
+        ref={this.inputGroupRef}
+        style={{
+          position: "fixed",
+          top: this.state.top,
+          left: this.state.left,
+          cursor: "pointer",
+        }}
+      >
+        {/* <Button icon circular basic
                 onClick={e => this.handleClick(e)}
             > */}
-                {/* <Icon name="pencil"
+        {/* <Icon name="pencil"
                     onClick={e => this.handleClick(e)}
                 /> */}
-            {/* </Button> */}
-            {this.renderDaviIcon()}
-            </div>
-        )
-    }
-    
+        {/* </Button> */}
+        {this.renderDaviIcon()}
+      </div>
+    );
+  }
 }
 
-export default AnnoToolBar
+export default AnnoToolBar;