How to use the jsplumb.ready function in jsplumb

console.log('current groups "' + manager.use_groups() +
			    '" for user ' + manager.user_token());
	    });
    }
};

///
/// Startup.
///
/// TODO: It would be good to have a general standard registry set so
/// that the bits here and above share the same registry code. Or
/// maybe I can just pass the manager in?
///

// Start the day the jsPlumb way.
jsPlumb.ready(function(){

    // Try to define token.
    var start_token = null;
    if( global_barista_token ){
	start_token = global_barista_token;
    }

    // Next we need a manager to try and pull in the model.
    if( typeof(global_id) === 'undefined' ||
	typeof(global_minerva_definition_name) === 'undefined' ||
	typeof(global_barista_location) === 'undefined' ){
	    alert('environment not ready');
	}else{

	    // BUG: Bad, bad, bad code...
	    // DEBUG: Path for heiko that prevents initial manager pass and

drawRelation = () => {
        const { relations } = this.props;

        jsPlumb.ready(() => {
            // Reset all endpoints and connections
            jsPlumb.reset();

            relations.forEach((relation) => {
                jsPlumb.connect({
                    source: relation.source.columnId,
                    target: relation.target.columnId,
                    overlays: [
                        ['Arrow', { location: 1, width: 12, length: 12 }]
                    ],
                    endpoints: [['Dot', { radius: 8 }], 'Blank'],
                    paintStyle: { stroke: '#7f8c8d', strokeWidth: 2 },
                    endpointStyle: { fillStyle: '#7f8c8d' }
                });
            });
        });

makeTablesDraggable = () => {
        const { storeTablePosition } = this.props;

        jsPlumb.ready(() => {
            jsPlumb.draggable(document.querySelectorAll('.draggable:not(.jtk-draggable)'), {
                // containment: 'parent',
                drag: (event) => {
                    if (event.pos[0] < 0 || event.pos[1] < 0) {
                        const table = document.getElementById(event.el.id);

                        if (table === null) {
                            return;
                        }

                        if (event.pos[0] < 0) {
                            table.style.left = '0px';
                        }

                        if (event.pos[1] < 0) {
                            table.style.top = '0px';

self.on('mount', function() {

            $('#canvas-body').css({
                height: CANVAS_SIZE,
                width: CANVAS_SIZE,
                top: -CANVAS_SIZE / 2,
                left: -CANVAS_SIZE / 2
            });

            jsp.ready(function () {

                jsp.importDefaults({
                    Endpoint: ['Dot', {radius: 2}],
                    Anchor: 'Continuous',
                    Connector: [
                        'StateMachine', {
                            curviness: 0,
                            proximityLimit: 260
                        }],
                    HoverPaintStyle: {strokeStyle: '#21cfdf', lineWidth: 1},
                    PaintStyle: {strokeStyle: '#325262', lineWidth: 1, dashstyle: "4 2"},
                    ConnectionOverlays: [
                        ['Arrow', {
                            location: 1,
                            id: 'arrow',
                            length: 12,