UNPKG

visjs-network

Version:

A dynamic, browser-based network visualization library.

1,586 lines (1,429 loc) 55.9 kB
/** * There's a mix-up with terms in the code. Following are the formal definitions: * * tree - a strict hierarchical network, i.e. every node has at most one parent * forest - a collection of trees. These distinct trees are thus not connected. * * So: * - in a network that is not a tree, there exist nodes with multiple parents. * - a network consisting of unconnected sub-networks, of which at least one * is not a tree, is not a forest. * * In the code, the definitions are: * * tree - any disconnected sub-network, strict hierarchical or not. * forest - a bunch of these sub-networks * * The difference between tree and not-tree is important in the code, notably within * to the block-shifting algorithm. The algorithm assumes formal trees and fails * for not-trees, often in a spectacular manner (search for 'exploding network' in the issues). * * In order to distinguish the definitions in the following code, the adjective 'formal' is * used. If 'formal' is absent, you must assume the non-formal definition. * * ---------------------------------------------------------------------------------- * NOTES * ===== * * A hierarchical layout is a different thing from a hierarchical network. * The layout is a way to arrange the nodes in the view; this can be done * on non-hierarchical networks as well. The converse is also possible. */ 'use strict' var TimSort = require('timsort') let util = require('../../util') var NetworkUtil = require('../NetworkUtil').default var { HorizontalStrategy, VerticalStrategy } = require('./components/DirectionStrategy.js') /** * Container for derived data on current network, relating to hierarchy. * * @private */ class HierarchicalStatus { /** * @ignore */ constructor() { this.childrenReference = {} // child id's per node id this.parentReference = {} // parent id's per node id this.trees = {} // tree id per node id; i.e. to which tree does given node id belong this.distributionOrdering = {} // The nodes per level, in the display order this.levels = {} // hierarchy level per node id this.distributionIndex = {} // The position of the node in the level sorting order, per node id. this.isTree = false // True if current network is a formal tree this.treeIndex = -1 // Highest tree id in current network. } /** * Add the relation between given nodes to the current state. * * @param {Node.id} parentNodeId * @param {Node.id} childNodeId */ addRelation(parentNodeId, childNodeId) { if (this.childrenReference[parentNodeId] === undefined) { this.childrenReference[parentNodeId] = [] } this.childrenReference[parentNodeId].push(childNodeId) if (this.parentReference[childNodeId] === undefined) { this.parentReference[childNodeId] = [] } this.parentReference[childNodeId].push(parentNodeId) } /** * Check if the current state is for a formal tree or formal forest. * * This is the case if every node has at most one parent. * * Pre: parentReference init'ed properly for current network */ checkIfTree() { for (let i in this.parentReference) { if (this.parentReference[i].length > 1) { this.isTree = false return } } this.isTree = true } /** * Return the number of separate trees in the current network. * @returns {number} */ numTrees() { return this.treeIndex + 1 // This assumes the indexes are assigned consecitively } /** * Assign a tree id to a node * @param {Node} node * @param {string|number} treeId */ setTreeIndex(node, treeId) { if (treeId === undefined) return // Don't bother if (this.trees[node.id] === undefined) { this.trees[node.id] = treeId this.treeIndex = Math.max(treeId, this.treeIndex) } } /** * Ensure level for given id is defined. * * Sets level to zero for given node id if not already present * * @param {Node.id} nodeId */ ensureLevel(nodeId) { if (this.levels[nodeId] === undefined) { this.levels[nodeId] = 0 } } /** * get the maximum level of a branch. * * TODO: Never entered; find a test case to test this! * @param {Node.id} nodeId * @returns {number} */ getMaxLevel(nodeId) { let accumulator = {} let _getMaxLevel = nodeId => { if (accumulator[nodeId] !== undefined) { return accumulator[nodeId] } let level = this.levels[nodeId] if (this.childrenReference[nodeId]) { let children = this.childrenReference[nodeId] if (children.length > 0) { for (let i = 0; i < children.length; i++) { level = Math.max(level, _getMaxLevel(children[i])) } } } accumulator[nodeId] = level return level } return _getMaxLevel(nodeId) } /** * * @param {Node} nodeA * @param {Node} nodeB */ levelDownstream(nodeA, nodeB) { if (this.levels[nodeB.id] === undefined) { // set initial level if (this.levels[nodeA.id] === undefined) { this.levels[nodeA.id] = 0 } // set level this.levels[nodeB.id] = this.levels[nodeA.id] + 1 } } /** * Small util method to set the minimum levels of the nodes to zero. * * @param {Array.<Node>} nodes */ setMinLevelToZero(nodes) { let minLevel = 1e9 // get the minimum level for (let nodeId in nodes) { if (nodes.hasOwnProperty(nodeId)) { if (this.levels[nodeId] !== undefined) { minLevel = Math.min(this.levels[nodeId], minLevel) } } } // subtract the minimum from the set so we have a range starting from 0 for (let nodeId in nodes) { if (nodes.hasOwnProperty(nodeId)) { if (this.levels[nodeId] !== undefined) { this.levels[nodeId] -= minLevel } } } } /** * Get the min and max xy-coordinates of a given tree * * @param {Array.<Node>} nodes * @param {number} index * @returns {{min_x: number, max_x: number, min_y: number, max_y: number}} */ getTreeSize(nodes, index) { let min_x = 1e9 let max_x = -1e9 let min_y = 1e9 let max_y = -1e9 for (let nodeId in this.trees) { if (this.trees.hasOwnProperty(nodeId)) { if (this.trees[nodeId] === index) { let node = nodes[nodeId] min_x = Math.min(node.x, min_x) max_x = Math.max(node.x, max_x) min_y = Math.min(node.y, min_y) max_y = Math.max(node.y, max_y) } } } return { min_x: min_x, max_x: max_x, min_y: min_y, max_y: max_y } } /** * Check if two nodes have the same parent(s) * * @param {Node} node1 * @param {Node} node2 * @return {boolean} true if the two nodes have a same ancestor node, false otherwise */ hasSameParent(node1, node2) { let parents1 = this.parentReference[node1.id] let parents2 = this.parentReference[node2.id] if (parents1 === undefined || parents2 === undefined) { return false } for (let i = 0; i < parents1.length; i++) { for (let j = 0; j < parents2.length; j++) { if (parents1[i] == parents2[j]) { return true } } } return false } /** * Check if two nodes are in the same tree. * * @param {Node} node1 * @param {Node} node2 * @return {Boolean} true if this is so, false otherwise */ inSameSubNetwork(node1, node2) { return this.trees[node1.id] === this.trees[node2.id] } /** * Get a list of the distinct levels in the current network * * @returns {Array} */ getLevels() { return Object.keys(this.distributionOrdering) } /** * Add a node to the ordering per level * * @param {Node} node * @param {number} level */ addToOrdering(node, level) { if (this.distributionOrdering[level] === undefined) { this.distributionOrdering[level] = [] } var isPresent = false var curLevel = this.distributionOrdering[level] for (var n in curLevel) { //if (curLevel[n].id === node.id) { if (curLevel[n] === node) { isPresent = true break } } if (!isPresent) { this.distributionOrdering[level].push(node) this.distributionIndex[node.id] = this.distributionOrdering[level].length - 1 } } } /** * The Layout Engine */ class LayoutEngine { /** * @param {Object} body */ constructor(body) { this.body = body this.initialRandomSeed = Math.round(Math.random() * 1000000) this.randomSeed = this.initialRandomSeed this.setPhysics = false this.options = {} this.optionsBackup = { physics: {} } this.defaultOptions = { randomSeed: undefined, improvedLayout: true, hierarchical: { enabled: false, levelSeparation: 150, nodeSpacing: 100, treeSpacing: 200, blockShifting: true, edgeMinimization: true, parentCentralization: true, direction: 'UD', // UD, DU, LR, RL sortMethod: 'hubsize' // hubsize, directed } } util.extend(this.options, this.defaultOptions) this.bindEventListeners() } /** * Binds event listeners */ bindEventListeners() { this.body.emitter.on('_dataChanged', () => { this.setupHierarchicalLayout() }) this.body.emitter.on('_dataLoaded', () => { this.layoutNetwork() }) this.body.emitter.on('_resetHierarchicalLayout', () => { this.setupHierarchicalLayout() }) this.body.emitter.on('_adjustEdgesForHierarchicalLayout', () => { if (this.options.hierarchical.enabled !== true) { return } // get the type of static smooth curve in case it is required let type = this.direction.curveType() // force all edges into static smooth curves. this.body.emitter.emit('_forceDisableDynamicCurves', type, false) }) } /** * * @param {Object} options * @param {Object} allOptions * @returns {Object} */ setOptions(options, allOptions) { if (options !== undefined) { let hierarchical = this.options.hierarchical let prevHierarchicalState = hierarchical.enabled util.selectiveDeepExtend( ['randomSeed', 'improvedLayout'], this.options, options ) util.mergeOptions(this.options, options, 'hierarchical') if (options.randomSeed !== undefined) { this.initialRandomSeed = options.randomSeed } if (hierarchical.enabled === true) { if (prevHierarchicalState === true) { // refresh the overridden options for nodes and edges. this.body.emitter.emit('refresh', true) } // make sure the level separation is the right way up if ( hierarchical.direction === 'RL' || hierarchical.direction === 'DU' ) { if (hierarchical.levelSeparation > 0) { hierarchical.levelSeparation *= -1 } } else { if (hierarchical.levelSeparation < 0) { hierarchical.levelSeparation *= -1 } } this.setDirectionStrategy() this.body.emitter.emit('_resetHierarchicalLayout') // because the hierarchical system needs it's own physics and smooth curve settings, // we adapt the other options if needed. return this.adaptAllOptionsForHierarchicalLayout(allOptions) } else { if (prevHierarchicalState === true) { // refresh the overridden options for nodes and edges. this.body.emitter.emit('refresh') return util.deepExtend(allOptions, this.optionsBackup) } } } return allOptions } /** * * @param {Object} allOptions * @returns {Object} */ adaptAllOptionsForHierarchicalLayout(allOptions) { if (this.options.hierarchical.enabled === true) { let backupPhysics = this.optionsBackup.physics // set the physics if (allOptions.physics === undefined || allOptions.physics === true) { allOptions.physics = { enabled: backupPhysics.enabled === undefined ? true : backupPhysics.enabled, solver: 'hierarchicalRepulsion' } backupPhysics.enabled = backupPhysics.enabled === undefined ? true : backupPhysics.enabled backupPhysics.solver = backupPhysics.solver || 'barnesHut' } else if (typeof allOptions.physics === 'object') { backupPhysics.enabled = allOptions.physics.enabled === undefined ? true : allOptions.physics.enabled backupPhysics.solver = allOptions.physics.solver || 'barnesHut' allOptions.physics.solver = 'hierarchicalRepulsion' } else if (allOptions.physics !== false) { backupPhysics.solver = 'barnesHut' allOptions.physics = { solver: 'hierarchicalRepulsion' } } // get the type of static smooth curve in case it is required let type = this.direction.curveType() // disable smooth curves if nothing is defined. If smooth curves have been turned on, // turn them into static smooth curves. if (allOptions.edges === undefined) { this.optionsBackup.edges = { smooth: { enabled: true, type: 'dynamic' } } allOptions.edges = { smooth: false } } else if (allOptions.edges.smooth === undefined) { this.optionsBackup.edges = { smooth: { enabled: true, type: 'dynamic' } } allOptions.edges.smooth = false } else { if (typeof allOptions.edges.smooth === 'boolean') { this.optionsBackup.edges = { smooth: allOptions.edges.smooth } allOptions.edges.smooth = { enabled: allOptions.edges.smooth, type: type } } else { let smooth = allOptions.edges.smooth // allow custom types except for dynamic if (smooth.type !== undefined && smooth.type !== 'dynamic') { type = smooth.type } // TODO: this is options merging; see if the standard routines can be used here. this.optionsBackup.edges = { smooth: smooth.enabled === undefined ? true : smooth.enabled, type: smooth.type === undefined ? 'dynamic' : smooth.type, roundness: smooth.roundness === undefined ? 0.5 : smooth.roundness, forceDirection: smooth.forceDirection === undefined ? false : smooth.forceDirection } // NOTE: Copying an object to self; this is basically setting defaults for undefined variables allOptions.edges.smooth = { enabled: smooth.enabled === undefined ? true : smooth.enabled, type: type, roundness: smooth.roundness === undefined ? 0.5 : smooth.roundness, forceDirection: smooth.forceDirection === undefined ? false : smooth.forceDirection } } } // Force all edges into static smooth curves. // Only applies to edges that do not use the global options for smooth. this.body.emitter.emit('_forceDisableDynamicCurves', type) } return allOptions } /** * * @returns {number} */ seededRandom() { let x = Math.sin(this.randomSeed++) * 10000 return x - Math.floor(x) } /** * * @param {Array.<Node>} nodesArray */ positionInitially(nodesArray) { if (this.options.hierarchical.enabled !== true) { this.randomSeed = this.initialRandomSeed let radius = nodesArray.length + 50 for (let i = 0; i < nodesArray.length; i++) { let node = nodesArray[i] let angle = 2 * Math.PI * this.seededRandom() if (node.x === undefined) { node.x = radius * Math.cos(angle) } if (node.y === undefined) { node.y = radius * Math.sin(angle) } } } } /** * Use Kamada Kawai to position nodes. This is quite a heavy algorithm so if there are a lot of nodes we * cluster them first to reduce the amount. */ layoutNetwork() { if ( this.options.hierarchical.enabled !== true && this.options.improvedLayout === true ) { let indices = this.body.nodeIndices // first check if we should Kamada Kawai to layout. The threshold is if less than half of the visible // nodes have predefined positions we use this. let positionDefined = 0 for (let i = 0; i < indices.length; i++) { let node = this.body.nodes[indices[i]] if (node.predefinedPosition === true) { positionDefined += 1 } } // if less than half of the nodes have a predefined position we continue if (positionDefined < 0.5 * indices.length) { let MAX_LEVELS = 10 let level = 0 let clusterThreshold = 150 // TODO add this to options // // Define the options for the hidden cluster nodes // These options don't propagate outside the clustering phase. // // Some options are explicitly disabled, because they may be set in group or default node options. // The clusters are never displayed, so most explicit settings here serve as performance optimizations. // // The explicit setting of 'shape' is to avoid `shape: 'image'`; images are not passed to the hidden // cluster nodes, leading to an exception on creation. // // All settings here are performance related, except when noted otherwise. // let clusterOptions = { clusterNodeProperties: { shape: 'ellipse', // Bugfix: avoid type 'image', no images supplied label: '', // avoid label handling group: '', // avoid group handling font: { multi: false } // avoid font propagation }, clusterEdgeProperties: { label: '', // avoid label handling font: { multi: false }, // avoid font propagation smooth: { enabled: false // avoid drawing penalty for complex edges } } } // if there are a lot of nodes, we cluster before we run the algorithm. // NOTE: this part fails to find clusters for large scale-free networks, which should // be easily clusterable. // TODO: examine why this is so if (indices.length > clusterThreshold) { let startLength = indices.length while (indices.length > clusterThreshold && level <= MAX_LEVELS) { //console.time("clustering") level += 1 let before = indices.length // if there are many nodes we do a hubsize cluster if (level % 3 === 0) { this.body.modules.clustering.clusterBridges(clusterOptions) } else { this.body.modules.clustering.clusterOutliers(clusterOptions) } let after = indices.length if (before == after && level % 3 !== 0) { this._declusterAll() this.body.emitter.emit('_layoutFailed') console.info( 'This network could not be positioned by this version of the improved layout algorithm.' + ' Please disable improvedLayout for better performance.' ) return } //console.timeEnd("clustering") //console.log(before,level,after); } // increase the size of the edges this.body.modules.kamadaKawai.setOptions({ springLength: Math.max(150, 2 * startLength) }) } if (level > MAX_LEVELS) { console.info( "The clustering didn't succeed within the amount of interations allowed," + ' progressing with partial result.' ) } // position the system for these nodes and edges this.body.modules.kamadaKawai.solve( indices, this.body.edgeIndices, true ) // shift to center point this._shiftToCenter() // perturb the nodes a little bit to force the physics to kick in let offset = 70 for (let i = 0; i < indices.length; i++) { // Only perturb the nodes that aren't fixed let node = this.body.nodes[indices[i]] if (node.predefinedPosition === false) { node.x += (0.5 - this.seededRandom()) * offset node.y += (0.5 - this.seededRandom()) * offset } } // uncluster all clusters this._declusterAll() // reposition all bezier nodes. this.body.emitter.emit('_repositionBezierNodes') } } } /** * Move all the nodes towards to the center so gravitational pull wil not move the nodes away from view * @private */ _shiftToCenter() { let range = NetworkUtil.getRangeCore(this.body.nodes, this.body.nodeIndices) let center = NetworkUtil.findCenter(range) for (let i = 0; i < this.body.nodeIndices.length; i++) { let node = this.body.nodes[this.body.nodeIndices[i]] node.x -= center.x node.y -= center.y } } /** * Expands all clusters * @private */ _declusterAll() { let clustersPresent = true while (clustersPresent === true) { clustersPresent = false for (let i = 0; i < this.body.nodeIndices.length; i++) { if (this.body.nodes[this.body.nodeIndices[i]].isCluster === true) { clustersPresent = true this.body.modules.clustering.openCluster( this.body.nodeIndices[i], {}, false ) } } if (clustersPresent === true) { this.body.emitter.emit('_dataChanged') } } } /** * * @returns {number|*} */ getSeed() { return this.initialRandomSeed } /** * This is the main function to layout the nodes in a hierarchical way. * It checks if the node details are supplied correctly * * @private */ setupHierarchicalLayout() { if ( this.options.hierarchical.enabled === true && this.body.nodeIndices.length > 0 ) { // get the size of the largest hubs and check if the user has defined a level for a node. let node, nodeId let definedLevel = false let undefinedLevel = false this.lastNodeOnLevel = {} this.hierarchical = new HierarchicalStatus() for (nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { node = this.body.nodes[nodeId] if (node.options.level !== undefined) { definedLevel = true this.hierarchical.levels[nodeId] = node.options.level } else { undefinedLevel = true } } } // if the user defined some levels but not all, alert and run without hierarchical layout if (undefinedLevel === true && definedLevel === true) { throw new Error( 'To use the hierarchical layout, nodes require either no predefined levels' + ' or levels have to be defined for all nodes.' ) } else { // define levels if undefined by the users. Based on hubsize. if (undefinedLevel === true) { let sortMethod = this.options.hierarchical.sortMethod if (sortMethod === 'hubsize') { this._determineLevelsByHubsize() } else if (sortMethod === 'directed') { this._determineLevelsDirected() } else if (sortMethod === 'custom') { this._determineLevelsCustomCallback() } } // fallback for cases where there are nodes but no edges for (let nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { this.hierarchical.ensureLevel(nodeId) } } // check the distribution of the nodes per level. let distribution = this._getDistribution() // get the parent children relations. this._generateMap() // place the nodes on the canvas. this._placeNodesByHierarchy(distribution) // condense the whitespace. this._condenseHierarchy() // shift to center so gravity does not have to do much this._shiftToCenter() } } } /** * @private */ _condenseHierarchy() { // Global var in this scope to define when the movement has stopped. let stillShifting = false let branches = {} // first we have some methods to help shifting trees around. // the main method to shift the trees let shiftTrees = () => { let treeSizes = getTreeSizes() let shiftBy = 0 for (let i = 0; i < treeSizes.length - 1; i++) { let diff = treeSizes[i].max - treeSizes[i + 1].min shiftBy += diff + this.options.hierarchical.treeSpacing shiftTree(i + 1, shiftBy) } } // shift a single tree by an offset let shiftTree = (index, offset) => { let trees = this.hierarchical.trees for (let nodeId in trees) { if (trees.hasOwnProperty(nodeId)) { if (trees[nodeId] === index) { this.direction.shift(nodeId, offset) } } } } // get the width of all trees let getTreeSizes = () => { let treeWidths = [] for (let i = 0; i < this.hierarchical.numTrees(); i++) { treeWidths.push(this.direction.getTreeSize(i)) } return treeWidths } // get a map of all nodes in this branch let getBranchNodes = (source, map) => { if (map[source.id]) { return } map[source.id] = true if (this.hierarchical.childrenReference[source.id]) { let children = this.hierarchical.childrenReference[source.id] if (children.length > 0) { for (let i = 0; i < children.length; i++) { getBranchNodes(this.body.nodes[children[i]], map) } } } } // get a min max width as well as the maximum movement space it has on either sides // we use min max terminology because width and height can interchange depending on the direction of the layout let getBranchBoundary = (branchMap, maxLevel = 1e9) => { let minSpace = 1e9 let maxSpace = 1e9 let min = 1e9 let max = -1e9 for (let branchNode in branchMap) { if (branchMap.hasOwnProperty(branchNode)) { let node = this.body.nodes[branchNode] let level = this.hierarchical.levels[node.id] let position = this.direction.getPosition(node) // get the space around the node. let [minSpaceNode, maxSpaceNode] = this._getSpaceAroundNode( node, branchMap ) minSpace = Math.min(minSpaceNode, minSpace) maxSpace = Math.min(maxSpaceNode, maxSpace) // the width is only relevant for the levels two nodes have in common. This is why we filter on this. if (level <= maxLevel) { min = Math.min(position, min) max = Math.max(position, max) } } } return [min, max, minSpace, maxSpace] } // check what the maximum level is these nodes have in common. let getCollisionLevel = (node1, node2) => { let maxLevel1 = this.hierarchical.getMaxLevel(node1.id) let maxLevel2 = this.hierarchical.getMaxLevel(node2.id) return Math.min(maxLevel1, maxLevel2) } /** * Condense elements. These can be nodes or branches depending on the callback. * * @param {function} callback * @param {Array.<number>} levels * @param {*} centerParents */ let shiftElementsCloser = (callback, levels, centerParents) => { let hier = this.hierarchical for (let i = 0; i < levels.length; i++) { let level = levels[i] let levelNodes = hier.distributionOrdering[level] if (levelNodes.length > 1) { for (let j = 0; j < levelNodes.length - 1; j++) { let node1 = levelNodes[j] let node2 = levelNodes[j + 1] // NOTE: logic maintained as it was; if nodes have same ancestor, // then of course they are in the same sub-network. if ( hier.hasSameParent(node1, node2) && hier.inSameSubNetwork(node1, node2) ) { callback(node1, node2, centerParents) } } } } } // callback for shifting branches let branchShiftCallback = (node1, node2, centerParent = false) => { //window.CALLBACKS.push(() => { let pos1 = this.direction.getPosition(node1) let pos2 = this.direction.getPosition(node2) let diffAbs = Math.abs(pos2 - pos1) let nodeSpacing = this.options.hierarchical.nodeSpacing //console.log("NOW CHECKING:", node1.id, node2.id, diffAbs); if (diffAbs > nodeSpacing) { let branchNodes1 = {} let branchNodes2 = {} getBranchNodes(node1, branchNodes1) getBranchNodes(node2, branchNodes2) // check the largest distance between the branches let maxLevel = getCollisionLevel(node1, node2) let branchNodeBoundary1 = getBranchBoundary(branchNodes1, maxLevel) let branchNodeBoundary2 = getBranchBoundary(branchNodes2, maxLevel) let max1 = branchNodeBoundary1[1] let min2 = branchNodeBoundary2[0] let minSpace2 = branchNodeBoundary2[2] //console.log(node1.id, getBranchBoundary(branchNodes1, maxLevel), node2.id, // getBranchBoundary(branchNodes2, maxLevel), maxLevel); let diffBranch = Math.abs(max1 - min2) if (diffBranch > nodeSpacing) { let offset = max1 - min2 + nodeSpacing if (offset < -minSpace2 + nodeSpacing) { offset = -minSpace2 + nodeSpacing //console.log("RESETTING OFFSET", max1 - min2 + this.options.hierarchical.nodeSpacing, -minSpace2, offset); } if (offset < 0) { //console.log("SHIFTING", node2.id, offset); this._shiftBlock(node2.id, offset) stillShifting = true if (centerParent === true) this._centerParent(node2) } } } //this.body.emitter.emit("_redraw");}) } let minimizeEdgeLength = (iterations, node) => { //window.CALLBACKS.push(() => { // console.log("ts",node.id); let nodeId = node.id let allEdges = node.edges let nodeLevel = this.hierarchical.levels[node.id] // gather constants let C2 = this.options.hierarchical.levelSeparation * this.options.hierarchical.levelSeparation let referenceNodes = {} let aboveEdges = [] for (let i = 0; i < allEdges.length; i++) { let edge = allEdges[i] if (edge.toId != edge.fromId) { let otherNode = edge.toId == nodeId ? edge.from : edge.to referenceNodes[allEdges[i].id] = otherNode if (this.hierarchical.levels[otherNode.id] < nodeLevel) { aboveEdges.push(edge) } } } // differentiated sum of lengths based on only moving one node over one axis let getFx = (point, edges) => { let sum = 0 for (let i = 0; i < edges.length; i++) { if (referenceNodes[edges[i].id] !== undefined) { let a = this.direction.getPosition(referenceNodes[edges[i].id]) - point sum += a / Math.sqrt(a * a + C2) } } return sum } // doubly differentiated sum of lengths based on only moving one node over one axis let getDFx = (point, edges) => { let sum = 0 for (let i = 0; i < edges.length; i++) { if (referenceNodes[edges[i].id] !== undefined) { let a = this.direction.getPosition(referenceNodes[edges[i].id]) - point sum -= C2 * Math.pow(a * a + C2, -1.5) } } return sum } let getGuess = (iterations, edges) => { let guess = this.direction.getPosition(node) // Newton's method for optimization let guessMap = {} for (let i = 0; i < iterations; i++) { let fx = getFx(guess, edges) let dfx = getDFx(guess, edges) // we limit the movement to avoid instability. let limit = 40 let ratio = Math.max(-limit, Math.min(limit, Math.round(fx / dfx))) guess = guess - ratio // reduce duplicates if (guessMap[guess] !== undefined) { break } guessMap[guess] = i } return guess } let moveBranch = guess => { // position node if there is space let nodePosition = this.direction.getPosition(node) // check movable area of the branch if (branches[node.id] === undefined) { let branchNodes = {} getBranchNodes(node, branchNodes) branches[node.id] = branchNodes } let branchBoundary = getBranchBoundary(branches[node.id]) let minSpaceBranch = branchBoundary[2] let maxSpaceBranch = branchBoundary[3] let diff = guess - nodePosition // check if we are allowed to move the node: let branchOffset = 0 if (diff > 0) { branchOffset = Math.min( diff, maxSpaceBranch - this.options.hierarchical.nodeSpacing ) } else if (diff < 0) { branchOffset = -Math.min( -diff, minSpaceBranch - this.options.hierarchical.nodeSpacing ) } if (branchOffset != 0) { //console.log("moving branch:",branchOffset, maxSpaceBranch, minSpaceBranch) this._shiftBlock(node.id, branchOffset) //this.body.emitter.emit("_redraw"); stillShifting = true } } let moveNode = guess => { let nodePosition = this.direction.getPosition(node) // position node if there is space let [minSpace, maxSpace] = this._getSpaceAroundNode(node) let diff = guess - nodePosition // check if we are allowed to move the node: let newPosition = nodePosition if (diff > 0) { newPosition = Math.min( nodePosition + (maxSpace - this.options.hierarchical.nodeSpacing), guess ) } else if (diff < 0) { newPosition = Math.max( nodePosition - (minSpace - this.options.hierarchical.nodeSpacing), guess ) } if (newPosition !== nodePosition) { //console.log("moving Node:",diff, minSpace, maxSpace); this.direction.setPosition(node, newPosition) //this.body.emitter.emit("_redraw"); stillShifting = true } } let guess = getGuess(iterations, aboveEdges) moveBranch(guess) guess = getGuess(iterations, allEdges) moveNode(guess) //}) } // method to remove whitespace between branches. Because we do bottom up, we can center the parents. let minimizeEdgeLengthBottomUp = iterations => { let levels = this.hierarchical.getLevels() levels = levels.reverse() for (let i = 0; i < iterations; i++) { stillShifting = false for (let j = 0; j < levels.length; j++) { let level = levels[j] let levelNodes = this.hierarchical.distributionOrdering[level] for (let k = 0; k < levelNodes.length; k++) { minimizeEdgeLength(1000, levelNodes[k]) } } if (stillShifting !== true) { //console.log("FINISHED minimizeEdgeLengthBottomUp IN " + i); break } } } // method to remove whitespace between branches. Because we do bottom up, we can center the parents. let shiftBranchesCloserBottomUp = iterations => { let levels = this.hierarchical.getLevels() levels = levels.reverse() for (let i = 0; i < iterations; i++) { stillShifting = false shiftElementsCloser(branchShiftCallback, levels, true) if (stillShifting !== true) { //console.log("FINISHED shiftBranchesCloserBottomUp IN " + (i+1)); break } } } // center all parents let centerAllParents = () => { for (let nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) this._centerParent(this.body.nodes[nodeId]) } } // center all parents let centerAllParentsBottomUp = () => { let levels = this.hierarchical.getLevels() levels = levels.reverse() for (let i = 0; i < levels.length; i++) { let level = levels[i] let levelNodes = this.hierarchical.distributionOrdering[level] for (let j = 0; j < levelNodes.length; j++) { this._centerParent(levelNodes[j]) } } } // the actual work is done here. if (this.options.hierarchical.blockShifting === true) { shiftBranchesCloserBottomUp(5) centerAllParents() } // minimize edge length if (this.options.hierarchical.edgeMinimization === true) { minimizeEdgeLengthBottomUp(20) } if (this.options.hierarchical.parentCentralization === true) { centerAllParentsBottomUp() } shiftTrees() } /** * This gives the space around the node. IF a map is supplied, it will only check against nodes NOT in the map. * This is used to only get the distances to nodes outside of a branch. * @param {Node} node * @param {{Node.id: vis.Node}} map * @returns {number[]} * @private */ _getSpaceAroundNode(node, map) { let useMap = true if (map === undefined) { useMap = false } let level = this.hierarchical.levels[node.id] if (level !== undefined) { let index = this.hierarchical.distributionIndex[node.id] let position = this.direction.getPosition(node) let ordering = this.hierarchical.distributionOrdering[level] let minSpace = 1e9 let maxSpace = 1e9 if (index !== 0) { let prevNode = ordering[index - 1] if ( (useMap === true && map[prevNode.id] === undefined) || useMap === false ) { let prevPos = this.direction.getPosition(prevNode) minSpace = position - prevPos } } if (index != ordering.length - 1) { let nextNode = ordering[index + 1] if ( (useMap === true && map[nextNode.id] === undefined) || useMap === false ) { let nextPos = this.direction.getPosition(nextNode) maxSpace = Math.min(maxSpace, nextPos - position) } } return [minSpace, maxSpace] } else { return [0, 0] } } /** * We use this method to center a parent node and check if it does not cross other nodes when it does. * @param {Node} node * @private */ _centerParent(node) { if (this.hierarchical.parentReference[node.id]) { let parents = this.hierarchical.parentReference[node.id] for (var i = 0; i < parents.length; i++) { let parentId = parents[i] let parentNode = this.body.nodes[parentId] let children = this.hierarchical.childrenReference[parentId] if (children !== undefined) { // get the range of the children let newPosition = this._getCenterPosition(children) let position = this.direction.getPosition(parentNode) let [minSpace, maxSpace] = this._getSpaceAroundNode(parentNode) let diff = position - newPosition if ( (diff < 0 && Math.abs(diff) < maxSpace - this.options.hierarchical.nodeSpacing) || (diff > 0 && Math.abs(diff) < minSpace - this.options.hierarchical.nodeSpacing) ) { this.direction.setPosition(parentNode, newPosition) } } } } } /** * This function places the nodes on the canvas based on the hierarchial distribution. * * @param {Object} distribution | obtained by the function this._getDistribution() * @private */ _placeNodesByHierarchy(distribution) { this.positionedNodes = {} // start placing all the level 0 nodes first. Then recursively position their branches. for (let level in distribution) { if (distribution.hasOwnProperty(level)) { // sort nodes in level by position: let nodeArray = Object.keys(distribution[level]) nodeArray = this._indexArrayToNodes(nodeArray) this.direction.sort(nodeArray) let handledNodeCount = 0 for (let i = 0; i < nodeArray.length; i++) { let node = nodeArray[i] if (this.positionedNodes[node.id] === undefined) { let spacing = this.options.hierarchical.nodeSpacing let pos = spacing * handledNodeCount // We get the X or Y values we need and store them in pos and previousPos. // The get and set make sure we get X or Y if (handledNodeCount > 0) { pos = this.direction.getPosition(nodeArray[i - 1]) + spacing } this.direction.setPosition(node, pos, level) this._validatePositionAndContinue(node, level, pos) handledNodeCount++ } } } } } /** * This is a recursively called function to enumerate the branches from the largest hubs and place the nodes * on a X position that ensures there will be no overlap. * * @param {Node.id} parentId * @param {number} parentLevel * @private */ _placeBranchNodes(parentId, parentLevel) { let childRef = this.hierarchical.childrenReference[parentId] // if this is not a parent, cancel the placing. This can happen with multiple parents to one child. if (childRef === undefined) { return } // get a list of childNodes let childNodes = [] for (let i = 0; i < childRef.length; i++) { childNodes.push(this.body.nodes[childRef[i]]) } // use the positions to order the nodes. this.direction.sort(childNodes) // position the childNodes for (let i = 0; i < childNodes.length; i++) { let childNode = childNodes[i] let childNodeLevel = this.hierarchical.levels[childNode.id] // check if the child node is below the parent node and if it has already been positioned. if ( childNodeLevel > parentLevel && this.positionedNodes[childNode.id] === undefined ) { // get the amount of space required for this node. If parent the width is based on the amount of children. let spacing = this.options.hierarchical.nodeSpacing let pos // we get the X or Y values we need and store them in pos and previousPos. // The get and set make sure we get X or Y if (i === 0) { pos = this.direction.getPosition(this.body.nodes[parentId]) } else { pos = this.direction.getPosition(childNodes[i - 1]) + spacing } this.direction.setPosition(childNode, pos, childNodeLevel) this._validatePositionAndContinue(childNode, childNodeLevel, pos) } else { return } } // center the parent nodes. let center = this._getCenterPosition(childNodes) this.direction.setPosition(this.body.nodes[parentId], center, parentLevel) } /** * This method checks for overlap and if required shifts the branch. It also keeps records of positioned nodes. * Finally it will call _placeBranchNodes to place the branch nodes. * @param {Node} node * @param {number} level * @param {number} pos * @private */ _validatePositionAndContinue(node, level, pos) { // This method only works for formal trees and formal forests // Early exit if this is not the case if (!this.hierarchical.isTree) return // if overlap has been detected, we shift the branch if (this.lastNodeOnLevel[level] !== undefined) { let previousPos = this.direction.getPosition( this.body.nodes[this.lastNodeOnLevel[level]] ) if (pos - previousPos < this.options.hierarchical.nodeSpacing) { let diff = previousPos + this.options.hierarchical.nodeSpacing - pos let sharedParent = this._findCommonParent( this.lastNodeOnLevel[level], node.id ) this._shiftBlock(sharedParent.withChild, diff) } } this.lastNodeOnLevel[level] = node.id // store change in position. this.positionedNodes[node.id] = true this._placeBranchNodes(node.id, level) } /** * Receives an array with node indices and returns an array with the actual node references. * Used for sorting based on node properties. * @param {Array.<Node.id>} idArray * @returns {Array.<Node>} */ _indexArrayToNodes(idArray) { let array = [] for (let i = 0; i < idArray.length; i++) { array.push(this.body.nodes[idArray[i]]) } return array } /** * This function get the distribution of levels based on hubsize * * @returns {Object} * @private */ _getDistribution() { let distribution = {} let nodeId, node // we fix Y because the hierarchy is vertical, // we fix X so we do not give a node an x position for a second time. // the fix of X is removed after the x value has been set. for (nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { node = this.body.nodes[nodeId] let level = this.hierarchical.levels[nodeId] === undefined ? 0 : this.hierarchical.levels[nodeId] this.direction.fix(node, level) if (distribution[level] === undefined) { distribution[level] = {} } distribution[level][nodeId] = node } } return distribution } /** * Return the active (i.e. visible) edges for this node * * @param {Node} node * @returns {Array.<vis.Edge>} Array of edge instances * @private */ _getActiveEdges(node) { let result = [] util.forEach(node.edges, edge => { if (this.body.edgeIndices.indexOf(edge.id) !== -1) { result.push(edge) } }) return result } /** * Get the hubsizes for all active nodes. * * @returns {number} * @private */ _getHubSizes() { let hubSizes = {} let nodeIds = this.body.nodeIndices util.forEach(nodeIds, nodeId => { let node = this.body.nodes[nodeId] let hubSize = this._getActiveEdges(node).length hubSizes[hubSize] = true }) // Make an array of the size sorted descending let result = [] util.forEach(hubSizes, size => { result.push(Number(size)) }) TimSort.sort(result, function(a, b) { return b - a }) return result } /** * this function allocates nodes in levels based on the recursive branching from the largest hubs. * * @private */ _determineLevelsByHubsize() { let levelDownstream = (nodeA, nodeB) => { this.hierarchical.levelDownstream(nodeA, nodeB) } let hubSizes = this._getHubSizes() for (let i = 0; i < hubSizes.length; ++i) { let hubSize = hubSizes[i] if (hubSize === 0) break util.forEach(this.body.nodeIndices, nodeId => { let node = this.body.nodes[nodeId] if (hubSize === this._getActiveEdges(node).length) { this._crawlNetwork(levelDownstream, nodeId) } }) } } /** * TODO: release feature * TODO: Determine if this feature is needed at all * * @private */ _determineLevelsCustomCallback() { let minLevel = 100000 // TODO: this should come from options. // eslint-disable-next-line no-unused-vars let customCallback = function(nodeA, nodeB, edge) {} // TODO: perhaps move to HierarchicalStatus. // But I currently don't see the point, this method is not used. let levelByDirection = (nodeA, nodeB, edge) => { let levelA = this.hierarchical.levels[nodeA.id] // set initial level if (levelA === undefined) { levelA = this.hierarchical.levels[nodeA.id] = minLevel } let diff = customCallback( NetworkUtil.cloneOptions(nodeA, 'node'), NetworkUtil.cloneOptions(nodeB, 'node'), NetworkUtil.cloneOptions(edge, 'edge') ) this.hierarchical.levels[nodeB.id] = levelA + diff } this._crawlNetwork(levelByDirection) this.hierarchical.setMinLevelToZero(this.body.nodes) } /** * Allocate nodes in levels based on the direction of the edges. * * @private */ _determineLevelsDirected() { let minLevel = 10000 /** * Check if there is an edge going the opposite direction for given edge * * @param {Edge} edge edge to check * @returns {boolean} true if there's another edge going into the opposite direction */ let isBidirectional = edge => { util.forEach(this.body.edges, otherEdge => { if (otherEdge.toId === edge.fromId && otherEdge.fromId === edge.toId) { return true } }) return false } let levelByDirection = (nodeA, nodeB, edge) => { let levelA = this.hierarchical.levels[nodeA.id] let levelB = this.hierarchical.levels[nodeB.id] if ( isBidirectional(edge) && levelA !== undefined && levelB !== undefined ) { // Don't redo the level determination if already done in this case. return } // set initial level if (levelA === undefined) { levelA = this.hierarchical.levels[nodeA.