Projects

Research projects of the IB2 group, and the software tools we maintain.

projects = FileAttachment("_generated/projects.json").json()

allCategories = Array.from(
  new Set(projects.flatMap(p => p.categories ?? []))
).sort()

viewof activeCategories = Inputs.checkbox(allCategories, {label: "Filter by category"})

filteredProjects = activeCategories.length === 0
  ? projects
  : projects.filter(p => (p.categories ?? []).some(c => activeCategories.includes(c)))

research = filteredProjects.filter(p => p.kind === "research")

tools = filteredProjects.filter(p => p.kind === "tool")

Research projects

html`<div class="project-list">${research.map(projectCard)}</div>`

Software & tools

html`<div class="tool-list">${tools.map(toolCard)}</div>`

function renderLinks(links) {
  const entries = Object.entries(links);
  return html`<p class="card-text">${entries.map(([k, v], i) => html`${i > 0 ? html`<span class="mx-1">&middot;</span>` : ""}<a href="${v}">${k}</a>`)}</p>`;
}

function projectCard(p) {
  const details = p.bodyHtml
    ? html`<details><summary>Read more</summary>${html([p.bodyHtml])}</details>`
    : "";
  return html`<div class="card project-card mb-4">
    ${p.image ? html`<img src="${p.image}" class="card-img-top project-card-photo">` : ""}
    <div class="card-body">
      <h4 class="card-title">${p.title}</h4>
      <p class="card-text text-muted">
        ${p.pi ? `PI: ${p.pi}` : ""}${p.funding ? ` · ${p.funding}` : ""}${p.partners ? ` · Partners: ${p.partners.join(", ")}` : ""}
      </p>
      <p class="card-text">${p.summary}</p>
      ${p.links ? renderLinks(p.links) : ""}
      ${details}
    </div>
  </div>`;
}

function toolCard(p) {
  return html`<div class="card tool-card mb-3">
    <div class="card-body">
      <h5 class="card-title">${p.title}</h5>
      <p class="card-text">${p.summary}</p>
      ${p.links ? renderLinks(p.links) : ""}
    </div>
  </div>`;
}