Mlcube-as-a-link unified view

mlcommons · Aug 12, 2024 · cedad96 · cedad96
1 parent 12ffef2
commit cedad96
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/cli/medperf/web_ui/datasets/routes.py b/cli/medperf/web_ui/datasets/routes.py
@@ -41,7 +41,6 @@ def dataset_detail_ui(request: Request, dataset_id: int):
     dataset = Dataset.get(dataset_id)
 
     prep_cube = Cube.get(cube_uid=dataset.data_preparation_mlcube)
-    prep_cube_name = prep_cube.name if prep_cube else "Unknown"
 
     benchmark_associations = Dataset.get_benchmarks_associations(dataset_uid=dataset_id)
     benchmark_associations = sort_associations_display(benchmark_associations)
@@ -54,7 +53,7 @@ def dataset_detail_ui(request: Request, dataset_id: int):
                                           "request": request,
                                           "entity": dataset,
                                           "entity_name": dataset.name,
-                                          "prep_cube_name": prep_cube_name,
+                                          "prep_cube": prep_cube,
                                           "benchmark_associations": benchmark_associations,
                                           "benchmarks": benchmarks
                                       })
diff --git a/cli/medperf/web_ui/templates/benchmark_detail.html b/cli/medperf/web_ui/templates/benchmark_detail.html
@@ -1,6 +1,7 @@
 <!-- ./cli/medperf/web-ui/templates/benchmark_detail.html -->
 {% extends "detail_base.html" %}
 {% import 'association_card_macros.html' as macros %}
+{% import 'mlcube_macros.html' as mlcube_macros %}
 
 {% block title %}Benchmark Details{% endblock %}
 
@@ -35,10 +36,16 @@ <h5 class="card-title mb-0">Details</h5>
             </div>
             <div class="card mb-3">
                 <div class="card-body d-flex justify-content-between flex-wrap">
-                    <div class="w-50">
-                        <p class="card-text"><strong>Data Preparation MLCube:</strong> <a href="/mlcubes/ui/{{ data_preparation_mlcube.id }}" class="text-primary">{{ data_preparation_mlcube.name }}</a></p>
-                        <p class="card-text"><strong>Reference Model MLCube:</strong> <a href="/mlcubes/ui/{{ reference_model_mlcube.id }}" class="text-primary">{{ reference_model_mlcube.name }}</a></p>
-                        <p class="card-text"><strong>Metrics MLCube:</strong> <a href="/mlcubes/ui/{{ metrics_mlcube.id }}" class="text-primary">{{ metrics_mlcube.name }}</a></p>
+                    <div class="w-50 d-flex">
+                        <p class="card-text">
+                            <strong>Data Preparation MLCube:</strong> {{ mlcube_macros.mlcube_link(data_preparation_mlcube) }}
+                        </p>
+                        <p class="card-text">
+                            <strong>Reference Model MLCube:</strong> {{ mlcube_macros.mlcube_link(reference_model_mlcube) }}
+                        </p>
+                        <p class="card-text">
+                            <strong>Metrics MLCube:</strong> {{ mlcube_macros.mlcube_link(metrics_mlcube) }}
+                        </p>
                         <p class="card-text"><strong>Owner:</strong> <i class="fas fa-user"></i> <span class="text-muted small">{{ entity.owner }}</span></p>
                     </div>
                     <div class="text-right w-50">

diff --git a/cli/medperf/web_ui/templates/dataset_detail.html b/cli/medperf/web_ui/templates/dataset_detail.html
@@ -1,6 +1,7 @@
 <!-- ./cli/medperf/web-ui/templates/dataset_detail.html -->
 {% extends "detail_base.html" %}
 {% import 'association_card_macros.html' as macros %}
+{% import 'mlcube_macros.html' as mlcube_macros %}
 
 {% block title %}Dataset Details{% endblock %}
 
@@ -24,7 +25,9 @@ <h5 class="card-title mb-0">Details</h5>
                     <p class="card-text"><strong>Location:</strong> {{ entity.location }}</p>
                     <p class="card-text"><strong>Input Data Hash:</strong> {{ entity.input_data_hash }}</p>
                     <p class="card-text"><strong>Generated UID:</strong> {{ entity.generated_uid }}</p>
-                    <p class="card-text"><strong>Data Preparation MLCube:</strong> <a href="/mlcubes/ui/{{ entity.data_preparation_mlcube }}" class="text-primary">{{ prep_cube_name }}</a></p>
+                    <p class="card-text">
+                        <strong>Data Preparation MLCube:</strong> {{ mlcube_macros.mlcube_link(prep_cube) }}
+                    </p>
                 </div>
             </div>
             <div class="card mb-3">

diff --git a/cli/medperf/web_ui/templates/mlcube_macros.html b/cli/medperf/web_ui/templates/mlcube_macros.html
@@ -0,0 +1,14 @@
+<!-- ./cli/medperf/web-ui/templates/mlcube_macros.html -->
+{% macro mlcube_link(mlcube) %}
+<span class="mlcube-link {% if not mlcube.is_valid %}invalid-card{% endif %} d-inline-flex align-items-center p-1 mb-2 flex-grow-1">
+    <strong><a href="/mlcubes/ui/{{ mlcube.id }}" class="text-primary">{{ mlcube.name }}</a></strong>
+    <small class="text-muted ml-2" data-date="{{ mlcube.modified_at }}"></small>
+    <span class="ml-2">
+        {% if mlcube.state == 'OPERATION' %}
+            <i class="fas fa-check-circle text-success"></i>
+        {% else %}
+            <i class="fas fa-exclamation-circle text-warning"></i>
+        {% endif %}
+    </span>
+</span>
+{% endmacro %}