@forwardimpact/pathway 0.25.15 → 0.25.20

package/src/components/progression-table.js

@@ -21,6 +21,213 @@ import { formatLevel } from "../lib/render.js";
 import { createLevelCell, createEmptyLevelCell } from "./detail.js";
 import { createBadge } from "./card.js";
 
+/**
+ * Create a row for a gained (new) item
+ */
+function createGainedRow(item, isSkill, maxLevels) {
+  const nameCell = td(
+    {},
+    a({ href: `#/${isSkill ? "skill" : "behaviour"}/${item.id}` }, item.name),
+    span({ className: "gained-badge" }, "NEW"),
+  );
+  const changeCell = td(
+    { className: "change-cell change-gained" },
+    span({ className: "change-indicator" }, "+"),
+  );
+  if (isSkill) {
+    return tr(
+      { className: "change-gained" },
+      nameCell,
+      td({}, createBadge(item.capability, item.capability)),
+      td({}, createBadge(formatLevel(item.type), item.type)),
+      createEmptyLevelCell(),
+      createLevelCell(item.targetIndex, maxLevels, item.targetLevel),
+      changeCell,
+    );
+  }
+  return tr(
+    { className: "change-gained" },
+    nameCell,
+    createEmptyLevelCell(),
+    createLevelCell(item.targetIndex, maxLevels, item.targetLevel),
+    changeCell,
+  );
+}
+
+/**
+ * Create a row for a lost (removed) item
+ */
+function createLostRow(item, isSkill, maxLevels) {
+  const nameCell = td(
+    {},
+    a({ href: `#/${isSkill ? "skill" : "behaviour"}/${item.id}` }, item.name),
+    span({ className: "lost-badge" }, "REMOVED"),
+  );
+  const changeCell = td(
+    { className: "change-cell change-lost" },
+    span({ className: "change-indicator" }, "−"),
+  );
+  if (isSkill) {
+    return tr(
+      { className: "change-lost" },
+      nameCell,
+      td({}, createBadge(item.capability, item.capability)),
+      td({}, createBadge(formatLevel(item.type), item.type)),
+      createLevelCell(item.currentIndex, maxLevels, item.currentLevel),
+      createEmptyLevelCell(),
+      changeCell,
+    );
+  }
+  return tr(
+    { className: "change-lost" },
+    nameCell,
+    createLevelCell(item.currentIndex, maxLevels, item.currentLevel),
+    createEmptyLevelCell(),
+    changeCell,
+  );
+}
+
+/**
+ * Create a row for a normal change item
+ */
+function createChangeRow(item, isSkill, maxLevels) {
+  const changeClass =
+    item.change > 0
+      ? "change-up"
+      : item.change < 0
+        ? "change-down"
+        : "change-same";
+  const changeIcon = item.change > 0 ? "↑" : item.change < 0 ? "↓" : "—";
+  const changeText =
+    item.change !== 0 ? `${changeIcon} ${Math.abs(item.change)}` : "—";
+
+  if (isSkill) {
+    return tr(
+      { className: changeClass },
+      td({}, a({ href: `#/skill/${item.id}` }, item.name)),
+      td({}, createBadge(item.capability, item.capability)),
+      td({}, createBadge(formatLevel(item.type), item.type)),
+      createLevelCell(item.currentIndex, maxLevels, item.currentLevel),
+      createLevelCell(item.targetIndex, maxLevels, item.targetLevel),
+      td(
+        { className: `change-cell ${changeClass}` },
+        span({ className: "change-indicator" }, changeText),
+      ),
+    );
+  }
+  return tr(
+    { className: changeClass },
+    td({}, a({ href: `#/behaviour/${item.id}` }, item.name)),
+    createLevelCell(item.currentIndex, maxLevels, item.currentLevel),
+    createLevelCell(item.targetIndex, maxLevels, item.targetLevel),
+    td(
+      { className: `change-cell ${changeClass}` },
+      span({ className: "change-indicator" }, changeText),
+    ),
+  );
+}
+
+/**
+ * Pluralize a type name
+ * @param {string} type
+ * @param {number} count
+ * @returns {string}
+ */
+function pluralize(type, count) {
+  return count > 1 ? `${type}s` : type;
+}
+
+/**
+ * Create a progression group with header and table
+ * @param {Object} params
+ * @param {Array} params.items
+ * @param {string} params.icon
+ * @param {string} params.label
+ * @param {string} [params.headerClass]
+ * @param {string} params.tableClass
+ * @param {HTMLElement} params.headers
+ * @param {Function} params.createRow
+ * @returns {HTMLElement}
+ */
+function createProgressionGroup({
+  items,
+  icon,
+  label,
+  headerClass,
+  tableClass,
+  headers,
+  createRow,
+}) {
+  return div(
+    { className: "progression-group" },
+    div(
+      { className: `progression-group-header ${headerClass || ""}`.trim() },
+      span({ className: "group-icon" }, icon),
+      span({}, label),
+    ),
+    div(
+      { className: "table-container" },
+      table(
+        { className: tableClass },
+        thead({}, headers),
+        tbody({}, ...items.map(createRow)),
+      ),
+    ),
+  );
+}
+
+/**
+ * Create a collapsible group for unchanged items
+ * @param {Object} params
+ * @param {Array} params.items
+ * @param {string} params.type
+ * @param {boolean} params.isSkill
+ * @param {string} params.tableClass
+ * @param {Function} params.createRow
+ * @returns {HTMLElement}
+ */
+function createCollapsibleGroup({
+  items,
+  type,
+  isSkill,
+  tableClass,
+  createRow,
+}) {
+  const noChangeHeaders = tr(
+    {},
+    th({}, isSkill ? "Skill" : "Behaviour"),
+    ...(isSkill ? [th({}, "Capability"), th({}, "Type")] : []),
+    th({}, "Current"),
+    th({}, "Target"),
+    th({}, "Change"),
+  );
+
+  const detailsId = `no-changes-${type}-${Date.now()}`;
+  return div(
+    { className: "progression-group no-change-group" },
+    createCollapsibleHeader(
+      detailsId,
+      `${items.length} ${pluralize(type, items.length)} unchanged`,
+      "✓",
+    ),
+    div(
+      {
+        className: "collapsible-content",
+        id: detailsId,
+        style: "display: none",
+      },
+      div(
+        { className: "table-container" },
+        table(
+          { className: tableClass },
+          thead({}, noChangeHeaders),
+          tbody({}, ...items.map(createRow)),
+        ),
+      ),
+    ),
+  );
+}
+
 /**
  * Create a progression table showing changes
  * @param {SkillChangeItem[]|BehaviourChangeItem[]} changes - Array of change objects
@@ -44,116 +251,13 @@ export function createProgressionTable(changes, type = "skill") {
   const noChanges = changes.filter((c) => c.change === 0);
 
   const createRow = (item) => {
-    // Handle gained skills (new in target role)
     if (item.isGained) {
-      if (isSkill) {
-        return tr(
-          { className: "change-gained" },
-          td(
-            {},
-            a({ href: `#/skill/${item.id}` }, item.name),
-            span({ className: "gained-badge" }, "NEW"),
-          ),
-          td({}, createBadge(item.capability, item.capability)),
-          td({}, createBadge(formatLevel(item.type), item.type)),
-          createEmptyLevelCell(),
-          createLevelCell(item.targetIndex, maxLevels, item.targetLevel),
-          td(
-            { className: "change-cell change-gained" },
-            span({ className: "change-indicator" }, "+"),
-          ),
-        );
-      } else {
-        return tr(
-          { className: "change-gained" },
-          td(
-            {},
-            a({ href: `#/behaviour/${item.id}` }, item.name),
-            span({ className: "gained-badge" }, "NEW"),
-          ),
-          createEmptyLevelCell(),
-          createLevelCell(item.targetIndex, maxLevels, item.targetLevel),
-          td(
-            { className: "change-cell change-gained" },
-            span({ className: "change-indicator" }, "+"),
-          ),
-        );
-      }
+      return createGainedRow(item, isSkill, maxLevels);
     }
-
-    // Handle lost skills (removed in target role)
     if (item.isLost) {
-      if (isSkill) {
-        return tr(
-          { className: "change-lost" },
-          td(
-            {},
-            a({ href: `#/skill/${item.id}` }, item.name),
-            span({ className: "lost-badge" }, "REMOVED"),
-          ),
-          td({}, createBadge(item.capability, item.capability)),
-          td({}, createBadge(formatLevel(item.type), item.type)),
-          createLevelCell(item.currentIndex, maxLevels, item.currentLevel),
-          createEmptyLevelCell(),
-          td(
-            { className: "change-cell change-lost" },
-            span({ className: "change-indicator" }, "−"),
-          ),
-        );
-      } else {
-        return tr(
-          { className: "change-lost" },
-          td(
-            {},
-            a({ href: `#/behaviour/${item.id}` }, item.name),
-            span({ className: "lost-badge" }, "REMOVED"),
-          ),
-          createLevelCell(item.currentIndex, maxLevels, item.currentLevel),
-          createEmptyLevelCell(),
-          td(
-            { className: "change-cell change-lost" },
-            span({ className: "change-indicator" }, "−"),
-          ),
-        );
-      }
-    }
-
-    // Normal change (both current and target exist)
-    const changeClass =
-      item.change > 0
-        ? "change-up"
-        : item.change < 0
-          ? "change-down"
-          : "change-same";
-    const changeIcon = item.change > 0 ? "↑" : item.change < 0 ? "↓" : "—";
-    const changeText =
-      item.change !== 0 ? `${changeIcon} ${Math.abs(item.change)}` : "—";
-
-    if (isSkill) {
-      return tr(
-        { className: changeClass },
-        td({}, a({ href: `#/skill/${item.id}` }, item.name)),
-        td({}, createBadge(item.capability, item.capability)),
-        td({}, createBadge(formatLevel(item.type), item.type)),
-        createLevelCell(item.currentIndex, maxLevels, item.currentLevel),
-        createLevelCell(item.targetIndex, maxLevels, item.targetLevel),
-        td(
-          { className: `change-cell ${changeClass}` },
-          span({ className: "change-indicator" }, changeText),
-        ),
-      );
-    } else {
-      return tr(
-        { className: changeClass },
-        td({}, a({ href: `#/behaviour/${item.id}` }, item.name)),
-        createLevelCell(item.currentIndex, maxLevels, item.currentLevel),
-        createLevelCell(item.targetIndex, maxLevels, item.targetLevel),
-        td(
-          { className: `change-cell ${changeClass}` },
-          span({ className: "change-indicator" }, changeText),
-        ),
-      );
+      return createLostRow(item, isSkill, maxLevels);
     }
+    return createChangeRow(item, isSkill, maxLevels);
   };
 
   const skillHeaders = tr(
@@ -165,127 +269,59 @@ export function createProgressionTable(changes, type = "skill") {
     th({}, "Change"),
   );
 
+  const tableClass = `table progression-table ${isSkill ? "skill-table" : "behaviour-table"}`;
   const content = [];
 
-  // Show new skills first (in target role but not current)
   if (gained.length > 0) {
     content.push(
-      div(
-        { className: "progression-group" },
-        div(
-          { className: "progression-group-header gained-header" },
-          span({ className: "group-icon" }, "➕"),
-          span(
-            {},
-            `${gained.length} new ${type}${gained.length > 1 ? "s" : ""}`,
-          ),
-        ),
-        div(
-          { className: "table-container" },
-          table(
-            {
-              className: `table progression-table ${isSkill ? "skill-table" : "behaviour-table"}`,
-            },
-            thead({}, skillHeaders),
-            tbody({}, ...gained.map(createRow)),
-          ),
-        ),
-      ),
+      createProgressionGroup({
+        items: gained,
+        icon: "➕",
+        label: `${gained.length} new ${pluralize(type, gained.length)}`,
+        headerClass: "gained-header",
+        tableClass,
+        headers: skillHeaders,
+        createRow,
+      }),
     );
   }
 
-  // Show level changes
   if (changesRequired.length > 0) {
     content.push(
-      div(
-        { className: "progression-group" },
-        div(
-          { className: "progression-group-header" },
-          span({ className: "group-icon" }, "📈"),
-          span(
-            {},
-            `${changesRequired.length} ${type}${changesRequired.length > 1 ? "s" : ""} need growth`,
-          ),
-        ),
-        div(
-          { className: "table-container" },
-          table(
-            {
-              className: `table progression-table ${isSkill ? "skill-table" : "behaviour-table"}`,
-            },
-            thead({}, skillHeaders),
-            tbody({}, ...changesRequired.map(createRow)),
-          ),
-        ),
-      ),
+      createProgressionGroup({
+        items: changesRequired,
+        icon: "📈",
+        label: `${changesRequired.length} ${pluralize(type, changesRequired.length)} need growth`,
+        tableClass,
+        headers: skillHeaders,
+        createRow,
+      }),
     );
   }
 
-  // Show removed skills (in current role but not target)
   if (lost.length > 0) {
     content.push(
-      div(
-        { className: "progression-group" },
-        div(
-          { className: "progression-group-header lost-header" },
-          span({ className: "group-icon" }, "➖"),
-          span(
-            {},
-            `${lost.length} ${type}${lost.length > 1 ? "s" : ""} removed`,
-          ),
-        ),
-        div(
-          { className: "table-container" },
-          table(
-            {
-              className: `table progression-table ${isSkill ? "skill-table" : "behaviour-table"}`,
-            },
-            thead({}, skillHeaders),
-            tbody({}, ...lost.map(createRow)),
-          ),
-        ),
-      ),
+      createProgressionGroup({
+        items: lost,
+        icon: "➖",
+        label: `${lost.length} ${pluralize(type, lost.length)} removed`,
+        headerClass: "lost-header",
+        tableClass,
+        headers: skillHeaders,
+        createRow,
+      }),
     );
   }
 
-  // Show no changes (collapsed by default)
   if (noChanges.length > 0) {
-    const noChangeHeaders = tr(
-      {},
-      th({}, isSkill ? "Skill" : "Behaviour"),
-      ...(isSkill ? [th({}, "Capability"), th({}, "Type")] : []),
-      th({}, "Current"),
-      th({}, "Target"),
-      th({}, "Change"),
-    );
-
-    const detailsId = `no-changes-${type}-${Date.now()}`;
     content.push(
-      div(
-        { className: "progression-group no-change-group" },
-        createCollapsibleHeader(
-          detailsId,
-          `${noChanges.length} ${type}${noChanges.length > 1 ? "s" : ""} unchanged`,
-          "✓",
-        ),
-        div(
-          {
-            className: "collapsible-content",
-            id: detailsId,
-            style: "display: none",
-          },
-          div(
-            { className: "table-container" },
-            table(
-              {
-                className: `table progression-table ${isSkill ? "skill-table" : "behaviour-table"}`,
-              },
-              thead({}, noChangeHeaders),
-              tbody({}, ...noChanges.map(createRow)),
-            ),
-          ),
-        ),
-      ),
+      createCollapsibleGroup({
+        items: noChanges,
+        type,
+        isSkill,
+        tableClass,
+        createRow,
+      }),
     );
   }
 

package/src/formatters/interview/markdown.js

@@ -5,6 +5,91 @@
 import { formatLevel } from "../../lib/render.js";
 import { getConceptEmoji } from "@forwardimpact/map/levels";
 
+/**
+ * Append follow-ups to lines
+ * @param {string[]} lines
+ * @param {Object} q - Question object
+ */
+function appendFollowUps(lines, q) {
+  if (q.followUps.length > 0) {
+    lines.push("", "**Follow-ups:**");
+    for (const followUp of q.followUps) {
+      lines.push(`  → ${followUp}`);
+    }
+  }
+}
+
+/**
+ * Append looking-for items to lines
+ * @param {string[]} lines
+ * @param {Object} q - Question object
+ */
+function appendLookingFor(lines, q) {
+  if (q.lookingFor && q.lookingFor.length > 0) {
+    lines.push("", "**What to look for:**");
+    for (const item of q.lookingFor) {
+      lines.push(`- ${item}`);
+    }
+  }
+}
+
+/**
+ * Format skill question sections
+ * @param {string[]} lines
+ * @param {Array} sections
+ * @param {string} emoji
+ */
+function formatSkillSections(lines, sections, emoji) {
+  if (sections.length === 0) return;
+  lines.push(`## ${emoji} Skill Questions`, "");
+  for (const section of sections) {
+    lines.push(`### ${section.name} (${formatLevel(section.level)})`, "");
+    for (const q of section.questions) {
+      lines.push(`**Q**: ${q.question}`);
+      appendFollowUps(lines, q);
+      appendLookingFor(lines, q);
+      lines.push("");
+    }
+  }
+}
+
+/**
+ * Format scenario-based question sections (capability or behaviour)
+ * @param {string[]} lines
+ * @param {Array} sections
+ * @param {string} heading
+ * @param {string} promptsKey - Key for guided prompts
+ * @param {string} promptsLabel - Display label for prompts
+ */
+function formatScenarioSections(
+  lines,
+  sections,
+  heading,
+  promptsKey,
+  promptsLabel,
+) {
+  if (sections.length === 0) return;
+  lines.push(`## ${heading}`, "");
+  for (const section of sections) {
+    lines.push(`### ${section.name} (${formatLevel(section.level)})`, "");
+    for (const q of section.questions) {
+      lines.push(`**Scenario**: ${q.question}`);
+      if (q.context) {
+        lines.push(`> ${q.context}`);
+      }
+      if (q[promptsKey] && q[promptsKey].length > 0) {
+        lines.push("", `**${promptsLabel}:**`);
+        for (const prompt of q[promptsKey]) {
+          lines.push(`- ${prompt}`);
+        }
+      }
+      appendFollowUps(lines, q);
+      appendLookingFor(lines, q);
+      lines.push("");
+    }
+  }
+}
+
 /**
  * Format interview detail as markdown
  * @param {Object} view - Interview detail view from presenter
@@ -24,102 +109,29 @@ export function interviewToMarkdown(view, { framework } = {}) {
     "",
   ];
 
-  // Group sections by type
   const skillSections = view.sections.filter((s) => s.type === "skill");
   const behaviourSections = view.sections.filter((s) => s.type === "behaviour");
   const capabilitySections = view.sections.filter(
     (s) => s.type === "capability",
   );
 
-  // Skill questions
-  if (skillSections.length > 0) {
-    lines.push(`## ${skillEmoji} Skill Questions`, "");
-    for (const section of skillSections) {
-      lines.push(`### ${section.name} (${formatLevel(section.level)})`, "");
-      for (const q of section.questions) {
-        lines.push(`**Q**: ${q.question}`);
-        if (q.followUps.length > 0) {
-          lines.push("", "**Follow-ups:**");
-          for (const followUp of q.followUps) {
-            lines.push(`  → ${followUp}`);
-          }
-        }
-        if (q.lookingFor && q.lookingFor.length > 0) {
-          lines.push("", "**What to look for:**");
-          for (const item of q.lookingFor) {
-            lines.push(`- ${item}`);
-          }
-        }
-        lines.push("");
-      }
-    }
-  }
+  formatSkillSections(lines, skillSections, skillEmoji);
 
-  // Capability decomposition questions
-  if (capabilitySections.length > 0) {
-    lines.push(`## 🧩 Decomposition Questions`, "");
-    for (const section of capabilitySections) {
-      lines.push(`### ${section.name} (${formatLevel(section.level)})`, "");
-      for (const q of section.questions) {
-        lines.push(`**Scenario**: ${q.question}`);
-        if (q.context) {
-          lines.push(`> ${q.context}`);
-        }
-        if (q.decompositionPrompts && q.decompositionPrompts.length > 0) {
-          lines.push("", "**Guide the candidate through:**");
-          for (const prompt of q.decompositionPrompts) {
-            lines.push(`- ${prompt}`);
-          }
-        }
-        if (q.followUps.length > 0) {
-          lines.push("", "**Follow-ups:**");
-          for (const followUp of q.followUps) {
-            lines.push(`  → ${followUp}`);
-          }
-        }
-        if (q.lookingFor && q.lookingFor.length > 0) {
-          lines.push("", "**What to look for:**");
-          for (const item of q.lookingFor) {
-            lines.push(`- ${item}`);
-          }
-        }
-        lines.push("");
-      }
-    }
-  }
+  formatScenarioSections(
+    lines,
+    capabilitySections,
+    "🧩 Decomposition Questions",
+    "decompositionPrompts",
+    "Guide the candidate through",
+  );
 
-  // Behaviour stakeholder simulation questions
-  if (behaviourSections.length > 0) {
-    lines.push(`## ${behaviourEmoji} Stakeholder Simulation`, "");
-    for (const section of behaviourSections) {
-      lines.push(`### ${section.name} (${formatLevel(section.level)})`, "");
-      for (const q of section.questions) {
-        lines.push(`**Scenario**: ${q.question}`);
-        if (q.context) {
-          lines.push(`> ${q.context}`);
-        }
-        if (q.simulationPrompts && q.simulationPrompts.length > 0) {
-          lines.push("", "**Steer the simulation:**");
-          for (const prompt of q.simulationPrompts) {
-            lines.push(`- ${prompt}`);
-          }
-        }
-        if (q.followUps.length > 0) {
-          lines.push("", "**Follow-ups:**");
-          for (const followUp of q.followUps) {
-            lines.push(`  → ${followUp}`);
-          }
-        }
-        if (q.lookingFor && q.lookingFor.length > 0) {
-          lines.push("", "**What to look for:**");
-          for (const item of q.lookingFor) {
-            lines.push(`- ${item}`);
-          }
-        }
-        lines.push("");
-      }
-    }
-  }
+  formatScenarioSections(
+    lines,
+    behaviourSections,
+    `${behaviourEmoji} Stakeholder Simulation`,
+    "simulationPrompts",
+    "Steer the simulation",
+  );
 
   return lines.join("\n");
 }