lost-sia 2.0.1-alpha8 → 3.0.0

package/src/stories/FilterDropdown.stories.ts

@@ -1,23 +1,25 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { possibleLabels } from "./siaDummyData2";
-import { fn } from "@storybook/test";
-import LabelInput from "../Canvas/LabelInput";
+import type { Meta, StoryObj } from '@storybook/react'
+import exampleLabels from './exampleData/exampleLabels'
+import { fn } from '@storybook/test'
+import LabelInput from '../Canvas/LabelInput'
 
 const meta = {
-  title: "Components/LabelFilter",
+  title: 'Components/LabelFilter',
   component: LabelInput,
   argTypes: {},
   parameters: {
-    layout: "centered",
+    layout: 'centered',
   },
-} satisfies Meta<typeof LabelInput>;
+} satisfies Meta<typeof LabelInput>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    possibleLabels,
+    possibleLabels: exampleLabels.voc,
+    isVisible: true,
+    selectedLabelsIds: [],
     onLabelSelect: fn(),
   },
-};
+}

package/src/stories/MinimalSIA.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Meta, Source, Story } from '@storybook/addon-docs/blocks'
+import * as SiaStories from './MinimalSia.stories.tsx'
+
+<Meta of={SiaStories} />
+
+# SIA Examples
+
+Here we'll show you how to include SIA into your project!
+
+## Minimal SIA
+
+Including SIA in its minimal form is very simple: Just use the `Sia` component and give it an image and possible Labels as parameters:
+
+<Source of={SiaStories.Minimal} language="tsx" />
+
+This will get you the following:
+
+<Canvas>
+  <Story of={SiaStories.Minimal} />
+</Canvas>

