Merge pull request #7 from pixano/chore/eslint

chore(front): Refactor code to follow eslint rules

.github/workflows/lint.yml

@@ -55,6 +55,11 @@ jobs:
           cd ui
           pnpm format_check
 
+      - name: Lint frontend code with eslint
+        run: |
+          cd ui
+          pnpm lint
+
   # This job will lint backend code (Python) with black
   # For more information see: https://black.readthedocs.io/en/stable/integrations/github_actions.html
   python_lint:

CHANGELOG.md

@@ -16,7 +16,7 @@ All notable changes to Pixano will be documented in this file.
 - Update documentation website accent color to match with the new theme of the Pixano apps
 - Update API reference generation
 - Reformat GitHub actions
-- Reformat frontend code with Prettier
+- Reformat and refactor frontend code with Prettier and eslint
 
 ### Fixed
 

pixano/api/items.py

@@ -24,7 +24,7 @@
 
 from pixano.core import BBox, CompressedRLE, Image, is_number, is_string
 from pixano.data import Dataset, Fields
-from pixano.utils import format_bbox, rle_to_mask
+from pixano.utils import rle_to_mask
 
 
 class ItemFeature(BaseModel):
@@ -264,7 +264,7 @@ def load_item_details(dataset: Dataset, item_id: str) -> dict:
             "views": defaultdict(dict),
             "features": _create_features(item, pyarrow_item.schema),
         },
-        "itemObjects": defaultdict(lambda: defaultdict(list)),
+        "itemObjects": [],
     }
 
     # Iterate on view
@@ -290,26 +290,32 @@ def load_item_details(dataset: Dataset, item_id: str) -> dict:
                         mask = obj["mask"].to_urle() if "mask" in obj else None
                         # Object bounding box
                         bbox = (
-                            format_bbox(
-                                obj["bbox"].xywh_coords,
-                                obj["bbox"].confidence,
-                            )
-                            if "bbox" in obj
-                            else None
+                            obj["bbox"].to_xywh().to_dict() if "bbox" in obj else None
                         )
+
                         # Object category
