@joekytc/dsh-swarm 0.1.2 → 0.2.0

package/skills/llm-wiki-skill/packages/graph-engine/src/render/controls.ts

@@ -0,0 +1,288 @@
+import type { GraphTypeFilters } from "../types";
+import { graphNodeTypeLabel } from "../graph-node";
+import type { CommunityLegendRow } from "./legend";
+import type { GraphToolbarPanelState } from "./toolbar";
+
+export interface GraphToolbarDom {
+  element: HTMLElement;
+  panel: HTMLElement;
+  filtersPanel: HTMLElement;
+  buttons: {
+    filters: HTMLButtonElement;
+    legend: HTMLButtonElement;
+  };
+}
+
+export interface CommunityLegendDom {
+  element: HTMLElement;
+  rows: Map<string, HTMLButtonElement>;
+}
+
+export interface SearchControlDom {
+  element: HTMLElement;
+  input: HTMLInputElement;
+  status: HTMLElement;
+}
+
+export function createGraphToolbar(
+  ownerDocument: Document,
+  options: {
+    panelState: GraphToolbarPanelState;
+    typeFilters: GraphTypeFilters;
+    onPanelToggle: (panel: Exclude<GraphToolbarPanelState, "closed">) => void;
+    onTypeFilterToggle: (type: string, enabled: boolean) => void;
+    onReset: () => void;
+  }
+): GraphToolbarDom {
+  const element = ownerDocument.createElement("nav");
+  element.className = "graph-toolbar";
+  element.dataset.panel = options.panelState;
+  element.setAttribute("aria-label", "图谱控制");
+  element.addEventListener("click", (event) => event.stopPropagation());
+
+  const actions = ownerDocument.createElement("div");
+  actions.className = "graph-toolbar-actions";
+  const filters = createToolbarButton(ownerDocument, "筛选", options.panelState === "filters");
+  filters.addEventListener("click", () => options.onPanelToggle("filters"));
+  const legend = createToolbarButton(ownerDocument, "图例", options.panelState === "legend");
+  legend.addEventListener("click", () => options.onPanelToggle("legend"));
+  const reset = createToolbarButton(ownerDocument, "回全图", false);
+  reset.addEventListener("click", options.onReset);
+  actions.append(filters, legend, reset);
+
+  const panel = ownerDocument.createElement("section");
+  panel.className = "graph-toolbar-panel";
+  panel.dataset.state = options.panelState;
+  const filtersPanel = ownerDocument.createElement("div");
+  filtersPanel.className = "graph-toolbar-section graph-toolbar-filters";
+  filtersPanel.appendChild(createTypeFilterGroup(ownerDocument, options.typeFilters, options.onTypeFilterToggle));
+
+  const legendPanel = ownerDocument.createElement("div");
+  legendPanel.className = "graph-toolbar-section graph-toolbar-legend";
+  const legendTitle = ownerDocument.createElement("div");
+  legendTitle.className = "graph-toolbar-section-title";
+  legendTitle.textContent = "边";
+  legendPanel.appendChild(legendTitle);
+  legendPanel.appendChild(createEdgeLegend(ownerDocument));
+
+  panel.append(filtersPanel, legendPanel);
+  element.append(actions, panel);
+  return { element, panel, filtersPanel, buttons: { filters, legend } };
+}
+
+export function createCommunityLegend(
+  ownerDocument: Document,
+  options: {
+    rows: CommunityLegendRow[];
+    collapsed: boolean;
+    onToggle: () => void;
+    onHover: (id: string | null) => void;
+    onSelect: (id: string) => void;
+  }
+): CommunityLegendDom {
+  const element = ownerDocument.createElement("aside");
+  element.className = "community-legend";
+  element.dataset.state = options.collapsed ? "collapsed" : "open";
+  const header = ownerDocument.createElement("button");
+  header.type = "button";
+  header.className = "community-legend-toggle";
+  header.setAttribute("aria-expanded", options.collapsed ? "false" : "true");
+  header.textContent = "社区";
+  header.addEventListener("click", (event) => {
+    event.stopPropagation();
+    options.onToggle();
+  });
+  element.appendChild(header);
+
+  const list = ownerDocument.createElement("div");
+  list.className = "community-legend-list";
+  const rowMap = new Map<string, HTMLButtonElement>();
+  for (const row of options.rows) {
+    const button = ownerDocument.createElement("button");
+    button.type = "button";
+    button.className = "community-legend-row";
+    button.dataset.communityId = row.id;
+    button.addEventListener("pointerenter", () => options.onHover(row.id));
+    button.addEventListener("pointerleave", () => options.onHover(null));
+    button.addEventListener("click", (event) => {
+      event.stopPropagation();
+      options.onSelect(row.id);
+    });
+    const swatch = ownerDocument.createElement("span");
+    swatch.className = "community-legend-swatch";
+    swatch.style.background = row.color;
+    const label = ownerDocument.createElement("span");
+    label.className = "community-legend-label";
+    label.textContent = row.label;
+    const count = ownerDocument.createElement("span");
+    count.className = "community-legend-count";
+    count.textContent = `${row.pageCount} 页`;
+    button.append(swatch, label, count);
+    list.appendChild(button);
+    rowMap.set(row.id, button);
+  }
+  element.appendChild(list);
+  return { element, rows: rowMap };
+}
+
+export function createSearchControl(
+  ownerDocument: Document,
+  options: {
+    open: boolean;
+    query: string;
+    onOpen: () => void;
+    onQuery: (query: string) => void;
+    onNext: () => void;
+    onPrevious: () => void;
+    onActivate: () => void;
+    onClose: () => void;
+  }
+): SearchControlDom {
+  const element = ownerDocument.createElement("div");
+  element.className = "graph-search";
+  element.dataset.state = options.open ? "open" : "closed";
+  const input = ownerDocument.createElement("input");
+  input.type = "search";
+  input.className = "graph-search-input";
+  input.placeholder = "搜索图谱";
+  input.setAttribute("aria-label", "搜索图谱");
+  input.value = options.query;
+  input.addEventListener("focus", options.onOpen);
+  input.addEventListener("input", () => options.onQuery(input.value));
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      options.onNext();
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      options.onPrevious();
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      options.onActivate();
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      options.onClose();
+    }
+  });
+  const status = ownerDocument.createElement("span");
+  status.className = "graph-search-status";
+  status.textContent = options.query ? "0 个结果" : "输入关键词";
+  element.append(input, status);
+  return { element, input, status };
+}
+
+function createEdgeLegend(ownerDocument: Document): HTMLElement {
+  const legend = ownerDocument.createElement("div");
+  legend.className = "graph-edge-legend";
+  const relations = ownerDocument.createElement("div");
+  relations.className = "graph-edge-legend-group";
+  relations.appendChild(createEdgeLegendHeading(ownerDocument, "关系类型"));
+  for (const item of [
+    { label: "实现 / 依赖 / 衍生", className: "relation-dependency" },
+    { label: "对比", className: "relation-contrast" },
+    { label: "矛盾", className: "relation-conflict" }
+  ]) {
+    relations.appendChild(createEdgeLegendRelation(ownerDocument, item.label, item.className));
+  }
+
+  const confidences = ownerDocument.createElement("div");
+  confidences.className = "graph-edge-legend-group";
+  confidences.appendChild(createEdgeLegendHeading(ownerDocument, "置信度"));
+  for (const item of [
+    { label: "原文", className: "confidence-extracted" },
+    { label: "推断", className: "confidence-inferred" },
+    { label: "待确认", className: "confidence-ambiguous" }
+  ]) {
+    confidences.appendChild(createEdgeLegendConfidence(ownerDocument, item.label, item.className));
+  }
+
+  legend.append(relations, confidences);
+  return legend;
+}
+
+function createEdgeLegendHeading(ownerDocument: Document, text: string): HTMLElement {
+  const heading = ownerDocument.createElement("div");
+  heading.className = "graph-edge-legend-heading";
+  heading.textContent = text;
+  return heading;
+}
+
+function createEdgeLegendRelation(ownerDocument: Document, label: string, className: string): HTMLElement {
+  const row = ownerDocument.createElement("div");
+  row.className = `graph-edge-legend-row graph-edge-legend-relation ${className}`;
+  const swatch = ownerDocument.createElement("span");
+  swatch.className = "graph-edge-legend-swatch";
+  const text = ownerDocument.createElement("span");
+  text.textContent = label;
+  row.append(swatch, text);
+  return row;
+}
+
+function createEdgeLegendConfidence(ownerDocument: Document, label: string, className: string): HTMLElement {
+  const row = ownerDocument.createElement("div");
+  row.className = `graph-edge-legend-row graph-edge-legend-confidence ${className}`;
+  const line = ownerDocument.createElement("span");
+  line.className = "graph-edge-legend-line";
+  const text = ownerDocument.createElement("span");
+  text.textContent = label;
+  row.append(line, text);
+  return row;
+}
+
+function createTypeFilterGroup(
+  ownerDocument: Document,
+  typeFilters: GraphTypeFilters,
+  onToggle: (type: string, enabled: boolean) => void
+): HTMLElement {
+  const group = ownerDocument.createElement("fieldset");
+  group.className = "graph-type-filter";
+  const title = ownerDocument.createElement("legend");
+  title.className = "graph-toolbar-section-title";
+  title.textContent = "类型筛选";
+  group.appendChild(title);
+
+  for (const type of orderedGraphNodeTypes(typeFilters)) {
+    const label = ownerDocument.createElement("label");
+    label.className = "graph-type-filter-option";
+    const input = ownerDocument.createElement("input");
+    input.type = "checkbox";
+    input.checked = typeFilters[type] !== false;
+    input.dataset.type = type;
+    input.addEventListener("change", () => onToggle(type, input.checked));
+    const text = ownerDocument.createElement("span");
+    text.textContent = graphNodeTypeLabel(type);
+    label.append(input, text);
+    group.appendChild(label);
+  }
+
+  return group;
+}
+
+function orderedGraphNodeTypes(typeFilters: GraphTypeFilters): string[] {
+  const preferred = ["entity", "topic", "source"];
+  const seen = new Set<string>();
+  const ordered: string[] = [];
+  for (const type of preferred) {
+    if (Object.hasOwn(typeFilters, type)) {
+      ordered.push(type);
+      seen.add(type);
+    }
+  }
+  for (const type of Object.keys(typeFilters).sort()) {
+    if (!seen.has(type)) ordered.push(type);
+  }
+  return ordered;
+}
+
+function createToolbarButton(ownerDocument: Document, label: string, active: boolean): HTMLButtonElement {
+  const button = ownerDocument.createElement("button");
+  button.type = "button";
+  button.className = "graph-toolbar-button";
+  button.dataset.active = active ? "true" : "false";
+  button.textContent = label;
+  return button;
+}

