How to use cytoscape-dagre - 8 common examples

import React, { Component } from 'react';
import cytoscape from 'cytoscape';
import $ from 'jquery';
import qtip from 'qtip2';
import cydagre from 'cytoscape-dagre';
import dagre from 'dagre';
import cyqtip from 'cytoscape-qtip';
import { ipcRenderer } from 'electron';
import ajax from 'superagent';
import navigator from 'cytoscape-navigator';


// register extension
cyqtip( cytoscape, $ );
cydagre( cytoscape, dagre );
navigator( cytoscape );


export default class GitTree extends Component {
	constructor() {
		super();
	}

	componentDidMount() {
		let localGitAction;
		let localGitNodes = [];
		let localGitEdges = [];
		let globalData;

		// NEED TO UPDATE LIVE ON ANY COMMIT, ONLY GRABS COMMIT WHEN OPEN DIRECTORY
		// find a way to update local changes in the data

//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import PropTypes from 'prop-types';
import React from 'react';
import cytoscape from 'cytoscape';
import cydagre from 'cytoscape-dagre';
import dagre from 'dagre';

cydagre(cytoscape, dagre);

export default class DAG extends React.Component {
  static get propTypes() {
    return {
      serviceCalls: PropTypes.arrayOf(
        PropTypes.shape({
          parent: PropTypes.string,
          child: PropTypes.string,
          callCount: PropTypes.number,
        })
      ),
    };
  }
  componentDidMount() {
    const { serviceCalls } = this.props;
    const nodeMap = {};

constructor() {
    super();
    cydagre(cytoscape); // register extension
    cycola(cytoscape);
  }
  componentDidMount() {

import React, { Component } from 'react';
import cytoscape from 'cytoscape';
import $ from 'jquery';
import qtip from 'qtip2';
import cydagre from 'cytoscape-dagre';
import dagre from 'dagre';
import cyqtip from 'cytoscape-qtip';
import { ipcRenderer } from 'electron';

// register extension
cyqtip( cytoscape, $ );
cydagre( cytoscape, dagre );

export default class DagTree extends Component {
	constructor() {
		super();
	}

	componentDidMount() {
		let localGitAction;
		let localGitNodes = [];
		let localGitEdges = [];

		localGitAction = ipcRenderer.on('parsedCommitAll', function(event, data){

			// loop through all local git activity, and store as nodes
			for (var i = 0; i < data.length; i++) {
				localGitNodes.push({

import React, { Component } from 'react';
import cytoscape from 'cytoscape';
import $ from 'jquery';
import cydagre from 'cytoscape-dagre';
import dagre from 'dagre';
import { ipcRenderer } from 'electron';
import createGitTree from './createGitTree';

cydagre( cytoscape, dagre );

const BrowserWindow = require('electron').remote.BrowserWindow;
const path = require('path');

export default class TeamGitTree extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {

		let gitTreeId = 'team-git-tree',
				teamGitHistory = this.props.getAppState.teamData,
				teamGitNodes = [],
				teamGitEdges = [];
		// loop through all local git activity, and store as nodes

componentDidMount() {

        cydagre(cytoscape, dagre);

        const cyGraph = cytoscape({
            container: this.refs.graphvisContainer,
            elements: computeCytoscapeGraph(this.props.modelConfig),
            layout: {
                name: 'dagre',
                rankDir: 'TD'
            },
            style: [
                {
                    selector: 'node',
                    style: {
                        'content': 'data(id)',
                        'text-opacity': 0.5,
                        'text-valign': 'center',
                        'text-halign': 'right',

componentDidMount() {

        cydagre(cytoscape, dagre);

        const cyGraph = cytoscape({
            container: this.refs.graphvisContainer,
            elements: computeCytoscapeGraph(this.props.modelConfig),
            layout: {
                name: 'dagre',
                rankDir: 'LR'
            },
            style: [
                {
                    selector: 'node',
                    style: {
                        'content': 'data(id)',
                        'text-opacity': 0.5,
                        'text-valign': 'bottom',
                        'text-halign': 'center',

import cytoscape from 'cytoscape';
import cydagre from 'cytoscape-dagre';
import dagre from 'dagre';
import { ipcRenderer } from 'electron';

cydagre( cytoscape, dagre );

export default function createGitTree(gitTreeId, gitNodes, gitEdges) {
	var cy = window.cy = cytoscape({
		container: document.getElementById(gitTreeId),
		boxSelectionEnabled: false,
		autounselectify: true,
		layout: {
			name: 'dagre'
		},
		style: cytoscape.stylesheet()
		.selector('node')
		  .css({
		    'content': 'data(commit)',
		    'width': 65,
		    'height': 65,
		    'text-opacity': 0.5,