JSFiddle - React, Tailwind, and code Playground

by stvnmntjy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.4/cytoscape.min.js"></script>
<div id="container"></div>
<span id="button-container">
  <button id="shuffle-button" type="button">
    Shuffle
  </button>
</span>

CSS

#container {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

#button-container {
  left: 0;
  position: absolute;
  top: 0;
}

JavaScript

const highlightColor = '#6495ed';
const highlightTextColor = '#edbc64';

const highlightedCss = {
  'background-color': highlightColor,
  color: highlightTextColor,
  'font-size': '8pt',
  label: 'data(label)',
  'line-color': highlightColor,
  'line-style': 'solid',        
  'mid-source-arrow-color': highlightColor,
  'mid-source-arrow-fill': 'filled',
  'mid-source-arrow-shape': 'triangle',
  'mid-target-arrow-color': highlightColor,
  'mid-target-arrow-fill': 'filled',
  'mid-target-arrow-shape': 'triangle',
  'source-label': 'data(sourceLabel)',
  'source-text-offset': 10,
  'target-label': 'data(targetLabel)',
  'target-text-offset': 10,
  'text-outline-color': 'black',
  'text-outline-width': 0.5,
};

const cy = cytoscape({
	container: document.getElementById('container'),
  style: [{
      selector: 'edge',
      style: {
      	'curve-style': 'bezier',
      	'line-style': 'dashed',
        'mid-source-arrow-fill': 'hollow',
        'mid-source-arrow-shape': 'triangle',
        'mid-target-arrow-fill': 'hollow',
        'mid-target-arrow-shape': 'triangle',
      },
    }, {
      selector: 'node',
      style: {
      	'font-size': '8pt',
        height: 14,
        label: 'data(label)',
        shape: 'ellipse',
        'text-rotation': 'autorotate',
        width: 14,
      },
    }, {
      selector: ':selected',
      style: highlightedCss,
    }, {
      selector: '.neighbor',
      style: highlightedCss,
    }]
});

let edgeNumber = 0;
let nodeNumber = 0;

let lastNeighborhood = null;

const createNode = (label) => (cy.add({
	data: {
    id: `n${nodeNumber++}`,
    label: label,
  },
  groups: 'nodes',
}));

const createEdge = (a, b, label, aLabel, bLabel) => (cy.add({
	data: {
    id: `e${edgeNumber++}`,
    label: label,
    source: a.id(),
    sourceLabel: aLabel,
    target: b.id(),
    targetLabel: bLabel,
  },
  groups: 'edges',
}));

const n1 = createNode('alpha');
const n2 = createNode('bravo');
const n3 = createNode('charlie');
const e1 =...