Benchmark: Cytoscape - creating vertices & edges

Cytoscape - creating vertices & edges (version: 2)

This benchmark is incomplete

Comparing performance of: _t1 - Cytoscape - add one (without additional props) vs _t2 - Cytoscape - add many (without additional props) vs _t3 - Cytoscape - add one edge (without additional props) vs _t4 - Cytoscape - add many edge (without additional props)

Created: 7 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.0.0/cytoscape.min.js'></script>
<div 
     id="cy" 
     style="width:100%;height:100%;position:absolute;top:10px;left:20px;"
>
</div>
<div>
<p>
  foo bar baz
</p>
</div>

Script Preparation code:

var big_loop_size = 1000

// for test 1
var cy_t1 = cytoscape({
  container: document.getElementById('cy'),
});

// for test 2
var cy_t2 = cytoscape({
  container: document.getElementById('cy'),
});

// for test 3
var cy_t3 = cytoscape({
  container: document.getElementById('cy'),
});
cy_t3.add({
  data: {
    id: 'a'
  }
});
cy_t3.add({
  data: {
    id: 'b'
  }
});

// for test 4
var cy_t4 = cytoscape({
  container: document.getElementById('cy'),
});
for (let i=0; i<big_loop_size; i++) {
	cy_t4.add({
    	data: {id: i},
    });
};

// for test 5
var cy_t5 = cytoscape({
  container: document.getElementById('cy'),
});

Tests:

_t1 - Cytoscape - add one (without additional props)
cy_t1.add({ data: { id: 'a' } });
_t2 - Cytoscape - add many (without additional props)
for (let i=0; i<big_loop_size; i++) { cy_t2.add({ data: {id: i}, }); };
_t3 - Cytoscape - add one edge (without additional props)
cy_t3.add({ data: { id: 'ab', source: 'a', target: 'b' } });
_t4 - Cytoscape - add many edge (without additional props)
for (let i=0; i<big_loop_size-1; i++) { cy_t4.add({ data: { id: 'edge:' + i , source: i, target: i+1 } }); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
_t1 - Cytoscape - add one (without additional props)
_t2 - Cytoscape - add many (without additional props)
_t3 - Cytoscape - add one edge (without additional props)
_t4 - Cytoscape - add many edge (without additional props)

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its components.

**Benchmark Definition JSON**

The provided JSON represents a JavaScript microbenchmark created using MeasureThat.net. It consists of three main parts:

1. **Script Preparation Code**: This section defines a Cytoscape graph and creates multiple test cases by adding vertices (nodes) or edges to the graph.
2. **Html Preparation Code**: This section provides the HTML code for the benchmark, including a container element for the graph and some additional HTML elements.
3. **Individual Test Cases**: These are small snippets of JavaScript code that are executed repeatedly to measure their performance.

**Options Compared**

The benchmark compares different approaches to adding vertices or edges to a Cytoscape graph:

* **Test 1 (_t1)**: Adds a single vertex with minimal properties (`cy_t1.add({ data: { id: 'a' } });`).
* **Test 2 (_t2)**: Adds multiple vertices in a loop (`for (let i=0; i<big_loop_size; i++) { cy_t2.add({ data: { id: i } }); };`).
* **Test 3 (_t3)**: Adds a single edge with minimal properties (`cy_t3.add({ data: { id: 'ab', source: 'a', target: 'b' } });`).
* **Test 4 (_t4)**: Adds multiple edges in a loop (`for (let i=0; i<big_loop_size-1; i++) { cy_t4.add({ data: { id: 'edge:' + i, source: i, target: i+1 } }); };`).

**Pros and Cons**

* **Test 1**: This test is a simple case of adding a vertex with minimal properties. It's likely to be fast, but may not accurately represent real-world use cases.
* **Test 2**: Adding multiple vertices in a loop can be an efficient operation, as it can utilize parallel processing. However, this test may not capture the overhead of repeated graph updates.
* **Test 3**: Adding a single edge with minimal properties is similar to Test 1, but adds the complexity of handling edges. It's likely to be slower than adding vertices alone.
* **Test 4**: This test adds multiple edges in a loop, which can lead to performance issues if not optimized properly. However, it may accurately represent real-world use cases where edges are frequently added.

**Library: Cytoscape**

Cytoscape is an open-source graph visualization library for JavaScript. It provides a simple API for creating and manipulating graphs, including adding nodes and edges. In this benchmark, Cytoscape is used to create and update the graph structure.

**Special JS Feature or Syntax**

There is no explicit mention of any special JavaScript features or syntax in the benchmark. However, it's worth noting that Cytoscape uses some proprietary JavaScript APIs under the hood to optimize performance.

Overall, this benchmark provides a good representation of the performance differences between adding vertices and edges to a graph using Cytoscape. It's likely to be useful for developers interested in optimizing graph-related code or for researchers studying graph algorithms and performance.

Related benchmarks: