JSFiddle - React, Tailwind, and code Playground

by peteorpeter

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div class="even-playing-field">
    <div id="a" class="box">
    <label>Big System</label>
    <div id="b" class="box">
        <label>Web Tier</label>
        <div id="c" class="box">
            <label>Admin UI</label>
        </div>
        <div id="d" class="box">
            <label>CSR Web UI</label>
        </div>
        
    </div>
    <div id="e" class="box">
        <label>Services</label>
        <div id="f" class="box">
            <label>WS API</label>
        </div>
        <div id="g" class="box">
            <label>Claims History</label>
        </div>
        <div id="h" class="box">
            <label>Access Control</label>
        </div>
        <div id="i" class="box">
            <label>Claims Adjudication</label>
        </div>
    </div>
    <div id="j" class="box">
        <label>Data Tier</label>
        <div id="k" class="box">
            <label>Claims</label>
        </div>
        <div id="l" class="box">
            <label>Tx History</label>
        </div>
        <div id="m" class="box">
            <label>Analytics</label>
            <div id="n" class="box">
                <label>Analytics Store</label>
            </div>
            <div id="o" class="box">
                <label>Calculations</label>
            </div>
            <div id="p" class="box">
                <label>Rules</label>
            </div>
        </div>
    </div>
</div>
</div>

CSS

.box {
    float:left;
    min-width: 100px;
    max-width: 600px;
    padding: 10px;
    border: 1px solid #888;
    border-radius: 4px;
    margin: 10px;
    position: relative;
    min-height: 30px;
    
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
    
    -webkit-box-shadow: 2px 2px 2px 2px rgba(200, 200, 200, .5);
    -moz-box-shadow: 2px 2px 2px 2px rgba(200, 200, 200, .5);
    box-shadow: 2px 2px 2px 2px rgba(200, 200, 200, .5);
}
.box.group { clear: both }

label { 
    diplay: block;
    width: 100%;
    float: left;
}

a.control {
    position: absolute;
    right: 6px;
    top: 4px; 
    cursor: pointer;
    font: Courier, monospace;
}

.even-playing-field { float: left; width: 100%; height: 100%; position:relative; }

JavaScript

$(function() {
    var $boxes = $('.box');

    $boxes.each(function() {

        if ($(this).find('.box').length) {

            $(this).addClass('group');

            var $control = $('<a class="control open">[-]</a>');

            $control.click(function() {
                if ($(this).hasClass('open')) {
                    $(this).removeClass('open').text('[+]').closest('.box').find(' > .box').hide('fast');
                } else {
                    $(this).addClass('open').text('[-]').closest('.box').find(' > .box').show('fast');
                }
            });

            $(this).append($control);

            //$control.click(); // start closed
        }
    });
});

        $(document).ready(function() {
            
            /************ 
                Setup
            *************/
            var paper;
            
            var canvasID = "canvas";
            // make a new empty div for the canvas
            var $canvas = $("<div id='"+ canvasID + "'/>");
            $('.even-playing-field').prepend($canvas);

            var width = $('.even-playing-field').width();
            var height = $('.even-playing-field').height();

            $canvas.css({
                "position" : "absolute",
                //"background" : "cyan", // for testing
                "width" : width + "px",
                "height" : height + "px"
            });
            
            paper = new Raphael(canvasID);
            
            // Link constructor            
            function Link (sourceID, targetID){                
                
                var srcRect, trgRect, line;
                
                getLine = function(sRect, tRect){
                    
                    var sX = sRect.attr("x") + sRect.attr("width");
                    var sY = sRect.attr("y") + sRect.attr("height")/2;
                    var tX = tRect.attr("x");
                    var tY = tRect.attr("y") + tRect.attr("height")/2;
                
...