Cytoscape.NET

Binder

Cytoscape.NET is an interface for Cytoscape.js written in F# to visualiz complex networks and integrate these with any type of attribute data.

Table of contents

Installation

Installation

The following examples show how easy it is to start working with Cytoscape.NET.

For applications and libraries

You can get all Cytoscape.NET packages from nuget at nuget page.

  • dotnet CLI
dotnet add package Cytoscape.NET --version <desired-version-here>

Or add the package reference directly to your .*proj file:

<PackageReference Include="Cytoscape.NET" Version="<desired-version-here>" />

For scripting

You can include the package via an inline package reference:

#r "nuget: Cytoscape.NET, <desired-version-here>"

Overview

Basics

The general design philosophy of Cytoscape.NET implements the following visualization flow:

  • initialize a Cytoscape object by using the CyGraph.initEmpty function.
  • attach elements e.g. notes, edges and data to visulize and further
  • style the graph with fine-grained control, e.g. by setting labels, color, etc.
  • display (in the browser or as cell result in a notebook) or save the graph (comming soon)

Initializing a graph

The CyGraph module contains the CyGraph.initEmpty function to create an empty graph. You can therefore initialize a cytoscape graph like this:

open Cytoscape.NET
let myFirstGraph = 
    CyGraph.initEmpty ()

myFirstGraph

Attach nodes and edges

The Elements module contains the node and edge functions to create the respective element. Node and edges can be decorated with data as CyStyleParam list You can therefore create a cytoscape graph with two nodes and an edge like this:

open Elements

let myGraph = 
    CyGraph.initEmpty ()
    |> CyGraph.withElements [
            node "n1" [ CyParam.label "FsLab"  ]
            node "n2" [ CyParam.label "ML" ]
 
            edge  "e1" "n1" "n2" []
        ]

Styling a graph

Styling functions are generally the CyGraph.with* naming convention. The following styling example does:

  • add two nodes including a text label
  • add an edge without any additional data
  • styles the nodes with color and content via CyGraph.withStyle
  • sets the graph size to 800 x 400 pixels via CyGraph.withSize
let myFirstStyledGraph =     
    CyGraph.initEmpty ()
    |> CyGraph.withElements [
            node "n1" [ CyParam.label "FsLab"  ]
            node "n2" [ CyParam.label "ML" ]
 
            edge  "e1" "n1" "n2" []
 
        ]
    |> CyGraph.withStyle "node"     
            [
                CyParam.content =. CyParam.label
                CyParam.color "#A00975"
            ]
    |> CyGraph.withSize(800, 400)

Attention: =. is a styling mapper and allows to pass data from different sources into the layout. Here the label attached to each node is rendered as content.

Displaying a graph in the browser

The CyGraph.show function will open a browser window and render the input graph there.

myGraph
|> CyGraph.show

Should render this chart in your brower:

myFirstStyledGraph
|> CyGraph.show

And here is what happened after applying the styles from above:

Contributing and copyright

The project is hosted on GitHub where you can report issues, fork the project and submit pull requests. If you're adding a new public API, please also consider adding samples that can be turned into a documentation. You might also want to read the library design notes to understand how it works.

The library is available under Public Domain license, which allows modification and redistribution for both commercial and non-commercial purposes. For more information see the License file in the GitHub repository.

namespace Cytoscape
namespace Cytoscape.NET
module Defaults from Cytoscape.NET
<summary> Contains mutable global default values. Changing these values will apply the default values to all consecutive Graph generations. </summary>
val mutable DefaultDisplayOptions: DisplayOptions
Multiple items
type DisplayOptions = inherit DynamicObj new: unit -> DisplayOptions static member addAdditionalHeadTags: additionalHeadTags: XmlNode list -> (DisplayOptions -> DisplayOptions) static member addDescription: description: XmlNode list -> (DisplayOptions -> DisplayOptions) static member getAdditionalHeadTags: displayOpts: DisplayOptions -> XmlNode list static member getCytoscapeReference: displayOpts: DisplayOptions -> CytoscapeJSReference static member getDescription: displayOpts: DisplayOptions -> XmlNode list static member init: ?AdditionalHeadTags: XmlNode list * ?Description: XmlNode list * ?CytoscapeJSReference: CytoscapeJSReference -> DisplayOptions static member initCDNOnly: unit -> DisplayOptions static member initDefault: unit -> DisplayOptions ...