-                        category = (
-                            {"id": obj["category_id"], "name": obj["category_name"]}
+                        category_id = (
+                            obj["category_id"]
+                            if "category_id" in obj and "category_name" in obj
+                            else None
+                        )
+                        category_name = (
+                            obj["category_name"]
                             if "category_id" in obj and "category_name" in obj
                             else None
                         )
+
                         # Add object
-                        item_details["itemObjects"][obj_source][field.name].append(
+                        item_details["itemObjects"].append(
                             {
                                 "id": obj["id"],
+                                "item_id": item["id"],
+                                "source_id": obj_source,
+                                "view_id": obj["view_id"],
                                 "mask": mask,
                                 "bbox": bbox,
-                                "category": category,
+                                "category_id": category_id,
+                                "category_name": category_name,
                             }
                         )
 

pixano/utils/__init__.py

@@ -13,7 +13,6 @@
 
 from pixano.utils.boxes import (
     denormalize_coords,
-    format_bbox,
     mask_to_bbox,
     normalize_coords,
     urle_to_bbox,
@@ -49,7 +48,6 @@
     "denormalize_coords",
     "mask_to_bbox",
     "urle_to_bbox",
-    "format_bbox",
     "xywh_to_xyxy",
     "xyxy_to_xywh",
     "image_to_binary",

pixano/utils/boxes.py

@@ -106,28 +106,6 @@ def urle_to_bbox(urle: dict) -> list[float]:
     return mask_to_bbox(rle_to_mask(urle_to_rle(urle)))
 
 
-def format_bbox(bbox: list[float], confidence: float = 0.0) -> dict:
-    """Convert bounding box to frontend format
-
-    Args:
-        bbox (list[float]): Bounding box
-        confidence (float, optional): Bounding box confidence. Defaults to None.
-
-    Returns:
-        dict: Bounding box in frontend format
-    """
-
-    if bbox != [0.0, 0.0, 0.0, 0.0]:
-        return {
-            "x": float(bbox[0]),
-            "y": float(bbox[1]),
-            "width": float(bbox[2]),
-            "height": float(bbox[3]),
-            "predicted": confidence != 0.0,
-            "confidence": confidence,
-        }
-
-
 def xywh_to_xyxy(xywh: list[float]) -> list[float]:
     """Convert bounding box coordinates from xywh (using top left point as reference) to xyxy
 

tests/apps/test_main.py

@@ -142,7 +142,7 @@ def test_get_item_details(self):
         self.assertIn("id", output["itemData"])
         self.assertIn("views", output["itemData"])
         self.assertIn("features", output["itemData"])
-        self.assertIn("Ground Truth", output["itemObjects"])
+        self.assertEqual(20, len(output["itemObjects"]))
 
     def test_post_item_details(self):
         response = self.client.post(

ui/.eslintrc.cjs

@@ -23,6 +23,7 @@ module.exports = {
     "tailwind.config.cjs",
     "postcss.config.cjs",
     "vite.config.ts",
+    "mask_utils.ts", // external code
   ],
   overrides: [
     {
@@ -34,16 +35,12 @@ module.exports = {
     },
   ],
   rules: {
+    // TODO: Refactor code and remove rules if possible
     "no-undef": "off",
-    // should be reworked
     "@typescript-eslint/no-unsafe-member-access": "off",
     "@typescript-eslint/no-unsafe-assignment": "off",
-    "@typescript-eslint/no-unsafe-return": "off",
     "@typescript-eslint/no-unsafe-call": "off",
-    "@typescript-eslint/no-unsafe-argument": "off",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-strict-null-check": "off",
-    "@typescript-eslint/no-unnecessary-type-assertion": "off",
-    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/no-base-to-string": "off", // can't add type annotations in Svelte Code for variables like DatasetItemFeature.value
+    "@typescript-eslint/no-unsafe-argument": "off", // can't add type annotations in Svelte code for variables like event.detail
   },
 };

ui/apps/annotator/src/AnnotationWorkspace.svelte

@@ -39,7 +39,7 @@
     Mask,
   } from "@pixano/core";
 
-  import type { InteractiveImageSegmenterOutput } from "@pixano/models";
+  import type { InteractiveImageSegmenter, InteractiveImageSegmenterOutput } from "@pixano/models";
 
   // Exports
   export let selectedDataset: Dataset;
@@ -61,12 +61,12 @@
 
   // Category colors
   let colorMode = "category";
-  let labelColors = handleLabelColors();
+  let colorScale = handleLabelColors();
 
   // Filters
   let maskOpacity = 1.0;
   let bboxOpacity = 0.0;
-  let confidenceThreshold = 1.0;
+  let confidenceThreshold = 0.0;
 
   // Current annotations
   let currentAnn: InteractiveImageSegmenterOutput = null;
@@ -104,13 +104,13 @@
   // Segmentation model
   interactiveSegmenterModel.subscribe((segmenter) => {
     if (segmenter) {
-      pointPlusTool.postProcessor = segmenter;
-      pointMinusTool.postProcessor = segmenter;
-      rectangleTool.postProcessor = segmenter;
+      pointPlusTool.postProcessor = segmenter as InteractiveImageSegmenter;
+      pointMinusTool.postProcessor = segmenter as InteractiveImageSegmenter;
+      rectangleTool.postProcessor = segmenter as InteractiveImageSegmenter;
     }
   });
 
-  function until<T>(conditionFunction): Promise<T> {
+  function until(conditionFunction: () => boolean): Promise<() => void> {
     const poll = (resolve) => {
       if (conditionFunction()) resolve();
       else setTimeout(() => poll(resolve), 400);
@@ -252,7 +252,7 @@
     console.log("AnnotationWorkspace.handleChangeSelectedItem");
     const newItemId = item.find((feature) => {
       return feature.name === "id";
-    }).value;
+    }).value as string;
 
     if (newItemId !== selectedItem.id) {
       if (!saveFlag) {
@@ -273,7 +273,7 @@
       if (itemFeature.dtype === "image") {
         selectedItem.views[itemFeature.name] = {
           id: itemFeature.name,
-          url: itemFeature.value,
+          url: itemFeature.value as string,
         };
       }
     }
@@ -354,7 +354,7 @@
     } else if (colorMode === "source") {
       range = [0, Object.keys(annotations).length];
     }
-    return utils.colorLabel(range.map((i) => i.toString()));
+    return utils.ordinalColorScale(range.map((i) => i.toString())) as (id: string) => string;
   }
 
   function handleLoadNextPage() {
@@ -364,7 +364,7 @@
   onMount(() => {
     if (annotations) {
       console.log("AnnotationWorkspace.onMount");
-      labelColors = handleLabelColors();
+      colorScale = handleLabelColors();
     }
   });
 
@@ -383,7 +383,7 @@
     <Canvas2D
       {selectedItem}
       bind:selectedTool
-      {labelColors}
+      {colorScale}
       {masks}
       {bboxes}
       {embeddings}
@@ -394,7 +394,7 @@
       <LabelPanel
         {selectedItem}
         {annotations}
-        {labelColors}
+        {colorScale}
         bind:maskOpacity
         bind:bboxOpacity
         bind:confidenceThreshold
@@ -416,7 +416,7 @@
         bind:selectedTool
         {pointPlusTool}
         {pointMinusTool}
-        {labelColors}
+        {colorScale}
         placeholder="Label name"
         on:addCurrentAnn={handleAddClassification}
       />
@@ -427,7 +427,7 @@
         bind:selectedTool
         {pointPlusTool}
         {pointMinusTool}
-        {labelColors}
+        {colorScale}
         on:addCurrentAnn={handleAddCurrentAnn}
       />
     {/if}