Skip to content

Commit

Permalink
Refactored details page - extracted common styles to the base template
Browse files Browse the repository at this point in the history
  • Loading branch information
@VukW
VukW committed Aug 10, 2024
1 parent b669358 commit 039f496
Show file tree
Hide file tree
Showing 7 changed files with 221 additions and 267 deletions.
3 changes: 2 additions & 1 deletion cli/medperf/web_ui/benchmarks/routes.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@ def assoc_sorting_key(assoc):
"benchmark_detail.html",
{
"request": request,
"benchmark": benchmark,
"entity": benchmark,
"entity_name": benchmark.name,
"data_preparation_mlcube": data_preparation_mlcube,
"reference_model_mlcube": reference_model_mlcube,
"metrics_mlcube": metrics_mlcube,
Expand Down
3 changes: 2 additions & 1 deletion cli/medperf/web_ui/datasets/routes.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,8 @@ def assoc_sorting_key(assoc):
return templates.TemplateResponse("dataset_detail.html",
{
"request": request,
"dataset": dataset,
"entity": dataset,
"entity_name": dataset.name,
"prep_cube_name": prep_cube_name,
"benchmark_associations": benchmark_associations,
"benchmarks": benchmarks
Expand Down
5 changes: 3 additions & 2 deletions cli/medperf/web_ui/mlcubes/routes.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
from fastapi.responses import HTMLResponse
from fastapi import Request

from medperf.account_management import get_medperf_user_data
from medperf.entities.cube import Cube
from medperf.entities.benchmark import Benchmark
from medperf.enums import Status
Expand Down Expand Up @@ -55,15 +56,15 @@ def assoc_sorting_key(assoc):

benchmarks_associations = sorted(benchmarks_associations, key=assoc_sorting_key)

# Fetch benchmarks information
benchmarks = {assoc.benchmark: Benchmark.get(assoc.benchmark) for assoc in benchmarks_associations if
assoc.benchmark}

return templates.TemplateResponse(
"mlcube_detail.html",
{
"request": request,
"mlcube": mlcube,
"entity": mlcube,
"entity_name": mlcube.name,
"benchmarks_associations": benchmarks_associations,
"benchmarks": benchmarks
}
Expand Down
130 changes: 35 additions & 95 deletions cli/medperf/web_ui/templates/benchmark_detail.html
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,45 @@
<!-- ./cli/medperf/web-ui/templates/benchmark_detail.html -->
{% extends "base.html" %}
{% extends "detail_base.html" %}
{% import 'association_card_macros.html' as macros %}

{% block title %}Benchmark Details{% endblock %}

{% block content %}
<style>
.card-body.d-flex {
flex-wrap: wrap;
}

.card-text {
word-wrap: break-word;
white-space: normal;
}

.detail-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

.detail-panel, .associations-panel {
flex: 1;
max-width: 60%;
padding-right: 20px;
box-sizing: border-box;
margin: 0 auto;
}

.association-card {
margin-bottom: 20px;
}

.associations-panel {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 20px;
}

.associations-column {
flex: 1;
min-width: 150px;
max-width: 48%;
box-sizing: border-box;
}

@media (max-width: 992px) {
.detail-panel, .associations-panel {
max-width: 100%;
padding-right: 0;
padding-left: 0;
}
}

@media (max-width: 768px) {
.detail-container {
flex-direction: column;
}
}
</style>
<div class="detail-container">
<div class="detail-panel">
<h1 class="my-4">{{ benchmark.name }}</h1>
<div class="{% if benchmark.is_valid %}card{% else %}invalid-card{% endif %}">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="card-title mb-0">Details</h5>
<span class="badge {% if benchmark.state == 'OPERATION' %}badge-state-operational{% else %}badge-state-development{% endif %}">
{{ benchmark.state }}
</span>
<span class="badge {% if benchmark.approval_status == 'APPROVED' %}badge-approval-approved{% elif benchmark.approval_status == 'PENDING' %}badge-approval-pending{% else %}badge-approval-rejected{% endif %}">
{{ benchmark.approval_status }}
</span>
<span class="badge {% if benchmark.is_valid %}badge-valid{% else %}badge-invalid{% endif %}">
{% if benchmark.is_valid %}Valid{% else %}Invalid{% endif %}
</span>
{% block detail_panel %}
<div class="detail-panel">
<h1 class="my-4">{{ entity.name }}</h1>
<div class="{% if entity.is_valid %}card{% else %}invalid-card{% endif %}">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="card-title mb-0">Details</h5>
<span class="badge {% if entity.state == 'OPERATION' %}badge-state-operational{% else %}badge-state-development{% endif %}">
{{ entity.state }}
</span>
<span class="badge {% if entity.approval_status == 'APPROVED' %}badge-approval-approved{% elif entity.approval_status == 'PENDING' %}badge-approval-pending{% else %}badge-approval-rejected{% endif %}">
{{ entity.approval_status }}
</span>
<span class="badge {% if entity.is_valid %}badge-valid{% else %}badge-invalid{% endif %}">
{% if entity.is_valid %}Valid{% else %}Invalid{% endif %}
</span>
</div>
<div class="card mb-3">
<div class="card-body">
<p class="card-text"><strong>Description:</strong> {{ entity.description }}</p>
<p class="card-text"><strong>Documentation:</strong> <a href="{{ entity.docs_url }}" class="text-primary" target="_blank">{{ entity.docs_url }}</a></p>
<p class="card-text"><strong>Demo Dataset Tarball:</strong> <a href="{{ entity.demo_dataset_tarball_url }}" class="text-primary" target="_blank">{{ entity.demo_dataset_tarball_url }}</a></p>
<p class="card-text text-muted small">{{ entity.demo_dataset_tarball_hash }}</p>
</div>
<div class="card mb-3">
<div class="card-body">
<p class="card-text"><strong>Description:</strong> {{ benchmark.description }}</p>
<p class="card-text"><strong>Documentation:</strong> <a href="{{ benchmark.docs_url }}" class="text-primary" target="_blank">{{ benchmark.docs_url }}</a></p>
<p class="card-text"><strong>Demo Dataset Tarball:</strong> <a href="{{ benchmark.demo_dataset_tarball_url }}" class="text-primary" target="_blank">{{ benchmark.demo_dataset_tarball_url }}</a></p>
<p class="card-text text-muted small">{{ benchmark.demo_dataset_tarball_hash }}</p>
</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>
<p class="card-text"><strong>Owner:</strong> <i class="fas fa-user"></i> <span class="text-muted small">{{ entity.owner }}</span></p>
</div>
</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>
<p class="card-text"><strong>Owner:</strong> <i class="fas fa-user"></i> <span class="text-muted small">{{ benchmark.owner }}</span></p>
</div>
<div class="text-right w-50">
<p class="card-text"><strong>Created:</strong> <span class="text-muted small" data-date="{{ benchmark.created_at }}"></span></p>
<p class="card-text"><strong>Modified:</strong> <span class="text-muted small" data-date="{{ benchmark.modified_at }}"></span></p>
</div>
<div class="text-right w-50">
<p class="card-text"><strong>Created:</strong> <span class="text-muted small" data-date="{{ entity.created_at }}"></span></p>
<p class="card-text"><strong>Modified:</strong> <span class="text-muted small" data-date="{{ entity.modified_at }}"></span></p>
</div>
</div>
</div>
Expand Down
124 changes: 32 additions & 92 deletions cli/medperf/web_ui/templates/dataset_detail.html
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,42 @@
<!-- ./cli/medperf/web-ui/templates/dataset_detail.html -->
{% extends "base.html" %}
{% extends "detail_base.html" %}
{% import 'association_card_macros.html' as macros %}

{% block title %}Dataset Details{% endblock %}

{% block content %}
<style>
.card-body.d-flex {
flex-wrap: wrap;
}

.card-text {
word-wrap: break-word;
white-space: normal;
}

.detail-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

.detail-panel, .associations-panel {
flex: 1;
max-width: 60%;
padding-right: 20px;
box-sizing: border-box;
margin: 0 auto;
}

.association-card {
margin-bottom: 20px;
}

.associations-panel {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 20px;
}

.associations-column {
flex: 1;
min-width: 150px;
max-width: 48%;
box-sizing: border-box;
}

@media (max-width: 992px) {
.detail-panel, .associations-panel {
max-width: 100%;
padding-right: 0;
padding-left: 0;
}
}

@media (max-width: 768px) {
.detail-container {
flex-direction: column;
}
}
</style>
<div class="detail-container">
<div class="detail-panel">
<h1 class="my-4">{{ dataset.name }}</h1>
<div class="{% if dataset.is_valid %}card{% else %}invalid-card{% endif %}">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="card-title mb-0">Details</h5>
<span class="badge {% if dataset.state == 'OPERATION' %}badge-state-operational{% else %}badge-state-development{% endif %}">
{{ dataset.state }}
</span>
<span class="badge {% if dataset.is_valid %}badge-valid{% else %}badge-invalid{% endif %}">
{% if dataset.is_valid %}Valid{% else %}Invalid{% endif %}
</span>
{% block detail_panel %}
<div class="detail-panel">
<h1 class="my-4">{{ entity.name }}</h1>
<div class="{% if entity.is_valid %}card{% else %}invalid-card{% endif %}">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="card-title mb-0">Details</h5>
<span class="badge {% if entity.state == 'OPERATION' %}badge-state-operational{% else %}badge-state-development{% endif %}">
{{ entity.state }}
</span>
<span class="badge {% if entity.is_valid %}badge-valid{% else %}badge-invalid{% endif %}">
{% if entity.is_valid %}Valid{% else %}Invalid{% endif %}
</span>
</div>
<div class="card mb-3">
<div class="card-body">
<p class="card-text"><strong>Description:</strong> {{ entity.description }}</p>
<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>
</div>
<div class="card mb-3">
<div class="card-body">
<p class="card-text"><strong>Description:</strong> {{ dataset.description }}</p>
<p class="card-text"><strong>Location:</strong> {{ dataset.location }}</p>
<p class="card-text"><strong>Input Data Hash:</strong> {{ dataset.input_data_hash }}</p>
<p class="card-text"><strong>Generated UID:</strong> {{ dataset.generated_uid }}</p>
<p class="card-text"><strong>Data Preparation MLCube:</strong> <a href="/mlcubes/ui/{{ dataset.data_preparation_mlcube }}" class="text-primary">{{ prep_cube_name }}</a></p>
</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>Is Valid:</strong> <span class="text-muted small">{{ entity.is_valid }}</span></p>
<p class="card-text"><strong>Submitted as Prepared:</strong> <span class="text-muted small">{{ entity.submitted_as_prepared }}</span></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>
<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>Is Valid:</strong> <span class="text-muted small">{{ dataset.is_valid }}</span></p>
<p class="card-text"><strong>Submitted as Prepared:</strong> <span class="text-muted small">{{ dataset.submitted_as_prepared }}</span></p>
<p class="card-text"><strong>Owner:</strong> <i class="fas fa-user"></i> <span class="text-muted small">{{ dataset.owner }}</span></p>
</div>
<div class="text-right w-50">
<p class="card-text"><strong>Created:</strong> <span class="text-muted small" data-date="{{ dataset.created_at }}"></span></p>
<p class="card-text"><strong>Modified:</strong> <span class="text-muted small" data-date="{{ dataset.modified_at }}"></span></p>
</div>
<div class="text-right w-50">
<p class="card-text"><strong>Created:</strong> <span class="text-muted small" data-date="{{ entity.created_at }}"></span></p>
<p class="card-text"><strong>Modified:</strong> <span class="text-muted small" data-date="{{ entity.modified_at }}"></span></p>
</div>
</div>
</div>
Expand Down
65 changes: 65 additions & 0 deletions cli/medperf/web_ui/templates/detail_base.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!-- ./cli/medperf/web-ui/templates/detail_base.html -->
{% extends "base.html" %}
{% import 'association_card_macros.html' as macros %}

{% block title %}Details{% endblock %}

{% block content %}
<style>
.card-body.d-flex {
flex-wrap: wrap;
}

.card-text {
word-wrap: break-word;
white-space: normal;
}

.detail-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

.association-card {
margin-bottom: 20px;
}

.associations-panel {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 20px;
}

.associations-column {
flex: 1;
min-width: 150px;
max-width: 48%;
box-sizing: border-box;
}

{% block optional_styles %}{% endblock %}

@media (max-width: 992px) {
.detail-panel, .associations-panel {
max-width: 100%;
padding-right: 0;
padding-left: 0;
}
}

@media (max-width: 768px) {
.detail-container {
flex-direction: column;
}
}
</style>

<div class="detail-container">
{% block detail_panel %}{% endblock %}
</div>
{% block optional_scripts %}{% endblock %}
{% endblock %}
Loading

0 comments on commit 039f496

Please sign in to comment.