lost-sia 2.0.1-alpha12 → 2.0.1-alpha13

package/src/stories/AnnotationTools.stories.tsx

@@ -1,19 +1,19 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react'
 
-import Sia2 from "../Sia2";
-import { imgBlob } from "./siaDummyData";
-import { AllowedTools } from "../types";
+import Sia from '../Sia'
+import { imgBlob } from './siaDummyData'
+import { AllowedTools } from '../types'
 
-export const ActionsData = {};
+export const ActionsData = {}
 
 const meta = {
-  title: "Annotation Tools",
-  component: Sia2,
+  title: 'Annotation Tools',
+  component: Sia,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "padding",
+    layout: 'padding',
   },
-  tags: ["!autodocs"],
+  tags: ['!autodocs'],
   excludeStories: /.*Data$/,
   args: {
     ...ActionsData,
@@ -22,20 +22,20 @@ const meta = {
     (Story) => (
       <div
         style={{
-          width: "50vw",
-          height: "65vh",
+          width: '50vw',
+          height: '65vh',
           padding: 10,
-          overflow: "hidden",
+          overflow: 'hidden',
         }}
       >
         <Story />
       </div>
     ),
   ],
-} satisfies Meta<typeof Sia2>;
+} satisfies Meta<typeof Sia>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 const allowedTools: AllowedTools = {
   bbox: true,
@@ -43,7 +43,7 @@ const allowedTools: AllowedTools = {
   point: false,
   polygon: false,
   junk: true,
-};
+}
 
 export const BBoxOnly: Story = {
   args: {
@@ -67,7 +67,7 @@ export const BBoxOnly: Story = {
 
         ...
 
-        <Sia2
+        <Sia
           allowedTools={allowedTools}
           image={imageBlob}
           possibleLabels={[]}
@@ -75,7 +75,7 @@ export const BBoxOnly: Story = {
       },
     },
   },
-};
+}
 
 const noJunkTools = {
   bbox: true,
@@ -83,7 +83,7 @@ const noJunkTools = {
   point: true,
   polygon: true,
   junk: false,
-};
+}
 
 export const NoJunk: Story = {
   args: {
@@ -107,7 +107,7 @@ export const NoJunk: Story = {
 
         ...
 
-        <Sia2
+        <Sia
           allowedTools={allowedTools}
           image={imageBlob}
           possibleLabels={[]}
@@ -115,4 +115,4 @@ export const NoJunk: Story = {
       },
     },
   },
-};
+}

package/src/stories/Canvas/Canvas.stories.tsx

@@ -1,48 +1,48 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { imgBlob } from "../siaDummyData";
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import { imgBlob } from '../siaDummyData'
 
-import Canvas from "../../Canvas/Canvas";
-import AnnotationTool from "../../models/AnnotationTool";
-import Annotation from "../../Annotation/logic/Annotation";
+import Canvas from '../../Canvas/Canvas'
+import AnnotationTool from '../../models/AnnotationTool'
+import Annotation from '../../Annotation/logic/Annotation'
 
