<!-- .github/pull_request_template.md -->

## Description
<!--
Please provide a clear, human-generated description of the changes in
this PR.
DO NOT use AI-generated descriptions. We want to understand your thought
process and reasoning.
-->

## Type of Change
<!-- Please check the relevant option -->
- [ ] Bug fix (non-breaking change that fixes an issue)
- [ ] New feature (non-breaking change that adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)
- [ ] Documentation update
- [ ] Code refactoring
- [ ] Performance improvement
- [ ] Other (please specify):

## Screenshots/Videos (if applicable)
<!-- Add screenshots or videos to help explain your changes -->

## Pre-submission Checklist
<!-- Please check all boxes that apply before submitting your PR -->
- [ ] **I have tested my changes thoroughly before submitting this PR**
- [ ] **This PR contains minimal changes necessary to address the
issue/feature**
- [ ] My code follows the project's coding standards and style
guidelines
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] I have added necessary documentation (if applicable)
- [ ] All new and existing tests pass
- [ ] I have searched existing PRs to ensure this change hasn't been
submitted already
- [ ] I have linked any relevant issues in the description
- [ ] My commits have clear and descriptive messages

## DCO Affirmation
I affirm that all code in every commit of this pull request conforms to
the terms of the Topoteretes Developer Certificate of Origin.
This commit is contained in:
Vasilije 2025-10-29 14:19:35 +01:00 committed by GitHub
commit 4dbd01637e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -272,6 +272,7 @@ async def cognee_network_visualization(graph_data, destination_file_path: str =
var currentTransform = d3.zoomIdentity; var currentTransform = d3.zoomIdentity;
var densityZoomTimer = null; var densityZoomTimer = null;
var isInteracting = false;
var labelBaseSize = 10; var labelBaseSize = 10;
function getGroupKey(d){ return d && (d.type || d.category || d.group || d.color) || 'default'; } function getGroupKey(d){ return d && (d.type || d.category || d.group || d.color) || 'default'; }
@ -473,7 +474,7 @@ async def cognee_network_visualization(graph_data, destination_file_path: str =
// Add labels sparsely to reduce clutter (every ~50th node), and truncate long text // Add labels sparsely to reduce clutter (every ~50th node), and truncate long text
nodeGroup nodeGroup
.filter(function(d, i){ return i % 15 === 0; }) .filter(function(d, i){ return i % 14 === 0; })
.append("text") .append("text")
.attr("class", "node-label") .attr("class", "node-label")
.attr("dy", 4) .attr("dy", 4)
@ -486,9 +487,11 @@ async def cognee_network_visualization(graph_data, destination_file_path: str =
function applyLabelSize() { function applyLabelSize() {
var k = (currentTransform && currentTransform.k) || 1; var k = (currentTransform && currentTransform.k) || 1;
// Keep labels readable across zoom levels: shrink slowly with zoom-in, grow slowly when zooming out // Keep labels readable across zoom levels and hide when too small
labelBaseSize = Math.max(7, Math.min(18, 10 / Math.sqrt(k))); labelBaseSize = Math.max(7, Math.min(18, 10 / Math.sqrt(k)));
nodeGroup.select("text").style("font-size", labelBaseSize + "px"); nodeGroup.select("text")
.style("font-size", labelBaseSize + "px")
.style("display", (k < 0.35 ? "none" : null));
} }
@ -499,6 +502,7 @@ async def cognee_network_visualization(graph_data, destination_file_path: str =
var MAX_POINTS_PER_GROUP = 400; var MAX_POINTS_PER_GROUP = 400;
function updateDensity() { function updateDensity() {
try { try {
if (isInteracting) return; // skip during interaction for smoother UX
if (typeof d3 === 'undefined' || typeof d3.contourDensity !== 'function') { if (typeof d3 === 'undefined' || typeof d3.contourDensity !== 'function') {
return; // d3-contour not available; skip gracefully return; // d3-contour not available; skip gracefully
} }
@ -619,18 +623,24 @@ async def cognee_network_visualization(graph_data, destination_file_path: str =
if (densityTick % 24 === 0) updateDensity(); if (densityTick % 24 === 0) updateDensity();
}); });
svg.call(d3.zoom().on("zoom", function() { var zoomBehavior = d3.zoom()
currentTransform = d3.event.transform; .on("start", function(){ isInteracting = true; densityLayer.style("opacity", 0.2); })
container.attr("transform", currentTransform); .on("zoom", function(){
if (densityZoomTimer) clearTimeout(densityZoomTimer); currentTransform = d3.event.transform;
densityZoomTimer = setTimeout(updateDensity, 120); container.attr("transform", currentTransform);
applyLabelSize(); })
})); .on("end", function(){
if (densityZoomTimer) clearTimeout(densityZoomTimer);
densityZoomTimer = setTimeout(function(){ isInteracting = false; densityLayer.style("opacity", 1); updateDensity(); }, 140);
});
svg.call(zoomBehavior);
function dragstarted(d) { function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart(); if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x; d.fx = d.x;
d.fy = d.y; d.fy = d.y;
isInteracting = true;
densityLayer.style("opacity", 0.2);
} }
function dragged(d) { function dragged(d) {
@ -642,6 +652,8 @@ async def cognee_network_visualization(graph_data, destination_file_path: str =
if (!d3.event.active) simulation.alphaTarget(0); if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null; d.fx = null;
d.fy = null; d.fy = null;
if (densityZoomTimer) clearTimeout(densityZoomTimer);
densityZoomTimer = setTimeout(function(){ isInteracting = false; densityLayer.style("opacity", 1); updateDensity(); }, 140);
} }
window.addEventListener("resize", function() { window.addEventListener("resize", function() {