Gateway branding and other front-end improvements by lucaspar · Pull Request #257 · spectrumx/sds-code

lucaspar · 2026-02-13T18:39:18Z

Fixes
- Fixes debouncing when running a capture search.
Styling
- Home page features a branded image if available, to distinguish SDS deployments.
- Navbar and tab title use short branded name.
- Captures and dataset listings are more visually coherent.
- Vertical dividers in navbar.
- Hiding authenticated urls from navbar if user is not authenticated.
- When running a capture search, the loading spinner is now in the button and it's visible for slightly longer if the request finishes too fast.
Docs
- Adds deployment instructions for operators, in Gateway changelog.

semanticdiff-com · 2026-02-13T18:39:21Z

Review changes with

Changed Files

File	Status
gateway/sds_gateway/templates/base.html	64% smaller
gateway/sds_gateway/templates/users/file_list.html	62% smaller
gateway/sds_gateway/templates/pages/about.html	35% smaller
gateway/sds_gateway/static/css/spectrumx_theme.css	28% smaller
gateway/sds_gateway/static/js/components.js	9% smaller
gateway/sds_gateway/static/js/file-list.js	7% smaller
.pre-commit-config.yaml	0% smaller
gateway/.envs/example/django.env	Unsupported file format
gateway/.envs/example/django.prod-example.env	Unsupported file format
gateway/config/settings/base.py	0% smaller
gateway/config/settings/local.py	0% smaller
gateway/config/settings/production.py	0% smaller
gateway/docs/changelog.md	Unsupported file format
gateway/sds_gateway/context_processors.py	0% smaller
gateway/sds_gateway/static/css/variables.css	0% smaller
gateway/sds_gateway/static/images/sds-brand-nd.png	Unsupported file format
gateway/sds_gateway/templates/pages/home.html	Unsupported file format
gateway/sds_gateway/templates/users/dataset_list.html	0% smaller
gateway/sds_gateway/templates/users/partials/my_datasets_tab.html	Unsupported file format
gateway/sds_gateway/test_context_processors.py	0% smaller

Copilot

Pull request overview

This PR adds customizable branding to the SDS Gateway to distinguish different deployment instances, along with front-end improvements and a critical debouncing fix for capture search. The branding system allows operators to configure institution names, site identifiers, and optional branding images through environment variables, which are then displayed in the navbar, page titles, and homepage.

Changes:

Fixed search debouncing using AbortController to cancel stale requests and prevent race conditions
Added branding system with configurable site names, institution names, and optional branding images
Improved UI consistency across captures and datasets pages with better visual hierarchy
Added vertical dividers in navbar and restricted authenticated-only links to authenticated users

Reviewed changes

Copilot reviewed 19 out of 20 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
gateway/sds_gateway/context_processors.py	Added branding context processor to expose branding settings to all templates
gateway/sds_gateway/test_context_processors.py	Added tests for the new branding context processor
gateway/config/settings/base.py	Defined branding settings and helper function to resolve brand image paths
gateway/config/settings/production.py	Added SDS_SITE_FQDN to ALLOWED_HOSTS
gateway/config/settings/local.py	Added SDS_SITE_FQDN to ALLOWED_HOSTS
gateway/.envs/example/django.env	Added example branding environment variables for development
gateway/.envs/example/django.prod-example.env	Added example branding environment variables for production
gateway/sds_gateway/templates/base.html	Updated navbar with branding, added vertical dividers, restricted links to authenticated users
gateway/sds_gateway/templates/pages/home.html	Added branding display with institution names and optional brand image banner
gateway/sds_gateway/templates/pages/about.html	Added optional brand image background to description section
gateway/sds_gateway/templates/users/dataset_list.html	Changed title from "My Datasets" to "Datasets" for consistency
gateway/sds_gateway/templates/users/partials/my_datasets_tab.html	Updated comments for consistency
gateway/sds_gateway/templates/users/file_list.html	Restructured layout, added date auto-fill logic, improved search UI
gateway/sds_gateway/static/js/components.js	Implemented AbortController pattern for request cancellation in SearchManager
gateway/sds_gateway/static/js/file-list.js	Updated to use AbortController signal, added minimum loading time, improved button state management
gateway/sds_gateway/static/css/variables.css	Added homepage color variable for institution highlighting
gateway/sds_gateway/static/css/spectrumx_theme.css	Added styles for brand images, navbar branding, and institution highlighting
gateway/docs/changelog.md	Added comprehensive deployment instructions for operators
.pre-commit-config.yaml	Increased max file size check from default to 1MB

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-13T18:44:29Z

