diff --git a/modules/rnetwork/components/folk-crm-view.ts b/modules/rnetwork/components/folk-crm-view.ts index 709ed81..9ed42e0 100644 --- a/modules/rnetwork/components/folk-crm-view.ts +++ b/modules/rnetwork/components/folk-crm-view.ts @@ -35,6 +35,19 @@ interface Company { createdAt?: string; } +interface CrmGraphNode { + id: string; + name: string; + type: "person" | "company"; + companyId?: string; +} + +interface CrmGraphEdge { + source: string; + target: string; + type: "works_at" | "point_of_contact"; +} + type Tab = "pipeline" | "contacts" | "companies" | "graph"; const PIPELINE_STAGES = [ @@ -69,6 +82,26 @@ class FolkCrmView extends HTMLElement { private loading = true; private error = ""; + // Graph state + private graphNodes: CrmGraphNode[] = []; + private graphEdges: CrmGraphEdge[] = []; + private graphPositions: Record = {}; + private graphLayoutDirty = true; + private graphZoom = 1; + private graphPanX = 0; + private graphPanY = 0; + private graphDraggingId: string | null = null; + private graphDragStartX = 0; + private graphDragStartY = 0; + private graphDragNodeStartX = 0; + private graphDragNodeStartY = 0; + private graphIsPanning = false; + private graphPanStartX = 0; + private graphPanStartY = 0; + private graphPanStartPanX = 0; + private graphPanStartPanY = 0; + private graphSelectedId: string | null = null; + // Guided tour private _tour!: TourEngine; private static readonly TOUR_STEPS = [ @@ -128,6 +161,7 @@ class FolkCrmView extends HTMLElement { } catch (e) { this.error = "Failed to load CRM data"; } + this.graphLayoutDirty = true; this.loading = false; this.render(); } @@ -306,12 +340,314 @@ class FolkCrmView extends HTMLElement {
${filtered.length} compan${filtered.length !== 1 ? "ies" : "y"}
`; } - // ── Graph link ── + // ── Inline Graph ── + + private buildGraphData(): { nodes: CrmGraphNode[]; edges: CrmGraphEdge[] } { + const nodes: CrmGraphNode[] = []; + const edges: CrmGraphEdge[] = []; + const seenEdges = new Set(); + + for (const c of this.companies) { + nodes.push({ id: "co:" + c.id, name: c.name || "Unknown", type: "company" }); + } + + for (const p of this.people) { + const name = this.personName(p.name); + const companyId = p.company?.id ? "co:" + p.company.id : undefined; + nodes.push({ id: "p:" + p.id, name, type: "person", companyId }); + if (companyId) { + edges.push({ source: "p:" + p.id, target: companyId, type: "works_at" }); + } + } + + // Cross-org edges from opportunities + for (const opp of this.opportunities) { + if (!opp.pointOfContact?.id || !opp.company?.id) continue; + const person = this.people.find(p => p.id === opp.pointOfContact!.id); + if (!person?.company?.id || person.company.id === opp.company.id) continue; + const key = `p:${person.id}->co:${opp.company.id}`; + if (seenEdges.has(key)) continue; + seenEdges.add(key); + edges.push({ source: "p:" + person.id, target: "co:" + opp.company.id, type: "point_of_contact" }); + } + + return { nodes, edges }; + } + + private computeGraphLayout(nodes: CrmGraphNode[], edges: CrmGraphEdge[]): Record { + const pos: Record = {}; + const W = 800, H = 600; + const cx = W / 2, cy = H / 2; + + const companies = nodes.filter(n => n.type === "company"); + const orbitR = Math.min(W, H) * 0.3; + const orgCenters: Record = {}; + + companies.forEach((org, i) => { + const angle = -Math.PI / 2 + (2 * Math.PI * i) / Math.max(companies.length, 1); + const p = { x: cx + orbitR * Math.cos(angle), y: cy + orbitR * Math.sin(angle) }; + orgCenters[org.id] = p; + pos[org.id] = { ...p }; + }); + + // Fan people around their company + const peopleByOrg: Record = {}; + for (const n of nodes) { + if (n.type === "person" && n.companyId && orgCenters[n.companyId]) { + (peopleByOrg[n.companyId] ??= []).push(n); + } + } + for (const [oid, people] of Object.entries(peopleByOrg)) { + const c = orgCenters[oid]; + const base = Math.atan2(c.y - cy, c.x - cx); + const spread = Math.PI * 0.8; + people.forEach((p, i) => { + const angle = base - spread / 2 + (spread * i) / Math.max(people.length - 1, 1); + pos[p.id] = { x: c.x + 110 * Math.cos(angle), y: c.y + 110 * Math.sin(angle) }; + }); + } + + // Unlinked nodes near center + for (const n of nodes) { + if (!pos[n.id]) { + pos[n.id] = { x: cx + (Math.random() - 0.5) * W * 0.4, y: cy + (Math.random() - 0.5) * H * 0.4 }; + } + } + + // Force iterations + const allIds = nodes.map(n => n.id).filter(id => pos[id]); + for (let iter = 0; iter < 70; iter++) { + const force: Record = {}; + for (const id of allIds) force[id] = { fx: 0, fy: 0 }; + + // Repulsion + for (let i = 0; i < allIds.length; i++) { + for (let j = i + 1; j < allIds.length; j++) { + const a = pos[allIds[i]], b = pos[allIds[j]]; + let dx = b.x - a.x, dy = b.y - a.y; + const dist = Math.max(Math.sqrt(dx * dx + dy * dy), 1); + const repel = 3000 / (dist * dist); + dx /= dist; dy /= dist; + force[allIds[i]].fx -= dx * repel; + force[allIds[i]].fy -= dy * repel; + force[allIds[j]].fx += dx * repel; + force[allIds[j]].fy += dy * repel; + } + } + + // Edge attraction + for (const edge of edges) { + const a = pos[edge.source], b = pos[edge.target]; + if (!a || !b) continue; + const dx = b.x - a.x, dy = b.y - a.y; + const dist = Math.sqrt(dx * dx + dy * dy); + const idealLen = edge.type === "works_at" ? 100 : 200; + const attract = (dist - idealLen) * 0.01; + const ux = dx / Math.max(dist, 1), uy = dy / Math.max(dist, 1); + if (force[edge.source]) { force[edge.source].fx += ux * attract; force[edge.source].fy += uy * attract; } + if (force[edge.target]) { force[edge.target].fx -= ux * attract; force[edge.target].fy -= uy * attract; } + } + + // Center gravity + for (const id of allIds) { + force[id].fx += (W / 2 - pos[id].x) * 0.002; + force[id].fy += (H / 2 - pos[id].y) * 0.002; + } + + // Apply with damping + const damping = 0.4 * (1 - iter / 70); + for (const id of allIds) { + pos[id].x += force[id].fx * damping; + pos[id].y += force[id].fy * damping; + } + } + return pos; + } + + private ensureGraphLayout() { + if (!this.graphLayoutDirty && Object.keys(this.graphPositions).length > 0) return; + const { nodes, edges } = this.buildGraphData(); + this.graphNodes = nodes; + this.graphEdges = edges; + this.graphPositions = this.computeGraphLayout(nodes, edges); + this.graphLayoutDirty = false; + } + + private fitGraphView() { + const svg = this.shadow.getElementById("graph-svg") as SVGSVGElement | null; + if (!svg) return; + this.ensureGraphLayout(); + const positions = Object.values(this.graphPositions); + if (positions.length === 0) return; + + const pad = 60; + let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; + for (const p of positions) { + if (p.x < minX) minX = p.x; + if (p.y < minY) minY = p.y; + if (p.x > maxX) maxX = p.x; + if (p.y > maxY) maxY = p.y; + } + minX -= 40; minY -= 40; maxX += 40; maxY += 40; + + const rect = svg.getBoundingClientRect(); + const svgW = rect.width || 800; + const svgH = rect.height || 600; + const zoom = Math.min((svgW - pad * 2) / Math.max(maxX - minX, 1), (svgH - pad * 2) / Math.max(maxY - minY, 1), 2); + this.graphZoom = Math.max(0.1, Math.min(zoom, 4)); + this.graphPanX = (svgW / 2) - ((minX + maxX) / 2) * this.graphZoom; + this.graphPanY = (svgH / 2) - ((minY + maxY) / 2) * this.graphZoom; + this.updateGraphTransform(); + this.updateGraphZoomDisplay(); + } + + private updateGraphTransform() { + const g = this.shadow.getElementById("graph-transform"); + if (g) g.setAttribute("transform", `translate(${this.graphPanX},${this.graphPanY}) scale(${this.graphZoom})`); + } + + private updateGraphZoomDisplay() { + const el = this.shadow.getElementById("graph-zoom-level"); + if (el) el.textContent = `${Math.round(this.graphZoom * 100)}%`; + } + + private zoomGraphAt(screenX: number, screenY: number, factor: number) { + const oldZoom = this.graphZoom; + const newZoom = Math.max(0.1, Math.min(4, oldZoom * factor)); + this.graphPanX = screenX - (screenX - this.graphPanX) * (newZoom / oldZoom); + this.graphPanY = screenY - (screenY - this.graphPanY) * (newZoom / oldZoom); + this.graphZoom = newZoom; + this.updateGraphTransform(); + this.updateGraphZoomDisplay(); + } + + private updateGraphNodePosition(nodeId: string) { + const pos = this.graphPositions[nodeId]; + if (!pos) return; + + const g = this.shadow.querySelector(`[data-node-id="${nodeId}"]`) as SVGGElement | null; + if (!g) return; + + const node = this.graphNodes.find(n => n.id === nodeId); + if (!node) return; + const isOrg = node.type === "company"; + const radius = isOrg ? 22 : 12; + + // Update circles (includes selection ring if present) + g.querySelectorAll("circle").forEach(circle => { + circle.setAttribute("cx", String(pos.x)); + circle.setAttribute("cy", String(pos.y)); + }); + + // Update text + const texts = g.querySelectorAll("text"); + if (isOrg) { + if (texts[0]) { texts[0].setAttribute("x", String(pos.x)); texts[0].setAttribute("y", String(pos.y + 4)); } + if (texts[1]) { texts[1].setAttribute("x", String(pos.x)); texts[1].setAttribute("y", String(pos.y + radius + 13)); } + } else { + if (texts[0]) { texts[0].setAttribute("x", String(pos.x)); texts[0].setAttribute("y", String(pos.y + radius + 13)); } + } + + // Update cluster circle for company nodes + if (isOrg) { + const cluster = this.shadow.querySelector(`[data-cluster="${nodeId}"]`) as SVGCircleElement | null; + if (cluster) { + cluster.setAttribute("cx", String(pos.x)); + cluster.setAttribute("cy", String(pos.y)); + } + } + + // Update connected edges + for (const edge of this.graphEdges) { + if (edge.source !== nodeId && edge.target !== nodeId) continue; + const sp = this.graphPositions[edge.source]; + const tp = this.graphPositions[edge.target]; + if (!sp || !tp) continue; + const line = this.shadow.querySelector(`[data-edge="${edge.source}:${edge.target}"]`) as SVGLineElement | null; + if (line) { + line.setAttribute("x1", String(sp.x)); + line.setAttribute("y1", String(sp.y)); + line.setAttribute("x2", String(tp.x)); + line.setAttribute("y2", String(tp.y)); + } + } + } + private renderGraphTab(): string { - const base = this.getApiBase().replace(/\/crm$/, ""); - return `
-

View the interactive force-directed relationship graph for this space.

- Open Network Graph + this.ensureGraphLayout(); + const nodes = this.graphNodes; + const edges = this.graphEdges; + + if (nodes.length === 0) { + return `
No data to graph. Add contacts and companies to see the relationship network.
`; + } + + const positions = this.graphPositions; + + // Color palette for companies + const palette = ["#6366f1", "#22c55e", "#f59e0b", "#ec4899", "#14b8a6", "#f97316", "#8b5cf6", "#06b6d4"]; + const companyNodes = nodes.filter(n => n.type === "company"); + const orgColors: Record = {}; + companyNodes.forEach((org, i) => { orgColors[org.id] = palette[i % palette.length]; }); + + // Cluster background circles + const clustersSvg = companyNodes.map(org => { + const pos = positions[org.id]; + if (!pos) return ""; + const color = orgColors[org.id] || "#333"; + return ``; + }).join(""); + + // Edges + const edgesSvg = edges.map(edge => { + const sp = positions[edge.source], tp = positions[edge.target]; + if (!sp || !tp) return ""; + if (edge.type === "works_at") { + return ``; + } else { + return ``; + } + }).join(""); + + // Nodes + const nodesSvg = nodes.map(node => { + const pos = positions[node.id]; + if (!pos) return ""; + const isOrg = node.type === "company"; + const color = isOrg ? (orgColors[node.id] || "#22c55e") : "#3b82f6"; + const radius = isOrg ? 22 : 12; + const isSelected = this.graphSelectedId === node.id; + const label = this.esc(node.name); + const truncLabel = label.length > 14 ? label.slice(0, 12) + "\u2026" : label; + + return ` + ${isSelected ? `` : ""} + + ${isOrg ? `${truncLabel}` : ""} + ${label} + `; + }).join(""); + + return `
+ + + ${clustersSvg} + ${edgesSvg} + ${nodesSvg} + + +
+ + ${Math.round(this.graphZoom * 100)}% + + +
+
+
+
People
+
Companies
+
Works at
+
Cross-org link
`; } @@ -430,14 +766,31 @@ class FolkCrmView extends HTMLElement { .table-footer { font-size: 12px; color: var(--rs-text-muted); padding: 10px 14px; } /* ── Graph tab ── */ - .graph-link-section { text-align: center; padding: 60px 20px; } - .graph-link-section p { color: var(--rs-text-muted); font-size: 14px; margin-bottom: 16px; } - .graph-link-btn { - display: inline-block; padding: 10px 24px; border-radius: 8px; - background: var(--rs-primary-hover); color: #fff; text-decoration: none; - font-size: 14px; font-weight: 500; transition: background 0.15s; + .graph-container { + position: relative; width: 100%; height: 420px; + background: var(--rs-canvas-bg, #0a0a0f); border: 1px solid var(--rs-border); + border-radius: 12px; overflow: hidden; cursor: grab; } - .graph-link-btn:hover { background: var(--rs-primary); } + .graph-container.grabbing { cursor: grabbing; } + .graph-container svg { display: block; width: 100%; height: 100%; } + .graph-node:hover circle { filter: brightness(1.2); } + .graph-zoom-controls { + position: absolute; bottom: 12px; right: 12px; + display: flex; align-items: center; gap: 4px; + background: var(--rs-bg-surface); border: 1px solid var(--rs-border-strong); + border-radius: 8px; padding: 4px 6px; z-index: 5; + } + .graph-zoom-btn { + width: 28px; height: 28px; border: none; border-radius: 6px; + background: transparent; color: var(--rs-text-primary); font-size: 16px; + cursor: pointer; display: flex; align-items: center; justify-content: center; + } + .graph-zoom-btn:hover { background: var(--rs-bg-hover); } + .graph-zoom-btn--fit { font-size: 14px; } + .graph-zoom-level { font-size: 11px; color: var(--rs-text-muted); min-width: 36px; text-align: center; } + .graph-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; } + .graph-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rs-text-muted); } + .graph-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } @media (max-width: 900px) { .pipeline-grid { grid-template-columns: repeat(2, 1fr); } @@ -448,6 +801,7 @@ class FolkCrmView extends HTMLElement { .toolbar { flex-direction: column; align-items: stretch; } .search-input { width: 100%; } .data-table td, .data-table th { padding: 8px 10px; font-size: 12px; } + .graph-container { height: 300px; } } @@ -511,6 +865,98 @@ class FolkCrmView extends HTMLElement { this.render(); }); }); + + // ── Graph interactions ── + if (this.activeTab === "graph") { + const container = this.shadow.getElementById("graph-container"); + const svg = this.shadow.getElementById("graph-svg") as SVGSVGElement | null; + + if (svg && container) { + // Zoom controls + this.shadow.getElementById("graph-zoom-in")?.addEventListener("click", () => { + const rect = svg.getBoundingClientRect(); + this.zoomGraphAt(rect.width / 2, rect.height / 2, 1.25); + }); + this.shadow.getElementById("graph-zoom-out")?.addEventListener("click", () => { + const rect = svg.getBoundingClientRect(); + this.zoomGraphAt(rect.width / 2, rect.height / 2, 0.8); + }); + this.shadow.getElementById("graph-zoom-fit")?.addEventListener("click", () => this.fitGraphView()); + + // Wheel zoom + svg.addEventListener("wheel", (e: WheelEvent) => { + e.preventDefault(); + const rect = svg.getBoundingClientRect(); + this.zoomGraphAt(e.clientX - rect.left, e.clientY - rect.top, 1 - e.deltaY * 0.003); + }, { passive: false }); + + // Pointer down — node drag or canvas pan + svg.addEventListener("pointerdown", (e: PointerEvent) => { + if (e.button !== 0) return; + const target = (e.target as Element).closest("[data-node-id]") as HTMLElement | null; + + if (target) { + const nodeId = target.dataset.nodeId!; + this.graphDraggingId = nodeId; + this.graphDragStartX = e.clientX; + this.graphDragStartY = e.clientY; + const pos = this.graphPositions[nodeId]; + if (pos) { this.graphDragNodeStartX = pos.x; this.graphDragNodeStartY = pos.y; } + svg.setPointerCapture(e.pointerId); + e.preventDefault(); + } else { + this.graphIsPanning = true; + this.graphPanStartX = e.clientX; + this.graphPanStartY = e.clientY; + this.graphPanStartPanX = this.graphPanX; + this.graphPanStartPanY = this.graphPanY; + container.classList.add("grabbing"); + svg.setPointerCapture(e.pointerId); + e.preventDefault(); + } + }); + + svg.addEventListener("pointermove", (e: PointerEvent) => { + if (this.graphDraggingId) { + const dx = (e.clientX - this.graphDragStartX) / this.graphZoom; + const dy = (e.clientY - this.graphDragStartY) / this.graphZoom; + const pos = this.graphPositions[this.graphDraggingId]; + if (pos) { + pos.x = this.graphDragNodeStartX + dx; + pos.y = this.graphDragNodeStartY + dy; + this.updateGraphNodePosition(this.graphDraggingId); + } + } else if (this.graphIsPanning) { + this.graphPanX = this.graphPanStartPanX + (e.clientX - this.graphPanStartX); + this.graphPanY = this.graphPanStartPanY + (e.clientY - this.graphPanStartY); + this.updateGraphTransform(); + } + }); + + svg.addEventListener("pointerup", (e: PointerEvent) => { + if (this.graphDraggingId) { + const dx = Math.abs(e.clientX - this.graphDragStartX); + const dy = Math.abs(e.clientY - this.graphDragStartY); + if (dx < 4 && dy < 4) { + // Click — toggle selection + const id = this.graphDraggingId; + this.graphSelectedId = this.graphSelectedId === id ? null : id; + this.graphDraggingId = null; + this.render(); + return; + } + this.graphDraggingId = null; + } + if (this.graphIsPanning) { + this.graphIsPanning = false; + container.classList.remove("grabbing"); + } + }); + } + + // Fit view on first render + requestAnimationFrame(() => this.fitGraphView()); + } } private esc(s: string): string {