JSFiddle - React, Tailwind, and code Playground

by rafalry

HTML

<!DOCTYPE html>
<!-- This code is for demonstration purposes only.  You should not hotlink to Github, Rawgit, or files from the Cytoscape.js documentation in your production apps. -->
<html>
<head>
  <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
  <script type="text/javascript" src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="model.js"></script>
  <script type="text/javascript" src="data.js"></script>
  <script type="text/javascript" src="draw.js"></script>
  <script type="text/javascript" src="process.js"></script>
  <style type="text/css">
    body {
      font: 300 14px 'Helvetica Neue', Helvetica;
    }

    .node rect,
    .node circle,
    .node ellipse,
    .node polygon {
      stroke: #333;
      fill: #fff;
      stroke-width: 1.5px;
    }

    .edgePath path {
      stroke: #333;
      fill: #333;
      stroke-width: 1.5px;
    }
  </style>

</head>
<body>
<div style="float: left">
Scenarios:
<ul id="scenarios">

</ul>
Expand:
<ul id="subscenarios">

</ul>
</div>

<svg width=1400 height=1000><g/></svg>
<script>



</script>
</body>
</html>

JavaScript

const PROTOCOL_DIRECT = "direct";
const PROTOCOL_API = "direct";
const PROTOCOL_SAML = "SAML";
const PROTOCOL_OIDC = "OpenId Connect";

const TAG_IMPL_CORE = "TAG_IMPL_CORE";
const TAG_IMPL_EXTENSION = "TAG_IMPL_EXTENSION";
const TAG_IMPL_OTHER = "TAG_IMPL_OTHER";

const TAG_UI = "TAG_UI";
const TAG_NOUI = "TAG_NOUI";

const TAG_SUCCESS_HAPPY = "TAG_SUCCESS_HAPPY";
const TAG_SUCCESS_UNHAPPY = "TAG_SUCCESS_UNHAPPY";

class Node {
  constructor(label, tags) {
    this.label = label;
    this.tags = tags || [];
    this.id = getNodeId(label);
  }
}

class Edge {
  constructor(source, dest, label, tags) {
    this.source = source;
    this.dest = dest;
    this.label = label || "";
    this.tags = tags || [];
  }
}

class Protocol {
  constructor(entry, others) {
    this.entry = entry;
    this.others = others || [];
  }
}

class Scenario {
  constructor(label, protocols, nodes, edges) {
    this.label = label;
    this.protocols = protocols;
    this.nodes = nodes;
    this.edges = edges;
    this.id = getNodeId(label);
  }
}

class Subscenario {
  constructor(label, equivalent, start, end, nodes, edges) {
    this.label = label;
    this.equivalent = equivalent;
    this.start = start;
    this.end = end;
    this.nodes = nodes;
    this.edges = edges;
    this.id = getNodeId(label);
  }
}

function getNodeId(nodeName) {
  return nodeName.split(' ').join('');
}

var directWebStart = new Node("Direct web access", [TAG_IMPL_CORE, TAG_UI]);
var apiStart = new Node("API access", [TAG_IMPL_CORE, TAG_UI]);
var samlStart = new Node("API access", [TAG_IMPL_CORE, TAG_UI]);

var redirectAfterLogin = new Node("Redirect output", [TAG_IMPL_CORE, TAG_UI]);

var openHomePage = new Node("Open home page", [TAG_IMPL_CORE, TAG_UI]);
var loginWithUnp = new Node("Login with UnP", [TAG_IMPL_CORE, TAG_UI]);
var selectLoginWithFacebook = new Node("Select login with Facebook", [TAG_IMPL_CORE, TAG_UI]);
var loginWithFacebook = new Node("Login with Facebook", [TAG_IMPL_OTHER, TAG_UI]);
var...