function initDiagram()

in static/js/diagram.js [120:245]

• 92 lines of code
• 2 McCabe index (conditional complexity)

function initDiagram() {
    let diagram = cytoscape({
        container: $('#diagram'),
        elements: buildCodebaseData().concat(buildDataDockerStream()).concat(buildCdPipeline()),
        style: [
            {
                selector: 'node',
                style: {
                    'label': 'data(name)',
                    'font-size': '7px',
                    'font-weight': 'bold',
                    'text-valign': 'bottom',
                }
            },
            //codebase style
            {
                selector: 'node[type="codebase"]',
                style: {
                    'background-fit': 'cover cover',
                    'background-image': '/static/img/codebase.png',
                    'background-color': '#ffffff',
                    'background-width': '0.1px',
                    'background-height': '0.1px',
                    'shape': 'square',
                    'width': '40px',
                    'height': '40px'
                }
            },
            //codebase branch style
            {
                selector: 'node[type="branch"]',
                style: {
                    'background-fit': 'cover cover',
                    'background-image': '/static/img/branch.png',
                    'background-color': '#ffffff',
                    'background-width': '0.1px',
                    'background-height': '0.1px',
                    'shape': 'square',
                    'width': '40px',
                    'height': '40px'
                }
            },
            //codebase docker stream style
            {
                selector: 'node[type="codebase_docker_stream"]',
                style: {
                    'background-fit': 'cover cover',
                    'background-image': '/static/img/registry.png',
                    'background-color': '#ffffff',
                }
            },
            //codebase docker stream line style
            {
                selector: 'edge[type="codebase_docker_stream"]',
                style: {
                    'line-style': 'dashed'
                }
            },
            //cd pipeline style
            {
                selector: 'node[type="pipeline"]',
                style: {
                    'background-fit': 'cover cover',
                    'background-image': '/static/img/cd-pipeline.png',
                    'background-color': '#ffffff',
                    'background-width': '0.1px',
                    'background-height': '0.1px',
                    'shape': 'square',
                    'height': '40px',
                    'width': '40px',
                }
            },
            //stage style
            {
                selector: 'node[type="stage"]',
                style: {
                    'background-fit': 'cover cover',
                    'background-image': '/static/img/stage.png',
                    'background-color': '#ffffff',
                    'background-width': '0.1px',
                    'background-height': '0.1px',
                    'shape': 'square',
                    'height': '40px',
                    'width': '40px',
                }
            },
            //edge style
            {
                selector: 'edge',
                style: {
                    'width': 1,
                    'line-color': '#ccc',
                    'target-arrow-color': '#ccc',
                    'target-arrow-shape': 'triangle',
                    'curve-style': 'bezier'
                }
            },
        ],
        layout: {
            name: 'dagre',
            rankDir: 'LR',
            fit: true,
            padding: 30,
            avoidOverlap: true,
            avoidOverlapPadding: 10,
            nodeDimensionsIncludeLabels: false,
            condense: true,
            rows: 5,
            cols: 5,
        }
    });

    //display nodes related to parent
    diagram.on('tap', 'node', function () {
        diagram.filter('node').style("display", "none");
        this.style("display", "element");
        this.successors().targets().style("display", "element");
    });

    //display whole diagram
    diagram.on('tap', function (event) {
        if (event.target === diagram) {
            diagram.filter('node').style("display", "element");
        }
    });
}