class VersionGraph {
constructor() {
this.adjacencyList = new Map();
// nodeId → [childIds]
}
addVersion(imageId, parentId = null) {
if (!this.adjacencyList.has(imageId)) {
this.adjacencyList.set(imageId, []);
}
if (parentId
&& this.adjacencyList.has(parentId)) {
this.adjacencyList.get(parentId)
.push(imageId);
}
}
// BFS: find all versions reachable
// from an image
getAllVersions(startId) {
const visited = new Set();
const queue = [startId];
const result = [];
while (queue.length > 0) {
const current = queue.shift();
if (visited.has(current)) continue;
visited.add(current);
result.push(current);
const children =
this.adjacencyList.get(current) || [];
queue.push(...children);
}
return result;
}
// DFS: find the longest edit chain
longestChain(startId,
visited = new Set()) {
visited.add(startId);
const children =
this.adjacencyList.get(startId) || [];
let maxDepth = 0;
for (const child of children) {
if (!visited.has(child)) {
maxDepth = Math.max(maxDepth,
this.longestChain(child, visited));
}
}
return maxDepth + 1;
}
}
// Images connected by shared tags
function buildSimilarityGraph(images) {
const graph = new Map();
// imageId → Set of connected imageIds
const tagIndex = new Map();
// tag → Set of imageIds
// Build tag index
for (const img of images) {
for (const tag of img.tags) {
if (!tagIndex.has(tag))
tagIndex.set(tag, new Set());
tagIndex.get(tag).add(img.id);
}
}
// Connect images sharing tags
for (const [tag, imageIds] of tagIndex) {
const ids = [...imageIds];
for (let i = 0; i < ids.length; i++) {
for (let j = i + 1;
j < ids.length; j++) {
if (!graph.has(ids[i]))
graph.set(ids[i], new Set());
if (!graph.has(ids[j]))
graph.set(ids[j], new Set());
graph.get(ids[i]).add(ids[j]);
graph.get(ids[j]).add(ids[i]);
}
}
}
return graph;
}
Build a <VersionTree> React component visualizing the graph as a tree diagram. Each node shows a thumbnail. Lines connect parent to children. Click a node to load that version.
Use BFS to find "images 2 hops away" — recommendations! If image A shares tags with B, and B shares tags with C, then C is recommended for viewers of A. The same algorithm that powers social network suggestions.
git switch -c feature/PIXELCRAFT-056-graphs
git add src/ server/
git commit -m "Add version graph + similarity with BFS/DFS (PIXELCRAFT-056)"
git push origin feature/PIXELCRAFT-056-graphs
# PR → Review → Merge → Close ticket ✅
Graphs model relationships.
One of the most versatile data structures in all of CS.