Rework Component Interface Value representations

Makefile

@@ -104,22 +104,27 @@ development_fixtures:
 		celery_worker_evaluation \
 		bash -c "python manage.py migrate && python manage.py runscript minio development_fixtures"
 
-
 algorithm_evaluation_fixtures:
 	docker compose run \
 		-v $(shell readlink -f ./scripts/):/app/scripts:ro \
 		--rm \
 		celery_worker_evaluation \
 		python manage.py runscript algorithm_evaluation_fixtures
 
-
 cost_fixtures:
 	docker compose run \
 		-v $(shell readlink -f ./scripts/):/app/scripts:ro \
 		--rm \
 		web \
 		python manage.py runscript cost_fixtures
 
+component_interface_value_fixtures:
+	docker compose run \
+		-v $(shell readlink -f ./scripts/):/app/scripts:ro \
+		--rm \
+		celery_worker_evaluation \
+		python manage.py runscript component_interface_value_fixtures
+
 superuser:
 	docker compose run \
 		-v $(shell readlink -f ./scripts/):/app/scripts:ro \

app/grandchallenge/algorithms/templates/algorithms/job_detail.html

@@ -7,7 +7,9 @@
 {% load static %}
 {% load url %}
 {% load meta_attr %}
-{% load evaluation_extras %}
+{% load json %}
+{% load string %}
+{% load civ %}
 
 {% block title %}
     Algorithm Result - {{ block.super }}
@@ -68,49 +70,17 @@
             <h2>Algorithm Result</h2>
 
             {{ object.rendered_result_text }}
-            <br>
-            {% if json %}
-                <table class="table table-borderless table-hover table-sm">
-                    <thead class="thead-light">
-                        <tr>
-                            <th>Metric</th>
-                            <th>Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for object in json %}
-                            <tr>
-                                <td>{{ object.interface.title }}</td>
-                                <td>{{ object.value }}</td>
-                            </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-            {% endif %}
-
-            {% for chart in charts %}
-                <h3 class="mt-3">{{ chart.interface.title }}</h3>
-                <div class="w-100 vega-lite-chart">
-                    {{ chart.value|json_script:chart.pk }}
-                </div>
-            {% endfor %}
-
-            {% for thumbnail in thumbnails %}
-                <h3 class="mt-3">{{ thumbnail.interface.title }}</h3>
-                <div class="row">
-                    <img class="m-3" height="400"
-                         src="{{ thumbnail.file.url }}"
-                         alt="{{ thumbnail.file.name }}" loading="lazy">
-                </div>
-            {% endfor %}
 
-            {% for file in files %}
-                <h3 class="mt-3">{{ file.interface.title }}</h3>
-                <div><a class="btn btn-primary mb-3"
-                   href="{{ file.file.url }}">
-                        <i class="fa fa-download"></i>&nbsp;Download {{ file.interface.kind }}
-                </a></div>
-            {% endfor %}
+            <dl>
+                {% for output in object.outputs.all|sort_civs %}
+                    {% if output.interface.slug != 'results-json-file' or not object.rendered_result_text %}
+                        <dt class="mt-3">{{ output.interface.title }}</dt>
+                        <dd>
+                            {% include 'components/partials/civ.html' with object=output only %}
+                        </dd>
+                    {% endif %}
+                {% endfor %}
+            </dl>
 
             {% if object.status == object.SUCCESS %}
                 <button class="btn btn-primary my-3"
@@ -191,32 +161,14 @@ <h3>Result Reference Data</h3>
                 <dt class="col-sm-3">Inputs</dt>
                 <dd class="col-sm-9">
                     <ul class="list-unstyled mb-0">
-                        {% for input in object.inputs.all %}
-                            {% for file in input.image.files.all %}
-                                <li>
-                                    <a class="badge badge-primary"
-                                       href="{{ file.file.url }}">
-                                        <i class="fa fa-download"></i>
-                                        Input {{ forloop.parentloop.counter }} {{ input.image.name|stem }}
-                                        ({{ file.file|suffix }})
-                                    </a>
-                                </li>
-                            {% endfor %}
-                            {% if input.file %}
-                                <li>
-                                    <a class="badge badge-primary"
-                                       href="{{ input.file.url }}" download="{{ input.file.name|name }}">
-                                        <i class="fa fa-download"></i>
-                                        Input {{ forloop.parentloop.counter }} {{ input.file.name|stem }}
-                                        ({{ input.file|suffix }})
-                                    </a>
-                                </li>
-                            {% endif %}
-                            {% if input.value is not None %}
-                                <li>
-                                    {{ input.interface.slug }}: {{ input.value|truncatechars_html:1000 }}
-                                </li>
-                            {% endif %}
+                        {% for input in object.inputs.all|sort_civs %}
+                            <li>
+                               {% include 'components/partials/civ.html' with object=input display_inline=True only %}
+                            </li>
+                        {% empty %}
+                            <li>
+                                <i class="fa fa-eye-slash text-warning"></i> No inputs were found
+                            </li>
                         {% endfor %}
                     </ul>
                 </dd>
@@ -225,40 +177,14 @@ <h3>Result Reference Data</h3>
                     <dt class="col-sm-3">Outputs</dt>
                     <dd class="col-sm-9">
                         <ul class="list-unstyled mb-0">
-                            {% for output in object.outputs.all %}
-                                {% if output.value is not None %}
-                                    <li>
-                                        <a href="#resultInfoModal"
-                                           data-toggle="modal"
-                                           data-target="#resultInfoModal"
-                                           data-title="Result Info"
-                                           data-output="{{ output.value }}"
-                                           data-pk="{{ object.pk }}"
-                                           class="badge badge-primary">
-                                            <i class="fa fa-download"></i>
-                                            {{ output.interface.title }}
-                                        </a>
-                                    </li>
-                                {% elif output.file %}
-                                    <li>
-                                        <a class="badge badge-primary"
-                                           href="{{ output.file.url }}">
-                                            <i class="fa fa-download"></i> {{ output.interface.title }}
-                                        </a>
-                                    </li>
-                                {% elif output.image %}
-                                    {% for file in output.image.files.all %}
-                                        <li>
-                                            <a class="badge badge-primary" href="{{ file.file.url }}">
-                                                <i class="fa fa-download"></i>
-                                                {{ output.interface.title }}{% if forloop.first and forloop.last %}{%else %} ({{forloop.counter }}){% endif %}
-                                            </a>
-                                        </li>
-                                    {% endfor %}
-                                {% endif %}
+
+                            {% for output in object.outputs.all|sort_civs %}
+                            <li>
+                                {% include 'components/partials/civ.html' with object=output display_inline=True only %}
+                            </li>
                             {% empty %}
                                 <li>
-                                    <i class="fa fa-eye-slash text-warning"></i> No output images were found
+                                    <i class="fa fa-eye-slash text-warning"></i> No outputs were found
                                 </li>
                             {% endfor %}
                         </ul>

app/grandchallenge/algorithms/views.py

@@ -776,48 +776,10 @@ def get_context_data(self, **kwargs):
         viewers_form = ViewersForm()
         viewers_form.fields["action"].initial = ViewersForm.REMOVE
 
-        files = []
-        thumbnails = []
-        charts = []
-        json = []
-        for output in self.object.outputs.all():
-            if (
-                output.interface.kind
-                == InterfaceKind.InterfaceKindChoices.CHART
-            ):
-                charts.append(output)
-            elif output.interface.kind in [
-                InterfaceKind.InterfaceKindChoices.PDF,
-                InterfaceKind.InterfaceKindChoices.CSV,
-                InterfaceKind.InterfaceKindChoices.ZIP,
-                InterfaceKind.InterfaceKindChoices.SQREG,
-            ]:
-                files.append(output)
-            elif output.interface.kind in [
-                InterfaceKind.InterfaceKindChoices.THUMBNAIL_PNG,
-                InterfaceKind.InterfaceKindChoices.THUMBNAIL_JPG,
-            ]:
-                thumbnails.append(output)
-            elif (
-                output.interface.kind
-                in [
-                    InterfaceKind.InterfaceKindChoices.BOOL,
-                    InterfaceKind.InterfaceKindChoices.FLOAT,
-                    InterfaceKind.InterfaceKindChoices.INTEGER,
-                    InterfaceKind.InterfaceKindChoices.STRING,
-                ]
-                and output.interface.store_in_database
-            ):
-                json.append(output)
-
         context.update(
             {
                 "viewers_form": viewers_form,
                 "job_perms": get_perms(self.request.user, self.object),
-                "charts": charts,
-                "files": files,
-                "thumbnails": thumbnails,
-                "json": json,
             }
         )
 

app/grandchallenge/charts/static/js/charts/render_charts.mjs

@@ -8,3 +8,42 @@ document.addEventListener("DOMContentLoaded", function(event) {
         renderVegaLiteChart(element);
     }
 });
+
+
+// Lazy rendering
+// Tag the containers with the class 'vega-lite-chart-lazy' to only render
+const handledAttribute = "data-vega-chart-is-rendered";
+
+function handleInterSection(entries) {
+    entries.forEach((entry) => {
+        if (entry.intersectionRatio < 0.40) {
+            return;
+        }
+
+        const element = entry.target;
+
+
+        if (element.getAttribute(handledAttribute)) {
+            return;
+        }
+
+        renderVegaLiteChart(element);
+
+        // Tag the element as being handled
+        element.setAttribute(handledAttribute, "");
+        this.unobserve(element);
+        }
+    )
+}
+
+const observer = new IntersectionObserver(handleInterSection, {
+  rootMargin: "0px",
+  threshold: 1.0,
+});
+
+
+document.addEventListener("DOMContentLoaded", function(event) {
+    for (const element of document.getElementsByClassName("vega-lite-chart-lazy")) {
+        observer.observe(element, );
+    }
+});

