Skip to content

feat(ux): add animated gradient border branding for RL experiments #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jjroelofs merged 1 commit into from
Jan 27, 2026
Merged

feat(ux): add animated gradient border branding for RL experiments #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions css/experiment-highlight.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/**
* @file
* Styles for highlighting RL experiments in the UI.
*
* This CSS is only loaded for users with 'view rl reports' permission.
* Integrating modules can add the 'rl-experiment' class to their elements
* to apply the animated rainbow border branding.
*/

:root {
--rl-color-1: #0077B6;
--rl-color-2: #0096C7;
--rl-color-3: #00B4D8;
--rl-color-4: #48CAE4;
--rl-color-5: #26828E;
--rl-color-6: #1F9E89;
--rl-color-7: #35B779;
--rl-color-8: #6CCE59;
--rl-color-9: #B4DE2C;
--rl-color-10: #DAE319;
}

@keyframes rl-rainbow-border {
0% {
border-image: linear-gradient(90deg, var(--rl-color-1), var(--rl-color-2), var(--rl-color-3), var(--rl-color-4), var(--rl-color-5), var(--rl-color-6), var(--rl-color-7), var(--rl-color-8), var(--rl-color-9), var(--rl-color-10)) 1;
}
20% {
border-image: linear-gradient(90deg, var(--rl-color-3), var(--rl-color-4), var(--rl-color-5), var(--rl-color-6), var(--rl-color-7), var(--rl-color-8), var(--rl-color-9), var(--rl-color-10), var(--rl-color-1), var(--rl-color-2)) 1;
}
40% {
border-image: linear-gradient(90deg, var(--rl-color-5), var(--rl-color-6), var(--rl-color-7), var(--rl-color-8), var(--rl-color-9), var(--rl-color-10), var(--rl-color-1), var(--rl-color-2), var(--rl-color-3), var(--rl-color-4)) 1;
}
60% {
border-image: linear-gradient(90deg, var(--rl-color-7), var(--rl-color-8), var(--rl-color-9), var(--rl-color-10), var(--rl-color-1), var(--rl-color-2), var(--rl-color-3), var(--rl-color-4), var(--rl-color-5), var(--rl-color-6)) 1;
}
80% {
border-image: linear-gradient(90deg, var(--rl-color-9), var(--rl-color-10), var(--rl-color-1), var(--rl-color-2), var(--rl-color-3), var(--rl-color-4), var(--rl-color-5), var(--rl-color-6), var(--rl-color-7), var(--rl-color-8)) 1;
}
100% {
border-image: linear-gradient(90deg, var(--rl-color-1), var(--rl-color-2), var(--rl-color-3), var(--rl-color-4), var(--rl-color-5), var(--rl-color-6), var(--rl-color-7), var(--rl-color-8), var(--rl-color-9), var(--rl-color-10)) 1;
}
}

.rl-experiment,
.contextual-links li a[href*="/admin/reports/rl/experiment/"],
.rl-admin-page .page-title {
animation: rl-rainbow-border 10s linear infinite !important;
border-width: 3px !important;
border-style: solid !important;
}
6 changes: 6 additions & 0 deletions rl.libraries.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
experiment-highlight:
version: 1.0
css:
theme:
css/experiment-highlight.css: {}

plotly:
version: 2.35.2
license:
Expand Down
21 changes: 21 additions & 0 deletions rl.module
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,27 @@ function rl_theme() {
];
}

/**
* Implements hook_page_attachments().
*/
function rl_page_attachments(array &$attachments) {
// Attach experiment highlight styles for users who can view RL reports.
if (\Drupal::currentUser()->hasPermission('view rl reports')) {
$attachments['#attached']['library'][] = 'rl/experiment-highlight';
}
}

/**
* Implements hook_preprocess_html().
*/
function rl_preprocess_html(&$variables) {
// Add body class on RL admin pages for styling.
$route_name = \Drupal::routeMatch()->getRouteName();
if ($route_name && str_starts_with($route_name, 'rl.')) {
$variables['attributes']['class'][] = 'rl-admin-page';
}
}

/**
* Implements hook_help().
*/
Expand Down
2 changes: 1 addition & 1 deletion rl.routing.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ rl.reports.experiment_detail:
path: '/admin/reports/rl/experiment/{experiment_id}'
defaults:
_controller: '\Drupal\rl\Controller\ReportsController::experimentDetail'
_title: 'Experiment Detail'
_title_callback: '\Drupal\rl\Controller\ReportsController::experimentDetailTitle'
requirements:
_permission: 'view rl reports'
experiment_id: '.+'
Expand Down
15 changes: 15 additions & 0 deletions src/Controller/ReportsController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,21 @@ public function experimentsOverview() {
return $build;
}

/**
* Title callback for the experiment detail page.
*
* @param string $experiment_id
* The experiment ID.
*
* @return string
* The page title.
*/
public function experimentDetailTitle($experiment_id) {
$experiment_totals = $this->experimentStorage->getExperimentTotals($experiment_id);
$experiment_name = $experiment_totals->experiment_name ?? $experiment_id;
return $this->t('Experiment: @name', ['@name' => $experiment_name]);
}

/**
* Detail page for a specific experiment showing all arms.
*
Expand Down