package/skills/llm-wiki-skill/packages/graph-engine/src/render/dom-svg-renderer.ts

@@ -0,0 +1,180 @@
+import type { NodeId, ThemeId } from "../types";
+import { createGraphAggregationContainerElement, type GraphAggregationContainerElementHandlers } from "./aggregation-containers";
+import { createCommunityWashElement } from "./community-washes";
+import { createGraphEdgeElement, type GraphEdgeElementHandlers } from "./edges";
+import { createGraphMinimap } from "./minimap";
+import type { RenderableGraph } from "./model";
+import { createGraphNodeElement, type GraphNodeElementHandlers } from "./nodes";
+import type { PaintedGraphDom } from "./render-context";
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+export interface DomSvgGraphPaintHandlers extends GraphNodeElementHandlers, GraphEdgeElementHandlers, GraphAggregationContainerElementHandlers {
+  onNodeClick: (id: NodeId, additive: boolean) => void;
+  onNodeDoubleClick: (id: string) => boolean;
+  onNodePreviewEnter: (id: NodeId) => void;
+  onEdgePreviewEnter: (id: string) => void;
+  onEdgePreviewLeave: () => void;
+  onNodePreviewLeave: () => void;
+}
+
+export interface PaintDomSvgGraphInput {
+  ownerDocument: Document;
+  root: HTMLElement;
+  graph: RenderableGraph;
+  theme: ThemeId;
+  hasHostReader: boolean;
+  handlers: DomSvgGraphPaintHandlers;
+}
+
+export function paintDomSvgGraph(input: PaintDomSvgGraphInput): PaintedGraphDom {
+  const { ownerDocument, root, graph, handlers } = input;
+  root.replaceChildren();
+  root.dataset.theme = input.theme;
+  root.dataset.baseDensity = graph.densityMode;
+  root.dataset.interactionMode = root.dataset.interactionMode || "idle";
+  root.dataset.interactionMaxUpdates = String(graph.interaction.maxUpdatedObjects);
+  root.dataset.interactionUpdatedObjects = String(graph.interaction.updatedObjects);
+  root.dataset.interactionHiddenObjects = String(graph.interaction.hiddenObjects);
+  root.dataset.interactionPreservedNodes = String(graph.interaction.preservedNodeIds.length);
+  root.dataset.communityQuality = graph.communityQuality.level;
+  root.dataset.communityBoundaryCertainty = graph.communityQuality.boundaryCertainty;
+  root.dataset.communityAuxiliaryViews = graph.communityQuality.auxiliaryViews.map((view) => view.id).join(",");
+  root.dataset.communityMapState = graph.focus?.kind === "community" ? "lightweight" : "none";
+
+  const painted = emptyPaintedDom();
+  const contentLayer = ownerDocument.createElement("div");
+  contentLayer.className = "graph-content-layer";
+  contentLayer.dataset.viewportLayer = "true";
+  painted.contentLayer = contentLayer;
+
+  const svg = ownerDocument.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("class", "llm-wiki-graph-svg");
+  svg.dataset.graphBlank = "true";
+  setGraphSvgViewBox(svg, graph);
+  svg.setAttribute("preserveAspectRatio", "none");
+  svg.setAttribute("aria-hidden", "true");
+  painted.svgElement = svg;
+
+  const washLayer = ownerDocument.createElementNS(SVG_NS, "g");
+  washLayer.setAttribute("class", "community-wash-layer");
+  for (const community of graph.communities) {
+    const ellipse = createCommunityWashElement(ownerDocument, community);
+    if (!ellipse) continue;
+    washLayer.appendChild(ellipse);
+    painted.communityWashElements.set(community.id, ellipse);
+  }
+  svg.appendChild(washLayer);
+
+  const edgeLayer = ownerDocument.createElementNS(SVG_NS, "g");
+  edgeLayer.setAttribute("class", "edge-layer");
+  for (const edge of graph.edges) {
+    const path = createGraphEdgeElement(ownerDocument, edge, handlers);
+    edgeLayer.appendChild(path);
+    painted.edgeElements.set(edge.id, path);
+  }
+  svg.appendChild(edgeLayer);
+  contentLayer.appendChild(svg);
+
+  const nodeLayer = ownerDocument.createElement("div");
+  nodeLayer.className = "node-layer";
+  for (const container of graph.aggregationContainers) {
+    const button = createGraphAggregationContainerElement(ownerDocument, container, handlers);
+    painted.aggregationContainerElements.set(container.id, button);
+    nodeLayer.appendChild(button);
+  }
+  for (const node of graph.nodes) {
+    const button = createGraphNodeElement(ownerDocument, node, handlers, {
+      communityMap: graph.focus?.kind === "community"
+    });
+    painted.nodeElements.set(node.id, button);
+    painted.basePoints.set(node.id, node.point);
+    nodeLayer.appendChild(button);
+  }
+  contentLayer.appendChild(nodeLayer);
+  root.appendChild(contentLayer);
+
+  const preview = ownerDocument.createElement("aside");
+  preview.className = "graph-hover-preview";
+  preview.dataset.state = "closed";
+  preview.setAttribute("aria-live", "polite");
+  root.appendChild(preview);
+  painted.previewElement = preview;
+
+  const qualityNotice = createCommunityQualityNotice(ownerDocument, graph);
+  if (qualityNotice) root.appendChild(qualityNotice);
+
+  const minimap = createGraphMinimap(ownerDocument, graph.minimap);
+  painted.miniViewportElement = minimap.viewportElement;
+  painted.miniNodeElements = minimap.nodeElements;
+  root.appendChild(minimap.element);
+
+  if (!input.hasHostReader) {
+    const reader = ownerDocument.createElement("aside");
+    reader.className = "graph-reader";
+    reader.dataset.state = graph.selectedNodeId ? "open" : "closed";
+    root.appendChild(reader);
+    painted.readerElement = reader;
+
+    const selectionPanel = ownerDocument.createElement("aside");
+    selectionPanel.className = "graph-selection-panel";
+    selectionPanel.dataset.state = "closed";
+    root.appendChild(selectionPanel);
+    painted.selectionElement = selectionPanel;
+  }
+
+  return painted;
+}
+
+function createCommunityQualityNotice(ownerDocument: Document, graph: RenderableGraph): HTMLElement | null {
+  if (!graph.communityQuality.warning) return null;
+  const notice = ownerDocument.createElement("aside");
+  notice.className = "graph-quality-notice";
+  notice.dataset.qualityLevel = graph.communityQuality.level;
+  notice.dataset.boundaryCertainty = graph.communityQuality.boundaryCertainty;
+  notice.setAttribute("aria-live", "polite");
+
+  const label = ownerDocument.createElement("span");
+  label.className = "graph-quality-notice-label";
+  label.textContent = graph.communityQuality.level === "poor" ? "社区划分可信度低" : "社区划分可信度偏弱";
+  notice.appendChild(label);
+
+  for (const view of graph.communityQuality.auxiliaryViews) {
+    const button = ownerDocument.createElement("button");
+    button.type = "button";
+    button.className = "graph-quality-notice-action";
+    button.dataset.auxiliaryViewId = view.id;
+    button.textContent = view.label;
+    notice.appendChild(button);
+  }
+  return notice;
+}
+
+function setGraphSvgViewBox(svg: SVGSVGElement, graph: RenderableGraph): void {
+  const bounds = graph.worldBounds;
+  svg.setAttribute("viewBox", `${bounds.minX} ${bounds.minY} ${bounds.width} ${bounds.height}`);
+}
+
+function emptyPaintedDom(): PaintedGraphDom {
+  return {
+    contentLayer: null,
+    svgElement: null,
+    edgeElements: new Map(),
+    communityWashElements: new Map(),
+    aggregationContainerElements: new Map(),
+    nodeElements: new Map(),
+    miniNodeElements: new Map(),
+    miniViewportElement: null,
+    basePoints: new Map(),
+    readerElement: null,
+    selectionElement: null,
+    searchElement: null,
+    searchInput: null,
+    searchStatusElement: null,
+    toolbarElement: null,
+    toolbarPanelElement: null,
+    legendElement: null,
+    legendRows: new Map(),
+    previewElement: null
+  };
+}

