@forwardimpact/pathway 0.25.15 → 0.25.21

package/src/formatters/skill/dom.js

@@ -37,6 +37,106 @@ import { createJsonLdScript, skillToJsonLd } from "../json-ld.js";
  * @param {string} [context.agentSkillContent] - Pre-generated SKILL.md content for agent file viewer
  * @returns {HTMLElement}
  */
+/**
+ * Create the required tools section
+ * @param {Object} view
+ * @param {boolean} showBackLink
+ * @returns {HTMLElement}
+ */
+function createToolsSection(view, showBackLink) {
+  return div(
+    { className: "detail-section" },
+    heading2({ className: "section-title" }, "Required Tools"),
+    table(
+      { className: "tools-table" },
+      thead({}, tr({}, th({}, "Tool"), th({}, "Use When"))),
+      tbody(
+        {},
+        ...view.toolReferences.map((tool) =>
+          tr(
+            {},
+            td(
+              { className: "tool-name-cell" },
+              tool.simpleIcon
+                ? createToolIcon(tool.simpleIcon, tool.name)
+                : null,
+              tool.url
+                ? a(
+                    {
+                      href: tool.url,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                    },
+                    tool.name,
+                    span({ className: "external-icon" }, " ↗"),
+                  )
+                : tool.name,
+            ),
+            td({}, tool.useWhen),
+          ),
+        ),
+      ),
+    ),
+    showBackLink
+      ? p(
+          { className: "see-all-link" },
+          a({ href: "#/tool" }, "See all tools →"),
+        )
+      : null,
+  );
+}
+
+/**
+ * Create the related disciplines and drivers section
+ * @param {Object} view
+ * @param {boolean} showBackLink
+ * @returns {HTMLElement|null}
+ */
+function createRelationsSection(view, showBackLink) {
+  if (
+    view.relatedDisciplines.length === 0 &&
+    view.relatedDrivers.length === 0
+  ) {
+    return null;
+  }
+  return div(
+    { className: "detail-section" },
+    div(
+      { className: "content-columns" },
+      view.relatedDisciplines.length > 0
+        ? div(
+            { className: "column" },
+            heading2({ className: "section-title" }, "Used in Disciplines"),
+            ...view.relatedDisciplines.map((d) =>
+              div(
+                { className: "list-item" },
+                showBackLink
+                  ? a({ href: `#/discipline/${d.id}` }, d.name)
+                  : span({}, d.name),
+                " ",
+                span({ className: `badge badge-${d.skillType}` }, d.skillType),
+              ),
+            ),
+          )
+        : null,
+      view.relatedDrivers.length > 0
+        ? div(
+            { className: "column" },
+            heading2({ className: "section-title" }, "Linked to Drivers"),
+            ...view.relatedDrivers.map((d) =>
+              div(
+                { className: "list-item" },
+                showBackLink
+                  ? a({ href: `#/driver/${d.id}` }, d.name)
+                  : span({}, d.name),
+              ),
+            ),
+          )
+        : null,
+    ),
+  );
+}
+
 export function skillToDOM(
   skill,
   {
@@ -57,9 +157,7 @@ export function skillToDOM(
   });
   return div(
     { className: "detail-page skill-detail" },
-    // JSON-LD structured data
     createJsonLdScript(skillToJsonLd(skill, { capabilities })),
-    // Header
     div(
       { className: "page-header" },
       showBackLink ? createBackLink("/skill", "← Back to Skills") : null,
@@ -88,7 +186,6 @@ export function skillToDOM(
       p({ className: "page-description" }, view.description),
     ),
 
-    // Level descriptions
     div(
       { className: "detail-section" },
       heading2({ className: "section-title" }, "Level Descriptions"),
@@ -109,55 +206,8 @@ export function skillToDOM(
       ),
     ),
 
-    // Used in Disciplines and Linked to Drivers in two columns
-    view.relatedDisciplines.length > 0 || view.relatedDrivers.length > 0
-      ? div(
-          { className: "detail-section" },
-          div(
-            { className: "content-columns" },
-            // Used in Disciplines column
-            view.relatedDisciplines.length > 0
-              ? div(
-                  { className: "column" },
-                  heading2(
-                    { className: "section-title" },
-                    "Used in Disciplines",
-                  ),
-                  ...view.relatedDisciplines.map((d) =>
-                    div(
-                      { className: "list-item" },
-                      showBackLink
-                        ? a({ href: `#/discipline/${d.id}` }, d.name)
-                        : span({}, d.name),
-                      " ",
-                      span(
-                        { className: `badge badge-${d.skillType}` },
-                        d.skillType,
-                      ),
-                    ),
-                  ),
-                )
-              : null,
-            // Linked to Drivers column
-            view.relatedDrivers.length > 0
-              ? div(
-                  { className: "column" },
-                  heading2({ className: "section-title" }, "Linked to Drivers"),
-                  ...view.relatedDrivers.map((d) =>
-                    div(
-                      { className: "list-item" },
-                      showBackLink
-                        ? a({ href: `#/driver/${d.id}` }, d.name)
-                        : span({}, d.name),
-                    ),
-                  ),
-                )
-              : null,
-          ),
-        )
-      : null,
+    createRelationsSection(view, showBackLink),
 
-    // Related tracks
     view.relatedTracks.length > 0
       ? div(
           { className: "detail-section" },
@@ -180,51 +230,10 @@ export function skillToDOM(
         )
       : null,
 
-    // Required Tools
     showToolsAndPatterns && view.toolReferences.length > 0
-      ? div(
-          { className: "detail-section" },
-          heading2({ className: "section-title" }, "Required Tools"),
-          table(
-            { className: "tools-table" },
-            thead({}, tr({}, th({}, "Tool"), th({}, "Use When"))),
-            tbody(
-              {},
-              ...view.toolReferences.map((tool) =>
-                tr(
-                  {},
-                  td(
-                    { className: "tool-name-cell" },
-                    tool.simpleIcon
-                      ? createToolIcon(tool.simpleIcon, tool.name)
-                      : null,
-                    tool.url
-                      ? a(
-                          {
-                            href: tool.url,
-                            target: "_blank",
-                            rel: "noopener noreferrer",
-                          },
-                          tool.name,
-                          span({ className: "external-icon" }, " ↗"),
-                        )
-                      : tool.name,
-                  ),
-                  td({}, tool.useWhen),
-                ),
-              ),
-            ),
-          ),
-          showBackLink
-            ? p(
-                { className: "see-all-link" },
-                a({ href: "#/tool" }, "See all tools →"),
-              )
-            : null,
-        )
+      ? createToolsSection(view, showBackLink)
       : null,
 
-    // Agent Skill Files
     showToolsAndPatterns &&
       (agentSkillContent || view.implementationReference || view.installScript)
       ? div(

package/src/lib/comparison-radar-chart.js

@@ -0,0 +1,256 @@
+/**
+ * Comparison Radar Chart - displays two overlaid radar charts
+ */
+
+import {
+  escapeHtml,
+  wrapLabel,
+  getTextAnchor,
+  createRadarSvg,
+  drawLevelRings,
+  drawAxisLines,
+  createRadarTooltip,
+} from "./radar-utils.js";
+
+export class ComparisonRadarChart {
+  /**
+   * @param {Object} config
+   * @param {HTMLElement} config.container
+   * @param {import('./radar.js').RadarDataPoint[]} config.currentData
+   * @param {import('./radar.js').RadarDataPoint[]} config.targetData
+   * @param {Object} [config.options]
+   */
+  constructor({ container, currentData, targetData, options = {} }) {
+    this.container = container;
+    this.currentData = currentData;
+    this.targetData = targetData;
+    this.options = {
+      levels: options.levels || 5,
+      currentColor: options.currentColor || "#3b82f6",
+      targetColor: options.targetColor || "#10b981",
+      showLabels: options.showLabels !== false,
+      showTooltips: options.showTooltips !== false,
+      size: options.size || 400,
+      labelOffset: options.labelOffset || 50,
+    };
+
+    this.center = this.options.size / 2;
+    this.radius = this.options.size / 2 - this.options.labelOffset - 20;
+    this.angleSlice = (Math.PI * 2) / this.currentData.length;
+
+    this.svg = null;
+    this.tooltip = null;
+  }
+
+  render() {
+    this.container.innerHTML = "";
+
+    this.svg = createRadarSvg(this.options.size, ["comparison-radar-chart"]);
+
+    const sharedParams = {
+      radius: this.radius,
+      center: this.center,
+      angleSlice: this.angleSlice,
+      dataLength: this.currentData.length,
+    };
+
+    drawLevelRings(this.svg, { ...sharedParams, levels: this.options.levels });
+    drawAxisLines(this.svg, sharedParams);
+
+    this.drawDataPolygon(this.targetData, this.options.targetColor, 0.2);
+    this.drawDataPolygon(this.currentData, this.options.currentColor, 0.3);
+    this.drawDataPoints(this.targetData, this.options.targetColor, "target");
+    this.drawDataPoints(this.currentData, this.options.currentColor, "current");
+
+    if (this.options.showLabels) this.drawLabels();
+    if (this.options.showTooltips) {
+      this.tooltip = createRadarTooltip(this.container, 250);
+    }
+
+    this.container.appendChild(this.svg);
+  }
+
+  drawDataPolygon(data, color, opacity) {
+    const points = data.map((d, i) => {
+      const angle = this.angleSlice * i - Math.PI / 2;
+      const value = d.value / d.maxValue;
+      const r = this.radius * value;
+      return {
+        x: this.center + r * Math.cos(angle),
+        y: this.center + r * Math.sin(angle),
+      };
+    });
+
+    const polygon = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "polygon",
+    );
+    polygon.setAttribute(
+      "points",
+      points.map((p) => `${p.x},${p.y}`).join(" "),
+    );
+    polygon.classList.add("radar-data");
+    polygon.style.fill = color;
+    polygon.style.fillOpacity = String(opacity);
+    polygon.style.stroke = color;
+    polygon.style.strokeWidth = "2";
+
+    this.svg.appendChild(polygon);
+  }
+
+  drawDataPoints(data, color, type) {
+    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.classList.add("radar-points", `radar-points-${type}`);
+
+    data.forEach((d, i) => {
+      const angle = this.angleSlice * i - Math.PI / 2;
+      const value = d.value / d.maxValue;
+      const r = this.radius * value;
+      const x = this.center + r * Math.cos(angle);
+      const y = this.center + r * Math.sin(angle);
+
+      const circle = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "circle",
+      );
+      circle.setAttribute("cx", x);
+      circle.setAttribute("cy", y);
+      circle.setAttribute("r", 4);
+      circle.classList.add("radar-point");
+      circle.style.fill = color;
+      circle.style.stroke = "#fff";
+      circle.style.strokeWidth = "2";
+      circle.style.cursor = "pointer";
+
+      if (this.options.showTooltips) {
+        circle.addEventListener("mouseenter", (e) =>
+          this.showTooltip(e, d, type),
+        );
+        circle.addEventListener("mouseleave", () => this.hideTooltip());
+      }
+
+      group.appendChild(circle);
+    });
+
+    this.svg.appendChild(group);
+  }
+
+  drawLabels() {
+    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.classList.add("radar-labels");
+
+    this.currentData.forEach((d, i) => {
+      const targetD = this.targetData[i];
+      const angle = this.angleSlice * i - Math.PI / 2;
+      const labelRadius = this.radius + this.options.labelOffset;
+      const x = this.center + labelRadius * Math.cos(angle);
+      const y = this.center + labelRadius * Math.sin(angle);
+
+      const diff = targetD.value - d.value;
+      const hasDiff = diff !== 0;
+
+      const text = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "text",
+      );
+      text.setAttribute("x", x);
+      text.setAttribute("y", y);
+      text.classList.add("radar-label");
+      if (hasDiff) text.classList.add("has-change");
+      text.style.fontSize = "11px";
+      text.style.fill = hasDiff
+        ? diff > 0
+          ? "#059669"
+          : "#dc2626"
+        : "#475569";
+      text.style.fontWeight = hasDiff ? "600" : "400";
+      text.style.textAnchor = getTextAnchor(angle);
+      text.style.dominantBaseline = "middle";
+
+      let labelText = d.label;
+      if (hasDiff) {
+        labelText += ` (${diff > 0 ? "+" : ""}${diff})`;
+      }
+
+      const lines = wrapLabel(labelText, 15);
+      const lineHeight = 13;
+      const offsetY = -((lines.length - 1) * lineHeight) / 2;
+
+      lines.forEach((line, lineIndex) => {
+        const tspan = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "tspan",
+        );
+        tspan.setAttribute("x", x);
+        tspan.setAttribute("dy", lineIndex === 0 ? offsetY : lineHeight);
+        tspan.textContent = line;
+        text.appendChild(tspan);
+      });
+
+      if (this.options.showTooltips) {
+        text.style.cursor = "pointer";
+        text.addEventListener("mouseenter", (e) =>
+          this.showComparisonTooltip(e, d, targetD),
+        );
+        text.addEventListener("mouseleave", () => this.hideTooltip());
+      }
+
+      group.appendChild(text);
+    });
+
+    this.svg.appendChild(group);
+  }
+
+  showTooltip(event, data, type) {
+    if (!this.tooltip) return;
+
+    const rect = this.container.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    const typeLabel = type === "current" ? "Current" : "Target";
+
+    this.tooltip.innerHTML = `
+      <strong>${escapeHtml(data.label)}</strong><br>
+      ${typeLabel}: ${data.value}/${data.maxValue}
+      ${data.description ? `<br><small>${escapeHtml(data.description)}</small>` : ""}
+    `;
+
+    this.tooltip.style.left = `${x + 10}px`;
+    this.tooltip.style.top = `${y - 10}px`;
+    this.tooltip.style.opacity = "1";
+  }
+
+  showComparisonTooltip(event, currentData, targetData) {
+    if (!this.tooltip) return;
+
+    const rect = this.container.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    const diff = targetData.value - currentData.value;
+    const diffText =
+      diff > 0
+        ? `<span style="color: #10b981">↑ ${diff} level${diff > 1 ? "s" : ""}</span>`
+        : diff < 0
+          ? `<span style="color: #ef4444">↓ ${Math.abs(diff)} level${Math.abs(diff) > 1 ? "s" : ""}</span>`
+          : "<span style='color: #94a3b8'>No change</span>";
+
+    this.tooltip.innerHTML = `
+      <strong>${escapeHtml(currentData.label)}</strong><br>
+      Current: ${currentData.value}/${currentData.maxValue}<br>
+      Target: ${targetData.value}/${targetData.maxValue}<br>
+      ${diffText}
+    `;
+
+    this.tooltip.style.left = `${x + 10}px`;
+    this.tooltip.style.top = `${y - 10}px`;
+    this.tooltip.style.opacity = "1";
+  }
+
+  hideTooltip() {
+    if (this.tooltip) {
+      this.tooltip.style.opacity = "0";
+    }
+  }
+}

package/src/lib/radar-utils.js

@@ -0,0 +1,199 @@
+/**
+ * Shared utilities for radar chart visualizations
+ */
+
+/**
+ * Escape HTML special characters to prevent XSS
+ * @param {string} text
+ * @returns {string}
+ */
+export function escapeHtml(text) {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+/**
+ * Wrap label text into multiple lines
+ * @param {string} text
+ * @param {number} maxCharsPerLine
+ * @returns {string[]}
+ */
+export function wrapLabel(text, maxCharsPerLine) {
+  if (text.length <= maxCharsPerLine) return [text];
+
+  const words = text.split(/\s+/);
+  const lines = [];
+  let currentLine = "";
+
+  for (const word of words) {
+    if (currentLine.length === 0) {
+      currentLine = word;
+    } else if (currentLine.length + 1 + word.length <= maxCharsPerLine) {
+      currentLine += " " + word;
+    } else {
+      lines.push(currentLine);
+      currentLine = word;
+    }
+  }
+
+  if (currentLine.length > 0) {
+    lines.push(currentLine);
+  }
+
+  return lines.length > 0 ? lines : [text];
+}
+
+/**
+ * Get text anchor based on angle
+ * @param {number} angle
+ * @returns {string}
+ */
+export function getTextAnchor(angle) {
+  const degrees = (angle * 180) / Math.PI + 90;
+  if (degrees > 45 && degrees < 135) return "start";
+  if (degrees > 225 && degrees < 315) return "end";
+  return "middle";
+}
+
+/**
+ * Create an SVG element with standard radar chart dimensions
+ * @param {number} size
+ * @param {string[]} [extraClasses]
+ * @returns {SVGElement}
+ */
+export function createRadarSvg(size, extraClasses = []) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  const padding = 40;
+  const totalSize = size + padding * 2;
+  svg.setAttribute("width", totalSize);
+  svg.setAttribute("height", totalSize);
+  svg.setAttribute(
+    "viewBox",
+    `${-padding} ${-padding} ${totalSize} ${totalSize}`,
+  );
+  svg.classList.add("radar-chart", ...extraClasses);
+  return svg;
+}
+
+/**
+ * Draw concentric level rings on a radar chart
+ * @param {SVGElement} svg
+ * @param {Object} params
+ * @param {number} params.levels
+ * @param {number} params.radius
+ * @param {number} params.center
+ * @param {number} params.angleSlice
+ * @param {number} params.dataLength
+ */
+export function drawLevelRings(
+  svg,
+  { levels, radius, center, angleSlice, dataLength },
+) {
+  const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  group.classList.add("radar-levels");
+
+  for (let level = 1; level <= levels; level++) {
+    const levelRadius = (radius * level) / levels;
+    const points = [];
+    for (let i = 0; i < dataLength; i++) {
+      const angle = angleSlice * i - Math.PI / 2;
+      points.push({
+        x: center + levelRadius * Math.cos(angle),
+        y: center + levelRadius * Math.sin(angle),
+      });
+    }
+
+    const polygon = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "polygon",
+    );
+    polygon.setAttribute(
+      "points",
+      points.map((p) => `${p.x},${p.y}`).join(" "),
+    );
+    polygon.classList.add("radar-level");
+    polygon.style.fill = "none";
+    polygon.style.stroke = "#e2e8f0";
+    polygon.style.strokeWidth = "1";
+    group.appendChild(polygon);
+
+    const labelX = center + 5;
+    const labelY = center - levelRadius + 4;
+    const label = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "text",
+    );
+    label.setAttribute("x", labelX);
+    label.setAttribute("y", labelY);
+    label.textContent = level;
+    label.classList.add("radar-level-label");
+    label.style.fontSize = "10px";
+    label.style.fill = "#94a3b8";
+    group.appendChild(label);
+  }
+
+  svg.appendChild(group);
+}
+
+/**
+ * Draw axis lines on a radar chart
+ * @param {SVGElement} svg
+ * @param {Object} params
+ * @param {number} params.radius
+ * @param {number} params.center
+ * @param {number} params.angleSlice
+ * @param {number} params.dataLength
+ */
+export function drawAxisLines(svg, { radius, center, angleSlice, dataLength }) {
+  const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  group.classList.add("radar-axes");
+
+  for (let i = 0; i < dataLength; i++) {
+    const angle = angleSlice * i - Math.PI / 2;
+    const x = center + radius * Math.cos(angle);
+    const y = center + radius * Math.sin(angle);
+
+    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    line.setAttribute("x1", center);
+    line.setAttribute("y1", center);
+    line.setAttribute("x2", x);
+    line.setAttribute("y2", y);
+    line.classList.add("radar-axis");
+    line.style.stroke = "#cbd5e1";
+    line.style.strokeWidth = "1";
+    group.appendChild(line);
+  }
+
+  svg.appendChild(group);
+}
+
+/**
+ * Create a tooltip element for radar charts
+ * @param {HTMLElement} container
+ * @param {number} [maxWidth=200]
+ * @returns {HTMLDivElement}
+ */
+export function createRadarTooltip(container, maxWidth = 200) {
+  const tooltip = document.createElement("div");
+  tooltip.className = "radar-tooltip";
+  tooltip.style.cssText = `
+    position: absolute;
+    background: #1e293b;
+    color: white;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s;
+    z-index: 100;
+    max-width: ${maxWidth}px;
+  `;
+  container.style.position = "relative";
+  container.appendChild(tooltip);
+  return tooltip;
+}