-import { possibleLabels } from "../siaDummyData2";
-import { AnnotationSettings, UiConfig } from "../../types";
+import { possibleLabels } from '../siaDummyData2'
+import { AnnotationSettings, UiConfig } from '../../types'
 
 export const ActionsData = {
   onAnnoEvent: fn(),
   onKeyDown: fn(),
   onKeyUp: fn(),
-};
+}
 
 const meta = {
-  title: "Components/Canvas",
+  title: 'Components/Canvas',
   component: Canvas,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
-  tags: ["!autodocs"],
+  tags: ['!autodocs'],
   excludeStories: /.*Data$/,
   args: {
     // ...ActionsData,
   },
-} satisfies Meta<typeof Canvas>;
+} satisfies Meta<typeof Canvas>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 const uiConfig: UiConfig = {
   nodeRadius: 4,
   strokeWidth: 4,
   imageCentered: false,
-};
+}
 
 const annotationSettings: AnnotationSettings = {
   canHaveMultipleLabels: true,
   canCreate: true,
   canLabel: true,
-};
+}
 
 export const Default: Story = {
   args: {
@@ -61,10 +61,11 @@ export const Default: Story = {
     onAnnoEditing: () => {},
     onRequestNewAnnoId: () => 1,
     onSelectAnnotation: () => {},
+    onSetIsImageJunk: () => {},
     onSetSelectedTool: () => {},
     onShouldDeleteAnno: () => {},
   },
-};
+}
 
 const samplePointAnnotations: Annotation[] = [
   new Annotation(0, AnnotationTool.Point, [{ x: 10, y: 10 }]),
@@ -75,7 +76,7 @@ const samplePointAnnotations: Annotation[] = [
   new Annotation(5, AnnotationTool.Point, [{ x: 250, y: 250 }]),
   new Annotation(6, AnnotationTool.Point, [{ x: 300, y: 300 }]),
   new Annotation(7, AnnotationTool.Point, [{ x: 350, y: 350 }]),
-];
+]
 
 export const WithPoints: Story = {
   args: {
@@ -94,10 +95,11 @@ export const WithPoints: Story = {
     onAnnoEditing: () => {},
     onRequestNewAnnoId: () => 1,
     onSelectAnnotation: () => {},
+    onSetIsImageJunk: () => {},
     onSetSelectedTool: () => {},
     onShouldDeleteAnno: () => {},
   },
-};
+}
 
 const sampleLineAnnotations: Annotation[] = [
   new Annotation(0, AnnotationTool.Line, [
@@ -114,7 +116,7 @@ const sampleLineAnnotations: Annotation[] = [
   ]),
   new Annotation(2, AnnotationTool.Line, [{ x: 150, y: 150 }]),
   new Annotation(3, AnnotationTool.Line, [{ x: 200, y: 200 }]),
-];
+]
 
 export const WithLines: Story = {
   args: {
@@ -133,10 +135,11 @@ export const WithLines: Story = {
     onAnnoEditing: () => {},
     onRequestNewAnnoId: () => 1,
     onSelectAnnotation: () => {},
+    onSetIsImageJunk: () => {},
     onSetSelectedTool: () => {},
     onShouldDeleteAnno: () => {},
   },
-};
+}
 
 const sampleBBoxAnnotations: Annotation[] = [
   new Annotation(0, AnnotationTool.BBox, [
@@ -151,7 +154,7 @@ const sampleBBoxAnnotations: Annotation[] = [
     { x: 400, y: 325 },
     { x: 500, y: 375 },
   ]),
-];
+]
 
 export const WithBBoxes: Story = {
   args: {
@@ -170,10 +173,11 @@ export const WithBBoxes: Story = {
     onAnnoEditing: () => {},
     onRequestNewAnnoId: () => 1,
     onSelectAnnotation: () => {},
+    onSetIsImageJunk: () => {},
     onSetSelectedTool: () => {},
     onShouldDeleteAnno: () => {},
   },
-};
+}
 
 const samplePolygonAnnotations: Annotation[] = [
   new Annotation(0, AnnotationTool.Polygon, [
@@ -189,7 +193,7 @@ const samplePolygonAnnotations: Annotation[] = [
     { x: 600, y: 350 },
     { x: 550, y: 450 },
   ]),
-];
+]
 
 export const WithPolygonAnnotations: Story = {
   args: {
@@ -208,7 +212,8 @@ export const WithPolygonAnnotations: Story = {
     onAnnoEditing: () => {},
     onRequestNewAnnoId: () => 1,
     onSelectAnnotation: () => {},
+    onSetIsImageJunk: () => {},
     onSetSelectedTool: () => {},
     onShouldDeleteAnno: () => {},
   },
-};
+}

package/src/stories/Canvas/CanvasOffset.tsx

