From e40a12b5c229b309b9a6f4025bb519b892788f72 Mon Sep 17 00:00:00 2001
From: The Doom Lab <buchananlab@gmail.com>
Date: Sun, 14 Dec 2025 18:41:43 -0600
Subject: [PATCH 1/6] form data problem solved!

---
 summary-viewer/Form_Data.html | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/summary-viewer/Form_Data.html b/summary-viewer/Form_Data.html
index 152df4e4..240c3bc0 100644
--- a/summary-viewer/Form_Data.html
+++ b/summary-viewer/Form_Data.html
@@ -47,12 +47,6 @@
     <link rel="stylesheet" href="./_file/style.ef1f7908.css" />
 
     <script type="module">
-      // Load Plot and d3 (if needed elsewhere)
-      const [Plot, d3] = await Promise.all([
-        import("https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17/+esm"),
-        import("https://cdn.jsdelivr.net/npm/d3@7/+esm"),
-      ])
-
       // Embed the JSON data directly here
       const jsonData = __INJECT_JSON__
       document.addEventListener("DOMContentLoaded", () => {

From 7d476dbfc7ebb3466522a1f5264f44541fcf61e3 Mon Sep 17 00:00:00 2001
From: The Doom Lab <buchananlab@gmail.com>
Date: Sun, 14 Dec 2025 18:48:16 -0600
Subject: [PATCH 2/6] hide bars when it's NAN

---
 summary-viewer/Contributors.html | 68 +++++++++++++++++++++++---------
 1 file changed, 50 insertions(+), 18 deletions(-)

diff --git a/summary-viewer/Contributors.html b/summary-viewer/Contributors.html
index 7c91198e..05ae5678 100644
--- a/summary-viewer/Contributors.html
+++ b/summary-viewer/Contributors.html
@@ -1042,6 +1042,10 @@ <h2>${name} Details</h2>
             100
           ).toFixed(1)
 
+          // Hide progress bar if percentage is NaN
+          const showTasksBar = Number.isFinite(Number(tasksPercentComplete))
+          const showFormsBar = Number.isFinite(Number(formsPercentComplete))
+
           // Create the card container
           const card = document.createElement("div")
           card.className = "small-card clickable"
@@ -1059,13 +1063,27 @@ <h2>${name} Details</h2>
 
           // Add progress bars for tasks and forms
           const progressBars = `
-        <div class="progress-container">
-          <div class="progress-bar" style="width: ${tasksPercentComplete}%; background-color: ${themeColors.primary3};" title="Tasks: ${tasksPercentComplete}% Completed"></div>
-        </div>
-        <div class="progress-container">
-          <div class="progress-bar" style="width: ${formsPercentComplete}%; background-color: ${themeColors.primary4};" title="Forms: ${formsPercentComplete}% Submitted"></div>
-        </div>
-      `
+  ${
+    showTasksBar
+      ? `
+    <div class="progress-container">
+      <div class="progress-bar"
+           style="width: ${tasksPercentComplete}%; background-color: ${themeColors.primary3};"
+           title="Tasks: ${tasksPercentComplete}% Completed"></div>
+    </div>`
+      : ``
+  }
+  ${
+    showFormsBar
+      ? `
+    <div class="progress-container">
+      <div class="progress-bar"
+           style="width: ${formsPercentComplete}%; background-color: ${themeColors.primary4};"
+           title="Forms: ${formsPercentComplete}% Submitted"></div>
+    </div>`
+      : ``
+  }
+`
           card.innerHTML += progressBars // Append progress bars to the card
 
           // Append the card to the members section and render the chart
@@ -1163,19 +1181,33 @@ <h2>${name} Details</h2>
           chartDiv.id = containerId
           card.appendChild(chartDiv)
 
+          // NaN guards for progress bars
+          const showTeamTasksBar = Number.isFinite(Number(team.tasksPercentComplete))
+          const showTeamFormsBar = Number.isFinite(Number(team.formsPercentComplete))
+
           // Add progress bars for tasks and forms
           const progressBars = `
-            <div class="progress-container">
-              <div class="progress-bar"
-                  style="width: ${team.tasksPercentComplete}%; background-color: ${themeColors.primary3};"
-                  title="Tasks: ${team.tasksPercentComplete}% Completed"></div>
-            </div>
-            <div class="progress-container">
-              <div class="progress-bar"
-                  style="width: ${team.formsPercentComplete}%; background-color: ${themeColors.primary4};"
-                  title="Forms: ${team.formsPercentComplete}% Submitted"></div>
-            </div>
-          `
+  ${
+    showTeamTasksBar
+      ? `
+    <div class="progress-container">
+      <div class="progress-bar"
+           style="width: ${team.tasksPercentComplete}%; background-color: ${themeColors.primary3};"
+           title="Tasks: ${team.tasksPercentComplete}% Completed"></div>
+    </div>`
+      : ``
+  }
+  ${
+    showTeamFormsBar
+      ? `
+    <div class="progress-container">
+      <div class="progress-bar"
+           style="width: ${team.formsPercentComplete}%; background-color: ${themeColors.primary4};"
+           title="Forms: ${team.formsPercentComplete}% Submitted"></div>
+    </div>`
+      : ``
+  }
+`
           card.innerHTML += progressBars // Append progress bars to the card
 
           // Append the card to the teams section and render the chart

From 9244ddda7b5dea3b56f57e889fa6a609b0885f1f Mon Sep 17 00:00:00 2001
From: The Doom Lab <buchananlab@gmail.com>
Date: Sun, 14 Dec 2025 18:56:08 -0600
Subject: [PATCH 3/6] fixed bug in task completion status

---
 summary-viewer/Tasks.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/summary-viewer/Tasks.html b/summary-viewer/Tasks.html
index e0d298e8..3cc19412 100644
--- a/summary-viewer/Tasks.html
+++ b/summary-viewer/Tasks.html
@@ -241,8 +241,7 @@
           // Convert taskLogStatus to a user-friendly format
           const formattedStatus = task.taskLogStatus === "COMPLETED" ? "Completed" : "Not Completed"
 
-          const formattedTaskStatus =
-            task.taskStatus === "COMPLETED" ? "Completed" : "Not Completed"
+          const formattedTaskStatus = task.status === "COMPLETED" ? "Completed" : "Not Completed"
 
           // Return a new object with updated values
           return {

From 47a9dc6e949e4c3161fc00e759a3d6d64ef33469 Mon Sep 17 00:00:00 2001
From: The Doom Lab <buchananlab@gmail.com>
Date: Sun, 14 Dec 2025 19:54:39 -0600
Subject: [PATCH 4/6] hide role/tasks plot if no roles add notes about missing
 data

---
 summary-viewer/Contributors.html        | 87 +++++++++++++++++++------
 summary-viewer/_file/style.ef1f7908.css |  7 ++
 2 files changed, 75 insertions(+), 19 deletions(-)

diff --git a/summary-viewer/Contributors.html b/summary-viewer/Contributors.html
index 05ae5678..288a22bf 100644
--- a/summary-viewer/Contributors.html
+++ b/summary-viewer/Contributors.html
@@ -870,7 +870,16 @@ <h2>${name} Details</h2>
         }
 
         // Render the donut chart
-        Plotly.newPlot("roles-donut-chart", roleData, roleLayout)
+        const hasAnyRoles = roleValues.some((v) => v > 0)
+
+        if (hasAnyRoles) {
+          Plotly.newPlot("roles-donut-chart", roleData, roleLayout)
+        } else {
+          const rolesEl = document.getElementById("roles-donut-chart")
+          if (rolesEl) {
+            rolesEl.innerHTML = '<p class="empty-note">No roles assigned yet</p>'
+          }
+        }
 
         // Count the total number of rows
         const totalTasks = latestTaskLogs.length
@@ -920,7 +929,12 @@ <h2>${name} Details</h2>
         }
 
         // Render the chart
