Added warning about lack of progress results, moved add to compare button

frontend/app.js

@@ -118,6 +118,15 @@ const TERM_DEFINITIONS = {
   },
 };
 
+// Warning definitions for alerts/notices
+const WARNING_DEFINITIONS = {
+  progress_scores_unavailable: {
+    title: "Progress Scores Unavailable",
+    description:
+      "The DfE will not publish primary school progress measures for 2023-24 or 2024-25, as KS1 SATs were cancelled in 2020 and 2021.",
+  },
+};
+
 /**
  * Creates an info trigger button for a term tooltip
  * @param {string} termKey - Key from TERM_DEFINITIONS
@@ -132,6 +141,20 @@ function createInfoTrigger(termKey) {
   return `<button class="info-trigger" type="button" data-term="${termKey}" aria-label="${label}" aria-expanded="false"><svg class="info-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="8" r="6.5"/><path d="M8 7v4"/><circle cx="8" cy="5" r="0.5" fill="currentColor" stroke="none"/></svg></button>`;
 }
 
+/**
+ * Creates a warning trigger button for warning tooltips
+ * @param {string} warningKey - Key from WARNING_DEFINITIONS
+ * @returns {string} HTML string for the warning trigger
+ */
+function createWarningTrigger(warningKey) {
+  const definition = WARNING_DEFINITIONS[warningKey];
+  if (!definition) return "";
+
+  const label = definition.title;
+
+  return `<button class="warning-trigger" type="button" data-warning="${warningKey}" aria-label="${label}" aria-expanded="false"><svg class="warning-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M8 1.5L14.5 13H1.5L8 1.5z"/><path d="M8 6v3"/><circle cx="8" cy="11" r="0.5" fill="currentColor" stroke="none"/></svg></button>`;
+}
+
 // Map instances (stored to allow cleanup)
 const schoolMaps = new Map();
 
@@ -1368,7 +1391,7 @@ async function openSchoolModal(urn) {
             </div>
         </div>
         <div class="modal-stats-section">
-            <h4>Progress Scores</h4>
+            <h4>Progress Scores ${createWarningTrigger("progress_scores_unavailable")}</h4>
             <div class="modal-stats-grid">
                 <div class="modal-stat">
                     <div class="modal-stat-value ${getProgressClass(latest.reading_progress)}">${formatMetricValue(latest.reading_progress, "reading_progress")}</div>
@@ -1908,7 +1931,7 @@ class TooltipManager {
 
   handleMouseEnter(e) {
     if (!e.target || !e.target.closest) return;
-    const trigger = e.target.closest(".info-trigger");
+    const trigger = e.target.closest(".info-trigger, .warning-trigger");
     if (!trigger) return;
 
     clearTimeout(this.hideTimeout);
@@ -1919,7 +1942,7 @@ class TooltipManager {
 
   handleMouseLeave(e) {
     if (!e.target || !e.target.closest) return;
-    const trigger = e.target.closest(".info-trigger");
+    const trigger = e.target.closest(".info-trigger, .warning-trigger");
     const tooltip = e.target.closest(".tooltip");
 
     if (!trigger && !tooltip) return;
@@ -1927,7 +1950,7 @@ class TooltipManager {
     // Check if moving between trigger and tooltip
     const relatedTarget = e.relatedTarget;
     if (
-      relatedTarget?.closest?.(".info-trigger") === this.activeTooltip ||
+      relatedTarget?.closest?.(".info-trigger, .warning-trigger") === this.activeTooltip ||
       relatedTarget?.closest?.(".tooltip")
     ) {
       return;
@@ -1941,7 +1964,7 @@ class TooltipManager {
 
   handleFocusIn(e) {
     if (!e.target || !e.target.closest) return;
-    const trigger = e.target.closest(".info-trigger");
+    const trigger = e.target.closest(".info-trigger, .warning-trigger");
     if (!trigger) return;
 
     clearTimeout(this.hideTimeout);
@@ -1950,7 +1973,7 @@ class TooltipManager {
 
   handleFocusOut(e) {
     if (!e.target || !e.target.closest) return;
-    const trigger = e.target.closest(".info-trigger");
+    const trigger = e.target.closest(".info-trigger, .warning-trigger");
     if (!trigger) return;
 
     this.hideTimeout = setTimeout(() => {
@@ -1959,7 +1982,7 @@ class TooltipManager {
   }
 
   handleTouchClick(e) {
-    const trigger = e.target.closest(".info-trigger");
+    const trigger = e.target.closest(".info-trigger, .warning-trigger");
 
     if (trigger) {
       e.preventDefault();
@@ -1980,12 +2003,26 @@ class TooltipManager {
   }
 
   show(trigger) {
-    const termKey = trigger.dataset.term;
-    const definition = TERM_DEFINITIONS[termKey];
+    // Check if it's an info trigger or warning trigger
+    const isWarning = trigger.classList.contains("warning-trigger");
+    let definition;
 
-    if (!definition) {
-      console.warn(`No definition found for term: ${termKey}`);
-      return;
+    if (isWarning) {
+      const warningKey = trigger.dataset.warning;
+      definition = WARNING_DEFINITIONS[warningKey];
+      if (!definition) {
+        console.warn(`No definition found for warning: ${warningKey}`);
+        return;
+      }
+      this.tooltipEl.classList.add("tooltip-warning");
+    } else {
+      const termKey = trigger.dataset.term;
+      definition = TERM_DEFINITIONS[termKey];
+      if (!definition) {
+        console.warn(`No definition found for term: ${termKey}`);
+        return;
+      }
+      this.tooltipEl.classList.remove("tooltip-warning");
     }
 
     // Build tooltip content