@@ -1,29 +1,26 @@
-import Annotation from "../../Annotation/logic/Annotation";
-import Canvas from "../../Canvas/Canvas";
-import AnnotationTool from "../../models/AnnotationTool";
-import CanvasAction from "../../models/CanvasAction";
-import type { AnnotationSettings, Label, UiConfig } from "../../types";
+import Annotation from '../../Annotation/logic/Annotation'
+import Canvas from '../../Canvas/Canvas'
+import AnnotationTool from '../../models/AnnotationTool'
+import CanvasAction from '../../models/CanvasAction'
+import type { AnnotationSettings, Label, UiConfig } from '../../types'
 
 type CanvasProps = {
-  annotations?: Annotation[];
-  image: string;
-  selectedAnnoTool: AnnotationTool;
-  possibleLabels: Label[];
-  preventScrolling: boolean;
-  uiConfig: UiConfig;
-  onAnnoEvent?: (
-    annotation: Annotation,
-    canvasAction: CanvasAction,
-  ) => void | undefined;
-  onKeyDown?: (e) => void | undefined;
-  onKeyUp?: (e) => void | undefined;
-};
+  annotations?: Annotation[]
+  image: string
+  selectedAnnoTool: AnnotationTool
+  possibleLabels: Label[]
+  preventScrolling: boolean
+  uiConfig: UiConfig
+  onAnnoEvent?: (annotation: Annotation, canvasAction: CanvasAction) => void | undefined
+  onKeyDown?: (e) => void | undefined
+  onKeyUp?: (e) => void | undefined
+}
 
 const annotationSettings: AnnotationSettings = {
   canHaveMultipleLabels: true,
   canCreate: true,
   canLabel: true,
-};
+}
 
 const CanvasWithOffset = ({
   annotations = [],
@@ -38,10 +35,10 @@ const CanvasWithOffset = ({
       <h1>A line to generate offset</h1>
       <div
         style={{
-          width: "100%",
-          height: "100%",
+          width: '100%',
+          height: '100%',
           padding: 200,
-          background: "green",
+          background: 'green',
         }}
       >
         <Canvas
@@ -59,12 +56,13 @@ const CanvasWithOffset = ({
           onAnnoEditing={() => {}}
           onRequestNewAnnoId={() => 1}
           onSelectAnnotation={() => {}}
+          onSetIsImageJunk={() => {}}
           onSetSelectedTool={() => {}}
           onShouldDeleteAnno={() => {}}
         />
       </div>
     </>
-  );
-};
+  )
+}
 
-export default CanvasWithOffset;
+export default CanvasWithOffset

package/src/stories/MinimalSia.stories.tsx

@@ -1,19 +1,19 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react'
 
-import Sia2 from "../Sia2";
-import type { Label } from "../types";
-import { imgBlob } from "./siaDummyData";
+import Sia from '../Sia'
+import type { Label } from '../types'
+import { imgBlob } from './siaDummyData'
 
-export const ActionsData = {};
+export const ActionsData = {}
 
 const meta = {
-  title: "Minimal SIA",
-  component: Sia2,
+  title: 'Minimal SIA',
+  component: Sia,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "padding",
+    layout: 'padding',
   },
-  tags: ["!autodocs"],
+  tags: ['!autodocs'],
   excludeStories: /.*Data$/,
   args: {
     ...ActionsData,
@@ -22,33 +22,33 @@ const meta = {
     (Story) => (
       <div
         style={{
-          width: "50vw",
-          height: "65vh",
+          width: '50vw',
+          height: '65vh',
           padding: 10,
-          overflow: "hidden",
+          overflow: 'hidden',
         }}
       >
         <Story />
       </div>
     ),
   ],
-} satisfies Meta<typeof Sia2>;
+} satisfies Meta<typeof Sia>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 const minimalExampleLabels: Label[] = [
   {
     id: 1,
-    name: "Cat",
-    description: "Includes all cats",
+    name: 'Cat',
+    description: 'Includes all cats',
   },
   {
     id: 2,
-    name: "Dog",
-    description: "Includes all dogs",
+    name: 'Dog',
+    description: 'Includes all dogs',
   },
-];
+]
 
 /**
  * Minimal SIA example
@@ -79,11 +79,11 @@ export const Minimal: Story = {
 
         ...
 
-        <Sia2
+        <Sia
           image={imageBlob}
           possibleLabels={possibleLabels}
         />`,
       },
     },
   },
-};
+}

package/src/stories/SIA2/DemoWrapper.tsx

@@ -1,22 +1,18 @@
-import Annotation from "../../Annotation/logic/Annotation";
-import AnnotationTool from "../../models/AnnotationTool";
+import Annotation from '../../Annotation/logic/Annotation'
+import AnnotationTool from '../../models/AnnotationTool'
 
-import Sia2 from "../../Sia2";
+import Sia from '../../Sia'
 
-import type {
-  AnnotationSettings,
-  ExternalAnnotation,
-  UiConfig,
-} from "../../types";
+import type { AnnotationSettings, ExternalAnnotation, UiConfig } from '../../types'
 
-import { imgBlob } from "../siaDummyData";
-import { possibleLabels } from "../siaDummyData2";
+import { imgBlob } from '../siaDummyData'
+import { possibleLabels } from '../siaDummyData2'
 
 type DemoWrapperProps = {
-  annotations?: ExternalAnnotation[];
-  annotationSettings?: AnnotationSettings;
-  isLoading?: boolean;
-};
+  annotations?: ExternalAnnotation[]
+  annotationSettings?: AnnotationSettings
+  isLoading?: boolean
+}
 
 const DemoWrapper = ({
   annotations = [],
@@ -27,10 +23,10 @@ const DemoWrapper = ({
     nodeRadius: 4,
     strokeWidth: 4,
     imageCentered: false,
-  };
+  }
 
   return (
-    <Sia2
+    <Sia
       annotationSettings={annotationSettings}
       initialAnnotations={annotations}
       isLoading={isLoading}
@@ -39,22 +35,22 @@ const DemoWrapper = ({
       image={imgBlob}
       defaultAnnotationTool={AnnotationTool.Polygon}
       onAnnoCreated={(anno: Annotation, _: Annotation[]) => {
-        console.log("CREATED", anno);
+        console.log('CREATED', anno)
       }}
       onAnnoCreationFinished={(anno: Annotation, _: Annotation[]) => {
-        console.log("FINISHED CREATION", anno);
+        console.log('FINISHED CREATION', anno)
       }}
       onAnnoChanged={(anno: Annotation, _: Annotation[]) => {
-        console.log("CHANGED", anno);
+        console.log('CHANGED', anno)
       }}
       onAnnoDeleted={(anno: Annotation, annos: Annotation[]) => {
-        console.log("DELETED", anno, annos);
+        console.log('DELETED', anno, annos)
       }}
       onImageLabelsChanged={(imageLabelIds: number[]) => {
-        console.log("IMAGE LABEL IDS CHANGED", imageLabelIds);
+        console.log('IMAGE LABEL IDS CHANGED', imageLabelIds)
       }}
     />
-  );
-};
+  )
+}
 
-export default DemoWrapper;
+export default DemoWrapper

package/src/stories/SIA2/Sia2.stories.tsx

@@ -1,42 +1,42 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react'
 
-import Sia2 from "../../Sia2";
+import Sia from '../../Sia'
 
-import { Label, UiConfig } from "../../types";
+import { Label, UiConfig } from '../../types'
 
-import { imgBlob, possibleLabels } from "../siaDummyData";
+import { imgBlob, possibleLabels } from '../siaDummyData'
 
-export const ActionsData = {};
+export const ActionsData = {}
 
 const meta = {
-  title: "Components/Sia2",
-  component: Sia2,
+  title: 'Components/Sia2',
+  component: Sia,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "padding",
+    layout: 'padding',
   },
-  tags: ["!autodocs"],
+  tags: ['!autodocs'],
   excludeStories: /.*Data$/,
   args: {
     ...ActionsData,
   },
   decorators: [
     (Story) => (
-      <div style={{ width: "50vw", height: "65vh" }}>
+      <div style={{ width: '50vw', height: '65vh' }}>
         <Story />
       </div>
     ),
   ],
-} satisfies Meta<typeof Sia2>;
+} satisfies Meta<typeof Sia>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 const uiConfig: UiConfig = {
   nodeRadius: 4,
   strokeWidth: 4,
   imageCentered: false,
-};
+}
 
 /**
  * SIA with dummy data
@@ -48,20 +48,20 @@ export const Default: Story = {
     image: imgBlob,
     possibleLabels,
   },
-};
+}
 
 const minimalExampleLabels: Label[] = [
   {
     id: 1,
-    name: "Cat",
-    description: "Includes all cats",
+    name: 'Cat',
+    description: 'Includes all cats',
   },
   {
     id: 2,
-    name: "Dog",
-    description: "Includes all dogs",
+    name: 'Dog',
+    description: 'Includes all dogs',
   },
-];
+]
 
 /**
  * Minimal SIA example
@@ -92,14 +92,14 @@ export const Minimal: Story = {
 
         ...
 
-        <Sia2
+        <Sia
           image={imageBlob}
           possibleLabels={possibleLabels}
         />`,
       },
     },
   },
-};
+}
 
 export const Loading: Story = {
   args: {
@@ -109,7 +109,7 @@ export const Loading: Story = {
     image: imgBlob,
     possibleLabels: [],
   },
-};
+}
 
 export const Junk: Story = {
   args: {
@@ -119,4 +119,4 @@ export const Junk: Story = {
     image: imgBlob,
     possibleLabels: [],
   },
-};
+}

package/src/utils/KeyMapper.ts

@@ -52,6 +52,9 @@ class KeyMapper {
       case "e":
         this.triggerKeyAction(KeyAction.RECREATE_ANNO);
         break;
+      case "j":
+        this.triggerKeyAction(KeyAction.TOGGLE_IMAGE_JUNK);
+        break;
       case "c":
         if (isCtrlKeyPressed) this.triggerKeyAction(KeyAction.COPY_ANNOTATION);
         else this.triggerKeyAction(KeyAction.TOGGLE_ANNO_COMMENT_INPUT);

package/src/utils/siaIcons.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export function textIcon() {
   return (
     <svg
@@ -32,7 +30,7 @@ export function textIcon() {
                 C948.049,214.236,926.687,199.643,925.876,172.939z"
       />
     </svg>
-  );
+  )
 }
 
 export function lineIcon() {
@@ -58,7 +56,7 @@ export function lineIcon() {
                 c31.188,24.081,91.974-3.708,123.127-39.312C782.35,323.912,979.191,120.251,986.331,109.582z"
       />
     </svg>
-  );
+  )
 }
 
 export function bBoxIcon() {
@@ -84,7 +82,7 @@ export function bBoxIcon() {
                 h608.264c23.386,0,42.52,19.134,42.52,42.52V710.655z"
       />
     </svg>
-  );
+  )
 }
 
 export function polygonIcon() {
@@ -111,7 +109,7 @@ export function polygonIcon() {
                 c18.31,14.549,14.16,26.901-9.219,27.449L342.327,769.938z"
       />
     </svg>
-  );
+  )
 }
 
 export function pointIcon() {
@@ -130,5 +128,5 @@ export function pointIcon() {
                 c0-151.356,122.7-274.057,274.057-274.057C625.497,134.229,748.197,256.929,748.197,408.286z"
       />
     </svg>
-  );
+  )
 }