-        Plotly.newPlot("completed-tasks-chart", dataCompletedTasks, layout)
+        if (totalTasks > 0) {
+          Plotly.newPlot("completed-tasks-chart", dataCompletedTasks, layout)
+        } else {
+          const el = document.getElementById("completed-tasks-chart")
+          if (el) el.innerHTML = '<p class="empty-note">No tasks yet</p>'
+        }
 
         // completed form chart
         // Count the total number of form tasks
@@ -972,7 +986,12 @@ <h2>${name} Details</h2>
         }
 
         // Render the chart
-        Plotly.newPlot("completed-forms-chart", dataCompletedForms, layoutForm)
+        if (totalForms > 0) {
+          Plotly.newPlot("completed-forms-chart", dataCompletedForms, layoutForm)
+        } else {
+          const el = document.getElementById("completed-forms-chart")
+          if (el) el.innerHTML = '<p class="empty-note">No forms submitted yet</p>'
+        }
 
         //get roles individuals
         const rolesByIndividual = projectMembersDataFrame.map((individual) => {
@@ -1055,11 +1074,20 @@ <h2>${name} Details</h2>
           title.textContent = member.name
           card.appendChild(title)
 
-          // Create a container for the donut chart
-          const containerId = `member-role-chart-${member.projectMemberId}`
-          const chartDiv = document.createElement("div")
-          chartDiv.id = containerId
-          card.appendChild(chartDiv)
+          // Create a container for the donut chart or an empty note
+          const hasRoles = member.roles.length > 0
+
+          let chartDiv = null
+          if (hasRoles) {
+            chartDiv = document.createElement("div")
+            chartDiv.id = `member-role-chart-${member.projectMemberId}`
+            card.appendChild(chartDiv)
+          } else {
+            const note = document.createElement("p")
+            note.className = "empty-note"
+            note.textContent = "No roles assigned yet"
+            card.appendChild(note)
+          }
 
           // Add progress bars for tasks and forms
           const progressBars = `
@@ -1086,11 +1114,17 @@ <h2>${name} Details</h2>
 `
           card.innerHTML += progressBars // Append progress bars to the card
 
-          // Append the card to the members section and render the chart
+          // Append the card to the members section and render the chart if appropriate
           const memberRoleChartContainer = document.getElementById("members-section")
           if (memberRoleChartContainer) {
             memberRoleChartContainer.appendChild(card)
-            createDonutChart(data, containerId, `${member.name}`)
+            if (hasRoles) {
+              createDonutChart(
+                data,
+                `member-role-chart-${member.projectMemberId}`,
+                `${member.name}`
+              )
+            }
           } else {
             console.error("Main container for member charts not found!")
           }
@@ -1175,11 +1209,20 @@ <h2>${name} Details</h2>
           title.textContent = team.teamName
           card.appendChild(title)
 
-          // Create a container for the donut chart
-          const containerId = `team-role-chart-${team.teamId}`
-          const chartDiv = document.createElement("div")
-          chartDiv.id = containerId
-          card.appendChild(chartDiv)
+          // Create a container for the donut chart or an empty note
+          const hasRoles = team.roles.length > 0
+
+          let chartDiv = null
+          if (hasRoles) {
+            chartDiv = document.createElement("div")
+            chartDiv.id = `team-role-chart-${team.teamId}`
+            card.appendChild(chartDiv)
+          } else {
+            const note = document.createElement("p")
+            note.className = "empty-note"
+            note.textContent = "No roles assigned yet"
+            card.appendChild(note)
+          }
 
           // NaN guards for progress bars
           const showTeamTasksBar = Number.isFinite(Number(team.tasksPercentComplete))
@@ -1210,11 +1253,13 @@ <h2>${name} Details</h2>
 `
           card.innerHTML += progressBars // Append progress bars to the card
 
-          // Append the card to the teams section and render the chart
+          // Append the card to the teams section and render the chart if appropriate
           const teamRoleChartContainer = document.getElementById("teams-section")
           if (teamRoleChartContainer) {
             teamRoleChartContainer.appendChild(card)
-            createDonutChart(data, containerId, `${team.teamName}`)
+            if (hasRoles) {
+              createDonutChart(data, `team-role-chart-${team.teamId}`, `${team.teamName}`)
+            }
           } else {
             console.error("Main container for team charts not found!")
           }
@@ -1657,7 +1702,9 @@ <h3>Forms Submitted</h3>
             </p>
             <div id="members-section"></div>
             <div id="member-details-section" class="details-container">
-              <p>Select a card to view details about the contributor or team.</p>
+              ${numberOfUniqueMembers > 0 ? '
+              <p>Select a card to view details about the contributor.</p>
+              ' : ''}
             </div>
           </div>
         </div>
@@ -1675,7 +1722,9 @@ <h3>Forms Submitted</h3>
             </p>
             <div id="teams-section"></div>
             <div id="team-details-section" class="details-container">
-              <p>Select a card to view details about the contributor or team.</p>
+              ${numberOfUniqueTeams > 0 ? '
+              <p>Select a card to view details about the team.</p>
+              ' : ''}
             </div>
           </div>
         </div>
diff --git a/summary-viewer/_file/style.ef1f7908.css b/summary-viewer/_file/style.ef1f7908.css
index 7d0a46a8..76c0100e 100644
--- a/summary-viewer/_file/style.ef1f7908.css
+++ b/summary-viewer/_file/style.ef1f7908.css
@@ -402,3 +402,10 @@ svg[class^="plot-"][class$="-ramp"] text {
 .ch-domain-text {
   font-size: 14px !important;
 }
+
+.empty-note {
+  font-size: 1rem !important;
+  opacity: 0.7;
+  margin-top: 0.25rem;
+  text-align: center;
+}

From 1e49823ce3fc3d4203590a596f6b5cc4b0624082 Mon Sep 17 00:00:00 2001
From: The Doom Lab <buchananlab@gmail.com>
Date: Sun, 14 Dec 2025 20:44:03 -0600
Subject: [PATCH 5/6] update internal viewer to not show things if they are no
 tasks/forms/etc.

---
 summary-viewer/Contributors.html        | 18 ++++++------
 summary-viewer/Events.html              | 10 +++++--
 summary-viewer/Tasks.html               | 37 ++++++++++++++++++-------
 summary-viewer/_file/style.ef1f7908.css |  1 +
 4 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/summary-viewer/Contributors.html b/summary-viewer/Contributors.html
index 288a22bf..9f97c346 100644
--- a/summary-viewer/Contributors.html
+++ b/summary-viewer/Contributors.html
@@ -877,7 +877,7 @@ <h2>${name} Details</h2>
         } else {
           const rolesEl = document.getElementById("roles-donut-chart")
           if (rolesEl) {
-            rolesEl.innerHTML = '<p class="empty-note">No roles assigned yet</p>'
+            rolesEl.innerHTML = '<p class="empty-note">No roles</p>'
           }
         }
 
@@ -990,7 +990,7 @@ <h2>${name} Details</h2>
           Plotly.newPlot("completed-forms-chart", dataCompletedForms, layoutForm)
         } else {
           const el = document.getElementById("completed-forms-chart")
-          if (el) el.innerHTML = '<p class="empty-note">No forms submitted yet</p>'
+          if (el) el.innerHTML = '<p class="empty-note">No forms</p>'
         }
 
         //get roles individuals
@@ -1064,6 +1064,8 @@ <h2>${name} Details</h2>
           // Hide progress bar if percentage is NaN
           const showTasksBar = Number.isFinite(Number(tasksPercentComplete))
           const showFormsBar = Number.isFinite(Number(formsPercentComplete))
+          const showNoTasksNote = !showTasksBar
+          const showNoFormsNote = !showFormsBar
 
           // Create the card container
           const card = document.createElement("div")
@@ -1085,7 +1087,7 @@ <h2>${name} Details</h2>
           } else {
             const note = document.createElement("p")
             note.className = "empty-note"
-            note.textContent = "No roles assigned yet"
+            note.textContent = "No roles"
             card.appendChild(note)
           }
 
@@ -1099,7 +1101,7 @@ <h2>${name} Details</h2>
            style="width: ${tasksPercentComplete}%; background-color: ${themeColors.primary3};"
            title="Tasks: ${tasksPercentComplete}% Completed"></div>
     </div>`
-      : ``
+      : `<p class="empty-note">No tasks</p>`
   }
   ${
     showFormsBar
@@ -1109,7 +1111,7 @@ <h2>${name} Details</h2>
            style="width: ${formsPercentComplete}%; background-color: ${themeColors.primary4};"
            title="Forms: ${formsPercentComplete}% Submitted"></div>
     </div>`
-      : ``
+      : `<p class="empty-note">No forms</p>`
   }
 `
           card.innerHTML += progressBars // Append progress bars to the card
@@ -1220,7 +1222,7 @@ <h2>${name} Details</h2>
           } else {
             const note = document.createElement("p")
             note.className = "empty-note"
-            note.textContent = "No roles assigned yet"
+            note.textContent = "No roles"
             card.appendChild(note)
           }
 
@@ -1238,7 +1240,7 @@ <h2>${name} Details</h2>
            style="width: ${team.tasksPercentComplete}%; background-color: ${themeColors.primary3};"
            title="Tasks: ${team.tasksPercentComplete}% Completed"></div>
     </div>`
-      : ``
+      : `<p class="empty-note">No tasks</p>`
   }
   ${
     showTeamFormsBar
@@ -1248,7 +1250,7 @@ <h2>${name} Details</h2>
            style="width: ${team.formsPercentComplete}%; background-color: ${themeColors.primary4};"
            title="Forms: ${team.formsPercentComplete}% Submitted"></div>
     </div>`
-      : ``
+      : `<p class="empty-note">No forms</p>`
   }
 `
           card.innerHTML += progressBars // Append progress bars to the card
diff --git a/summary-viewer/Events.html b/summary-viewer/Events.html
index 916a1fa4..0d6e0b1c 100644
--- a/summary-viewer/Events.html
+++ b/summary-viewer/Events.html
@@ -480,6 +480,7 @@ <h3>Select Time Interval and Color Scheme</h3>
         const tickvals = []
         const ticktext = []
         const allChartData = []
+        let rowCount = 0
 
         milestoneDataRaw.forEach((m) => {
           const milestoneId = String(m.id)
@@ -489,6 +490,7 @@ <h3>Select Time Interval and Color Scheme</h3>
           )
 
           milestoneTasks.forEach((t) => {
+            rowCount += 1
             const yLabel = `task-${t.id}`
             tickvals.push(yLabel)
             ticktext.push("↳ " + t.name)
@@ -509,6 +511,7 @@ <h3>Select Time Interval and Color Scheme</h3>
             })
           })
 
+          rowCount += 1
           tickvals.push(milestoneId)
           ticktext.push(m.name)
 
@@ -543,8 +546,9 @@ <h3>Select Time Interval and Color Scheme</h3>
             type: "category",
             automargin: true,
             tickfont: { size: 14 },
+            tickpadding: 8,
           },
-          height: milestoneDataRaw.length * 40 + 100,
+          height: Math.min(rowCount * 40 + 120, 2000),
           showlegend: false,
           margin: { l: 150, r: 30, t: 50, b: 40 },
         }
@@ -740,7 +744,9 @@ <h1>Milestone Gantt Chart</h1>
             <i class="expand-icon">+</i>
           </label>
           <div class="collapse-content">
-            <div id="milestone-gantt-container"></div>
+            <div class="gantt-scroll-container">
+              <div id="milestone-gantt-container"></div>
+            </div>
           </div>
         </div>
         <div class="custom-collapse">
diff --git a/summary-viewer/Tasks.html b/summary-viewer/Tasks.html
index 3cc19412..ffc2e6c3 100644
--- a/summary-viewer/Tasks.html
+++ b/summary-viewer/Tasks.html
@@ -315,8 +315,13 @@
           paper_bgcolor: "rgba(0, 0, 0, 0)", // Transparent chart area background
         }
 
-        // Render the chart
-        Plotly.newPlot("completed-tasks-chart", dataCompletedTasks, layoutCompletedTasks)
+        // Render the chart (only if there are tasks)
+        if (totalTasks > 0) {
+          Plotly.newPlot("completed-tasks-chart", dataCompletedTasks, layoutCompletedTasks)
+        } else {
+          const el = document.getElementById("completed-tasks-chart")
+          if (el) el.innerHTML = '<p class="empty-note">No tasks created yet</p>'
+        }
 
         const latestTaskLogs = Array.from(
           tasksDataFrame
@@ -384,8 +389,13 @@
           paper_bgcolor: "rgba(0, 0, 0, 0)", // Transparent chart area background
         }
 
-        // Render the chart
-        Plotly.newPlot("completed-tasklogs-chart", dataCompletedTaskLogs, layout)
+        // Render the chart (only if there are task logs)
+        if (totalTaskLogs > 0) {
+          Plotly.newPlot("completed-tasklogs-chart", dataCompletedTaskLogs, layout)
+        } else {
+          const el = document.getElementById("completed-tasklogs-chart")
+          if (el) el.innerHTML = '<p class="empty-note">No task logs yet</p>'
+        }
 
         // Step 1: Group logs by taskId and assignedToId
         const taskLogMap = tasksDataFrame.reduce((map, log) => {
@@ -430,11 +440,18 @@
         })
 
         // Step 3: Calculate average completion time
-        const averageCompletionTime =
-          completedCount > 0
-            ? `${(totalCompletionTime / completedCount).toFixed(2)} Days`
-            : "0 days"
-        document.getElementById("stat-number-3").textContent = averageCompletionTime
+        const statNumEl = document.getElementById("stat-number-3")
+        const statIconEl = document.getElementById("stat-icon-3")
+
+        if (completedCount > 0) {
+          const averageCompletionTime = `${(totalCompletionTime / completedCount).toFixed(2)} Days`
+          if (statNumEl) statNumEl.textContent = averageCompletionTime
+          if (statIconEl) statIconEl.style.display = ""
+        } else {
+          if (statNumEl)
+            statNumEl.innerHTML = '<span class="empty-note">No completed tasks yet</span>'
+          if (statIconEl) statIconEl.style.display = "none"
+        }
 
         function createTaskDropdownAndDataTable(containerId, dataTableContainerId) {
           // Step 1: Get unique task names
@@ -682,7 +699,7 @@ <h4>Task Logs Completed</h4>
             <div class="stat-card">
               <h4>Average Completion Time</h4>
               <p id="stat-number-3">Days</p>
-              <i class="fas fa-clock" id="stat-number-3" aria-hidden="true"></i>
+              <i class="fas fa-clock" id="stat-icon-3" aria-hidden="true"></i>
             </div>
           </div>
         </div>
diff --git a/summary-viewer/_file/style.ef1f7908.css b/summary-viewer/_file/style.ef1f7908.css
index 76c0100e..99360df3 100644
--- a/summary-viewer/_file/style.ef1f7908.css
+++ b/summary-viewer/_file/style.ef1f7908.css
@@ -407,5 +407,6 @@ svg[class^="plot-"][class$="-ramp"] text {
   font-size: 1rem !important;
   opacity: 0.7;
   margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
   text-align: center;
 }

From d3516f2b23e40d379a28d456fd9036f6a90e9721 Mon Sep 17 00:00:00 2001
From: The Doom Lab <buchananlab@gmail.com>
Date: Sun, 14 Dec 2025 21:08:43 -0600
Subject: [PATCH 6/6] fix visual issue on contributors showing html code

---
 summary-viewer/Contributors.html | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/summary-viewer/Contributors.html b/summary-viewer/Contributors.html
index 9f97c346..a9bf169d 100644
--- a/summary-viewer/Contributors.html
+++ b/summary-viewer/Contributors.html
@@ -308,6 +308,15 @@
         // show details cards
         function showDetails(type, id, name, detailsSectionId) {
           const detailsSection = document.getElementById(detailsSectionId)
+          if (detailsSectionId === "member-details-section") {
+            const p = document.getElementById("member-placeholder")
+            if (p) p.style.display = "none"
+          }
+
+          if (detailsSectionId === "team-details-section") {
+            const p = document.getElementById("team-placeholder")
+            if (p) p.style.display = "none"
+          }
 
           if (!detailsSection) {
             console.error(`Details section with ID "${detailsSectionId}" not found.`)
@@ -780,10 +789,18 @@ <h2>${name} Details</h2>
         // Count the unique members
         const numberOfUniqueMembers = uniqueMemberNames.size
         document.getElementById("stat-number-1").textContent = numberOfUniqueMembers
+        const memberPlaceholder = document.getElementById("member-placeholder")
+        if (memberPlaceholder) {
+          memberPlaceholder.style.display = numberOfUniqueMembers > 0 ? "block" : "none"
+        }
 
         const uniqueTeamNames = new Set(teamsDataArray.map((team) => team.name))
         const numberOfUniqueTeams = teamsWithTaskData.size
         document.getElementById("stat-number-2").textContent = numberOfUniqueTeams
+        const teamPlaceholder = document.getElementById("team-placeholder")
+        if (teamPlaceholder) {
+          teamPlaceholder.style.display = numberOfUniqueTeams > 0 ? "block" : "none"
+        }
 
         // Extract all roles from project members
         const memberRoles = jsonData.projectMembers.flatMap((member) => member.roles)
@@ -1704,9 +1721,7 @@ <h3>Forms Submitted</h3>
             </p>
             <div id="members-section"></div>
             <div id="member-details-section" class="details-container">
-              ${numberOfUniqueMembers > 0 ? '
-              <p>Select a card to view details about the contributor.</p>
-              ' : ''}
+              <p id="member-placeholder">Select a card to view details about the contributor.</p>
             </div>
           </div>
         </div>
@@ -1724,9 +1739,7 @@ <h3>Forms Submitted</h3>
             </p>
             <div id="teams-section"></div>
             <div id="team-details-section" class="details-container">
-              ${numberOfUniqueTeams > 0 ? '
-              <p>Select a card to view details about the team.</p>
-              ' : ''}
+              <p id="team-placeholder">Select a card to view details about the team.</p>
             </div>
           </div>
         </div>