<commit_before>class MCProcessesGraphComponentController {
    /*@ngInject*/
    constructor() {
        this.cy = null;
    }

    $onInit() {
        let transformingProcesses = this.processes.filter(p => p.does_transform);
        let sample2InputProcess = {};
        let sample2OutputProcess = {};
        transformingProcesses.forEach(p => {
            p.input_samples.forEach(s => {
                let id = `${s.id}/${s.property_set_id}`;
                sample2InputProcess[id] = p;
            });

            p.output_samples.forEach(s => {
                let id = `${s.id}/${s.property_set_id}`;
                sample2OutputProcess[id] = p;
            })
        });
        let elements = this.processes.map(p => {
            console.log(p.name, p);
            return {
                data: {
                    id: p.id,
                    name: p.name,
                    color: p.does_transform ? 'red' : '#999999'
                }
            }
        });
        this.processes.filter(p => !p.does_transform).forEach(p => {
            p.input_samples.forEach(s => {
                let id = `${s.id}/${s.property_set_id}`;
                let process = sample2OutputProcess[id];
                if (process) {
                    elements.push({
                        data: {
                            id: `${p.id}_${process.id}`,
                            source: process.id,
                            target: p.id
                        }
                    });
                }
                process = sample2InputProcess[id];
                if (process) {
                    elements.push({
                        data: {
                            source: p.id,
                            target: process.id
                        }
                    });
                }
            });
        });

        let sampleName2Sample = {};
        this.processes.forEach(p => {
            p.input_samples.forEach(s => {
                sampleName2Sample[s.name] = s;
            });
            p.output_samples.forEach(s => {
                sampleName2Sample[s.name] = s;
            });
        });
        this.samples = _.values(sampleName2Sample);
        this.cy = cytoscape({
            container: document.getElementById('processesGraph'),
            elements: elements,
            style: [
                {
                    selector: 'node',
                    style: {
                        'label': 'data(name)',
                        'background-color': 'data(color)'
                    }
                },
                {
                    selector: 'edge',
                    style: {
                        'width': 4,
                        'target-arrow-shape': 'triangle',
                        //'target-arrow-color': '#9dbaea',
                        'curve-style': 'bezier'
                    }
                }
            ]
        });
        this.cy.on('click', function(event) {
            console.log('node or edge clicked', event);
            let target = event.cyTarget;
            console.log('node name is', target.data('name'));
        });
        cy.layout({name: 'dagre'});
    }

    filterOnSample(sample) {
        console.log('filterOnSample', sample);
        let matches = this.cy.nodes().filter(`[name = '${sample.name}']`);
        console.log(sample);
    }
}

angular.module('materialscommons').component('mcProcessesGraph', {
    templateUrl: 'app/global.components/graph/mc-processes-graph.html',
    controller: MCProcessesGraphComponentController,
    bindings: {
        processes: '<'
    }
});<commit_msg>Refer to this.cy, rather than cy.<commit_after>class MCProcessesGraphComponentController {
    /*@ngInject*/
    constructor() {
        this.cy = null;
    }

    $onInit() {
        let transformingProcesses = this.processes.filter(p => p.does_transform);
        let sample2InputProcess = {};
        let sample2OutputProcess = {};
        transformingProcesses.forEach(p => {
            p.input_samples.forEach(s => {
                let id = `${s.id}/${s.property_set_id}`;
                sample2InputProcess[id] = p;
            });

            p.output_samples.forEach(s => {
                let id = `${s.id}/${s.property_set_id}`;
                sample2OutputProcess[id] = p;
            })
        });
        let elements = this.processes.map(p => {
            console.log(p.name, p);
            return {
                data: {
                    id: p.id,
                    name: p.name,
                    color: p.does_transform ? 'red' : '#999999'
                }
            }
        });
        this.processes.filter(p => !p.does_transform).forEach(p => {
            p.input_samples.forEach(s => {
                let id = `${s.id}/${s.property_set_id}`;
                let process = sample2OutputProcess[id];
                if (process) {
                    elements.push({
                        data: {
                            id: `${p.id}_${process.id}`,
                            source: process.id,
                            target: p.id
                        }
                    });
                }
                process = sample2InputProcess[id];
                if (process) {
                    elements.push({
                        data: {
                            source: p.id,
                            target: process.id
                        }
                    });
                }
            });
        });

        let sampleName2Sample = {};
        this.processes.forEach(p => {
            p.input_samples.forEach(s => {
                sampleName2Sample[s.name] = s;
            });
            p.output_samples.forEach(s => {
                sampleName2Sample[s.name] = s;
            });
        });
        this.samples = _.values(sampleName2Sample);
        this.cy = cytoscape({
            container: document.getElementById('processesGraph'),
            elements: elements,
            style: [
                {
                    selector: 'node',
                    style: {
                        'label': 'data(name)',
                        'background-color': 'data(color)'
                    }
                },
                {
                    selector: 'edge',
                    style: {
                        'width': 4,
                        'target-arrow-shape': 'triangle',
                        //'target-arrow-color': '#9dbaea',
                        'curve-style': 'bezier'
                    }
                }
            ]
        });
        this.cy.on('click', function(event) {
            console.log('node or edge clicked', event);
            let target = event.cyTarget;
            console.log('node name is', target.data('name'));
        });
        this.cy.layout({name: 'dagre'});
    }

    filterOnSample(sample) {
        console.log('filterOnSample', sample);
        let matches = this.cy.nodes().filter(`[name = '${sample.name}']`);
        console.log(sample);
    }
}

angular.module('materialscommons').component('mcProcessesGraph', {
    templateUrl: 'app/global.components/graph/mc-processes-graph.html',
    controller: MCProcessesGraphComponentController,
    bindings: {
        processes: '<'
    }
});
{'fraction_non_alphanumeric': 0.1290851907561876, 'fraction_numerical': 0.004922740325447833, 'mean_word_length': 1.1059602649006623, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 25, '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': '377070', 'n_tokens_mistral': 1946, 'n_tokens_neox': 1851, 'n_words': 283}