Gathering detailed insights and metrics for cytoscape-dom-node
Gathering detailed insights and metrics for cytoscape-dom-node
Gathering detailed insights and metrics for cytoscape-dom-node
Gathering detailed insights and metrics for cytoscape-dom-node
cytoscape
Graph theory (a.k.a. network) library for analysis and visualisation
cytoscape-cose-bilkent
The CoSE layout for Cytoscape.js by Bilkent with enhanced compound node placement
cytoscape-fcose
The fCoSE layout for Cytoscape.js by Bilkent with fast compound node placement
cytoscape-popper
A Cytoscape.js extension for Popper.js
npm install cytoscape-dom-node
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
35 Stars
18 Commits
11 Forks
1 Watching
2 Branches
3 Contributors
Updated on 04 Nov 2024
JavaScript (100%)
Cumulative downloads
Total Downloads
Last day
19.7%
1,865
Compared to previous day
Last week
3.7%
7,957
Compared to previous week
Last month
-3.7%
36,485
Compared to previous month
Last year
567.3%
326,067
Compared to previous year
1
4
This extension lets you set DOM elements as nodes. When enabled providing the
DOM element by setting the dom
node data will cause the DOM element to be
rendered on top of the node, and the node will be set to the size of the DOM
element.
For a full working demo, see codepen abWdVOG.
Either import/require cytoscape-dom-node
, and register it as an extension with Cytoscape:
1const cytoscape = require('cytoscape'); 2cytoscape.use(require('cytoscape-dom-node'));
Or it can be included via a <script>
tag after cytoscape
, and will register itself:
1<script type="text/javascript" charset="utf8" src="path/to/cytoscape.js"></script> 2<script type="text/javascript" charset="utf8" src="path/to/cytoscape-dom-node.js"></script>
Create a cytoscape
instance and call domNode
on it:
1let cy = cytoscape({ 2 'container': document.getElementById('id-of-my-cytoscape-container'), 3 'elements': [], 4}); 5 6cy.domNode();
Now add a node with dom
in the data, set to a DOM element:
1let div = document.createElement("div"); 2div.innerHTML = `node ${id}`; 3 4cy.add({ 5 'data': { 6 'id': id, 7 'dom': div, 8 }, 9});
The div
you created will be shown as the node now.
See codepen abWdVOG for a working example.
The skip_node_append
option is a boolean flag (passed with node data) that controls whether the cytoscape-dom-node
appends the provided node to the provided DOM container.
By default, this option is set to false, meaning the cytoscape-dom-node
will append the node to the container.
However, in certain scenarios, such as when using EmberJS or another front-end framework, you might have already rendered the nodes to the DOM.
In these cases, you can set skip_node_append
to true to prevent the library from appending the node, allowing you to maintain control over the node's rendering process.
1let div = document.querySelector("#alreadyRenderedNodeId"); 2cy.add({ 3 'data': { 4 'id': id, 5 'dom': div, 6 'skip_node_append': true, 7 } 8})
One option is supported, dom_container
allows an container element to be specified which
will be used for nodes instead of the element it would otherwise create and use. It is the
callers responsibility to style the given element appropriately, for example:
1cy.domNode({'dom_container': some_element});
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 2/14 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
41 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More