feat(vue3): migrate app to use vue3

XAITK · Sep 19, 2023 · becb7b2 · becb7b2
1 parent 69165cc
commit becb7b2
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 66 deletions.
diff --git a/setup.cfg b/setup.cfg
@@ -27,10 +27,10 @@ keywords =
 packages = find:
 include_package_data = True
 install_requires =
-    trame>=3.1.0
+    trame>=3.2.5
     trame-vuetify
-    trame-components>=2.0.4
-    trame-plotly
+    trame-components>=2.2.1
+    trame-plotly>=3.0.2
     plotly==5.15.0
     pandas
 

diff --git a/xaitk_saliency_demo/app/config.py b/xaitk_saliency_demo/app/config.py
@@ -3,14 +3,14 @@
         # Task => saliency
         "saliency_active": "SBSMStack",
         "saliency_available": [
-            {"text": "SBSM", "value": "SBSMStack"},
+            {"title": "SBSM", "value": "SBSMStack"},
         ],
         # Task => model
         "model_active": "SimilarityResNet50",
         "model_available": [
-            {"text": "ResNet-50", "value": "SimilarityResNet50"},
-            {"text": "AlexNet", "value": "SimilarityAlexNet"},
-            {"text": "VGG-16", "value": "SimilarityVgg16"},
+            {"title": "ResNet-50", "value": "SimilarityResNet50"},
+            {"title": "AlexNet", "value": "SimilarityAlexNet"},
+            {"title": "VGG-16", "value": "SimilarityVgg16"},
         ],
         # Task => input
         "input_expected": 2,
@@ -19,14 +19,14 @@
         # Task => saliency
         "saliency_active": "DRISEStack",
         "saliency_available": [
-            {"text": "DRISE", "value": "DRISEStack"},
-            {"text": "RandomGridStack", "value": "RandomGridStack"},
+            {"title": "DRISE", "value": "DRISEStack"},
+            {"title": "RandomGridStack", "value": "RandomGridStack"},
         ],
         # Task => model
         "model_active": "DetectionFRCNN",
         "model_available": [
-            {"text": "FRCNN (COCO)", "value": "DetectionFRCNN"},
-            {"text": "CenterNet (VisDrone)", "value": "DetectionCenterNetVisdrone"},
+            {"title": "FRCNN (COCO)", "value": "DetectionFRCNN"},
+            {"title": "CenterNet (VisDrone)", "value": "DetectionCenterNetVisdrone"},
         ],
         # Task => input
         "input_expected": 1,
@@ -35,15 +35,15 @@
         # Task => saliency
         "saliency_active": "RISEStack",
         "saliency_available": [
-            {"text": "RISE Stack", "value": "RISEStack"},
-            {"text": "Sliding Window Stack", "value": "SlidingWindowStack"},
+            {"title": "RISE Stack", "value": "RISEStack"},
+            {"title": "Sliding Window Stack", "value": "SlidingWindowStack"},
         ],
         # Task => model
         "model_active": "ClassificationResNet50",
         "model_available": [
-            {"text": "ResNet-50", "value": "ClassificationResNet50"},
-            {"text": "AlexNet", "value": "ClassificationAlexNet"},
-            {"text": "VGG-16", "value": "ClassificationVgg16"},
+            {"title": "ResNet-50", "value": "ClassificationResNet50"},
+            {"title": "AlexNet", "value": "ClassificationAlexNet"},
+            {"title": "VGG-16", "value": "ClassificationVgg16"},
         ],
         # Task => input
         "input_expected": 1,
@@ -77,9 +77,9 @@
 SALINECY_PARAM_REMAP = {"s": "s_tuple"}
 
 TASKS = [
-    {"text": "Image Similarity", "value": "similarity"},
-    {"text": "Object Detection", "value": "detection"},
-    {"text": "Image Classification", "value": "classification"},
+    {"title": "Image Similarity", "value": "similarity"},
+    {"title": "Object Detection", "value": "detection"},
+    {"title": "Image Classification", "value": "classification"},
 ]
 
 PROXIMITY_METRIC_AVAILABLE = [
@@ -119,6 +119,6 @@
 ]
 
 # Common css style
-STYLE_COMPACT = dict(hide_details=True, dense=True)
+STYLE_COMPACT = dict(hide_details=True, density="compact", variant="underlined")
 STYLE_SELECT = dict(style="max-width: 200px", classes="mx-2")
 STYLE_ROW = dict(style="min-width: 0;", classes="d-flex flex-shrink-1")
diff --git a/xaitk_saliency_demo/app/core.py b/xaitk_saliency_demo/app/core.py
@@ -13,8 +13,8 @@
 from trame.decorators import TrameApp, change, life_cycle
 from trame.app import get_server
 from trame_client.encoders import numpy
-from trame.ui.vuetify import SinglePageLayout
-from trame.widgets import vuetify
+from trame.ui.vuetify3 import SinglePageLayout
+from trame.widgets import vuetify3 as vuetify
 
 logger = logging.getLogger("xaitks_saliency_demo")
 
@@ -37,7 +37,7 @@ def __init__(self, server):
         self._layout = None
 
         # Fix version of vue
-        server.client_type = "vue2"
+        server.client_type = "vue3"
 
         # State defaults
         self.state.setdefault("input_expected", 1)
@@ -182,13 +182,13 @@ def update_model_execution(self):
         df = pd.DataFrame(classes, columns=["Class", "Score"])
         df.sort_values("Score", ascending=True, inplace=True)
 
-        chart = px.bar(df, x="Score", y="Class")
+        chart = px.bar(df, x="Score", y="Class", template="simple_white")
         chart.update_layout(
             xaxis_title="",
             yaxis_title="",
             showlegend=False,
             margin=dict(b=0, l=0, r=0, t=0),
-            height=192,
+            height=200,
         )
         self.ctrl.classification_chart_update(chart)
 
@@ -197,6 +197,7 @@ def update_model_execution(self):
             map(
                 lambda t: {
                     "text": t[1][0],
+                    "title": t[1][0],
                     "score": int(100 * t[1][1]),
                     "value": f"heatmap_{t[0]}",
                 },
@@ -213,6 +214,7 @@ def update_model_execution(self):
                 {
                     "value": f"heatmap_{i}",
                     "text": f"{v[0]} - {int(v[1] * 100)}",
+                    "title": f"{v[0]} - {int(v[1] * 100)}",
                     "id": i + 1,
                     "class": v[0],
                     "probability": int(v[1] * 100),