memento-mcp-server 2.0.5 → 2.2.0

package/static/graph.html

@@ -167,7 +167,8 @@
       flex-wrap: wrap;
     }
 
-    .type-check {
+    .type-check,
+    .relation-check {
       display: flex;
       align-items: center;
       gap: 3px;
@@ -175,7 +176,18 @@
       cursor: pointer;
     }
 
-    .type-check input { cursor: pointer; }
+    .type-check input,
+    .relation-check input { cursor: pointer; }
+
+    #local-depth-select,
+    #local-focus-hint {
+      font-size: var(--font-size-xs);
+      color: var(--color-graph-text-muted);
+    }
+
+    #local-focus-hint {
+      white-space: nowrap;
+    }
 
     .importance-row {
       display: flex;
@@ -476,6 +488,14 @@
       stroke-opacity: 0.12;
     }
 
+    .node.focus-dim {
+      opacity: 0.18;
+    }
+
+    .link.focus-dim {
+      stroke-opacity: 0.12;
+    }
+
     /* Dashboard embed — iframe viewport + Embedding Map 등과 동일한 라이트 패널 스타일 */
     .graph-view--embedded {
       height: 100%;
@@ -567,6 +587,15 @@
         <label class="type-check"><input type="checkbox" value="working" checked> Working</label>
       </div>
     </div>
+    <div class="filter-group graph-session-only">
+      <label>관계</label>
+      <div class="type-checks">
+        <label class="relation-check"><input type="checkbox" value="supports" checked> supports</label>
+        <label class="relation-check"><input type="checkbox" value="related_to" checked> related_to</label>
+        <label class="relation-check"><input type="checkbox" value="extracted_from" checked> extracted_from</label>
+        <label class="relation-check"><input type="checkbox" value="contradicts" checked> contradicts</label>
+      </div>
+    </div>
     <div class="filter-group graph-session-only">
       <label>중요도 ≥</label>
       <div class="importance-row">
@@ -603,6 +632,17 @@
       </label>
       <span id="orphan-hidden-badge" aria-live="polite"></span>
     </div>
+    <div class="filter-group graph-session-only">
+      <label for="local-mode-toggle">주변만 보기</label>
+      <input type="checkbox" id="local-mode-toggle">
+      <label for="local-depth-select">깊이</label>
+      <select id="local-depth-select">
+        <option value="1">1</option>
+        <option value="2" selected>2</option>
+        <option value="3">3</option>
+      </select>
+      <span id="local-focus-hint"></span>
+    </div>
     <button id="apply-btn" class="graph-session-only graph-action-button m-button m-button--primary">필터 적용</button>
     <button id="reset-btn" class="graph-session-only graph-action-button m-button m-button--secondary">초기화</button>
     <div class="header-spacer"></div>
@@ -665,6 +705,7 @@
   <script src="/static/js/graph-shared.js"></script>
   <script src="/static/js/graph-detail.js"></script>
   <script src="/static/js/graph-search.js"></script>
+  <script src="/static/js/neighbor-focus.js"></script>
   <script src="/static/js/graph-render.js"></script>
   <script src="/static/js/graph-fetch.js"></script>
   <script src="/static/js/graph.js"></script>

package/static/js/anchor-map-render.js

@@ -188,6 +188,24 @@
     return d3.drag().on('start', dragstarted).on('drag', dragged).on('end', dragended);
   }
 
