1.8.0 • Published 12 months ago

ngx-cytoscapejs v1.8.0

Weekly downloads
-
License
MIT
Repository
github
Last release
12 months ago

This library is a wrapper for Cytoscape.js to be used from any Angular 13+ application.

  • Rendering of Cytoscape.js and CX graphs
  • Automatic rerendering on graph data changes
  • Automatic graph size adjustment on window resize

Table of contents

Dependencies

ngx-cytoscapejs depends on Angular, Cytoscape.js, cx2js and cxVizConverter.

ngx-cytoscapejsAngularCytoscape.jsng-add
0.3.x13.x3.x:x:
1.0.x13.x3.x:x:
1.1.x13.x3.x:x:
1.2.x13.x3.x:x:
1.3.x13.x3.x:heavy_check_mark:
1.4.x14.x3.x:heavy_check_mark:
1.5.x15.x3.x:heavy_check_mark:
1.6.x16.x3.x:heavy_check_mark:
1.7.x17.x3.x:heavy_check_mark:
1.8.x18.x3.x:x:

Installation

Add dependencies from npm:

npm install --save ngx-cytoscapejs

Then import the CytoscapejsComponent into your component:

import { CytoscapejsComponent } from 'ngx-cytoscapejs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CytoscapejsComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {}

Using the Angular CLI is recommended:

ng add ngx-cytoscapejs@<version>

Manual installation

Add dependencies from npm:

npm install --save-dev @types/cytoscape
npm install --save ngx-cytoscapejs@<version>

Then import the CytoscapejsModule and add it to your module:

import { NgModule } from '@angular/core';
import { CytoscapejsModule } from 'ngx-cytoscapejs';

@NgModule({
  declarations: [...],
  imports: [CytoscapejsModule],
  providers: [...],
  bootstrap: [...],
})
export class AppModule {}

Usage

Add the cytoscapejs directive to your component's HTML:

<cytoscapejs [cytoscapeOptions]="cytoscapeOptions" [autoFit]="autoFit" (coreChanged)="coreChanged($event)"></cytoscapejs>

Configure the directive in your component:

import { Core, CytoscapeOptions } from 'cytoscape';
import { CxConverter } from 'ngx-cytoscapejs';

export class AppComponent {
  cytoscapeOptions: CytoscapeOptions = {...};

  autoFit: boolean = true;

  coreChanged(core: Core): void {
    // do something with the core
  }
}

The component will take up 100% of the parent's height and width.

API

For a graph to render you have to provide either cytoscapeOptions or cxData. The remaining inputs are optional.

Inputs

NameTypeDefaultDescription
cytoscapeOptionsCytoscapeOptionsYour Cytoscape graph data. You don't have to provide the container property as it will be overwritten with the component's referenced DOM element.
autoFitbooleantrueWhen set to true the graph will be fit every time the browser window is resized.
applyCxBackgroundColorbooleanfalseWhen set to true, the background color specified in the CX1 file will be applied to the visualization.
cxDataanyYour CX graph data. The data is converted using the the converters provided in the cxConverters input.
cxConvertersCxConverter[]cx2js, cxVizConverterAllows customizing the converters used by the library to convert the CX data. The library tries to convert the input data in the given order and renders the first successful conversion result.

Outputs

NameTypeDescription
coreChangedCoreEmits a Core every time a new core is created.
cxAttributeNameMapChangedCxAttributeNameMapEmits a CxAttributeNameMap every time a graph is converted using cx2js.

Enums

CxConverter

ValueDescription
cx2jsUse cx2js for CX conversion
cxVizConverterUse cxVizConverter for CX conversion

Interfaces

CxConversion

ValueTypeDescription
optionsCytoscapeOptionsThe CytoscapeOptions object resulting from the conversion.
attributeNameMapCxAttributeNameMapThe attribute mapping created when converting the CX graph. This property is optional.
backgroundColorstringThe background color extracted from the CX graph. This property is optional.

CxAttributeNameMap

Properties are unknown as they depend on the converted CX graph.

Getting help

If you have questions, concerns, bug reports, etc., please file an issue in this repository's Issue Tracker.

License

MIT

Credits and references

1.8.0

12 months ago

1.7.1

1 year ago

1.7.0

1 year ago

1.6.0

2 years ago

1.5.0

2 years ago

1.2.0

3 years ago

1.1.0

3 years ago

1.4.0

3 years ago

1.3.0

3 years ago

1.0.0

3 years ago

0.3.1

3 years ago

0.3.0

3 years ago