gateway/sds_gateway/templates/pages/home.html

+                <div class="brand-banner mb-4"
+                     style="--brand-image: url('{{ SDS_BRAND_IMAGE_URL }}')"></div>


The SDS_BRAND_IMAGE_URL is inserted directly into inline CSS without proper sanitization. While the _get_brand_image_url function in settings/base.py validates the format, if an attacker can control the SDS_BRAND_IMAGE_PATH environment variable, they could inject malicious CSS. Django's template auto-escaping does not protect against CSS injection in style attributes. Consider using a more restrictive validation (e.g., allowlist of domains for external URLs) or using the Content-Security-Policy header to restrict image sources.

Suggested change

<div class="brand-banner mb-4"

style="--brand-image: url('{{ SDS_BRAND_IMAGE_URL }}')"></div>

<div class="brand-banner mb-4">

<img src="{{ SDS_BRAND_IMAGE_URL }}" alt="Brand banner" class="img-fluid" />

</div>

Copilot · 2026-02-13T18:44:30Z

gateway/sds_gateway/templates/base.html

                     role="navigation"
-                     aria-label="Main navigation">
+                     aria-label="Main navigation"
+                     {% if SDS_BRAND_IMAGE_URL %}style="--navbar-bg-image: url('{{ SDS_BRAND_IMAGE_URL }}')"{% endif %}>


The SDS_BRAND_IMAGE_URL is inserted directly into inline CSS without proper sanitization. While the _get_brand_image_url function in settings/base.py validates the format, if an attacker can control the SDS_BRAND_IMAGE_PATH environment variable, they could inject malicious CSS. Django's template auto-escaping does not protect against CSS injection in style attributes. Consider using a more restrictive validation (e.g., allowlist of domains for external URLs) or using the Content-Security-Policy header to restrict image sources.

Suggested change

{% if SDS_BRAND_IMAGE_URL %}style="--navbar-bg-image: url('{{ SDS_BRAND_IMAGE_URL }}')"{% endif %}>

{% if SDS_BRAND_IMAGE_URL %}style="--navbar-bg-image: url('{{ SDS_BRAND_IMAGE_URL|urlencode }}')"{% endif %}>

Copilot · 2026-02-13T18:44:30Z

gateway/sds_gateway/templates/pages/about.html

-        <div class="p-5 mb-4 bg-light rounded-3">
+        <div id="descriptionSection"
+             class="p-5 mb-4 bg-light rounded-3 description-hero"
+             {% if SDS_BRAND_IMAGE_URL %}style="--description-bg-image: url('{{ SDS_BRAND_IMAGE_URL }}')"{% endif %}>


The SDS_BRAND_IMAGE_URL is inserted directly into inline CSS without proper sanitization. While the _get_brand_image_url function in settings/base.py validates the format, if an attacker can control the SDS_BRAND_IMAGE_PATH environment variable, they could inject malicious CSS. Django's template auto-escaping does not protect against CSS injection in style attributes. Consider using a more restrictive validation (e.g., allowlist of domains for external URLs) or using the Content-Security-Policy header to restrict image sources.

Suggested change

{% if SDS_BRAND_IMAGE_URL %}style="--description-bg-image: url('{{ SDS_BRAND_IMAGE_URL }}')"{% endif %}>

{% if SDS_BRAND_IMAGE_URL %}style="--description-bg-image: url('{{ SDS_BRAND_IMAGE_URL|urlencode }}')"{% endif %}>

Copilot · 2026-02-13T18:44:31Z

gateway/sds_gateway/templates/users/file_list.html

