fix: improve graph zoom control and node expansion functionality
• Fix container padding in zoom calculation • Extract node size update into helper fn • Update node sizes for empty expansions
This commit is contained in:
@@ -4,7 +4,6 @@ import Button from '@/components/ui/Button'
|
|||||||
import { ZoomInIcon, ZoomOutIcon, FullscreenIcon } from 'lucide-react'
|
import { ZoomInIcon, ZoomOutIcon, FullscreenIcon } from 'lucide-react'
|
||||||
import { controlButtonVariant } from '@/lib/constants'
|
import { controlButtonVariant } from '@/lib/constants'
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { combine } from 'zustand/middleware'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Component that provides zoom controls for the graph viewer.
|
* Component that provides zoom controls for the graph viewer.
|
||||||
@@ -67,8 +66,8 @@ const ZoomControl = () => {
|
|||||||
|
|
||||||
// Calculate base scale
|
// Calculate base scale
|
||||||
const scale = Math.min(
|
const scale = Math.min(
|
||||||
(containerWidth - containerPadding) / width,
|
(containerWidth - containerPadding * 2) / width,
|
||||||
(containerHeight - containerPadding) / height
|
(containerHeight - containerPadding * 2) / height
|
||||||
)
|
)
|
||||||
// Apply scaling factor (just don't know why)
|
// Apply scaling factor (just don't know why)
|
||||||
const ratio = (1 / scale) * 10
|
const ratio = (1 / scale) * 10
|
||||||
|
@@ -475,8 +475,35 @@ const useLightrangeGraph = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Helper function to update node sizes
|
||||||
|
const updateNodeSizes = (
|
||||||
|
sigmaGraph: DirectedGraph,
|
||||||
|
nodesWithDiscardedEdges: Set<string>,
|
||||||
|
minDegree: number,
|
||||||
|
range: number,
|
||||||
|
scale: number
|
||||||
|
) => {
|
||||||
|
for (const nodeId of nodesWithDiscardedEdges) {
|
||||||
|
if (sigmaGraph.hasNode(nodeId)) {
|
||||||
|
let newDegree = sigmaGraph.degree(nodeId);
|
||||||
|
newDegree += 1; // Add +1 for discarded edges
|
||||||
|
|
||||||
|
const newSize = Math.round(
|
||||||
|
Constants.minNodeSize + scale * Math.pow((newDegree - minDegree) / range, 0.5)
|
||||||
|
);
|
||||||
|
|
||||||
|
const currentSize = sigmaGraph.getNodeAttribute(nodeId, 'size');
|
||||||
|
|
||||||
|
if (newSize > currentSize) {
|
||||||
|
sigmaGraph.setNodeAttribute(nodeId, 'size', newSize);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// If no new connectable nodes found, show toast and return
|
// If no new connectable nodes found, show toast and return
|
||||||
if (nodesToAdd.size === 0) {
|
if (nodesToAdd.size === 0) {
|
||||||
|
updateNodeSizes(sigmaGraph, nodesWithDiscardedEdges, minDegree, range, scale);
|
||||||
toast.info(t('graphPanel.propertiesView.node.noNewNodes'));
|
toast.info(t('graphPanel.propertiesView.node.noNewNodes'));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -577,26 +604,7 @@ const useLightrangeGraph = () => {
|
|||||||
searchCache.searchEngine = null;
|
searchCache.searchEngine = null;
|
||||||
|
|
||||||
// Update sizes for all nodes with discarded edges
|
// Update sizes for all nodes with discarded edges
|
||||||
for (const nodeId of nodesWithDiscardedEdges) {
|
updateNodeSizes(sigmaGraph, nodesWithDiscardedEdges, minDegree, range, scale);
|
||||||
if (sigmaGraph.hasNode(nodeId)) {
|
|
||||||
// Get the new degree of the node
|
|
||||||
let newDegree = sigmaGraph.degree(nodeId);
|
|
||||||
newDegree += 1; // Add +1 for discarded edges
|
|
||||||
|
|
||||||
// Calculate new size for the node
|
|
||||||
const newSize = Math.round(
|
|
||||||
Constants.minNodeSize + scale * Math.pow((newDegree - minDegree) / range, 0.5)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Get current size
|
|
||||||
const currentSize = sigmaGraph.getNodeAttribute(nodeId, 'size');
|
|
||||||
|
|
||||||
// Only update if new size is larger
|
|
||||||
if (newSize > currentSize) {
|
|
||||||
sigmaGraph.setNodeAttribute(nodeId, 'size', newSize);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error expanding node:', error);
|
console.error('Error expanding node:', error);
|
||||||
|
Reference in New Issue
Block a user