<commit_before>var app = app || {};

(function() {
    // canonical store for all block objects
    var blocks = {};

    // ids for all selected blocks
    var selected = [];

    function createInputGeometry(inputs, geometry) {
        return inputs.map(function(id, i) {
            return {
                id: id,
                x: geometry.routeRadius,
                y: (i + .5) * geometry.routeHeight,
                direction: 'input'
            }
        });
    }

    function createOutputGeometry(outputs, geometry) {
        return outputs.map(function(id, i) {
            return {
                id: id,
                x: geometry.width + geometry.routeRadius,
                y: (+.5) * geometry.routeHeight,
                direction: 'output'
            }
        });
    }

    function Crank() {
        this.status = null;
    }

    Crank.prototype = Object.create(app.Emitter.prototype);
    Crank.constructor = Crank;

    Crank.prototype.update = function(s) {
        if (s != this.status) {
            this.status = s;
            this.emit();
        }
    }

    function Group(data) {}

    function Source(data) {}

    function Block(data) {

        // TODO: drop the whole "inputs" and "outputs" part of the schema, put
        // distinction inside the map as a field. 
        var inputs = data.inputs.map(function(input, i) {
            return data.id + '_' + i + '_input';
        });

        var outputs = data.outputs.map(function(output, i) {
            return data.id + '_' + i + '_output';
        });

        // ask the RouteStore to create some routes.
        // TODO: consider using facebook's waitFor() in the future. in that case, 
        // we'd just make RouteStore consume the WS_BLOCK_CREATE message,
        // and have the RouteStore do the job of what is happening here.
        inputs.map(function(id, i) {
            app.Dispatcher.dispatch({
                action: app.Actions.APP_ROUTE_CREATE,
                id: id,
                blockId: data.id,
                index: i,
                direction: 'input',
                data: data.inputs[i]
            });
        });

        outputs.map(function(id, i) {
            app.Dispatcher.dispatch({
                action: app.Actions.APP_ROUTE_CREATE,
                id: id,
                blockId: data.id,
                index: i,
                direction: 'output',
                data: data.outputs[i]
            });
        });

        function canvasMeasureText(text, style) {
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            ctx.font = style;
            return ctx.measureText(text);
        }

        // calculate block width
        // potentially make a util so that this can be shared with Group.
        var inputMeasures = inputs.map(function(r) {
            return canvasMeasureText(app.RouteStore.getRoute(r).data.name, '');
        });

        var outputMeasures = outputs.map(function(r) {
            return canvasMeasureText(app.RouteStore.getRoute(r).data.name, '');
        });

        var maxInputWidth = inputMeasures.length ? Math.max.apply(null, inputMeasures.map(function(im) {
            return im.width;
        })) : 0;

        var maxOutputWidth = outputMeasures.length ? Math.max.apply(null, outputMeasures.map(function(om) {
            return om.width;
        })) : 0;

        var routeHeight = 15;

        var padding = {
            vertical: 6,
            horizontal: 6
        }

        // the following is derived data for use with UI
        this.geometry = {
            width: maxInputWidth + maxOutputWidth + padding.horizontal,
            height: Math.max(inputs.length, outputs.length) * routeHeight + padding.vertical,
            routeRadius: Math.floor(routeHeight / 2.0),
            routeHeight: routeHeight,
        }
        this.inputs = createInputGeometry(inputs, this.geometry);
        this.outputs = createOutputGeometry(outputs, this.geometry);
        this.connections = [];
        this.position = {
            x: data.position.x,
            y: data.position.y
        }

        // when the state of the block changes, we need to know what status
        // was set last so that we can clear it. 
        this.lastRouteStatus = null;
        this.crank = new Crank();
        this.data = data;

        this.canvas = document.createElement('canvas');
        this.canvas.width = this.geometry.width + (this.geometry.routeRadius * 2);
        this.canvas.height = this.geometry.height + (this.geometry.routeRadius * 2);


        this.render();
    }

    Block.prototype = Object.create(app.Emitter.prototype);
    Block.constructor = Block;

    Block.prototype.render = function() {
        var ctx = this.canvas.getContext('2d');
        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        ctx.fillStyle = 'rgba(230,230,230,1)';
        ctx.fillRect(this.geometry.routeRadius, 0, this.geometry.width, this.geometry.height);
        ctx.lineWidth = selected.indexOf(this.data.id) !== -1 ? 2 : 1;
        ctx.strokeStyle = selected.indexOf(this.data.id) !== -1 ? 'rgba(0,0,255,1)' : 'rgba(0,0,0,1)';
        ctx.strokeRect(this.geometry.routeRadius, 0, this.geometry.width, this.geometry.height);

        // move to constants
        var types = {
            'number': 'rgba(170, 255, 0, 1)',
            'object': 'rgba(255, 170, 0, 1)',
            'array': 'rgba(255, 0, 170, 1)',
            'string': 'rgba(170, 0, 255, 1)',
            'boolean': 'rgba(0, 170, 255, 1)',
            'writer': 'rgba(0, 255, 170, 1)',
            'any': 'rgba(255, 255, 255, 1)',
            'error': 'rgba(255, 0, 0, 1)'
        }

        function renderRoute(routeGeometry, route, geometry) {
            ctx.beginPath();
            ctx.arc(routeGeometry.x, routeGeometry.y, geometry.routeRadius, 0, 2 * Math.PI, false);
            ctx.fillStyle = types[route.data.type];
            ctx.fill();
            ctx.lineWidth = 1;
            ctx.strokeStyle = 'black';
            ctx.stroke();
        };

        this.inputs.forEach(function(routeGeometry) {
            var route = app.RouteStore.getRoute(routeGeometry.id);
            renderRoute(routeGeometry, route, this.geometry);
        }.bind(this))

        this.outputs.forEach(function(routeGeometry, i) {
            var route = app.RouteStore.getRoute(routeGeometry.id);
            renderRoute(routeGeometry, route, this.geometry);
        }.bind(this))

        this.emit();
    }
<commit_msg>fixing block display a bit<commit_after>var app = app || {};

(function() {
    // canonical store for all block objects
    var blocks = {};

    // ids for all selected blocks
    var selected = [];

    function createInputGeometry(inputs, geometry) {
        return inputs.map(function(id, i) {
            return {
                id: id,
                x: geometry.routeRadius,
                y: (i + .5) * geometry.routeHeight,
                direction: 'input'
            }
        });
    }

    function createOutputGeometry(outputs, geometry) {
        return outputs.map(function(id, i) {
            return {
                id: id,
                x: geometry.width + geometry.routeRadius,
                y: (+.5) * geometry.routeHeight,
                direction: 'output'
            }
        });
    }

    function Crank() {
        this.status = null;
    }

    Crank.prototype = Object.create(app.Emitter.prototype);
    Crank.constructor = Crank;

    Crank.prototype.update = function(s) {
        if (s != this.status) {
            this.status = s;
            this.emit();
        }
    }

    function Group(data) {}

    function Source(data) {}

    function Block(data) {

        // TODO: drop the whole "inputs" and "outputs" part of the schema, put
        // distinction inside the map as a field. 
        var inputs = data.inputs.map(function(input, i) {
            return data.id + '_' + i + '_input';
        });

        var outputs = data.outputs.map(function(output, i) {
            return data.id + '_' + i + '_output';
        });

        // ask the RouteStore to create some routes.
        // TODO: consider using facebook's waitFor() in the future. in that case, 
        // we'd just make RouteStore consume the WS_BLOCK_CREATE message,
        // and have the RouteStore do the job of what is happening here.
        inputs.map(function(id, i) {
            app.Dispatcher.dispatch({
                action: app.Actions.APP_ROUTE_CREATE,
                id: id,
                blockId: data.id,
                index: i,
                direction: 'input',
                data: data.inputs[i]
            });
        });

        outputs.map(function(id, i) {
            app.Dispatcher.dispatch({
                action: app.Actions.APP_ROUTE_CREATE,
                id: id,
                blockId: data.id,
                index: i,
                direction: 'output',
                data: data.outputs[i]
            });
        });

        function canvasMeasureText(text, style) {
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            ctx.font = style;
            return ctx.measureText(text);
        }

        // calculate block width
        // potentially make a util so that this can be shared with Group.
        var inputMeasures = inputs.map(function(r) {
            return canvasMeasureText(app.RouteStore.getRoute(r).data.name, '16px helvetica');
        });

        var outputMeasures = outputs.map(function(r) {
            return canvasMeasureText(app.RouteStore.getRoute(r).data.name, '16px helvetica');
        });

        var maxInputWidth = inputMeasures.length ? Math.max.apply(null, inputMeasures.map(function(im) {
            return im.width;
        })) : 0;

        var maxOutputWidth = outputMeasures.length ? Math.max.apply(null, outputMeasures.map(function(om) {
            return om.width;
        })) : 0;

        var routeHeight = 15;

        var padding = {
            vertical: 6,
            horizontal: 6
        }

        // the following is derived data for use with UI
        this.geometry = {
            width: maxInputWidth + maxOutputWidth + padding.horizontal + routeHeight,
            height: Math.max(inputs.length, outputs.length) * routeHeight + padding.vertical,
            routeRadius: Math.floor(routeHeight / 2.0),
            routeHeight: routeHeight,
        }
        this.inputs = createInputGeometry(inputs, this.geometry);
        this.outputs = createOutputGeometry(outputs, this.geometry);
        this.connections = [];
        this.position = {
            x: data.position.x,
            y: data.position.y
        }

        // when the state of the block changes, we need to know what status
        // was set last so that we can clear it. 
        this.lastRouteStatus = null;
        this.crank = new Crank();
        this.data = data;

        this.canvas = document.createElement('canvas');
        this.canvas.width = this.geometry.width + (this.geometry.routeRadius * 2);
        this.canvas.height = this.geometry.height;


        this.render();
    }

    Block.prototype = Object.create(app.Emitter.prototype);
    Block.constructor = Block;

    Block.prototype.render = function() {
        var ctx = this.canvas.getContext('2d');
        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        ctx.fillStyle = 'rgba(230,230,230,1)';
        ctx.fillRect(this.geometry.routeRadius, 0, this.geometry.width, this.geometry.height);
        ctx.lineWidth = selected.indexOf(this.data.id) !== -1 ? 2 : 1;
        ctx.strokeStyle = selected.indexOf(this.data.id) !== -1 ? 'rgba(0,0,255,1)' : 'rgba(0,0,0,1)';
        ctx.strokeRect(this.geometry.routeRadius, 0, this.geometry.width, this.geometry.height);

        // move to constants
        var types = {
            'number': 'rgba(170, 255, 0, 1)',
            'object': 'rgba(255, 170, 0, 1)',
            'array': 'rgba(255, 0, 170, 1)',
            'string': 'rgba(170, 0, 255, 1)',
            'boolean': 'rgba(0, 170, 255, 1)',
            'writer': 'rgba(0, 255, 170, 1)',
            'any': 'rgba(255, 255, 255, 1)',
            'error': 'rgba(255, 0, 0, 1)'
        }

        function renderRoute(routeGeometry, route, geometry) {
            ctx.beginPath();
            ctx.arc(routeGeometry.x, routeGeometry.y, geometry.routeRadius, 0, 2 * Math.PI, false);
            ctx.fillStyle = types[route.data.type];
            ctx.fill();
            ctx.lineWidth = 1;
            ctx.strokeStyle = 'black';
            ctx.stroke();

            ctx.font = '16px helvetica';
            ctx.textAlign = route.direction === 'input' ? 'left' : 'right';
            ctx.fillStyle = 'black';
            ctx.fillText(route.data.name, routeGeometry.x + (route.direction === 'input' ? 1 : -1) * geometry.routeRadius, routeGeometry.y + geometry.routeRadius)
        };

        this.inputs.forEach(function(routeGeometry) {
            var route = app.RouteStore.getRoute(routeGeometry.id);
            renderRoute(routeGeometry, route, this.geometry);
        }.bind(this))

        this.outputs.forEach(function(routeGeometry, i) {
            var route = app.RouteStore.getRoute(routeGeometry.id);
            renderRoute(routeGeometry, route, this.geometry);
        }.bind(this))

        this.emit();
    }

{'fraction_non_alphanumeric': 0.12554820486136922, 'fraction_numerical': 0.016724894075670856, 'mean_word_length': 1.797089397089397, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5291584', 'n_tokens_mistral': 4004, 'n_tokens_neox': 3719, 'n_words': 892}