Skip to main content

​
Overview

The CsvRow type represents a flattened view of an annotation combined with its parent image metadata. This format is used for the CSV table view and CSV export functionality.

​
Type Definition

export type CsvRow = {
  imageId: string
  annotationId: string
  label: string
  x: number
  y: number
  width: number
  height: number
  imageName: string
  imageWidth: number | null
  imageHeight: number | null
}

​
Properties

​
imageId
string
required
The unique identifier of the parent image. Used to navigate back to the image when clicking a row.
​
annotationId
string
required
The unique identifier of the annotation. Used to select/highlight the annotation.
​
label
string
required
The label/class name of the annotation.
​
x
number
required
The x-coordinate of the annotation’s top-left corner in pixels.
​
y
number
required
The y-coordinate of the annotation’s top-left corner in pixels.
​
width
number
required
The width of the annotation bounding box in pixels.
​
height
number
required
The height of the annotation bounding box in pixels.
​
imageName
string
required
The filename of the parent image (from image.file.name).
​
imageWidth
number | null
required
The natural width of the parent image in pixels, or null if not yet loaded.
​
imageHeight
number | null
required
The natural height of the parent image in pixels, or null if not yet loaded.

​
Usage Example

Generating CSV rows from the images array: 
const csvRows = useMemo<CsvRow[]>(
  () =>
    images.flatMap((image) =>
      image.annotations.map((annotation) => ({
        imageId: image.id,
        annotationId: annotation.id,
        label: annotation.label,
        x: annotation.x,
        y: annotation.y,
        width: annotation.width,
        height: annotation.height,
        imageName: image.file.name,
        imageWidth: image.width ?? null,
        imageHeight: image.height ?? null,
      })),
    ),
  [images],
)
Updating an annotation from the CSV table: 
const updateAnnotationFromCsv = (
  row: CsvRow,
  field: "label" | "x" | "y" | "width" | "height",
  value: string,
) => {
  updateAnnotationByImage(row.imageId, row.annotationId, (annotation, image) => {
    if (field === "label") {
      const next = value.trim().toLowerCase()
      return { ...annotation, label: next || annotation.label }
    }
    // ... numeric field updates
  })
}

​
CSV Export Format

When exporting to CSV, the data is formatted as: 
label_name,bbox_x,bbox_y,bbox_width,bbox_height,image_name,image_width,image_height
"cat",120,85,340,280,"photo.jpg",1920,1080

Build docs developers (and LLMs) love

Get started for freeTalk to us