package/src/stories/MinimalSia.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Sia from '../Sia'
+import type { Label } from '../types'
+import exampleImage from './exampleData/exampleImage'
+
+export const ActionsData = {}
+
+const meta = {
+  title: 'Minimal SIA',
+  component: Sia,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/,
+  args: {
+    ...ActionsData,
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          height: '65vh',
+          padding: 10,
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Sia>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const minimalExampleLabels: Label[] = [
+  {
+    id: 1,
+    name: 'Cat',
+    description: 'Includes all cats',
+  },
+  {
+    id: 2,
+    name: 'Dog',
+    description: 'Includes all dogs',
+  },
+]
+
+/**
+ * Minimal SIA example
+ */
+export const Minimal: Story = {
+  args: {
+    ...ActionsData,
+    image: exampleImage,
+    possibleLabels: minimalExampleLabels,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+        const imageBlob: string = "data:image/jpeg;base64,/9j/4AAQSkZ..."
+        const possibleLabels: Label = [
+          {
+            id: 1,
+            name: "Cat",
+            description: "Includes all cats",
+          },
+          {
+            id: 2,
+            name: "Dog",
+            description: "Includes all dogs",
+          }
+        ]
+
+        ...
+
+        <Sia
+          image={imageBlob}
+          possibleLabels={possibleLabels}
+        />`,
+      },
+    },
+  },
+}

package/src/stories/SIA/DemoWrapper.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import DemoWrapper from './DemoWrapper'
+import { AnnotationSettings } from '../../types'
+import exampleExternalAnnotations from '../exampleData/exampleExternalAnnotations'
+
+export const ActionsData = {}
+
+const meta = {
+  title: 'Components/DemoWrapper',
+  component: DemoWrapper,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/,
+  args: {
+    ...ActionsData,
+  },
+} satisfies Meta<typeof DemoWrapper>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * SIA with dummy data
+ */
+export const Default: Story = {
+  args: {
+    ...ActionsData,
+  },
+}
+
+const annotationSettings: AnnotationSettings = {
+  canCreate: true,
+  canHaveMultipleLabels: true,
+  canLabel: true,
+}
+
+export const WithPolygonAnnotations: Story = {
+  args: {
+    ...ActionsData,
+    annotations: exampleExternalAnnotations.polygon,
+    annotationSettings,
+  },
+}
+
+export const WithBBoxAnnotations: Story = {
+  args: {
+    ...ActionsData,
+    annotations: exampleExternalAnnotations.bbox,
+    annotationSettings,
+  },
+}
+
+export const WithLineAnnotations: Story = {
+  args: {
+    ...ActionsData,
+    annotations: exampleExternalAnnotations.line,
+    annotationSettings,
+  },
+}
+
+export const WithPointAnnotations: Story = {
+  args: {
+    ...ActionsData,
+    annotations: exampleExternalAnnotations.point,
+    annotationSettings,
+  },
+}

package/src/stories/SIA/DemoWrapper.tsx

@@ -0,0 +1,55 @@
+import Annotation from '../../Annotation/logic/Annotation'
+import AnnotationTool from '../../models/AnnotationTool'
+
+import Sia from '../../Sia'
+
+import type { AnnotationSettings, ExternalAnnotation, UiConfig } from '../../types'
+import exampleLabels from '../exampleData/exampleLabels'
+import exampleImage from '../exampleData/exampleImage'
+
+type DemoWrapperProps = {
+  annotations?: ExternalAnnotation[]
+  annotationSettings?: AnnotationSettings
+  isLoading?: boolean
+}
+
+const DemoWrapper = ({
+  annotations = [],
+  annotationSettings,
+  isLoading = false,
+}: DemoWrapperProps) => {
+  const uiConfig: UiConfig = {
+    nodeRadius: 4,
+    strokeWidth: 4,
+    imageCentered: false,
+  }
+
+  return (
+    <Sia
+      annotationSettings={annotationSettings}
+      initialAnnotations={annotations}
+      isLoading={isLoading}
+      possibleLabels={exampleLabels.voc}
+      uiConfig={uiConfig}
+      image={exampleImage}
+      defaultAnnotationTool={AnnotationTool.Polygon}
+      onAnnoCreated={(anno: Annotation, _: Annotation[]) => {
+        console.log('CREATED', anno)
+      }}
+      onAnnoCreationFinished={(anno: Annotation, _: Annotation[]) => {
+        console.log('FINISHED CREATION', anno)
+      }}
+      onAnnoChanged={(anno: Annotation, _: Annotation[]) => {
+        console.log('CHANGED', anno)
+      }}
+      onAnnoDeleted={(anno: Annotation, annos: Annotation[]) => {
+        console.log('DELETED', anno, annos)
+      }}
+      onImageLabelsChanged={(imageLabelIds: number[]) => {
+        console.log('IMAGE LABEL IDS CHANGED', imageLabelIds)
+      }}
+    />
+  )
+}
+
+export default DemoWrapper

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

@@ -1,65 +1,99 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import {
-  canvasConfig,
-  filter,
-  selectedTool,
-  imgMeta,
-  toolbarEnabled,
-  annos,
-  possibleLabels,
-  imgBlob,
-  noAnnos,
-} from "../siaDummyData";
+import type { Meta, StoryObj } from '@storybook/react'
 
-import Sia from "../../Sia";
+import Sia from '../../Sia'
 
-export const ActionsData = {
-  onAnnoSaveEvent: fn(),
-  onNotification: fn(),
-  onCanvasKeyDown: fn(),
-  onAnnoEvent: fn(),
-  onGetAnnoExample: fn(),
-  onCanvasEvent: fn(),
-  onToolBarEvent: fn(),
-  onGetFunction: fn(),
-};
+import { UiConfig } from '../../types'
+
+import exampleImage from '../exampleData/exampleImage'
+import exampleLabels from '../exampleData/exampleLabels'
+
+export const ActionsData = {}
 
 const meta = {
-  title: "Components/SIA",
+  title: 'Components/Sia',
   component: Sia,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "padded",
+    layout: 'fullscreen',
   },
-  tags: ["autodocs"],
+  tags: ['!autodocs'],
   excludeStories: /.*Data$/,
   args: {
     ...ActionsData,
   },
-} satisfies Meta<typeof Sia>;
+  decorators: [(Story) => <Story />],
+} 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,
+}
+
+const defaultArgs = {
+  ...ActionsData,
+  uiConfig,
+  image: exampleImage,
+  possibleLabels: exampleLabels.voc,
+}
 
 /**
  * SIA with dummy data
  */
 export const Default: Story = {
+  args: defaultArgs,
+}
+
+/**
+ * Minimal SIA example
+ */
+export const Minimal: Story = {
   args: {
-    ...ActionsData,
-    annos: noAnnos,
-    canvasConfig,
-    fullscreen: false,
-    filter,
-    imageBlob: imgBlob,
-    imageMeta: imgMeta,
-    isJunk: false,
-    layoutUpdate: 0,
-    lockedAnnos: [],
-    possibleLabels,
-    preventScrolling: false,
-    selectedTool,
-    toolbarEnabled,
+    ...defaultArgs,
+    possibleLabels: exampleLabels.minimal,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+        const imageBlob: string = "data:image/jpeg;base64,/9j/4AAQSkZ..."
+        const possibleLabels: Label = [
+          {
+            id: 1,
+            name: "Cat",
+            description: "Includes all cats",
+          },
+          {
+            id: 2,
+            name: "Dog",
+            description: "Includes all dogs",
+          }
+        ]
+
+        ...
+
+        <Sia
+          image={imageBlob}
+          possibleLabels={possibleLabels}
+        />`,
+      },
+    },
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    ...defaultArgs,
+    isLoading: true,
+  },
+}
+
+export const Junk: Story = {
+  args: {
+    ...defaultArgs,
+    initialIsImageJunk: true,
   },
-};
+}

