feat(ImageDetection): use component from trame-annotations

Kitware · Nov 1, 2024 · c4cecc6 · c4cecc6
1 parent 227b65d
commit c4cecc6
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 305 deletions.
diff --git a/pyproject.toml b/pyproject.toml
@@ -42,6 +42,7 @@ dependencies = [
     "transformers",
     "umap-learn",
     "nrtk[headless]>=0.12.0",
+    "trame-annotations",
 ]
 
 [project.optional-dependencies]

diff --git a/src/nrtk_explorer/app/ui/image_list.py b/src/nrtk_explorer/app/ui/image_list.py
@@ -1,10 +1,11 @@
 from pathlib import Path
 from trame.widgets import html, quasar, client
 from trame.decorators import TrameApp, change
+from trame_annotations.widgets.annotations import ImageDetection
 from nrtk_explorer.app.trame_utils import change_checker
-from nrtk_explorer.widgets.nrtk_explorer import ImageDetection
 from nrtk_explorer.app.images.image_ids import get_image_state_keys
 
+
 CSS_FILE = Path(__file__).with_name("image_list.css")
 
 COLUMNS = [
@@ -90,7 +91,7 @@ def __init__(
         categories=None,
         selected=None,
         hover=None,
-        containerSelector=None,
+        container_selector=None,
         **kwargs,
     ):
         super().__init__(
@@ -105,7 +106,7 @@ def __init__(
                 categories=categories,
                 selected=selected,
                 hover=hover,
-                containerSelector=containerSelector,
+                container_selector=container_selector,
             )
             quasar.QInnerLoading(
                 showing=(f"!{src[0]} || (show_annotations_on_images && !{annotations[0]}.value)",)
@@ -247,7 +248,7 @@ def __init__(self, on_scroll, on_hover, **kwargs):
                             categories=("annotation_categories",),
                             selected=("(props.row.original == hovered_id)",),
                             hover=(on_hover, "[$event]"),
-                            containerSelector="#image-list .q-table__middle",
+                            container_selector="#image-list .q-table__middle",
                         )
                 with html.Template(
                     v_slot_body_cell_original=True,
@@ -264,7 +265,7 @@ def __init__(self, on_scroll, on_hover, **kwargs):
                             categories=("annotation_categories",),
                             selected=("(props.row.original == hovered_id)",),
                             hover=(on_hover, "[$event]"),
-                            containerSelector="#image-list .q-table__middle",
+                            container_selector="#image-list .q-table__middle",
                         )
                 with html.Template(
                     v_slot_body_cell_transformed=True,
@@ -284,7 +285,7 @@ def __init__(self, on_scroll, on_hover, **kwargs):
                             categories=("annotation_categories",),
                             selected=("(props.row.transformed == hovered_id)",),
                             hover=(on_hover, "[$event]"),
-                            containerSelector="#image-list .q-table__middle",
+                            container_selector="#image-list .q-table__middle",
                         )
                 # Grid Mode template for each row/grid-item
                 with html.Template(

diff --git a/src/nrtk_explorer/widgets/nrtk_explorer.py b/src/nrtk_explorer/widgets/nrtk_explorer.py
@@ -9,25 +9,6 @@ def __init__(self, _elem_name, children=None, **kwargs):
             self.server.enable_module(module)
 
 
-class ImageDetection(HtmlElement):
-    def __init__(self, **kwargs):
-        super().__init__(
-            "image-detection",
-            **kwargs,
-        )
-        self._attr_names += [
-            "identifier",
-            "src",
-            "annotations",
-            "categories",
-            "selected",
-            "containerSelector",
-        ]
-        self._event_names += [
-            "hover",
-        ]
-
-
 class ScatterPlot(HtmlElement):
     def __init__(self, **kwargs):
         super().__init__(

diff --git a/vue-components/src/components/ImageDetection.vue b/vue-components/src/components/ImageDetection.vue
diff --git a/vue-components/src/components/index.js b/vue-components/src/components/index.js
@@ -1,11 +1,9 @@
-import ImageDetection from './ImageDetection.vue'
 import ScatterPlot from './ScatterPlot.vue'
 import ParamsWidget from './ParamsWidget.vue'
 import FilterOptionsWidget from './FilterOptionsWidget.vue'
 import FilterOperatorWidget from './FilterOperatorWidget.vue'
 
 export default {
-  imageDetection: ImageDetection,
   scatterPlot: ScatterPlot,
   paramsWidget: ParamsWidget,
   filterOptionsWidget: FilterOptionsWidget,