JSFiddle - React, Tailwind, and code Playground

by armyofda12mnkeys

HTML

<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
<script src="https://cdn.jsdelivr.net/npm/graphlib@2.1.7/dist/graphlib.core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.4/dagre.core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.3/dagre-d3.core.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<html>
<head>
  <title>Module Visualization for 'Project1' questionniarre - 'Diabetes 1' module</title>
  <meta charset="utf-8">
</head>
<body>

<h2 id="header">Module Visualization for 'Project1' questionniarre - 'Diabetes 1' module</h2>

<div id="spinner"></div>
<svg width="100%" height="100%">
    <g></g>
</svg>
<script>


let first_question_module = 'RA_2821';
let first_question_cd = 'RA_2821-QS1';

var opts = {
  lines: 9, // The number of lines to draw
  length: 9, // The length of each line
  width: 5, // The line thickness
  radius: 14, // The radius of the inner circle
  color: '#428bca', // #rgb or #rrggbb or array of colors
  speed: 1.5, // Rounds per second
  trail: 40, // Afterglow percentage
  className: 'spinner', // The CSS class to assign to the spinner
};

let spinner = new Spinner(opts).spin( document.getElementById('spinner') );

//$(function(){ //if want to use jquery instead
window.onload = function(){
  $('svg')
	 .attr('width', $('body').innerWidth() )
	 .attr('height', $('body').innerHeight() );



  $.getJSON('https://cors-anywhere.herokuapp.com/https://test-screener.acurian.com/tests/tempfiles/questionnaire.json', function( sceenerLogicJson ) {


    let recursed_nodes_obj = {};
    let recursed_nodes_arr = [];
    let regex_reg_question = /([a-zA-Z0-9_\- ]+)-QS([0-9]+)$/;
    let regex_ends_with_sub_question   = /([a-zA-Z0-9_\- ]+)-QS(([0-9]+)\.([0-9]+))$/;
    let...

CSS

body {
  font: 300 14px 'Helvetica Neue', Helvetica;
  padding: 0px;
  margin: 0px;
}
#header {
 	padding:0px;
 	margin:0px;
 	text-align:center;
}
#legend {
 position: fixed;
 bottom:0px;
 right:0px;
 width: 350px;
 border: 1px dotted #CCC;
 padding: 5px;
 font-size: 24px;
 background-color: white;
 line-height: 25px;
}
#legend #close_button {
    /*
    position: absolute;
    top: 0;
    right: 0;
    */
    float: right;
}
#legend h6 {
	padding:0px;
	margin:0px;
}


svg {
	border-top: 1px dotted #CCC;
 	border-bottom: 1px dotted #CCC;
}
.node rect,
.node circle {
  stroke: black;
  fill: #CCC;
  border-radius: 25px;
}

.node.same_module rect,
.node.same_module circle {

}
.node.close_module rect,
.node.close_module circle {
	fill: purple;
}
.node.outside_module rect,
.node.outside_module circle  {
	fill: blue;
}
.node.decison_module rect,
.node.decison_module circle  {
	fill: green;
}
.node.close_module .label text,
.node.outside_module .label text,
.node.decison_module .label text,
.node.missing_module .label text {
	fill: white;
}


.node.qualify rect,
.node.qualify circle {
  stroke: lime;
  fill: yellow;
}

.node.disqualify rect,
.node.disqualify circle {
  stroke: red;
  fill: yellow;
}

.node.both rect,
.node.both circle {
  stroke: red;
  stroke-dasharray: 20;
  fill: yellow;
}
.node.missing_module circle {
  stroke: yellow;
  fill: red;
}

.edgePath path {
  stroke: #333;
  fill: #333;
  stroke-width: 1.5px;
}

#tooltip_template {
  position: "absolute";
  max-height: 800px;
  overflow: scroll;
}
.answer_hover_text {
  color: blue;
  position: relative;
  display: block; white-space: normal;
  text-decoration: underline;
}
.main_question_proto_logic,
.sub_question_proto_logic {
  border-top: 2px solid black;
}
.rule {
  border-top: 2px dotted blue;
}

/*
.node text {
  pointer-events: none;
}

.tipsy .name {
  font-size: 1.5em;
  font-weight: bold;
  color: #60b1fc;
  margin: 0;
}

.tipsy .description {
  font-size:...