@diegonogueiradev_/mcp-graph 1.0.0 → 2.0.0

package/dist/web/public/js/filters.js

@@ -0,0 +1,94 @@
+/**
+ * Filter UI for graph visualization
+ */
+const Filters = (() => {
+  const STATUSES = ['backlog', 'ready', 'in_progress', 'blocked', 'done'];
+  const TYPES = ['epic', 'task', 'subtask', 'requirement', 'constraint', 'milestone', 'acceptance_criteria', 'risk', 'decision'];
+  const EDGE_TYPES = ['depends_on', 'parent_of', 'blocks', 'related_to', 'implements'];
+
+  const STATUS_LABELS = {
+    backlog: 'Backlog', ready: 'Ready', in_progress: 'In Progress',
+    blocked: 'Blocked', done: 'Done',
+  };
+  const TYPE_LABELS = {
+    epic: 'Epic', task: 'Task', subtask: 'Subtask', requirement: 'Requirement',
+    constraint: 'Constraint', milestone: 'Milestone', acceptance_criteria: 'AC',
+    risk: 'Risk', decision: 'Decision',
+  };
+  const EDGE_TYPE_LABELS = {
+    depends_on: 'Depends On', parent_of: 'Parent Of', blocks: 'Blocks',
+    related_to: 'Related To', implements: 'Implements',
+  };
+
+  function renderCheckboxes(containerId, items, labels, checked = false) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+    container.innerHTML = items.map(item => `
+      <label class="filter-check">
+        <input type="checkbox" value="${item}" ${checked ? 'checked' : ''}>
+        <span class="status-dot status-${item}"></span>
+        ${labels[item] || item}
+      </label>
+    `).join('');
+  }
+
+  function init() {
+    renderCheckboxes('filter-status', STATUSES, STATUS_LABELS);
+    renderCheckboxes('filter-type', TYPES, TYPE_LABELS);
+    renderCheckboxes('filter-edge-types', EDGE_TYPES, EDGE_TYPE_LABELS, true);
+
+    // Depth slider label
+    const depthSlider = document.getElementById('filter-focus-depth');
+    const depthValue = document.getElementById('depth-value');
+    if (depthSlider && depthValue) {
+      depthSlider.addEventListener('input', () => {
+        depthValue.textContent = depthSlider.value === '0' ? 'All' : depthSlider.value;
+      });
+    }
+  }
+
+  function getValues() {
+    const status = Array.from(document.querySelectorAll('#filter-status input:checked')).map(cb => cb.value);
+    const type = Array.from(document.querySelectorAll('#filter-type input:checked')).map(cb => cb.value);
+    const direction = document.getElementById('filter-direction')?.value || 'TD';
+    const format = document.getElementById('filter-format')?.value || 'flowchart';
+    const edgeTypes = Array.from(document.querySelectorAll('#filter-edge-types input:checked')).map(cb => cb.value);
+    const focusDepth = parseInt(document.getElementById('filter-focus-depth')?.value || '0', 10);
+    return { status, type, direction, format, edgeTypes, focusDepth };
+  }
+
+  function clear() {
+    document.querySelectorAll('.filter-checks input').forEach(cb => { cb.checked = false; });
+    // Re-check all edge types on clear
+    document.querySelectorAll('#filter-edge-types input').forEach(cb => { cb.checked = true; });
+    const dirSelect = document.getElementById('filter-direction');
+    if (dirSelect) dirSelect.value = 'TD';
+    const fmtSelect = document.getElementById('filter-format');
+    if (fmtSelect) fmtSelect.value = 'flowchart';
+    const depthSlider = document.getElementById('filter-focus-depth');
+    if (depthSlider) depthSlider.value = '0';
+    const depthValue = document.getElementById('depth-value');
+    if (depthValue) depthValue.textContent = 'All';
+  }
+
+  function toQueryParams() {
+    const vals = getValues();
+    const params = {};
+    if (vals.status.length) params.status = vals.status.join(',');
+    if (vals.type.length) params.type = vals.type.join(',');
+    params.direction = vals.direction;
+    params.format = vals.format;
+    return params;
+  }
+
+  /** Toggle visibility of Mermaid-specific vs Force-specific filters */
+  function setViewMode(mode) {
+    const mermaidFilters = document.querySelectorAll('.mermaid-filter');
+    const forceFilters = document.querySelectorAll('.force-filter');
+
+    mermaidFilters.forEach(el => el.classList.toggle('hidden', mode === 'force'));
+    forceFilters.forEach(el => el.classList.toggle('hidden', mode === 'mermaid'));
+  }
+
+  return { init, getValues, clear, toQueryParams, setViewMode };
+})();

