npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cytoscape-edge-connections

v0.5.0

Published

A Cytoscape extension that allows edges to connect other edges, according to the Associative Model of Data

Downloads

264

Readme

cytoscape-edge-connections

cytoscape-edge-connections

Description

This Cytoscape extension allows edges to connect other edges, according to the Associative Model of Data (demo).

This extension superimposes every edge with an auxiliary node, the "aux node". An aux node represents an edge and acts as a vehicle for connecting that edge.

Note: this extension does not emulate an edge by 2 edges with the aux node in the middle. Edges are not structurally changed. Instead the aux node is just superimposed, and the extension cares about keeping the aux node position in-sync with the edge position. This approach has several advantages:

  1. The original graph structure is not changed; existing Cytoscape traversal algorithms continue to work.
  2. Cytoscape's advanced edge rendering capabilities (e.g. curved parallel edges) continue to work.
  3. Cytoscape's layout algorithms continue to work. Aux nodes are locked and do not participate in layout.

The Associative Model of Data

Joseph V. Homan, Paul J. Kovacs -- A Comparison Of The Relational Database Model And The Associative Database Model (6 page article)
Issues in Information Systems, Volume X, No. 1, 2009
http://iacis.org/iis/2009/P2009_1301.pdf

Simon Williams -- The Associative Model Of Data (24 page article)
Journal of Database Marketing, Volume 8, 4, 2001
https://link.springer.com/content/pdf/10.1057/palgrave.jdm.3240049.pdf

Simon Williams -- The Associative Model Of Data (book, 284 pages)
Lazy Software, 2nd edition, 2002
https://web.archive.org/web/20181219134621/http://sentences.com/docs/amd.pdf

amd-schema amd-instances

Dependencies

  • Cytoscape.js >=3.3.2

Usage instructions

Download the library:

  • via npm: npm install cytoscape-edge-connections, or
  • via direct download in the repository (probably from a tag).

Import the library as appropriate for your project:

ES6 import:

import cytoscape from 'cytoscape';
import edgeConnections from 'cytoscape-edge-connections';

cytoscape.use(edgeConnections);     // register extension

CommonJS require:

let cytoscape = require('cytoscape');
let edgeConnections = require('cytoscape-edge-connections');

cytoscape.use(edgeConnections);     // register extension

AMD require:

require(['cytoscape', 'cytoscape-edge-connections'], function (cytoscape, edgeConnections) {
  edgeConnections(cytoscape);       // register extension
});

Plain HTML/JS has the extension registered for you automatically, because no require() is needed.

Initialization

You initialize the extension on the Cytoscape instance:

const ec = cy.edgeConnections(config);

Optionally you can pass a config object.
The possible config options are as follows:

| Config option | Description | Default | | ------------- | ----------- | ------- | | maxPasses | See detail about order below. | 10 |

API

The object returned by cy.edgeConnections() has several functions available on it:

| Function | Description | | -------- | ----------- | | addEdge(edge) | adds the edge to the graph; source and target can refer to either a node or to another edge | | addEdges(edges) | adds all edges contained in the given array to the graph | | auxNode(edge) | returns the given edge's aux node; undefined if the given edge has no aux node; throws if the given object is not an edge | | isAuxNode(node) | returns true if the given node is an aux node, false otherwise | | edgeId(node) | returns the given aux node's edge ID (string); undefined if the given node is not an aux node; throws if the given object is not a node | | edge(node) | returns the given aux node's edge; undefined if the edge is not in the graph (anymore); throws if the given object is not an aux node |

The addEdge(s) method(s) accepts usual Cytoscape edge objects (plain JS objects) but with the specialty that source and target can refer to either a node or to another edge.

Important: in order to get edge connectivity you must create edges programmatically, that is by calling the cy.addEdge(s) method(s) listed above. Only then 1) the edge will get an aux node, and thus can be the source/target of another edge, and 2) can itself have an edge at their source/target end. In contrast edges created/added the standard way (either declaratively in the Cytoscape constructor or by calling cy.add()) will not get edge connectivity. Edges with and without edge connectivity can friendly coexist in the same graph.

One more detail about order: the cy.addEdges(edges) method finds out itself the order in which to add the given edges. There is no requirement a referred edge appears in the edges array before the referring edge. The only requirements are 1) the referred edges are contained in the array somewhere, and 2) the referred nodes exist in the graph already. (The "find out order" process is governed by the maxPasses config value.) In contrast the (singular) cy.addEdge(edge) method requires that both referred elements (source and target) exist in the graph already, regardless of being node or edge.

Styling

By default an aux node gets the same color as the edge it represents.

For further styling the aux-node class can be used, e.g. for setting the aux node size:

cytoscape({
  style: [
    {
      selector: 'node.aux-node',
      style: {
        'width': 6,
        'height': 6
      }
    }
  ]
})

Build

  1. npm install : installs Webpack into ./node_modules
  2. npm run build : builds ./src into ./dist/cytoscape-edge-connections.min.js

Version history

0.5.0 -- Apr 18, 2023

  • Fix: support for multiple Cytoscape instances (thanks to @gianluca-pepe)

0.4.2 -- Dec 30, 2020

  • Chore:
    • Update link to "The Associative Model Of Data" book (PDF)
    • Adapt URLs to github.com/dmx-systems
    • Code run through eslint

0.4.1 -- Aug 15, 2019

  • Robustness: rendering of corrupt graphs; corrupt parts are logged on the console

0.4.0 -- Jul 22, 2019

  • Optimization: aux node style recalculation
  • Refactoring: aux node recoloring
  • Fix: reposition aux nodes when removing a parallel edge
  • Change license to AGPL-3.0

0.3.5 -- Mar 31, 2019

  • Fix addEdge() warning

0.3.4 -- Mar 2, 2019

  • Update package.json and README.md regarding required Cytoscape version (thanks to @pmeijer)
  • More sparse console logging

0.3.3 -- Jan 26, 2019

  • Fix InvalidStateError: The object is in an invalid state

0.3.2 -- Jan 20, 2019

  • Fix: aux node position of parallel edges

0.3.1 -- Jan 15, 2019

  • Make use of Cytoscape 3.3.2 (edge point fix, https://github.com/cytoscape/cytoscape.js/issues/2250)

0.3.0 -- Jan 14, 2019

  • Improved aux node styling:
    • An aux node automatically gets the same color as the edge it represents
    • For styling aux nodes have class aux-node (config option auxNodeData is now removed)
  • API changes:
    • Support edges with string IDs as well
    • New method: edge() returns the edge represented by the given aux node
  • Extension is properly namespaced (to avoid interference with Cytoscape or other extensions/applications, thanks to @maxkfranz):
    • Initializer returns idiosyncratic API object (instead extending Cytoscape's core and collection prototypes)
    • Internal: use a (namespaced) scratchpad to store edge data (instead of changing edge data directly)

0.2.1 -- Jan 5, 2019

  • README: add styling hint

0.2.0 -- Jan 2, 2019

  • Extension is general purpose (DMX application specifics removed)
    • 2 config options can be passed to initializer: auxNodeData, maxPasses
  • Fix: aux nodes are not movable by user
  • Extended README
  • Demo page

0.1.0 -- Dec 30, 2018

  • Initial version; functional