💡 Clinical Pearls

High-yield bedside EVD teaching points

The most important things to know about EVDs — condensed, testable facts for a fast pre-shift or pre-exam review. Click a category to expand it.

clinicalPearls = {
  const { initializeApp, getApps, getApp } = await import("https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js");
  const { getFirestore, collection, onSnapshot } = await import("https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore.js");

  const firebaseConfig = {
    apiKey: "AIzaSyD1FLnIrd86qOsFPLi5y1q_EIU0lhL5gxc",
    authDomain: "evdtoolkit.firebaseapp.com",
    projectId: "evdtoolkit",
    storageBucket: "evdtoolkit.firebasestorage.app",
    messagingSenderId: "1002374431151",
    appId: "1:1002374431151:web:fe3724bb1f39eb4744af5a"
  };

  const app = getApps().length ? getApp() : initializeApp(firebaseConfig);
  const db = getFirestore(app);

  return Generators.observe(notify => {
    const unsubscribe = onSnapshot(collection(db, "ClinicalPearls"), snapshot => {
      notify(snapshot.docs.map(d => d.data()));
    });
    return unsubscribe;
  });
}

function categoryColor(name) {
  const palette = ["#007AFF", "#34C759", "#FF9500", "#AF52DE", "#FF3B30", "#30B0C7", "#FF2D55", "#8E8E93"];
  let hash = 0;
  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
  return palette[Math.abs(hash) % palette.length];
}

groupedPearls = {
  const groups = new Map();
  clinicalPearls.forEach(p => {
    const key = p.category ?? "Uncategorized";
    if (!groups.has(key)) groups.set(key, []);
    groups.get(key).push(p);
  });
  return [...groups.entries()].sort((a, b) => a[0].localeCompare(b[0]));
}

function pearlCitation(p) {
  if (!p.citationPmid) return "";
  const firstAuthor = (p.citationAuthors ?? "").split(",")[0].trim();
  const authorLabel = firstAuthor ? `${firstAuthor}, et al.` : "Source";
  const journal = p.citationJournalInfo ?? "";
  return `
    <a class="fs-source" style="text-decoration:none;" href="https://pubmed.ncbi.nlm.nih.gov/${p.citationPmid}/" target="_blank" rel="noopener">
      📎 ${authorLabel} ${journal} [PMID: ${p.citationPmid}]
    </a>
  `;
}

groupedPearls.length === 0
  ? html`<div class="fs-empty">No clinical pearls added yet — check back soon.</div>`
  : html`<div>
    ${groupedPearls.map(([category, items]) => {
      const color = categoryColor(category);
      return `
        <details class="fs-accordion">
          <summary class="fs-accordion-summary" style="background:${color};">
            <span class="fs-accordion-name">${category}</span>
            <span class="fs-accordion-count">${items.length}</span>
          </summary>
          <div class="fs-accordion-body">
            <ul style="margin:14px 0 6px;padding-left:20px;list-style:none;">
              ${items.map(p => `
                <li style="margin-bottom:14px;">
                  <div>${p.pearl ?? ""}</div>
                  ${pearlCitation(p)}
                </li>
              `).join("")}
            </ul>
          </div>
        </details>
      `;
    }).join("")}
  </div>`