+                        // Only set end date if it's not already set or if it's not greater than start date
+                        if (!currentEndDate) {
+                            startDate.setDate(startDate.getDate() + 1);
+                            const nextDay = startDate.toISOString().split('T')[0];
+                            endDateInput.value = nextDay;
+                        } else {
+                            const endDate = new Date(currentEndDate);
+                            if (endDate <= startDate) {


The date comparison logic has a potential timezone issue. When creating Date objects from date strings (YYYY-MM-DD), JavaScript interprets them as UTC midnight. However, the comparison "endDate <= startDate" at line 480 should be "endDate < startDate" because if both dates are equal (same day), there's no need to auto-correct the end date to the next day. With the current logic, if a user selects the same start and end date intentionally, the system will incorrectly force the end date to be the next day.

Suggested change

// Only set end date if it's not already set or if it's not greater than start date

if (!currentEndDate) {

startDate.setDate(startDate.getDate() + 1);

const nextDay = startDate.toISOString().split('T')[0];

endDateInput.value = nextDay;

} else {

const endDate = new Date(currentEndDate);

if (endDate <= startDate) {

// Only set end date if it's not already set or if it's earlier than start date

if (!currentEndDate) {

startDate.setDate(startDate.getDate() + 1);

const nextDay = startDate.toISOString().split('T')[0];

endDateInput.value = nextDay;

} else {

const endDate = new Date(currentEndDate);

if (endDate < startDate) {

Copilot · 2026-02-13T18:44:31Z

gateway/sds_gateway/test_context_processors.py

+        assert "SDS_BRANDED_SITE_NAME" in context
+        assert "SDS_FULL_INSTITUTION_NAME" in context
+        assert "SDS_SHORT_INSTITUTION_NAME" in context
+        assert "SDS_PROGRAMMATIC_SITE_NAME" in context
+        assert "SDS_SITE_FQDN" in context


The test for the branding context processor is missing a test for SDS_BRAND_IMAGE_URL. The branding function returns SDS_BRAND_IMAGE_URL at line 46 in context_processors.py, but the test only checks for the other five branding settings. This creates incomplete test coverage for the branding context processor.

Copilot · 2026-02-13T18:44:31Z

gateway/config/settings/base.py

+def _get_brand_image_url() -> str | None:
+    """Resolve brand image path to a usable URL.
+
+    Supports:
+    - Complete URLs (http://, https://)
+    - Local static paths (converted to /static/...)
+    - Empty strings (returns None)
+    """
+    image_path: str = env.str("SDS_BRAND_IMAGE_PATH", default="")
+
+    if not image_path:
+        return None
+
+    # If it's already a complete URL, use as-is
+    if image_path.startswith(("http://", "https://")):
+        return image_path
+
+    # If it's a relative path, prepend /static/
+    if not image_path.startswith("/"):
+        image_path = f"/{image_path}"
+
+    if not image_path.startswith("/static/"):
+        image_path = f"/static{image_path}"
+
+    return image_path


The _get_brand_image_url function in base.py lacks test coverage. This function has multiple code paths (empty string, http/https URLs, relative paths, paths with/without /static/) that should be tested to ensure the URL resolution logic works correctly in all cases. Without tests, future changes could break this functionality without being detected.

lucaspar added 5 commits February 12, 2026 14:23

gwy: docs: further notes to changelog

076f011

gwy: new branded names for customizing gateway deployments

07ec3e6

gwy: applied brand image to website

d1b46ae

gwy: unifying the capture and dataset list ui

c49b26b

gwy: prevents extra requests when searching and filtering captures

cccabb5

lucaspar self-assigned this Feb 13, 2026

Copilot AI review requested due to automatic review settings February 13, 2026 18:39

lucaspar added bug Something isn't working gateway Gateway component styling Special focus on styling of front-end components javascript Pull requests that update non-trivial javascript code labels Feb 13, 2026

Copilot started reviewing on behalf of lucaspar February 13, 2026 18:39 View session

lucaspar added the documentation Improvements or additions to documentation label Feb 13, 2026

Copilot AI reviewed Feb 13, 2026

View reviewed changes

lucaspar marked this pull request as draft February 16, 2026 14:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gateway branding and other front-end improvements#257

Gateway branding and other front-end improvements#257
lucaspar wants to merge 5 commits intomasterfrom
lp/branding

lucaspar commented Feb 13, 2026 •

edited

Loading

Uh oh!

semanticdiff-com bot commented Feb 13, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		<div class="brand-banner mb-4"
		style="--brand-image: url('{{ SDS_BRAND_IMAGE_URL }}')"></div>

	{% if SDS_BRAND_IMAGE_URL %}style="--navbar-bg-image: url('{{ SDS_BRAND_IMAGE_URL }}')"{% endif %}>
	{% if SDS_BRAND_IMAGE_URL %}style="--navbar-bg-image: url('{{ SDS_BRAND_IMAGE_URL\|urlencode }}')"{% endif %}>

	{% if SDS_BRAND_IMAGE_URL %}style="--description-bg-image: url('{{ SDS_BRAND_IMAGE_URL }}')"{% endif %}>
	{% if SDS_BRAND_IMAGE_URL %}style="--description-bg-image: url('{{ SDS_BRAND_IMAGE_URL\|urlencode }}')"{% endif %}>

Conversation

lucaspar commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

semanticdiff-com bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

lucaspar commented Feb 13, 2026 •

edited

Loading

semanticdiff-com bot commented Feb 13, 2026 •

edited

Loading