Skip to content

Commit

Permalink
Restyled dataset pipeline buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@VukW
VukW committed Oct 24, 2024
1 parent 48e388e commit 23908f5
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 41 deletions.
2 changes: 1 addition & 1 deletion cli/medperf/web_ui/common.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ async def get_current_user_ui(


async def get_current_user_api(
token: str = Security(api_key_header),
token: str = Security(api_key_cookie),
):
if token == security_token:
return True
Expand Down
69 changes: 68 additions & 1 deletion cli/medperf/web_ui/static/css/common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,4 +159,71 @@ pre {
min-width: 150px;
max-width: 48%;
box-sizing: border-box;
}
}

/* Step container styling */
.step-container {
border-radius: 8px;
background-color: #f9f9f9;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}

/* Step buttons */
.step-btn {
padding: 5px 15px; /* Reduced padding */
font-size: 0.9rem; /* Slightly smaller font for a more compact design */
border-radius: 20px;
transition: background-color 0.3s ease;
}

.step-btn i {
font-size: 1rem;
}

/* Completed steps */
.step-complete {
display: flex;
align-items: center;
background-color: #e8f5e9;
padding: 5px 15px; /* Reduced padding */
border-radius: 20px;
}

.step-complete i {
font-size: 1.2rem;
}

/* Step labels */
.step-label {
margin-top: 2px;
font-size: 0.85rem; /* Smaller step labels */
color: #6c757d;
}

/* Step dividers */
.step-divider i {
font-size: 1.2rem;
margin-left: 5px;
margin-right: 5px;
}

/* Consistent button styles */
.step-btn, .step-complete {
min-width: 120px; /* Adjusted width */
text-align: center;
}

.step-btn:disabled {
background-color: #e0e0e0;
color: #6c757d;
}

/* Dropdown button adjustments */
.dropdown-toggle {
padding: 5px 15px;
border-radius: 20px;
}
106 changes: 67 additions & 39 deletions cli/medperf/web_ui/templates/dataset_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,47 +50,75 @@ <h5 class="card-title mb-0">Details</h5>
</div>
</div>

<!-- Prepare button -->
<a href="/datasets/prepare_draft/ui?dataset_id={{ entity.id }}" class="btn btn-primary mb-3">Prepare</a>

<!-- Set Operational button and hint -->
<div class="d-flex align-items-center mb-3">
<button
class="btn btn-warning"
id="set-operational-btn"
{% if not (entity.is_ready() and entity.state == 'DEVELOPMENT') %}disabled{% endif %}>
Set To Operational
</button>

<!-- Hint icon -->
<span
class="ml-2 text-muted"
data-toggle="tooltip"
title="Only prepared datasets in the development state can be put to OPERATIONAL">
<i class="fas fa-info-circle"></i>
</span>
</div>

<!-- Associate with Benchmark dropdown button -->
<div class="dropdown mb-3">
<button
class="btn btn-info dropdown-toggle"
type="button"
id="associate-dropdown"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
{% if not (entity.state == 'OPERATION') %}disabled{% endif %}>
Associate with Benchmark
</button>
<div class="dropdown-menu" aria-labelledby="associate-dropdown">
{% for benchmark in benchmarks.values() %}
<div class="dropdown-item benchmark-item {% if benchmark.state == 'DEVELOPMENT1' %}disabled{% endif %}" data-benchmark-id="{{ benchmark.id }}">
{{ benchmark_macros.benchmark_card(benchmark) }}
<nav aria-label="breadcrumb">
<ol class="breadcrumb d-flex justify-content-between align-items-center p-3 shadow-sm rounded bg-white step-container">
<!-- Step 1: Prepare -->
<li class="breadcrumb-item d-flex align-items-center">
{% if not entity.is_ready() %}
<a href="/datasets/prepare_draft/ui?dataset_id={{ entity.id }}" class="step-btn btn btn-primary">
<i class="fas fa-play-circle mr-2"></i> Prepare
</a>
{% else %}
<div class="step-complete d-flex align-items-center">
<i class="fas fa-check-circle text-success mr-2"></i>
<span class="text-success">Prepared</span>
</div>
{% endif %}
<small class="step-label ml-2">Step 1: Prepare</small>
</li>

<!-- Step Divider -->
<li class="breadcrumb-item step-divider mx-2">
<i class="fas fa-chevron-right text-muted"></i>
</li>

<!-- Step 2: Set to Operational -->
<li class="breadcrumb-item d-flex align-items-center">
{% if entity.is_ready() and entity.state == 'DEVELOPMENT' %}
<button class="step-btn btn btn-warning">
<i class="fas fa-arrow-up mr-2"></i> Set To Operational
</button>
{% elif entity.state == 'OPERATION' %}
<div class="step-complete d-flex align-items-center">
<i class="fas fa-check-circle text-success mr-2"></i>
<span class="text-success">Operational</span>
</div>
{% else %}
<button class="step-btn btn btn-warning" disabled>Set To Operational</button>
{% endif %}
<small class="step-label ml-2">Step 2: Set Operational</small>
</li>

<!-- Step Divider -->
<li class="breadcrumb-item step-divider mx-2">
<i class="fas fa-chevron-right text-muted"></i>
</li>

<!-- Step 3: Associate with Benchmark -->
<li class="breadcrumb-item d-flex align-items-center">
{% if entity.state == 'OPERATION' %}
<div class="dropdown">
<button class="step-btn btn btn-info dropdown-toggle" type="button" id="associate-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Associate with Benchmark
</button>
<div class="dropdown-menu" aria-labelledby="associate-dropdown">
{% for benchmark in benchmarks.values() %}
<div class="dropdown-item benchmark-item" data-benchmark-id="{{ benchmark.id }}">
{{ benchmark_macros.benchmark_card(benchmark) }}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>
{% else %}
<button class="step-btn btn btn-info" disabled>Associate with Benchmark</button>
{% endif %}
<small class="step-label ml-2">Step 3: Associate</small>
</li>
</ol>
</nav>


</div>
</div>

Expand Down

0 comments on commit 23908f5

Please sign in to comment.