package/src/stories/Toolbar/ImageTools/TagLabel.stories.tsx

@@ -1,32 +1,31 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react'
 
-import { fn } from "@storybook/test";
-import TagLabel from "../../../Toolbar/ToolbarItems/ImageToolItems/TagLabel";
+import TagLabel from '../../../Toolbar/ToolbarItems/ImageToolItems/TagLabel'
 
 const meta = {
-  title: "Components/Toolbar/TagLabel",
+  title: 'Components/Toolbar/TagLabel',
   component: TagLabel,
   argTypes: {},
   parameters: {
-    layout: "centered",
+    layout: 'centered',
   },
-} satisfies Meta<typeof TagLabel>;
+} satisfies Meta<typeof TagLabel>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
     name: "I'm a label",
   },
-};
+}
 
 export const DifferentColor: Story = {
   args: {
     name: "I'm green",
-    color: "#2ecc71",
+    color: '#2ecc71',
   },
-};
+}
 
 export const DifferentSize: Story = {
   args: {
@@ -34,4 +33,4 @@ export const DifferentSize: Story = {
     size: 200,
     triangleSize: 142,
   },
-};
+}

package/src/stories/Toolbar/Instructions.stories.tsx

@@ -1,22 +1,22 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react'
 
-import Toolbar from "../../Toolbar/Toolbar";
-import "../main.scss";
-import Instructions from "../../Toolbar/ToolbarItems/Instructions";
+import Toolbar from '../../Toolbar/Toolbar'
+import '../main.scss'
+import Instructions from '../../Toolbar/ToolbarItems/Instructions'
 
 const meta = {
-  title: "Components/Toolbar/Instructions",
+  title: 'Components/Toolbar/Instructions',
   component: Instructions,
   parameters: {
-    layout: "centered",
+    layout: 'centered',
   },
-} satisfies Meta<typeof Toolbar>;
+} satisfies Meta<typeof Toolbar>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
-const defaultArgs = {};
+const defaultArgs = {}
 
 export const Default: Story = {
   args: defaultArgs,
-};
+}

package/src/stories/Toolbar/Toolbar.stories.tsx

@@ -1,30 +1,33 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react'
 
