<commit_before>/*globals define, _, $*/
/*jshint browser: true, camelcase: false*/

/**
 * @author brollb / https://github.com/brollb
 */

define([
    'js/Constants',
    'js/NodePropertyNames',
    'widgets/EasyDAG/EasyDAGWidget.DecoratorBase',
    'css!./LayerDecorator.EasyDAGWidget.css',
    'd3'
], function (
    CONSTANTS,
    nodePropertyNames,
    DecoratorBase
) {

    'use strict';

    var LayerDecorator,
        DECORATOR_ID = 'LayerDecorator',

    LayerDecorator = function (options) {
        var opts = _.extend({}, options);

        this._node = options.node;
        this._attrToDisplayName = {};
        this.attributeFields = {};
        this.setAttributes();

        this.color = this.color || '#ff9800';
        // Set width, height values
        if (!this.size) {
            this.size = {
                width: 100,
                height: 50
            };
        }

        if (!this.dense) {  // condensed size
            this.dense = {};
            this.dense.width = this.size.width;
            this.dense.height = this.size.height;
        }

        this.width = this.dense.width;
        this.height = this.dense.height;

        DecoratorBase.call(this, options);
        this.initialize();
        this.condense();
        this.logger.debug('LayerDecorator ctor'); 
    };

    _.extend(LayerDecorator.prototype, DecoratorBase.prototype);

    LayerDecorator.prototype.initialize = function() {
        this.width = this.dense.width;
        this.height = this.dense.height;

        this.$body = this.$el
            .append('path')
            .attr('class', 'layer-decorator');

        this.$name = this.$el.append('text')
            .attr('class', 'name')
            .style('font-size', '16px')  // FIXME: Move this to css
            .attr('fill', 'black');

        this.$attributes = this.$el.append('g')
            .attr('fill', '#222222');
    };

    LayerDecorator.prototype.expand = function() {
        var height,
            rx = this.size.width/2,
            ry = this.size.height/2,
            attrNames = Object.keys(this._attributes),
            displayName,
            path,
            textHeight = 15,

            // Attributes
            initialY = 20,
            attributeMargin = 10,
            leftCol,
            rightCol,
            y = 5;

        // Get the height from the number of attributes
        height = y + this.dense.height + textHeight*attrNames.length;

        path = [
            `M${-rx},0`,
            `l ${this.size.width} 0`,
            `l 0 ${height}`,
            `l -${this.size.width} 0`,
            `l 0 -${height}`
        ].join(' ');

        this.$body
            .attr('d', path);

        // Shift name down
        this.$name.attr('y', '20');

        // Add the attribute fields
        y += initialY;
        leftCol = -rx + attributeMargin;
        rightCol = rx - attributeMargin;
        this.$attributes.remove();
        this.$attributes = this.$el.append('g')
            .attr('fill', '#222222');
        for (var i = attrNames.length; i--;) {
            // Create two text boxes (2nd is editable)
            y += textHeight;
            displayName = this._attrToDisplayName[attrNames[i]];
            // Attribute name
            this.$attributes.append('text')
                .attr('y', y)
                .attr('x', leftCol)
                .attr('font-style', 'italic')  // FIXME: move this to css
                .attr('class', 'attr-title')
                .attr('text-anchor', 'start')
                .text(`${displayName}: `);

            // Attribute value
            this.attributeFields[attrNames[i]] = this.$attributes.append('text')
                .attr('y', y)
                .attr('x', rightCol)
                .attr('text-anchor', 'end')  // FIXME: move this to css
                .text(`${this._attributes[attrNames[i]]}`)
                .on('click', this.editAttribute.bind(this, attrNames[i], rightCol, y))
        }

        // Update width, height
        this.height = height;
        this.width = this.size.width;
        this.expanded = true;
        this.$el
            .attr('transform', `translate(${this.width/2}, 0)`);
        this.onResize();
    };

    LayerDecorator.prototype.condense = function() {
        var path,
            rx = this.dense.width/2,
            ry = this.dense.height/2;
<commit_msg>Removed expansion of attribute-less layers. Fixes #162<commit_after>/*globals define, _, $*/
/*jshint browser: true, camelcase: false*/

/**
 * @author brollb / https://github.com/brollb
 */

define([
    'js/Constants',
    'js/NodePropertyNames',
    'widgets/EasyDAG/EasyDAGWidget.DecoratorBase',
    'css!./LayerDecorator.EasyDAGWidget.css',
    'd3'
], function (
    CONSTANTS,
    nodePropertyNames,
    DecoratorBase
) {

    'use strict';

    var LayerDecorator,
        DECORATOR_ID = 'LayerDecorator',

    LayerDecorator = function (options) {
        var opts = _.extend({}, options);

        this._node = options.node;
        this._attrToDisplayName = {};
        this.attributeFields = {};
        this.setAttributes();

        this.color = this.color || '#ff9800';
        // Set width, height values
        if (!this.size) {
            this.size = {
                width: 100,
                height: 50
            };
        }

        if (!this.dense) {  // condensed size
            this.dense = {};
            this.dense.width = this.size.width;
            this.dense.height = this.size.height;
        }

        this.width = this.dense.width;
        this.height = this.dense.height;

        DecoratorBase.call(this, options);
        this.initialize();
        this.condense();
        this.logger.debug('LayerDecorator ctor'); 
    };

    _.extend(LayerDecorator.prototype, DecoratorBase.prototype);

    LayerDecorator.prototype.initialize = function() {
        this.width = this.dense.width;
        this.height = this.dense.height;

        this.$body = this.$el
            .append('path')
            .attr('class', 'layer-decorator');

        this.$name = this.$el.append('text')
            .attr('class', 'name')
            .style('font-size', '16px')  // FIXME: Move this to css
            .attr('fill', 'black');

        this.$attributes = this.$el.append('g')
            .attr('fill', '#222222');
    };

    LayerDecorator.prototype.expand = function() {
        var height,
            rx = this.size.width/2,
            ry = this.size.height/2,
            attrNames = Object.keys(this._attributes),
            displayName,
            path,
            textHeight = 15,

            // Attributes
            initialY = 20,
            attributeMargin = 10,
            leftCol,
            rightCol,
            y = 5;

        // Only expand if the node has attributes to show
        if (attrNames.length > 0) {

            // Get the height from the number of attributes
            height = y + this.dense.height + textHeight*attrNames.length;

            path = [
                `M${-rx},0`,
                `l ${this.size.width} 0`,
                `l 0 ${height}`,
                `l -${this.size.width} 0`,
                `l 0 -${height}`
            ].join(' ');

            this.$body
                .attr('d', path);

            // Shift name down
            this.$name.attr('y', '20');

            // Add the attribute fields
            y += initialY;
            leftCol = -rx + attributeMargin;
            rightCol = rx - attributeMargin;
            this.$attributes.remove();
            this.$attributes = this.$el.append('g')
                .attr('fill', '#222222');
            for (var i = attrNames.length; i--;) {
                // Create two text boxes (2nd is editable)
                y += textHeight;
                displayName = this._attrToDisplayName[attrNames[i]];
                // Attribute name
                this.$attributes.append('text')
                    .attr('y', y)
                    .attr('x', leftCol)
                    .attr('font-style', 'italic')  // FIXME: move this to css
                    .attr('class', 'attr-title')
                    .attr('text-anchor', 'start')
                    .text(`${displayName}: `);

                // Attribute value
                this.attributeFields[attrNames[i]] = this.$attributes.append('text')
                    .attr('y', y)
                    .attr('x', rightCol)
                    .attr('text-anchor', 'end')  // FIXME: move this to css
                    .text(`${this._attributes[attrNames[i]]}`)
                    .on('click', this.editAttribute.bind(this, attrNames[i], rightCol, y))
            }

            // Update width, height
            this.height = height;
            this.width = this.size.width;
            this.expanded = true;
            this.$el
                .attr('transform', `translate(${this.width/2}, 0)`);
        }

        this.onResize();
    };

    LayerDecorator.prototype.condense = function() {
        var path,
            rx = this.dense.width/2,
            ry = this.dense.height/2;

{'fraction_non_alphanumeric': 0.14376716090060407, 'fraction_numerical': 0.010323997803404723, 'mean_word_length': 1.5196458218040951, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 4, 'https://': 2, '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': '6817318', 'n_tokens_mistral': 2738, 'n_tokens_neox': 2549, 'n_words': 526}