diff --git a/src/lib/graphHelper.js b/src/lib/graphHelper.js index e2074ec..40f3eb1 100644 --- a/src/lib/graphHelper.js +++ b/src/lib/graphHelper.js @@ -182,13 +182,7 @@ export function reduceNodes(nodeId, nodeData, interactionState, settings) { if (res.highlighted || isInSelectedFamily || isInHoveredFamily) { res.forceLabel = true - } - if ( - !res.highlighted && - !isInSelectedFamily && - !isInHoveredFamily && - !matchQuery - ) { + } else if (!matchQuery) { res.color = getDiminishedColor( nodeData.color, settings.style.backgroundColor @@ -228,23 +222,21 @@ export function reduceEdges( ) { const extremities = graph.extremities(edgeId) res.zIndex = 2 - const isHighlighted = - hoveredEdgeId === edgeId || - selectedEdgeId === edgeId || + const isHighlighted = hoveredEdgeId === edgeId || selectedEdgeId === edgeId + + let isVisible = + isHighlighted || (nodesMatchingSearchQuery && extremities.every(nodeId => nodesMatchingSearchQuery.includes(nodeId))) - let isVisible - if (settings.style.highlightMode === 'node_alone') { - isVisible = isHighlighted - } else if (settings.style.highlightMode === 'node_and_neighbors') { + if (settings.style.highlightMode === 'node_and_neighbors') { isVisible = - isHighlighted || + isVisible || (selectedNodeId && extremities.includes(selectedNodeId)) || (hoveredNodeId && extremities.includes(hoveredNodeId)) - } else { + } else if (settings.style.highlightMode === 'include_neighbor_edges') { isVisible = - isHighlighted || + isVisible || (selectedNodeId && extremities.every( n => n === selectedNodeId || neighborsOfSelectedNode.has(n) @@ -254,6 +246,7 @@ export function reduceEdges( n => n === hoveredNodeId || neighborsOfHoveredNode.has(n) )) } + if (isHighlighted) { res.size = res.size * 2 res.forceLabel = true diff --git a/tests/lib/graphHelper.spec.js b/tests/lib/graphHelper.spec.js index e2a7b1c..1c08e07 100644 --- a/tests/lib/graphHelper.spec.js +++ b/tests/lib/graphHelper.spec.js @@ -1246,7 +1246,9 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: new Set(['node-1.1']), neighborsOfHoveredNode: new Set(['node-2.1']), selectedEdgeExtremities: [], - hoveredEdgeExtremities: [] + hoveredEdgeExtremities: [], + nodesMatchingSearchQuery: ['node-4', 'node-1', 'node-2', 'node-5'], + focusedFoundNodeId: 'node-5' } expect( @@ -1270,6 +1272,17 @@ describe('graphHelper.js', () => { forceLabel: true }) + expect( + graphHelper.reduceNodes('node-5', nodeData, interactionState, settings) + ).to.eql({ + color: '#FF0000CC', + label: 'Node label', + labelColor: 'black', + zIndex: 2, + highlighted: true, + forceLabel: true + }) + expect( graphHelper.reduceNodes('node-1.1', nodeData, interactionState, settings) ).to.eql({ @@ -1292,6 +1305,16 @@ describe('graphHelper.js', () => { forceLabel: true }) + expect( + graphHelper.reduceNodes('node-4', nodeData, interactionState, settings) + ).to.eql({ + color: '#FF0000CC', + label: 'Node label', + labelColor: 'blue', + zIndex: 2, + highlighted: false + }) + expect( graphHelper.reduceNodes('node-3', nodeData, interactionState, settings) ).to.eql({ @@ -1310,7 +1333,9 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: new Set(['node-1.1']), neighborsOfHoveredNode: undefined, selectedEdgeExtremities: [], - hoveredEdgeExtremities: ['node-2', 'node-2.1'] + hoveredEdgeExtremities: ['node-2', 'node-2.1'], + nodesMatchingSearchQuery: ['node-4', 'node-2'], + focusedFoundNodeId: null } expect( @@ -1367,6 +1392,16 @@ describe('graphHelper.js', () => { highlighted: false }) + expect( + graphHelper.reduceNodes('node-4', nodeData, interactionState, settings) + ).to.eql({ + color: '#FF0000CC', + label: 'Node label', + labelColor: 'blue', + zIndex: 2, + highlighted: false + }) + interactionState = { selectedNodeId: null, hoveredNodeId: null, @@ -1375,7 +1410,9 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: undefined, neighborsOfHoveredNode: undefined, selectedEdgeExtremities: ['node-1', 'node-1.1'], - hoveredEdgeExtremities: ['node-2', 'node-2.1'] + hoveredEdgeExtremities: ['node-2', 'node-2.1'], + nodesMatchingSearchQuery: [], + focusedFoundNodeId: null } expect( @@ -1437,7 +1474,9 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: undefined, neighborsOfHoveredNode: new Set(['node-2.1']), selectedEdgeExtremities: ['node-1', 'node-1.1'], - hoveredEdgeExtremities: [] + hoveredEdgeExtremities: [], + nodesMatchingSearchQuery: ['node-4'], + focusedFoundNodeId: null } expect( @@ -1491,6 +1530,16 @@ describe('graphHelper.js', () => { highlighted: false }) + expect( + graphHelper.reduceNodes('node-4', nodeData, interactionState, settings) + ).to.eql({ + color: '#FF0000CC', + label: 'Node label', + labelColor: 'blue', + zIndex: 2, + highlighted: false + }) + interactionState = { selectedNodeId: null, hoveredNodeId: null, @@ -1499,40 +1548,13 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: undefined, neighborsOfHoveredNode: undefined, selectedEdgeExtremities: [], - hoveredEdgeExtremities: [] + hoveredEdgeExtremities: [], + nodesMatchingSearchQuery: null, + focusedFoundNodeId: null } expect( - graphHelper.reduceNodes('node-1', nodeData, interactionState, settings) - ).to.eql({ - color: '#FF0000CC', - label: 'Node label', - labelColor: 'blue' - }) - expect( - graphHelper.reduceNodes('node-2', nodeData, interactionState, settings) - ).to.eql({ - color: '#FF0000CC', - label: 'Node label', - labelColor: 'blue' - }) - expect( - graphHelper.reduceNodes('node-1.1', nodeData, interactionState, settings) - ).to.eql({ - color: '#FF0000CC', - label: 'Node label', - labelColor: 'blue' - }) - expect( - graphHelper.reduceNodes('node-2.1', nodeData, interactionState, settings) - ).to.eql({ - color: '#FF0000CC', - label: 'Node label', - labelColor: 'blue' - }) - - expect( - graphHelper.reduceNodes('node-3', nodeData, interactionState, settings) + graphHelper.reduceNodes('node', nodeData, interactionState, settings) ).to.eql({ color: '#FF0000CC', label: 'Node label', @@ -1548,7 +1570,11 @@ describe('graphHelper.js', () => { } } - const edgeData = { color: '#FF0000CC', label: 'Edge label', size: 3 } + const edgeData = { + color: '#FF0000CC', + label: 'Edge label', + size: 3 + } const graph = new Graph() graph.addNode('node-1.1') graph.addNode('node-1.2') @@ -1568,7 +1594,18 @@ describe('graphHelper.js', () => { size: 6, forceLabel: true } + const visibleEdgeStyle = { + color: '#FF0000CC', + label: 'Edge label', + zIndex: 2, + size: 3 + } + // No hovered or selected nodes, + // but hovered and selected edges + // Query matches some nodes connected by edge + // Expected: hovered and selected edges are highlighted, + // edge connected modes matching query is visible let interactionState = { selectedNodeId: null, hoveredNodeId: null, @@ -1577,7 +1614,8 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: undefined, neighborsOfHoveredNode: undefined, selectedEdgeExtremities: ['node-2.1', 'node-2.2'], - hoveredEdgeExtremities: ['node-1.1', 'node-1.2'] + hoveredEdgeExtremities: ['node-1.1', 'node-1.2'], + nodesMatchingSearchQuery: ['node-1.1', 'node-1.3', 'node-2.1', 'node-2.2'] } expect( graphHelper.reduceEdges( @@ -1605,8 +1643,7 @@ describe('graphHelper.js', () => { settings, graph ) - ).to.eql(hiddenEdgeStyle) - + ).to.eql(visibleEdgeStyle) expect( graphHelper.reduceEdges( edge1213, @@ -1617,6 +1654,11 @@ describe('graphHelper.js', () => { ) ).to.eql(hiddenEdgeStyle) + // No hovered nodes, + // One node selected + // No hovered or selected edges + // Query matches some nodes but no edges connecting 2 nodes matching the query + // Expected: all edges are hidden interactionState = { selectedNodeId: 'node-1.1', hoveredNodeId: null, @@ -1625,7 +1667,8 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: new Set(['node-1.2', 'node-1.3']), neighborsOfHoveredNode: undefined, selectedEdgeExtremities: [], - hoveredEdgeExtremities: [] + hoveredEdgeExtremities: [], + nodesMatchingSearchQuery: ['node-2.1', 'node-1.2'] } expect( graphHelper.reduceEdges( @@ -1665,6 +1708,11 @@ describe('graphHelper.js', () => { ) ).to.eql(hiddenEdgeStyle) + // No selected nodes, + // One node hovered + // No hovered or selected edges + // Query does not match any nodes + // Expected: all edges are hidden interactionState = { selectedNodeId: null, hoveredNodeId: 'node-1.1', @@ -1673,7 +1721,8 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: undefined, neighborsOfHoveredNode: new Set(['node-1.2', 'node-1.3']), selectedEdgeExtremities: [], - hoveredEdgeExtremities: [] + hoveredEdgeExtremities: [], + nodesMatchingSearchQuery: [] } expect( graphHelper.reduceEdges( @@ -1713,6 +1762,10 @@ describe('graphHelper.js', () => { ) ).to.eql(hiddenEdgeStyle) + // No hovered or selected nodes, + // No hovered or selected edges + // No query applied + // Expected: all edges are visible interactionState = { selectedNodeId: null, hoveredNodeId: null, @@ -1721,7 +1774,8 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: undefined, neighborsOfHoveredNode: undefined, selectedEdgeExtremities: [], - hoveredEdgeExtremities: [] + hoveredEdgeExtremities: [], + nodesMatchingSearchQuery: null } expect( @@ -1772,7 +1826,11 @@ describe('graphHelper.js', () => { } } - const edgeData = { color: '#FF0000CC', label: 'Edge label', size: 3 } + const edgeData = { + color: '#FF0000CC', + label: 'Edge label', + size: 3 + } const graph = new Graph() graph.addNode('node-1.1') graph.addNode('node-1.2') @@ -1799,6 +1857,11 @@ describe('graphHelper.js', () => { size: 3 } + // No hovered or selected nodes, + // but hovered and selected edges + // Query matches some nodes connected by edge + // Expected: hovered and selected edges are highlighted, + // edge connected modes matching query is visible let interactionState = { selectedNodeId: null, hoveredNodeId: null, @@ -1807,7 +1870,8 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: undefined, neighborsOfHoveredNode: undefined, selectedEdgeExtremities: ['node-2.1', 'node-2.2'], - hoveredEdgeExtremities: ['node-1.1', 'node-1.2'] + hoveredEdgeExtremities: ['node-1.1', 'node-1.2'], + nodesMatchingSearchQuery: ['node-1.1', 'node-1.3', 'node-2.1', 'node-2.2'] } expect( graphHelper.reduceEdges( @@ -1835,7 +1899,7 @@ describe('graphHelper.js', () => { settings, graph ) - ).to.eql(hiddenEdgeStyle) + ).to.eql(visibleEdgeStyle) expect( graphHelper.reduceEdges( @@ -1847,6 +1911,12 @@ describe('graphHelper.js', () => { ) ).to.eql(hiddenEdgeStyle) + // No hovered nodes, + // One node selected + // No hovered or selected edges + // Query matches some nodes but no edges connecting 2 nodes matching the query + // Expected: edges connecting selected node with its neighbors are visible, + // all other edges are hidden interactionState = { selectedNodeId: 'node-1.1', hoveredNodeId: null, @@ -1855,7 +1925,8 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: new Set(['node-1.2', 'node-1.3']), neighborsOfHoveredNode: undefined, selectedEdgeExtremities: [], - hoveredEdgeExtremities: [] + hoveredEdgeExtremities: [], + nodesMatchingSearchQuery: ['node-2.1', 'node-1.2'] } expect( graphHelper.reduceEdges( @@ -1895,6 +1966,12 @@ describe('graphHelper.js', () => { ) ).to.eql(hiddenEdgeStyle) + // No selected nodes, + // One node hovered + // No hovered or selected edges + // Query does not match any nodes + // Expected: edges connecting hovered node with its neighbors are visible, + // all other edges are hidden interactionState = { selectedNodeId: null, hoveredNodeId: 'node-1.1', @@ -1903,7 +1980,8 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: undefined, neighborsOfHoveredNode: new Set(['node-1.2', 'node-1.3']), selectedEdgeExtremities: [], - hoveredEdgeExtremities: [] + hoveredEdgeExtremities: [], + nodesMatchingSearchQuery: [] } expect( graphHelper.reduceEdges( @@ -1943,6 +2021,10 @@ describe('graphHelper.js', () => { ) ).to.eql(hiddenEdgeStyle) + // No selected or hovered nodes, + // No hovered or selected edges + // Query is not applied + // Expected: all edges are visible interactionState = { selectedNodeId: null, hoveredNodeId: null, @@ -1951,7 +2033,8 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: undefined, neighborsOfHoveredNode: undefined, selectedEdgeExtremities: [], - hoveredEdgeExtremities: [] + hoveredEdgeExtremities: [], + nodesMatchingSearchQuery: null } expect( @@ -2029,6 +2112,11 @@ describe('graphHelper.js', () => { size: 3 } + // No hovered or selected nodes, + // but hovered and selected edges + // Query matches some nodes connected by edge + // Expected: hovered and selected edges are highlighted, + // edge connected modes matching query is visible let interactionState = { selectedNodeId: null, hoveredNodeId: null, @@ -2037,7 +2125,8 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: undefined, neighborsOfHoveredNode: undefined, selectedEdgeExtremities: ['node-2.1', 'node-2.2'], - hoveredEdgeExtremities: ['node-1.1', 'node-1.2'] + hoveredEdgeExtremities: ['node-1.1', 'node-1.2'], + nodesMatchingSearchQuery: ['node-1.1', 'node-1.3', 'node-2.1', 'node-2.2'] } expect( graphHelper.reduceEdges( @@ -2065,7 +2154,7 @@ describe('graphHelper.js', () => { settings, graph ) - ).to.eql(hiddenEdgeStyle) + ).to.eql(visibleEdgeStyle) expect( graphHelper.reduceEdges( @@ -2077,6 +2166,12 @@ describe('graphHelper.js', () => { ) ).to.eql(hiddenEdgeStyle) + // No hovered nodes, + // One node selected + // No hovered or selected edges + // Query matches some nodes but no edges connecting 2 nodes matching the query + // Expected: edges connecting selected node with its neighbors + // and between neighbours are visible, all other edges are hidden interactionState = { selectedNodeId: 'node-1.1', hoveredNodeId: null, @@ -2085,7 +2180,8 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: new Set(['node-1.2', 'node-1.3']), neighborsOfHoveredNode: undefined, selectedEdgeExtremities: [], - hoveredEdgeExtremities: [] + hoveredEdgeExtremities: [], + nodesMatchingSearchQuery: ['node-2.1', 'node-1.2'] } expect( graphHelper.reduceEdges( @@ -2125,6 +2221,12 @@ describe('graphHelper.js', () => { ) ).to.eql(visibleEdgeStyle) + // No selected nodes, + // One node hovered + // No hovered or selected edges + // Query does not match any nodes + // Expected: edges connecting hovered node with its neighbors + // and between beighbours are visible, all other edges are hidden interactionState = { selectedNodeId: null, hoveredNodeId: 'node-1.1', @@ -2133,7 +2235,8 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: undefined, neighborsOfHoveredNode: new Set(['node-1.2', 'node-1.3']), selectedEdgeExtremities: [], - hoveredEdgeExtremities: [] + hoveredEdgeExtremities: [], + nodesMatchingSearchQuery: [] } expect( graphHelper.reduceEdges( @@ -2173,6 +2276,10 @@ describe('graphHelper.js', () => { ) ).to.eql(visibleEdgeStyle) + // No selected or hovered nodes, + // No hovered or selected edges + // Query is not applied + // Expected: all edges are visible interactionState = { selectedNodeId: null, hoveredNodeId: null, @@ -2181,7 +2288,8 @@ describe('graphHelper.js', () => { neighborsOfSelectedNode: undefined, neighborsOfHoveredNode: undefined, selectedEdgeExtremities: [], - hoveredEdgeExtremities: [] + hoveredEdgeExtremities: [], + nodesMatchingSearchQuery: null } expect(