package/dist/web/public/js/force-graph-renderer.js

@@ -0,0 +1,498 @@
+/**
+ * Force-directed graph renderer using force-graph library
+ * Vanilla JS IIFE — canvas-based interactive visualization
+ */
+const ForceGraphRenderer = (() => {
+  // ── Color & Size Constants ────────────────────
+  const NODE_COLORS = {
+    epic: '#7c3aed', task: '#3b82f6', subtask: '#22c55e',
+    requirement: '#f59e0b', constraint: '#ef4444', milestone: '#8b5cf6',
+    acceptance_criteria: '#06b6d4', risk: '#f97316', decision: '#6366f1',
+  };
+  const NODE_SIZES = {
+    epic: 10, task: 7, subtask: 5, requirement: 6, constraint: 6,
+    milestone: 9, acceptance_criteria: 4, risk: 6, decision: 7,
+  };
+  const STATUS_COLORS = {
+    done: '#4caf50', in_progress: '#2196f3', blocked: '#f44336',
+    ready: '#ff9800', backlog: '#9e9e9e',
+  };
+  const EDGE_COLORS = {
+    depends_on: '#ff980088', parent_of: '#9e9e9e66', blocks: '#f4433688',
+    related_to: '#9e9e9e44', implements: '#7c3aed66',
+  };
+  const EDGE_DASH = {
+    related_to: [4, 2],
+    implements: [6, 3],
+  };
+
+  // ── State ─────────────────────────────────────
+  let graph = null;
+  let containerId = null;
+  let theme = 'default';
+  let hoveredNode = null;
+  let selectedNode = null;
+  let highlightNodes = new Set();
+  let highlightLinks = new Set();
+  let adjacencyMap = new Map();
+  let allNodes = [];
+  let allLinks = [];
+  let focusDepth = 0; // 0 = show all
+  let activeEdgeTypes = new Set();
+  let tooltipEl = null;
+
+  // ── Adjacency Map (O(1) neighbor lookup) ──────
+  function buildAdjacencyMap(links) {
+    const map = new Map();
+    for (const link of links) {
+      const sId = typeof link.source === 'object' ? link.source.id : link.source;
+      const tId = typeof link.target === 'object' ? link.target.id : link.target;
+      if (!map.has(sId)) map.set(sId, []);
+      if (!map.has(tId)) map.set(tId, []);
+      map.get(sId).push({ nodeId: tId, link });
+      map.get(tId).push({ nodeId: sId, link });
+    }
+    return map;
+  }
+
+  // ── N-hop BFS for focus depth ─────────────────
+  function getNeighborhood(startId, adjMap, maxDepth) {
+    const visited = new Set([startId]);
+    let frontier = [startId];
+    for (let depth = 0; depth < maxDepth && frontier.length > 0; depth++) {
+      const next = [];
+      for (const id of frontier) {
+        const neighbors = adjMap.get(id);
+        if (!neighbors) continue;
+        for (const { nodeId } of neighbors) {
+          if (!visited.has(nodeId)) {
+            visited.add(nodeId);
+            next.push(nodeId);
+          }
+        }
+      }
+      frontier = next;
+    }
+    return visited;
+  }
+
+  // ── Tooltip ───────────────────────────────────
+  function ensureTooltip() {
+    if (tooltipEl) return tooltipEl;
+    tooltipEl = document.createElement('div');
+    tooltipEl.className = 'graph-tooltip';
+    tooltipEl.style.display = 'none';
+    document.body.appendChild(tooltipEl);
+    return tooltipEl;
+  }
+
+  function showTooltip(node, event) {
+    const tip = ensureTooltip();
+    const statusClass = `status-${node.status || 'backlog'}`;
+    tip.innerHTML = `
+      <div class="tooltip-title">${escapeHtml(node.title || node.id)}</div>
+      <div class="tooltip-row"><span class="badge badge-type">${escapeHtml(node.type)}</span> <span class="badge ${statusClass}">${escapeHtml(node.status || 'backlog')}</span></div>
+      ${node.priority !== undefined ? `<div class="tooltip-row text-muted">Priority: ${node.priority}</div>` : ''}
+      ${node.description ? `<div class="tooltip-desc">${escapeHtml(truncate(node.description, 120))}</div>` : ''}
+    `;
+    tip.style.display = 'block';
+    positionTooltip(tip, event);
+  }
+
+  function positionTooltip(tip, event) {
+    const x = event.clientX || 0;
+    const y = event.clientY || 0;
+    const pad = 12;
+    tip.style.left = (x + pad) + 'px';
+    tip.style.top = (y + pad) + 'px';
+    // Adjust if off-screen
+    const rect = tip.getBoundingClientRect();
+    if (rect.right > window.innerWidth) {
+      tip.style.left = (x - rect.width - pad) + 'px';
+    }
+    if (rect.bottom > window.innerHeight) {
+      tip.style.top = (y - rect.height - pad) + 'px';
+    }
+  }
+
+  function hideTooltip() {
+    if (tooltipEl) tooltipEl.style.display = 'none';
+  }
+
+  // ── Helpers ───────────────────────────────────
+  function escapeHtml(text) {
+    if (!text) return '';
+    const div = document.createElement('div');
+    div.textContent = String(text);
+    return div.innerHTML;
+  }
+
+  function truncate(str, len) {
+    if (!str) return '';
+    return str.length > len ? str.slice(0, len) + '...' : str;
+  }
+
+  function linkKey(link) {
+    const sId = typeof link.source === 'object' ? link.source.id : link.source;
+    const tId = typeof link.target === 'object' ? link.target.id : link.target;
+    return `${sId}-${tId}`;
+  }
+
+  // ── Filter pipeline ───────────────────────────
+  function getFilteredData() {
+    let nodes = [...allNodes];
+    let links = [...allLinks];
+
+    // Edge type filter
+    if (activeEdgeTypes.size > 0) {
+      links = links.filter(l => activeEdgeTypes.has(l.relationType));
+    }
+
+    // Focus depth (N-hop BFS from selected node)
+    if (selectedNode && focusDepth > 0) {
+      const adjMap = buildAdjacencyMap(links);
+      const reachable = getNeighborhood(selectedNode.id, adjMap, focusDepth);
+      nodes = nodes.filter(n => reachable.has(n.id));
+      const nodeIds = new Set(nodes.map(n => n.id));
+      links = links.filter(l => {
+        const sId = typeof l.source === 'object' ? l.source.id : l.source;
+        const tId = typeof l.target === 'object' ? l.target.id : l.target;
+        return nodeIds.has(sId) && nodeIds.has(tId);
+      });
+    }
+
+    return { nodes, links };
+  }
+
+  // ── Custom Node Painter ───────────────────────
+  function paintNode(node, ctx, globalScale) {
+    const radius = NODE_SIZES[node.type] || 6;
+    const color = NODE_COLORS[node.type] || '#6366f1';
+    const statusColor = STATUS_COLORS[node.status] || STATUS_COLORS.backlog;
+    const isHighlighted = highlightNodes.size === 0 || highlightNodes.has(node.id);
+    const isSelected = selectedNode && selectedNode.id === node.id;
+
+    // Selection glow
+    if (isSelected) {
+      ctx.save();
+      ctx.shadowColor = color;
+      ctx.shadowBlur = 15;
+    }
+
+    // Status border ring
+    ctx.beginPath();
+    ctx.arc(node.x, node.y, radius + 1.5, 0, 2 * Math.PI);
+    ctx.fillStyle = isHighlighted ? statusColor : statusColor + '26';
+    ctx.fill();
+
+    // Main circle
+    ctx.beginPath();
+    ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+    ctx.fillStyle = isHighlighted ? color : color + '26';
+    ctx.fill();
+
+    if (isSelected) {
+      ctx.restore();
+      // Selected ring
+      ctx.beginPath();
+      ctx.arc(node.x, node.y, radius + 3, 0, 2 * Math.PI);
+      ctx.strokeStyle = '#fff';
+      ctx.lineWidth = 1.5;
+      ctx.stroke();
+    }
+
+    // Label (only at reasonable zoom)
+    if (globalScale > 0.5) {
+      const fontSize = Math.max(9, 11 / globalScale);
+      ctx.font = `${fontSize}px -apple-system, BlinkMacSystemFont, sans-serif`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'top';
+      ctx.fillStyle = isHighlighted
+        ? (theme === 'dark' ? '#e4e4e7' : '#212529')
+        : (theme === 'dark' ? '#71717a44' : '#21252944');
+      ctx.fillText(truncate(node.title || node.id, 25), node.x, node.y + radius + 3);
+    }
+  }
+
+  // ── Custom Link Painter ───────────────────────
+  function paintLink(link, ctx) {
+    const sNode = link.source;
+    const tNode = link.target;
+    if (!sNode || !tNode || typeof sNode.x !== 'number') return;
+
+    const key = linkKey(link);
+    const isHighlighted = highlightLinks.size === 0 || highlightLinks.has(key);
+    const color = EDGE_COLORS[link.relationType] || '#9e9e9e44';
+
+    ctx.beginPath();
+    ctx.moveTo(sNode.x, sNode.y);
+    ctx.lineTo(tNode.x, tNode.y);
+
+    ctx.strokeStyle = isHighlighted ? color : color.slice(0, 7) + '1a';
+    ctx.lineWidth = isHighlighted ? 2 : 0.5;
+
+    // Dash pattern for certain edge types
+    const dash = EDGE_DASH[link.relationType];
+    if (dash) {
+      ctx.setLineDash(dash);
+    } else {
+      ctx.setLineDash([]);
+    }
+    ctx.stroke();
+    ctx.setLineDash([]);
+
+    // Arrow at target end
+    if (isHighlighted) {
+      const dx = tNode.x - sNode.x;
+      const dy = tNode.y - sNode.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (dist < 1) return;
+      const targetRadius = NODE_SIZES[tNode.type] || 6;
+      const ratio = (dist - targetRadius - 2) / dist;
+      const ax = sNode.x + dx * ratio;
+      const ay = sNode.y + dy * ratio;
+      const angle = Math.atan2(dy, dx);
+      const arrowLen = 6;
+      const arrowWidth = 3;
+
+      ctx.beginPath();
+      ctx.moveTo(ax, ay);
+      ctx.lineTo(
+        ax - arrowLen * Math.cos(angle) + arrowWidth * Math.sin(angle),
+        ay - arrowLen * Math.sin(angle) - arrowWidth * Math.cos(angle)
+      );
+      ctx.lineTo(
+        ax - arrowLen * Math.cos(angle) - arrowWidth * Math.sin(angle),
+        ay - arrowLen * Math.sin(angle) + arrowWidth * Math.cos(angle)
+      );
+      ctx.closePath();
+      ctx.fillStyle = color;
+      ctx.fill();
+    }
+  }
+
+  // ── Init ──────────────────────────────────────
+  function init(id) {
+    containerId = id;
+    ensureTooltip();
+  }
+
+  // ── Render ────────────────────────────────────
+  function render(nodes, links) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+
+    // Store raw data
+    allNodes = nodes.map(n => ({ ...n }));
+    allLinks = links.map(l => ({ ...l }));
+
+    // Initialize all edge types if not set
+    if (activeEdgeTypes.size === 0) {
+      const types = new Set(links.map(l => l.relationType));
+      activeEdgeTypes = types;
+    }
+
+    // Apply filters
+    const data = getFilteredData();
+    adjacencyMap = buildAdjacencyMap(data.links);
+
+    // Destroy previous graph
+    if (graph) {
+      graph._destructor && graph._destructor();
+      graph = null;
+    }
+    container.innerHTML = '';
+
+    if (data.nodes.length === 0) {
+      container.innerHTML = '<div class="empty-state"><p>No graph data. Import a PRD to get started.</p></div>';
+      return;
+    }
+
+    const bgColor = theme === 'dark' ? '#1a1b1e' : '#f8f9fa';
+
+    // Create force graph instance
+    graph = ForceGraph()(container)
+      .graphData({ nodes: data.nodes, links: data.links })
+      .backgroundColor(bgColor)
+      .nodeId('id')
+      .linkSource('source')
+      .linkTarget('target')
+      .nodeCanvasObject((node, ctx, globalScale) => paintNode(node, ctx, globalScale))
+      .nodePointerAreaPaint((node, color, ctx) => {
+        const r = NODE_SIZES[node.type] || 6;
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, r + 2, 0, 2 * Math.PI);
+        ctx.fillStyle = color;
+        ctx.fill();
+      })
+      .linkCanvasObject((link, ctx) => paintLink(link, ctx))
+      .linkCanvasObjectMode(() => 'replace')
+      .onNodeHover((node, prevNode) => {
+        container.style.cursor = node ? 'pointer' : 'default';
+        hoveredNode = node;
+
+        if (!node) {
+          highlightNodes = new Set();
+          highlightLinks = new Set();
+          hideTooltip();
+          return;
+        }
+
+        const connNodes = new Set([node.id]);
+        const connLinks = new Set();
+        const neighbors = adjacencyMap.get(node.id);
+        if (neighbors) {
+          for (const { nodeId, link } of neighbors) {
+            connNodes.add(nodeId);
+            connLinks.add(linkKey(link));
+          }
+        }
+        highlightNodes = connNodes;
+        highlightLinks = connLinks;
+      })
+      .onNodeClick((node) => {
+        if (!node) return;
+        selectedNode = node;
+        // Highlight selected node row in table
+        highlightTableRow(node.id);
+        // Dispatch event for NodeDetail panel
+        document.dispatchEvent(new CustomEvent('node-clicked', { detail: { nodeId: node.id } }));
+        // Re-render if focus depth is active
+        if (focusDepth > 0) {
+          refreshGraph();
+        }
+      })
+      .d3VelocityDecay(0.4)
+      .warmupTicks(100)
+      .cooldownTime(3000);
+
+    // Configure forces
+    try {
+      graph.d3Force('charge').strength(-120);
+      graph.d3Force('center').strength(0.03);
+      graph.d3Force('link').distance(link => {
+        switch (link.relationType) {
+          case 'parent_of': return 40;
+          case 'depends_on': return 60;
+          case 'blocks': return 50;
+          default: return 80;
+        }
+      });
+    } catch (e) {
+      // Forces may not be ready yet
+    }
+
+    // Track mouse for tooltip positioning
+    container.addEventListener('mousemove', (e) => {
+      if (hoveredNode) {
+        showTooltip(hoveredNode, e);
+      }
+    });
+  }
+
+  // ── Refresh (re-render with same data) ────────
+  function refreshGraph() {
+    if (!graph) return;
+    const data = getFilteredData();
+    adjacencyMap = buildAdjacencyMap(data.links);
+    graph.graphData({ nodes: data.nodes, links: data.links });
+  }
+
+  // ── Table row highlight ───────────────────────
+  function highlightTableRow(nodeId) {
+    document.querySelectorAll('#node-table-body .node-row').forEach(row => {
+      row.classList.toggle('selected-row', row.dataset.id === nodeId);
+    });
+  }
+
+  // ── Zoom Controls ─────────────────────────────
+  function zoomIn() {
+    if (!graph) return;
+    const currentZoom = graph.zoom();
+    graph.zoom(currentZoom * 1.4, 300);
+  }
+
+  function zoomOut() {
+    if (!graph) return;
+    const currentZoom = graph.zoom();
+    graph.zoom(currentZoom / 1.4, 300);
+  }
+
+  function zoomFit() {
+    if (!graph) return;
+    graph.zoomToFit(400, 40);
+  }
+
+  // ── Set Theme ─────────────────────────────────
+  function setTheme(newTheme) {
+    theme = newTheme;
+    if (graph) {
+      graph.backgroundColor(theme === 'dark' ? '#1a1b1e' : '#f8f9fa');
+    }
+  }
+
+  // ── Set Filters ───────────────────────────────
+  function setFilters({ edgeTypes, depth }) {
+    if (edgeTypes !== undefined) {
+      activeEdgeTypes = new Set(edgeTypes);
+    }
+    if (depth !== undefined) {
+      focusDepth = depth;
+    }
+    refreshGraph();
+  }
+
+  // ── Resize ────────────────────────────────────
+  function resize() {
+    if (!graph) return;
+    const container = document.getElementById(containerId);
+    if (container) {
+      graph.width(container.clientWidth);
+      graph.height(container.clientHeight);
+    }
+  }
+
+  // ── Select Node (programmatic) ────────────────
+  function selectNode(nodeId) {
+    if (!graph) return;
+    const node = allNodes.find(n => n.id === nodeId);
+    if (node) {
+      selectedNode = node;
+      highlightTableRow(nodeId);
+      if (focusDepth > 0) refreshGraph();
+      graph.centerAt(node.x, node.y, 500);
+      graph.zoom(2, 500);
+    }
+  }
+
+  function getSelectedNode() {
+    return selectedNode;
+  }
+
+  // ── Destroy ───────────────────────────────────
+  function destroy() {
+    if (graph) {
+      graph._destructor && graph._destructor();
+      graph = null;
+    }
+    if (tooltipEl) {
+      tooltipEl.remove();
+      tooltipEl = null;
+    }
+    hoveredNode = null;
+    selectedNode = null;
+    highlightNodes = new Set();
+    highlightLinks = new Set();
+  }
+
+  // ── Get all unique edge types from data ───────
+  function getEdgeTypes() {
+    return [...new Set(allLinks.map(l => l.relationType))];
+  }
+
+  return {
+    init, render, setTheme, resize, destroy,
+    setFilters, selectNode, getSelectedNode,
+    zoomIn, zoomOut, zoomFit, getEdgeTypes,
+  };
+})();

