<commit_before>(function () {
    var h = require('virtual-dom/h');
    var diff = require('virtual-dom/diff');
    var patch = require('virtual-dom/patch');
    var createElement = require('virtual-dom/create-element');

    var templates = require('./components/templates.js');
    var table = require('./components/table.js');
    var chart = require('./components/chart.js');
    var dataImport = require('./components/import.js');
    var customise = require('./components/customise.js');

    var app;
    var container;
    var header;
    var rootNode;
    var chartElement;
    var states = {
        'import': {
            title: 'Import',
            content: function(element){
                var importElement = createElement(h('div'));
                element.appendChild(importElement);
                dataImport.load(importElement);

                var tableElement = createElement(h('div'));
                element.appendChild(tableElement);
                table.load(tableElement);
            }
        },
        'templates': {
            title: 'Templates',
            content: function (element) {
                var templateElement = createElement(h('div'));
                templates.load(templateElement);
                element.appendChild(templateElement);
            }
        },
        'customise': {
            title: 'Customise',
            content: function (element) {
                var customiseElement = createElement(h('div'));
                customise.load(customiseElement);
                element.appendChild(customiseElement);
            }
        }
    };

    function goToSate(state){
        app.innerHTML = '';
        var currentState = states[state];
        currentState.content(app);
        render(state);

    }
    function render(state) {
        var newHeader = template(state);
        var patches = diff(header, newHeader);
        rootNode = patch(rootNode, patches);
        header = newHeader;
    }

    function template(state, page) {
        var links = ['import', 'templates', 'customise'];

        return h('div', [
            h('ul', links.map(function (id) {
                return h('li.hover',{
                    "ev-click":function(){
                        goToSate(id);
                    }
                }, states[id].title)
            })),
            h('h1', states[state].title)
        ])
    }


    document.addEventListener("DOMContentLoaded", function (event) {
        container = document.getElementById('container');
        header = h('div');

        rootNode = createElement(header);
        container.appendChild(rootNode);

        app = createElement(h('div.left'));
        container.appendChild(app);

        chartElement = createElement(h('div.right'));
        chart.load(chartElement);
        container.appendChild(chartElement);

        goToSate('import');
    });


})();<commit_msg>route.js: better semantics + prevent needless rerendering<commit_after>(function () {
    var h = require('virtual-dom/h');
    var diff = require('virtual-dom/diff');
    var patch = require('virtual-dom/patch');
    var createElement = require('virtual-dom/create-element');

    var templates = require('./components/templates.js');
    var table = require('./components/table.js');
    var chart = require('./components/chart.js');
    var dataImport = require('./components/import.js');
    var customise = require('./components/customise.js');

    var _ = require('lodash');

    var app;
    var container;
    var header;
    var rootNode;
    var chartElement;
    var currentState;
    var states = {
        'import': {
            title: 'Import',
            content: function(element){
                var importElement = createElement(h('div'));
                element.appendChild(importElement);
                dataImport.load(importElement);

                var tableElement = createElement(h('div'));
                element.appendChild(tableElement);
                table.load(tableElement);
            }
        },
        'templates': {
            title: 'Templates',
            content: function (element) {
                var templateElement = createElement(h('div'));
                templates.load(templateElement);
                element.appendChild(templateElement);
            }
        },
        'customise': {
            title: 'Customise',
            content: function (element) {
                var customiseElement = createElement(h('div'));
                customise.load(customiseElement);
                element.appendChild(customiseElement);
            }
        }
    };

    function goToSate(state){
        app.innerHTML = '';
        currentState = state;
        var newState = states[state];
        newState.content(app);
        render(state);

    }
    function render(state) {
        var newHeader = template(state);
        var patches = diff(header, newHeader);
        rootNode = patch(rootNode, patches);
        header = newHeader;
    }

    function template(state, page) {
        var links = ['import', 'templates', 'customise'];

        return h('div', [
            h('ul', links.map(function (id) {
                return h('li',
                    h('a',{
                        href:'#'+id,
                        "ev-click":function(e){
                            // prevent needless rerendering
                            if(currentState !== id){
                                _.forEach(e.target.parentNode.parentNode.childNodes,function(li){
                                    if(li !== e.target.parentNode){
                                        if(li.classList.contains('active')){
                                            li.classList.remove('active');
                                        }
                                    } else {
                                        // currentState !== id -> li has no active class
                                        li.classList.add('active');
                                    }
                                });
                                goToSate(id);
                            }
                            e.preventDefault();
                        }
                    }, states[id].title))
                })),
            h('h1', states[state].title)
        ])
    }


    document.addEventListener("DOMContentLoaded", function (event) {
        container = document.getElementById('container');
        header = h('div');

        rootNode = createElement(header);
        container.appendChild(rootNode);

        app = createElement(h('div.left'));
        container.appendChild(app);

        chartElement = createElement(h('div.right'));
        chart.load(chartElement);
        container.appendChild(chartElement);

        goToSate('import');
    });


})();
{'fraction_non_alphanumeric': 0.12607617101999125, 'fraction_numerical': 0.00029184298847220193, 'mean_word_length': 1.588368580060423, 'pattern_counts': {'":': 2, '<': 3, '<?xml version=': 0, '>': 4, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 10, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1252301', 'n_tokens_mistral': 1678, 'n_tokens_neox': 1610, 'n_words': 307}