package/skills/llm-wiki-skill/packages/graph-engine/src/render/edges.ts

@@ -0,0 +1,51 @@
+import type { RenderableEdge } from "./model";
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+export interface GraphEdgeElementHandlers {
+  onEdgePreviewEnter: (id: string) => void;
+  onEdgePreviewLeave: () => void;
+}
+
+export function createGraphEdgeElement(
+  ownerDocument: Document,
+  edge: RenderableEdge,
+  handlers: GraphEdgeElementHandlers
+): SVGPathElement {
+  const path = ownerDocument.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", edge.path);
+  path.setAttribute("class", `edge confidence-${edge.confidence} ${edge.relationClass}`);
+  path.setAttribute("data-from", edge.source);
+  path.setAttribute("data-to", edge.target);
+  path.setAttribute("data-edge-id", edge.id);
+  path.setAttribute("data-confidence", edge.confidence);
+  path.setAttribute("data-relation-type", edge.relationType);
+  path.setAttribute("data-skeleton", edge.skeleton ? "true" : "false");
+  path.setAttribute("data-traceable", edge.traceable ? "true" : "false");
+  path.setAttribute("aria-label", `${edge.relationType} · ${edgeConfidenceLabel(edge.confidence)}`);
+  path.setAttribute("tabindex", "0");
+  path.addEventListener("pointerenter", () => handlers.onEdgePreviewEnter(edge.id));
+  path.addEventListener("pointerleave", () => handlers.onEdgePreviewLeave());
+  path.addEventListener("focus", () => handlers.onEdgePreviewEnter(edge.id));
+  path.addEventListener("blur", () => handlers.onEdgePreviewLeave());
+  path.style.strokeWidth = String(edge.strokeWidth);
+  path.style.setProperty("--edge-map-width", `${edge.strokeWidth}px`);
+  path.style.opacity = String(edge.opacity);
+  const title = ownerDocument.createElementNS(SVG_NS, "title");
+  title.textContent = `${edge.relationType} · ${edgeConfidenceLabel(edge.confidence)}`;
+  path.appendChild(title);
+  return path;
+}
+
+export function edgeConfidenceLabel(confidence: string): string {
+  switch (confidence) {
+    case "inferred":
+      return "推断";
+    case "ambiguous":
+      return "待确认";
+    case "unverified":
+      return "未验证";
+    default:
+      return "原文";
+  }
+}