+  function applyNeighborFocus(focusId) {
+    const api = global.__MEMENTO_NEIGHBOR_FOCUS__;
+    if (!api || !state.svg) return;
+    const keepIds = api.collectKeepIds(focusId, state.links);
+    state.svg.selectAll('.node').classed('focus-dim', function (d) {
+      return !keepIds.has(d.id);
+    });
+    state.svg.selectAll('.link').classed('focus-dim', function (d) {
+      return !api.edgeTouchesKeep(d, keepIds);
+    });
+  }
+
+  function clearNeighborFocus() {
+    if (!state.svg) return;
+    state.svg.selectAll('.node').classed('focus-dim', false);
+    state.svg.selectAll('.link').classed('focus-dim', false);
+  }
+
   function buildLinkSelection(g, links) {
     return g.append('g')
       .selectAll('line')
@@ -220,7 +238,9 @@
       .attr('stroke-dasharray', function (d) { return d.embedding_missing ? '5,3' : null; })
       .attr('opacity', function (d) { return d.embedding_missing ? 0.6 : 1.0; })
       .call(makeDragBehavior(simulation))
-      .on('click', function (event, d) { event.stopPropagation(); ns.selectNode(d); });
+      .on('click', function (event, d) { event.stopPropagation(); ns.selectNode(d); })
+      .on('mouseover', function (_event, d) { applyNeighborFocus(d.id); })
+      .on('mouseout', clearNeighborFocus);
   }
 
   function labelTextFor(d) {

package/static/js/graph-detail.js

@@ -43,8 +43,15 @@
   }
 
   ns.showDetail = function showDetail(d) {
+    if (d && d.id != null && d.id !== '') {
+      ns.state.localFocusId = d.id;
+    }
+    ns.updateLocalFocusHint(d);
     ns.dom.detailContent.innerHTML = buildDetailRows(d);
     ns.dom.detailPanel.style.display = 'block';
+    if (ns.state.localMode && ns.state.rawGraphNodes) {
+      ns.renderVisibleGraph();
+    }
   };
 
   ns.closePanel = function closePanel() {

package/static/js/graph-fetch.js

@@ -14,10 +14,16 @@
   ns.buildUrl = function buildUrl() {
     const { impSlider, fullGraphToggle } = ns.dom;
     const checked = [...document.querySelectorAll('.type-check input:checked')].map((el) => el.value);
+    const relationChecked = [...document.querySelectorAll('.relation-check input:checked')].map(
+      (el) => el.value
+    );
     const params = new URLSearchParams();
     if (checked.length < 4 && checked.length > 0) {
       params.set('types', checked.join(','));
     }
+    if (relationChecked.length < 4 && relationChecked.length > 0) {
+      params.set('relation_types', relationChecked.join(','));
+    }
     const imp = parseFloat(impSlider.value);
     if (imp > 0) {
       params.set('min_importance', imp.toFixed(2));
@@ -69,10 +75,19 @@
   function getVisibleGraph() {
     const nodes = state.rawGraphNodes ?? [];
     const edges = state.rawGraphEdges ?? [];
-    if (!ns.dom.orphanToggle.checked) {
-      return { nodes, edges, hiddenCount: 0 };
+    const visible = ns.dom.orphanToggle.checked
+      ? ns.filterConnectedNodes(nodes, edges)
+      : { nodes, edges, hiddenCount: 0 };
+    if (!state.localMode || !state.localFocusId) {
+      return visible;
     }
-    return ns.filterConnectedNodes(nodes, edges);
+    const trimmed = ns.trimToLocalDepth(
+      visible.nodes,
+      visible.edges,
+      state.localFocusId,
+      state.localDepth
+    );
+    return { nodes: trimmed.nodes, edges: trimmed.edges, hiddenCount: visible.hiddenCount };
   }
 
   function updateOrphanBadge(hiddenCount) {
@@ -83,6 +98,7 @@
   ns.renderVisibleGraph = function renderVisibleGraph() {
     const visible = getVisibleGraph();
     updateOrphanBadge(visible.hiddenCount);
+    ns.updateLocalFocusHint();
     state.lastGraphNodes = visible.nodes;
     state.lastGraphEdges = visible.edges;
 

package/static/js/graph-render.js

@@ -24,6 +24,24 @@
     return { svg, g };
   }
 
+  // One marker per SVG. userSpaceOnUse keeps the head a fixed size while stroke width follows confidence.
+  function appendArrowMarker(svg) {
+    svg
+      .append('defs')
+      .append('marker')
+      .attr('id', 'memory-graph-arrow')
+      .attr('viewBox', '0 -5 10 10')
+      .attr('refX', 10)
+      .attr('refY', 0)
+      .attr('markerWidth', 6)
+      .attr('markerHeight', 6)
+      .attr('orient', 'auto')
+      .attr('markerUnits', 'userSpaceOnUse')
+      .append('path')
+      .attr('d', 'M0,-5L10,0L0,5')
+      .attr('fill', 'context-stroke');
+  }
+
   function attachZoomAndClick(svg, g) {
     const { svgEl } = ns.dom;
     svg.call(
@@ -68,7 +86,8 @@
       .append('line')
       .attr('class', 'link')
       .attr('stroke', (d) => palette.edgeColors[d.relation_type] ?? palette.edgeColors.default)
-      .attr('stroke-width', (d) => Math.max(1, (d.confidence ?? 1) * 3));
+      .attr('stroke-width', (d) => Math.max(1, (d.confidence ?? 1) * 3))
+      .attr('marker-end', 'url(#memory-graph-arrow)');
     state.renderedLinkSelection = link;
     return link;
   }
@@ -96,12 +115,36 @@
       });
   }
 
+  function applyNeighborFocus(focusId) {
+    const api = global.__MEMENTO_NEIGHBOR_FOCUS__;
+    if (!api) {
+      return;
+    }
+    const keepIds = api.collectKeepIds(focusId, state.lastGraphEdges);
+    if (state.renderedNodeSelection) {
+      state.renderedNodeSelection.classed('focus-dim', (d) => !keepIds.has(d.id));
+    }
+    if (state.renderedLinkSelection) {
+      state.renderedLinkSelection.classed('focus-dim', (d) => !api.edgeTouchesKeep(d, keepIds));
+    }
+  }
+
+  function clearNeighborFocus() {
+    if (state.renderedNodeSelection) {
+      state.renderedNodeSelection.classed('focus-dim', false);
+    }
+    if (state.renderedLinkSelection) {
+      state.renderedLinkSelection.classed('focus-dim', false);
+    }
+  }
+
   function attachCircleHandlers(circle) {
     const { tooltip } = ns.dom;
     circle
       .on('mouseover', (_event, d) => {
         tooltip.style.display = 'block';
         tooltip.textContent = d.label;
+        applyNeighborFocus(d.id);
       })
       .on('mousemove', (event) => {
         tooltip.style.left = `${event.clientX + 12}px`;
@@ -109,6 +152,7 @@
       })
       .on('mouseout', () => {
         tooltip.style.display = 'none';
+        clearNeighborFocus();
       })
       .on('click', (event, d) => {
         event.stopPropagation();
@@ -149,13 +193,29 @@
     return { node, circle };
   }
 
+  // The marker tip is the line end. Stopping at the node center hides the arrow under the circle.
+  function arrowTargetPoint(source, target) {
+    const dx = target.x - source.x;
+    const dy = target.y - source.y;
+    const dist = Math.hypot(dx, dy);
+    const radius = target.__graphRadius ?? 8;
+    if (!dist || dist <= radius) {
+      return { x: target.x, y: target.y };
+    }
+    const scale = (dist - radius) / dist;
+    return {
+      x: source.x + dx * scale,
+      y: source.y + dy * scale,
+    };
+  }
+
   function bindSimulationTick(simulation, link, node) {
     simulation.on('tick', () => {
       link
         .attr('x1', (d) => d.source.x)
         .attr('y1', (d) => d.source.y)
-        .attr('x2', (d) => d.target.x)
-        .attr('y2', (d) => d.target.y);
+        .attr('x2', (d) => arrowTargetPoint(d.source, d.target).x)
+        .attr('y2', (d) => arrowTargetPoint(d.source, d.target).y);
       node.attr('transform', (d) => `translate(${d.x},${d.y})`);
     });
   }
@@ -164,6 +224,7 @@
     const { W, H } = getContainerSize();
     const palette = ns.getGraphPalette();
     const { svg, g } = createSvgRoot(W, H);
+    appendArrowMarker(svg);
     attachZoomAndClick(svg, g);
 
     const rScale = createRadiusScale();

package/static/js/graph-shared.js

@@ -17,6 +17,9 @@
     activeSearchQuery: '',
     renderedNodeSelection: null,
     renderedLinkSelection: null,
+    localMode: false,
+    localFocusId: null,
+    localDepth: 2,
   };
 
   ns.readGraphToken = function readGraphToken(name, fallback = '') {
@@ -97,6 +100,91 @@
     };
   };
 
+  /**
+   * 클릭한 노드에서 무방향 BFS 로 depth 홉(1..3) 안의 노드·엣지만 남긴다.
+   * focus 가 없으면 입력을 그대로 돌려준다.
+   */
+  ns.trimToLocalDepth = function trimToLocalDepth(nodes, edges, focusId, depth) {
+    if (focusId == null || focusId === '') {
+      return { nodes, edges };
+    }
+    const nodeList = Array.isArray(nodes) ? nodes : [];
+    const edgeList = Array.isArray(edges) ? edges : [];
+    let hops = Math.floor(Number(depth));
+    if (!Number.isFinite(hops)) {
+      hops = 2;
+    } else if (hops < 1) {
+      hops = 1;
+    } else if (hops > 3) {
+      hops = 3;
+    }
+
+    const adjacent = new Map();
+    const link = (from, to) => {
+      if (from == null || to == null) {
+        return;
+      }
+      const list = adjacent.get(from);
+      if (list) {
+        list.push(to);
+      } else {
+        adjacent.set(from, [to]);
+      }
+    };
+    for (const edge of edgeList) {
+      const sourceId = ns.getEdgeNodeId(edge.source);
+      const targetId = ns.getEdgeNodeId(edge.target);
+      link(sourceId, targetId);
+      if (sourceId !== targetId) {
+        link(targetId, sourceId);
+      }
+    }
+
+    const keep = new Set([focusId]);
+    let frontier = [focusId];
+    for (let hop = 0; hop < hops; hop += 1) {
+      const next = [];
+      for (const id of frontier) {
+        const neighbors = adjacent.get(id) ?? [];
+        for (const neighborId of neighbors) {
+          if (!keep.has(neighborId)) {
+            keep.add(neighborId);
+            next.push(neighborId);
+          }
+        }
+      }
+      frontier = next;
+    }
+
+    return {
+      nodes: nodeList.filter((node) => keep.has(node.id)),
+      edges: edgeList.filter((edge) => {
+        const sourceId = ns.getEdgeNodeId(edge.source);
+        const targetId = ns.getEdgeNodeId(edge.target);
+        return keep.has(sourceId) && keep.has(targetId);
+      }),
+    };
+  };
+
+  ns.updateLocalFocusHint = function updateLocalFocusHint(node) {
+    const hint = ns.dom && ns.dom.localFocusHint;
+    if (!hint) {
+      return;
+    }
+    const id = ns.state.localFocusId;
+    if (id == null || id === '') {
+      hint.textContent = '';
+      hint.title = '';
+      return;
+    }
+    const matched = node && node.id === id
+      ? node
+      : (ns.state.rawGraphNodes ?? []).find((item) => item.id === id);
+    const label = matched && matched.label;
+    hint.textContent = label && label !== id ? `${label} (${id})` : String(id);
+    hint.title = String(id);
+  };
+
   ns.bindDomRefs = function bindDomRefs() {
     ns.dom = {
       svgEl: document.getElementById('graph'),
@@ -117,6 +205,9 @@
       graphModeHint: document.getElementById('graph-mode-hint'),
       orphanToggle: document.getElementById('hide-orphans-toggle'),
       orphanBadge: document.getElementById('orphan-hidden-badge'),
+      localModeToggle: document.getElementById('local-mode-toggle'),
+      localDepthSelect: document.getElementById('local-depth-select'),
+      localFocusHint: document.getElementById('local-focus-hint'),
     };
   };
 

package/static/js/graph.js

@@ -13,8 +13,13 @@
 
   ns.bindDomRefs();
 
-  const { impSlider, impVal, applyBtn, resetBtn, searchInput, searchBtn, detailPanel, svgEl, orphanToggle } =
-    ns.dom;
+  const {
+    impSlider, impVal, applyBtn, resetBtn, searchInput, searchBtn, detailPanel, svgEl, orphanToggle,
+    localModeToggle, localDepthSelect,
+  } = ns.dom;
+
+  state.localMode = Boolean(localModeToggle.checked);
+  state.localDepth = Number(localDepthSelect.value) || 2;
 
   impSlider.addEventListener('input', () => {
     impVal.textContent = parseFloat(impSlider.value).toFixed(2);
@@ -32,6 +37,23 @@
     ns.renderVisibleGraph();
   });
 
+  localModeToggle.addEventListener('change', () => {
+    state.localMode = localModeToggle.checked;
+    if (!state.rawGraphNodes) {
+      return;
+    }
+    ns.renderVisibleGraph();
+  });
+
+  localDepthSelect.addEventListener('change', () => {
+    const depth = Number(localDepthSelect.value);
+    state.localDepth = depth >= 1 && depth <= 3 ? depth : 2;
+    if (!state.rawGraphNodes) {
+      return;
+    }
+    ns.renderVisibleGraph();
+  });
+
   searchBtn.addEventListener('click', ns.applySearchFromInput);
 
   searchInput.addEventListener('keydown', (event) => {
@@ -52,6 +74,9 @@
     document.querySelectorAll('.type-check input').forEach((el) => {
       el.checked = true;
     });
+    document.querySelectorAll('.relation-check input').forEach((el) => {
+      el.checked = true;
+    });
     impSlider.value = '0';
     impVal.textContent = '0.0';
     searchInput.value = '';

package/static/js/neighbor-focus.js

@@ -0,0 +1,41 @@
+/**
+ * Neighbor focus shared by the memory graph and the anchor map.
+ */
+(function (global) {
+  'use strict';
+
+  function endpointId(endpoint) {
+    if (endpoint && typeof endpoint === 'object') {
+      return endpoint.id;
+    }
+    return endpoint;
+  }
+
+  function collectKeepIds(focusId, edges) {
+    const keepIds = new Set();
+    if (focusId != null) {
+      keepIds.add(focusId);
+    }
+    const list = Array.isArray(edges) ? edges : [];
+    for (const edge of list) {
+      const sourceId = endpointId(edge.source);
+      const targetId = endpointId(edge.target);
+      if (sourceId === focusId) {
+        keepIds.add(targetId);
+      } else if (targetId === focusId) {
+        keepIds.add(sourceId);
+      }
+    }
+    return keepIds;
+  }
+
+  function edgeTouchesKeep(edge, keepIds) {
+    return keepIds.has(endpointId(edge.source)) && keepIds.has(endpointId(edge.target));
+  }
+
+  global.__MEMENTO_NEIGHBOR_FOCUS__ = {
+    endpointId,
+    collectKeepIds,
+    edgeTouchesKeep,
+  };
+})(typeof window !== 'undefined' ? window : globalThis);