package/dist/web/public/js/graph-renderer.js

@@ -0,0 +1,62 @@
+/**
+ * Mermaid.js graph renderer
+ */
+const GraphRenderer = (() => {
+  let initialized = false;
+
+  function init(theme = 'default') {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: theme,
+      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'basis' },
+      securityLevel: 'loose',
+    });
+    initialized = true;
+  }
+
+  async function render(container, mermaidCode) {
+    if (!initialized) init();
+
+    if (!mermaidCode || mermaidCode.trim().length === 0) {
+      container.innerHTML = '<div class="empty-state"><p>No graph data to display.</p></div>';
+      return;
+    }
+
+    try {
+      // Clear previous
+      container.innerHTML = '';
+
+      const id = 'mermaid-' + Date.now();
+      const { svg } = await mermaid.render(id, mermaidCode);
+      container.innerHTML = svg;
+
+      // Make nodes clickable
+      const svgEl = container.querySelector('svg');
+      if (svgEl) {
+        svgEl.querySelectorAll('.node').forEach(node => {
+          node.style.cursor = 'pointer';
+          node.addEventListener('click', () => {
+            const nodeId = node.id?.replace(/^flowchart-/, '').replace(/-\d+$/, '');
+            if (nodeId) {
+              document.dispatchEvent(new CustomEvent('node-clicked', { detail: { nodeId } }));
+            }
+          });
+        });
+      }
+    } catch (err) {
+      container.innerHTML = `<div class="error-state"><p>Render error: ${err.message}</p><pre>${escapeHtml(mermaidCode)}</pre></div>`;
+    }
+  }
+
+  function setTheme(theme) {
+    init(theme);
+  }
+
+  function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  return { init, render, setTheme };
+})();