Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Making the JADA Maintenance Dashboard's Task Card Clickable: A UI/UX Enhancement with CloudFront Cache Invalidation

What Was Done

The JADA Maintenance Hub dashboard displays a "Total Tasks" stat card showing the current task count (82 tasks at time of implementation). This card was previously display-only. We made it interactive by adding click-to-navigate functionality that switches the dashboard view to the Systems tab where the actual task table is rendered. This required modifying the HTML structure, adding CSS for interactive states, and redeploying through our S3 + CloudFront infrastructure.

Technical Details: The Implementation

File Location and Retrieval

The maintenance hub lives in S3, not in a local git repository. The primary file we modified is:

s3://jada-maintenance-hub/index.html

We downloaded it locally for editing, made our changes, then pushed back to S3 and invalidated the CloudFront distribution cache. This pattern keeps the live site decoupled from source control, allowing rapid iteration without deployment pipelines.

Understanding the Tab Navigation Architecture

The maintenance hub uses a tab-based interface controlled by a JavaScript function called switchTab(). Each tab has a data-tab attribute in the HTML:

<div class="tab" data-tab="systems">Systems</div>
<div class="tab" data-tab="schedule">Schedule</div>

The corresponding content sections also use matching attributes:

<div id="systems" class="tab-content">
  <!-- Task table renders here -->
</div>
<div id="schedule" class="tab-content">
  <!-- Schedule content -->
</div>

The switchTab() function hides all tab content and shows only the active one. The task table—the actual list of 82 tasks—renders within the Systems tab content area, making `switchTab('systems')` the correct navigation target.

Making the Card Interactive

The "Total Tasks" card is a simple info-card div displaying the aggregated task count. We wrapped it in a clickable container and added an onclick handler:

<div class="info-card info-card-link" onclick="switchTab('systems')">
  <div class="info-card-label">Total Tasks</div>
  <div class="info-card-value">82</div>
</div>

The class info-card-link is new; it signals to CSS and users that this card is interactive.

CSS for Interactive State

We added hover and cursor styles to provide visual feedback:

.info-card-link {
  cursor: pointer;
  transition: all 0.3s ease;
}

.info-card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  background-color: #f5f5f5;
}

The translateY(-4px) creates a subtle lift effect on hover, signaling interactivity. The enhanced shadow provides depth. The background color change ensures visual contrast. These are deliberate UX choices to make the interaction discoverable without requiring tooltips or explicit instructions.

Infrastructure: S3 and CloudFront

S3 Bucket and Object

The maintenance hub is hosted from an S3 bucket named jada-maintenance-hub. The index.html file is the root object. We use the bucket's static website hosting feature rather than CloudFront origin path routing, keeping the infrastructure simple.

CloudFront Distribution

A CloudFront distribution sits in front of the S3 bucket to provide:

  • Global edge caching: The maintenance hub is accessed from various locations; CloudFront reduces latency by caching at edge locations worldwide.
  • Custom domain: The distribution is mapped to maintenance.jada.queenofsandiego.com via Route53 CNAME record.
  • Cache control: We set a default TTL (Time To Live) of 3600 seconds (1 hour) for index.html, balancing freshness with performance.

When we deploy updates to index.html in S3, browsers and edge caches still serve the old version until the TTL expires. To make changes live immediately, we must invalidate the CloudFront cache.

Cache Invalidation Command

After uploading the modified index.html to S3, we ran:

aws cloudfront create-invalidation \
  --distribution-id  \
  --paths "/index.html"

The DISTRIBUTION_ID for the maintenance hub can be found via:

aws cloudfront list-distributions --query "DistributionList.Items[?DomainName=='maintenance.jada.queenofsandiego.com'].Id"

This invalidation ensures all edge caches purge the old version and serve the new one on the next request. Invalidations typically propagate within seconds to a few minutes globally.

Key Decisions and Rationale

Why onclick Instead of Event Listeners?

The maintenance hub uses inline onclick handlers throughout its codebase. While modern best practice favors JavaScript event delegation, we matched the existing pattern for consistency and minimal diff footprint. The card lives in static HTML with no dynamic mounting, making inline handlers appropriate here.

Why Modify S3 Directly Rather Than Version-Control?

The maintenance hub's architecture treats S3 as the source of truth, not a deployment artifact. This enables rapid iteration—Sergio or other engineers can edit the dashboard in-place without CI/CD pipeline delays. The trade-off is that we lose git history and code review for these edits. Future work should migrate this to a proper build pipeline with staging environments.

CSS Transitions and Performance

The transition: all 0.3s ease rule animates the hover state smoothly. We kept it under 300ms because longer transitions feel sluggish on modern displays. The transform property (rather than repositioning with top/left) uses GPU acceleration, ensuring 60fps animations on lower-end devices.

Testing and Verification

After deployment, we verified:

  • Navigating to maintenance.jada.queenofsandiego.com loaded the updated page
  • Clicking the "Total Tasks" card switched the view to the Systems tab
  • The hover state rendered correctly on desktop and mobile
  • Browser DevTools confirmed the CloudFront cache was hit on subsequent reloads (Cache-Control header present)

What's Next

Future enhancements could include:

  • Smooth scroll-to-table: After switching tabs, scroll the task table into view so users don't have to scroll manually