app/grandchallenge/components/models.py

@@ -817,6 +817,7 @@ class Meta:
 
 class ComponentInterface(OverlaySegmentsMixin):
     Kind = InterfaceKind.InterfaceKindChoices
+    SuperKind = InterfaceSuperKindChoices
 
     title = models.CharField(
         max_length=255,
@@ -898,6 +899,22 @@ def is_json_kind(self):
     def is_file_kind(self):
         return self.kind in InterfaceKind.interface_type_file()
 
+    @property
+    def is_thumbnail_kind(self):
+        return self.kind in [
+            InterfaceKindChoices.THUMBNAIL_JPG,
+            InterfaceKindChoices.THUMBNAIL_PNG,
+        ]
+
+    @property
+    def is_previewable(self):
+        return self.store_in_database and self.kind in [
+            InterfaceKindChoices.BOOL,
+            InterfaceKindChoices.FLOAT,
+            InterfaceKindChoices.INTEGER,
+            InterfaceKindChoices.STRING,
+        ]
+
     @property
     def super_kind(self):
         if self.saved_in_object_store:

app/grandchallenge/components/templates/components/partials/civ.html

@@ -0,0 +1,29 @@
+{% load civ %}
+
+
+{% with interface=object.interface civ=object %}
+
+    {% if interface.super_kind == interface.SuperKind.VALUE %}
+        {# No fallback here as a value could be intentionally null #}
+        {% if interface.kind == interface.Kind.CHART %}
+            {% include "components/partials/civ/value_chart.html" %}
+        {% else %}
+            {% include "components/partials/civ/value.html" %}
+        {% endif %}
+    {% elif interface.super_kind == interface.SuperKind.FILE %}
+        {% if not civ.file %}
+            {% include "components/partials/civ/fallback.html" %}
+        {% elif civ.interface.is_thumbnail_kind %}
+            {% include "components/partials/civ/file_thumbnail.html" %}
+        {% else %}
+            {% include "components/partials/civ/file.html" %}
+        {% endif %}
+    {% elif interface.super_kind == interface.SuperKind.IMAGE %}
+        {% if not civ.image %}
+            {% include "components/partials/civ/fallback.html" %}
+        {% else %}
+            {% include "components/partials/civ/image.html" %}
+        {% endif %}
+    {% endif %}
+
+{% endwith %}

app/grandchallenge/components/templates/components/partials/civ/base.html

@@ -0,0 +1 @@
+{% block content %}{% endblock %}

app/grandchallenge/components/templates/components/partials/civ/fallback.html

@@ -0,0 +1,3 @@
+<div class="badge badge-warning">
+    {{ civ.interface.title }}: cannot be displayed
+</div>

app/grandchallenge/components/templates/components/partials/civ/file.html

@@ -0,0 +1,17 @@
+{% load pathlib %}
+
+<a class="badge badge-primary"
+   href="{{ civ.file.url }}"
+   download="{{ civ.file.name|name }}"
+   title="{{ civ.interface.title }}: {{ civ.file.name|name }}"
+>
+    <i class="fa fa-download mr-1"
+       style="width:0.8rem;"
+    ></i>
+    {% if display_inline %}
+        Download {{ civ.interface.title | truncatechars:64 }}:
+        {{ civ.file.name|name | truncatechars:30 }}
+    {% else %}
+        Download {{ civ.file.name|name }}
+    {% endif %}
+</a>

app/grandchallenge/components/templates/components/partials/civ/file_thumbnail.html

@@ -0,0 +1,10 @@
+{% extends display_inline|yesno:"components/partials/civ/modal_base.html,components/partials/civ/base.html" %}
+
+
+{% block content %}
+     <img class="m-3" height="400"
+          src="{{ civ.file.url }}"
+          alt="{{ civ.file.name }}"
+          loading="lazy"
+     >
+{% endblock %}

app/grandchallenge/components/templates/components/partials/civ/image.html

@@ -0,0 +1,22 @@
+{% load pathlib %}
+
+<ul class="list-unstyled mb-0">
+  {% for file in civ.image.files.all %}
+    <li>
+        <a class="badge badge-primary"
+            href="{{ file.file.url }}"
+            title="{{ civ.interface.title }}: {{ forloop.parentloop.counter }}"
+        >
+        <i class="fa fa-download mr-1" style="width: 0.8rem"></i>
+        {% if display_inline %}
+            Download {{ civ.interface.title|truncatechars:64 }}:
+            {{ civ.file.name|name|truncatechars:30 }}
+        {% else %}
+            Download {{ civ.interface.title|truncatechars:64 }}:
+            {{ civ.image.name|stem|truncatechars:30 }}
+            ({{ file.file|suffix|truncatechars:30 }})
+        {% endif %}
+        </a>
+    </li>
+  {% endfor %}
+</ul>