function drawPanel()

in modules/ui/assistant.js [150:281]


    function drawPanel(panel) {

        var hasBody = panel.renderBody || panel.message;

        var isCollapsible = !panel.prominent && hasBody;

        container.attr('class',
            'assistant ' +
            (panel.theme || 'dark') +
            ' ' +
            (panel.prominent ? 'prominent' : '') +
            ' ' +
            (hasBody ? 'has-body' : '') +
            ' ' +
            (isCollapsible ? 'collapsible' : '') +
            ' ' +
            (isCollapsible && isBodyCollapsed(panel.collapseCategory) ? 'body-collapsed minimal' : '')
        );

        var iconCol = header.selectAll('.icon-col')
            .data([0]);
        iconCol = iconCol.enter()
            .append('div')
            .attr('class', 'icon-col')
            .merge(iconCol);

        var headerMainCol = header.selectAll('.main-col')
            .data([0]);

        var headerMainColEnter = headerMainCol.enter()
            .append('div')
            .attr('class', 'main-col');

        headerMainColEnter.append('div')
            .attr('class', 'mode-label');

        var subjectTitleArea = headerMainColEnter.append('div')
            .attr('class', 'subject-title');

        subjectTitleArea.append('span');

        subjectTitleArea.append('div')
            .attr('class', 'controls');

        headerMainColEnter.append('div')
            .attr('class', 'header-body');

        headerMainCol = headerMainColEnter.merge(headerMainCol);

        var controlCol = header.selectAll('.control-col')
            .data(isCollapsible ? [0] : []);

        controlCol.exit()
            .remove();

        controlCol.enter()
            .append('div')
            .attr('class', 'control-col')
            .append('button')
            .call(svgIcon('#iD-icon-' + (isBodyCollapsed(panel.collapseCategory) ? 'down' : 'up')));

        if (isCollapsible) {
            // make the assistant collapsible by its whole header
            header.on('click', function() {
                d3_event.preventDefault();
                d3_event.stopPropagation();
                toggleBody(panel.collapseCategory);
            });
        } else {
            header.on('click', null);
        }

        var modeLabel = headerMainCol.selectAll('.mode-label');
        modeLabel.text(panel.modeLabel || '');

        var subjectTitle = headerMainCol.selectAll('.subject-title');

        subjectTitle.selectAll('span')
            .attr('class', panel.titleClass || '')
            .text(panel.title);

        var subjectTitleControls = subjectTitle.selectAll('.controls');
        subjectTitleControls.text('');
        if (panel.onClose) {
            subjectTitleControls.append('button')
                .attr('class', 'close')
                .on('click', function() {
                    d3_event.preventDefault();
                    d3_event.stopPropagation();
                    panel.onClose();
                })
                .call(svgIcon('#iD-icon-close'));
        }

        iconCol.html('');
        if (panel.headerIcon) {
            iconCol.call(svgIcon('#' + panel.headerIcon));
        } else {
            iconCol.call(panel.renderHeaderIcon);
        }

        body.text('');
        if (panel.renderBody) {
            body.call(panel.renderBody);
        }

        var headerBody = headerMainCol.selectAll('.header-body');
        headerBody.text('');
        if (panel.renderHeaderBody) {
            headerBody.call(panel.renderHeaderBody);
        }

        if (panel.message) {
            var bodyTextRow = body.append('div')
                .attr('class', 'assistant-row');

            bodyTextRow.append('div')
                .attr('class', 'icon-col');

            var bodyBodyCol = bodyTextRow
                .append('div')
                .attr('class', 'main-col sep-top');

            var bodyTextArea = bodyBodyCol
                .append('div')
                .attr('class', 'body-text');

            bodyTextArea.html(panel.message);
        }

        shownPanel = panel;
    }