-import { fn } from "@storybook/test";
-import Toolbar from "../../Toolbar/Toolbar";
-// import '../../scss/main.scss'
-import "../main.scss";
-import AnnotationTool from "../../models/AnnotationTool";
-import AllowedTools from "../../models/AllowedTools";
-import AnnotationSettings from "../../models/AnnotationSettings";
-import { possibleLabels } from "../siaDummyData2";
+import Toolbar from '../../Toolbar/Toolbar'
+import '../main.scss'
+import AnnotationTool from '../../models/AnnotationTool'
+
+import { AllowedTools, AnnotationSettings } from '../../types'
+import exampleLabels from '../exampleData/exampleLabels'
 
 const meta = {
-  title: "Components/Toolbar",
+  title: 'Components/Toolbar',
   component: Toolbar,
   argTypes: {
-    defaultTool: {
-      control: "select",
-      options: AnnotationTool,
+    selectedTool: {
+      control: 'select',
+      options: [
+        AnnotationTool.BBox,
+        AnnotationTool.Line,
+        AnnotationTool.Point,
+        AnnotationTool.Polygon,
+      ],
     },
   },
   parameters: {
-    layout: "centered",
+    layout: 'centered',
   },
-} satisfies Meta<typeof Toolbar>;
+} satisfies Meta<typeof Toolbar>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 const allowedTools: AllowedTools = {
   bbox: true,
@@ -32,25 +35,7 @@ const allowedTools: AllowedTools = {
   line: true,
   point: true,
   polygon: true,
-};
-
-// export default {
-//   title: "Components/Toolbar",
-//   component: Toolbar,
-//   parameters: {
-//     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-//     layout: "centered",
-//   },
-//   tags: ["autodocs"],
-//   args: {},
-//   argTypes: {
-//     defaultTool: {
-//       control: "select",
-//       options: AnnotationTool,
-//       description: "Select the right annotation tool",
-//     },
-//   },
-// };
+}
 
 const limitedAllowedTools: AllowedTools = {
   bbox: true,
@@ -58,44 +43,44 @@ const limitedAllowedTools: AllowedTools = {
   line: false,
   point: false,
   polygon: false,
-};
+}
 
 const annotationSettings: AnnotationSettings = {
   canCreate: true,
   canEdit: true,
   canHaveMultipleLabels: true,
   canLabel: true,
-};
+}
 
 const defaultArgs = {
-  defaultTool: AnnotationTool.Line,
   annotationSettings,
   allowedTools,
-  possibleLabels,
-};
+  possibleLabels: exampleLabels.voc,
+  selectedTool: AnnotationTool.BBox,
+}
 
 export const Default: Story = {
   args: defaultArgs,
-};
+}
 
 export const DifferentDefaultTool: Story = {
   args: {
     ...defaultArgs,
-    defaultTool: AnnotationTool.Polygon,
+    selectedTool: AnnotationTool.Polygon,
   },
-};
+}
 
 export const LimitedAllowedTools: Story = {
   args: {
     ...defaultArgs,
-    defaultTool: AnnotationTool.BBox,
+    selectedTool: AnnotationTool.BBox,
     allowedTools: limitedAllowedTools,
   },
-};
+}
 
 export const WithImageLabels: Story = {
   args: {
     ...defaultArgs,
     imageLabelIds: [2, 9],
   },
-};
+}

package/src/stories/Welcome.mdx

@@ -0,0 +1,5 @@
+# Welcome to LOST-SIAs documentation
+
+SIA stands for "Single Image Annotation".  
+While its been heavily used inside [LOST](https://github.com/l3p-cv/lost), it is a standalone component that can be used individually.  
+This documentation presents common patterns how SIA can be used.

package/src/stories/development/CoordinateSystems.mdx

@@ -0,0 +1,25 @@
+# Coordinate Systems
+
+SIA uses a scene-graph-like scheme for handling annotations.  
+Outside of SIA, every coordinate is normalized; it is a pair of values between 0 and 1 that represents the fraction of the image.  
+For example, the coordinate `{x: 0.5, y: 1}` would be in the bottom line and in the middle row of the image.
+
+Inside the `Canvas` component, a different system is used: Instead of using the fraction, the Canvas uses the pixel values of the so-called stage.
+
+## Stage handling
+
+The stage is a compromise between the image and the available space for the canvas.  
+It represents the biggest possible scaling of the image that fits onto the canvas and can be made without affecting the aspect ratio of the image.
+
+![StageHandling](../../docs/StageHandling.svg)
+
+To convert the coordinates from the image into the stage coordinate system, each coordinate can be multiplied with the `imageToStageFactor`.
+
+## Translations
+
+The manual translations (when the user moved the image using wasd or the mouse) and the zoom are handled using the svg transform.  
+Therefore its not needed to translate the coordinates according to these modifications.  
+However, mouse events are not in relation to the stage or image but to the current page.  
+Because of this, the mouse coordinates need to be translated from the page coordinate system into the stage coordinate system by countering the svg transformations and applying the `pageToStageOffset`.
+
+![CoordinateSystems](../../docs/CoordinateSystems.svg)