--------------------
new: unit -> DisplayOptions
static member DisplayOptions.init: ?AdditionalHeadTags: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?Description: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?CytoscapeJSReference: CytoscapeJSReference -> DisplayOptions
type CytoscapeJSReference = | CDN of string | Full | Require of string | NoReference
<summary> Sets how cytoscape is referenced in the head of html docs. </summary>
union case CytoscapeJSReference.NoReference: CytoscapeJSReference
val myFirstGraph: CyGraph.CyGraph
module CyGraph from Cytoscape.NET
val initEmpty: unit -> CyGraph.CyGraph
module Elements from Cytoscape.NET
val myGraph: CyGraph.CyGraph
val withElements: elems: seq<CytoscapeModel.Element> -> cy: CyGraph.CyGraph -> CyGraph.CyGraph
val node: id: string -> dataAttributes: CyParam.CyStyleParam list -> Node
module CyParam from Cytoscape.NET
val label: v: 'a -> CyParam.CyStyleParam
val edge: id: string -> sourceId: string -> targetId: string -> dataAttributes: CyParam.CyStyleParam list -> Edge
val myFirstStyledGraph: CyGraph.CyGraph
val withStyle: selector: string -> cyStyles: seq<CyParam.CyStyleParam> -> cy: CyGraph.CyGraph -> CyGraph.CyGraph
val content: v: 'a -> CyParam.CyStyleParam
val color: v: 'a -> CyParam.CyStyleParam
val withSize: width: int * height: int -> cy: CyGraph.CyGraph -> CyGraph.CyGraph
val show: cy: CyGraph.CyGraph -> unit
val withZoom: zoom: CytoscapeModel.Zoom -> cy: CyGraph.CyGraph -> CyGraph.CyGraph
namespace Cytoscape.NET.CytoscapeModel
Multiple items
type Zoom = inherit DynamicObj new: unit -> Zoom static member Init: ?Level: float * ?Position: (int * int) * ?RenderedPosition: (int * int) * ?ZoomingEnabled: bool -> Zoom static member Update: ?Level: float * ?Position: (int * int) * ?RenderedPosition: (int * int) * ?ZoomingEnabled: bool -> (Zoom -> Zoom)

--------------------
new: unit -> CytoscapeModel.Zoom
static member CytoscapeModel.Zoom.Init: ?Level: float * ?Position: (int * int) * ?RenderedPosition: (int * int) * ?ZoomingEnabled: bool -> CytoscapeModel.Zoom
type HTML = static member CreateGraphHTML: graphData: string * zooming: string * divId: string * cytoscapeReference: CytoscapeJSReference * ?Width: int * ?Height: int -> XmlNode list static member CreateGraphScript: graphData: string * zooming: string * cytoscapeReference: CytoscapeJSReference -> XmlNode static member Doc: graphHTML: XmlNode list * cytoscapeReference: CytoscapeJSReference * ?AdditionalHeadTags: XmlNode list -> XmlNode static member show: cy: Cytoscape * ?DisplayOpts: DisplayOptions -> unit static member toEmbeddedHTML: ?DisplayOpts: DisplayOptions -> (Cytoscape -> string) static member toGraphHTML: ?DisplayOpts: DisplayOptions -> (Cytoscape -> string) static member toGraphHTMLNodes: ?DisplayOpts: DisplayOptions -> (Cytoscape -> XmlNode list)
<summary> HTML template for Cytoscape </summary>
static member HTML.toGraphHTML: ?DisplayOpts: DisplayOptions -> (CytoscapeModel.Cytoscape -> string)