var table, i, j, uniqueNodes, edgesX, edgesY, interval, plotSize;

function preload() {
	table = loadTable('edges698.csv', 'csv', 'header');
}

function setup() {
    createCanvas(1600, 1600);
    plotSize = 1000;
    uniqueNodes = [];
    edgesX = [];
    edgesY = [];

    for (i = 0 ; i < table.getRowCount() ; i++) {
        for (j = 0 ; j < 2 ; j++) {
            if (!(uniqueNodes.includes(table.getString(i, j)))) {
                append(uniqueNodes, table.getString(i, j));
            }
        }
        append(edgesX, table.getString(i, 0));
        append(edgesY, table.getString(i, 1));
    }

    uniqueNodes = sort(uniqueNodes, uniqueNodes.length);

    interval = plotSize / uniqueNodes.length;
}


function draw() {
    background(255);
	textSize(8);
    textAlign(CENTER);

    i = plotSize;

    noFill();

    // Draw the grid
    for (j = 0 ; j < uniqueNodes.length ; j++) {
        rect(50, 50, i, i);
        rect(plotSize + 50, plotSize + 50, -i, -i);
        i -= interval;
    }

    fill(0);

    // Draw the initial labels
    for (i = 0 ; i < uniqueNodes.length ; i++) {
        text(uniqueNodes[i], 50 + i * interval + interval / 2, 45);
        text(uniqueNodes[i], 35, 50 + i * interval + interval / 2);
    }

    var xPos = 0, yPos = 0;

    // Fill in the grid
    for (i = 0 ; i < edgesX.length ; i++) {
        xPos = uniqueNodes.indexOf(edgesX[i]) * interval + 50;
        yPos = uniqueNodes.indexOf(edgesY[i]) * interval + 50;
       
        fill(125, 0, 125, 100);

        // Interactive higlighting of the grid and the label
        if (mouseX > xPos && mouseX < xPos + interval && mouseY > yPos && mouseY < yPos + interval) {
            fill(0, 205, 205);

            text(edgesX[i], xPos + interval / 2, 45);
            text(edgesY[i], 35, yPos + interval / 2);

            fill(125, 0, 125);

            rect(xPos, yPos, interval, interval);

            fill(125, 0, 125, 100);

            rect(yPos, xPos, interval, interval);
        } else if (mouseX > yPos && mouseX < yPos + interval && mouseY > xPos && mouseY < xPos + interval) {
            fill(0, 205, 205);
            text(edgesY[i], yPos + interval / 2, 45);
            text(edgesX[i], 35, xPos + interval / 2);

            fill(125, 0, 125);

            rect(yPos, xPos, interval, interval);

            fill(125, 0, 125, 100);

            rect(xPos, yPos, interval, interval);
        } else {
            rect(xPos, yPos, interval, interval);
            rect(yPos, xPos, interval, interval);
        }    
    } 
}