RESTORE_FE/js/word_cloud.js

/**
 * QUERY SECTION
 * 
 *               */

// SPARQL Query text -- 'prefixes' and 'thisUrlParams' defined in people.js; 
let queryNetwork = prefixes + " SELECT COUNT(?event1) AS ?count1 COUNT(?event2) AS ?count2 ?uri2 SAMPLE(?label2) AS ?text \
WHERE { \
{?event1 rdf:type crm:EL1_Exchange_Letters . \
?event_to rdfs:subClassOf ?event1; \
    rdf:type crm:EL2_Send_Letter ; \
crm:P01_has_domain ?pc_to . \
?pc_to crm:P02_has_range ?uri . \
?uri rdfs:label ?label . \
?event_from rdfs:subClassOf ?event1; \
    rdf:type crm:EL3_Receive_Letter; \
    crm:P01_has_domain ?pc_from . \
?pc_from crm:P02_has_range ?uri2 . \
?uri2 rdfs:label ?label2 . \
FILTER (?uri = <" + thisUrlParams.link + ">) \
} UNION { \
?event2 rdf:type crm:EL1_Exchange_Letters . \
?event_to rdfs:subClassOf ?event2; \
    rdf:type crm:EL3_Receive_Letter ; \
    crm:P01_has_domain ?pc_from . \
?pc_from crm:P02_has_range ?uri . \
?uri rdfs:label ?label . \
?event_from rdfs:subClassOf ?event2; \
    rdf:type crm:EL2_Send_Letter; \
    crm:P01_has_domain ?pc_to . \
?pc_to crm:P02_has_range ?uri2 . \
?uri2 rdfs:label ?label2 . \
FILTER (?uri = <" + thisUrlParams.link + ">) \
} \
}"

// 'prepareQueryURL' defined in people.js
let queryNet = prepareQueryURL(queryNetwork);

// do the query, call data processor on successful output
$.ajax({
    url: queryNet,
    dataType: "json",
    success: (data) => handle_word_network(data)
});

// queryLetters defined in people.js
console.log(queryLetters);


/**
 * COMPONENT CREATION SECTION
 * 
 *               */

// Master function, takes data output from the query and creates the HTML for the Word Cloud component of the page
function handle_word_network(json){
    // Pre-process data
    let words = processQuery(json);
    // Create page elements
    doListPersonNetwork(words);
    doWordCloud(words);
}


// Return structured object from raw query data for further processing
function processQuery(json) {
  
    const tempArray = [];
    
    $.each(
        json['results']['bindings'],
        (index, value) => {
          let text = value['text']['value'];
          let link = value['uri2']['value'];
          let sent = parseInt(value['count1']['value']);
          let received = parseInt(value['count2']['value']);
          let count = sent + received;
          tempArray.push({'text': text, 'sent': sent, 'received': received, 'count': count, 'hlink': link});
        }
    );

    tempArray.sort((a, b) => b.count - a.count);

    return tempArray;

}


// Create formatted list of people in the network
function doListPersonNetwork(words){

    let ArrayNames = "";

    words.forEach(element => {
        filteredText = element['text'].replace('"', '').replace("'", '');
        ArrayNames +=
        "<div class='item-place-person'>"+
            "<div class='item-place-person-label' id='list-" + filteredText + "'>" +
                element['text'] +
                "<br /><span onlick='sendLetter("+ filteredText + ", " + element['hlink'] + ", " + labelName + ", " + thisUrlParams.link +")' class='num_occ'>[Lettere inviate: " + element['sent'] + "]</span>" +
                "<br /><span onlick='receiveLetter("+ filteredText + ", " + element['hlink'] + ", " + labelName + ", " + thisUrlParams.link +")' class='num_occ'>[Lettere ricevute: " + element['received'] + "]</span>" +
                "<br /><span id='tot-"+filteredText+"' class='num_occ'>[Totale corrispondenza: " + element['count'] + "]</span>" +
            "</div>" +
            "<div class='item-place-person-action'>" +
                "<div class='persona' id='" + element['hlink'] +"'>" +
                    "<i class='fa fa-user' style='cursor:pointer'></i>" +
                "</div>" +
            "</div>" +
        "</div>";
    });

    document.getElementById("list_person_network").innerHTML = ArrayNames;

    addEventsToNameList(words);

}

function addEventsToNameList(words){

    let counter = 0
    for(let word of words){
        if(counter>0) break;
        let listElem = document.getElementById('tot-' + word.text.replace('"', '').replace("'", ''));
        if(listElem!=null){
            listElem.addEventListener("click", filterLetters);
            listElem.addEventListener("mouseover", highlightWord);
            listElem.addEventListener("mouseout", unHighlightWord);
        }
        counter++;
    }
}

function filterLetters(e){

    try{
        let preText = e.target.parentNode.textContent;
        console.log('text content', preText);
        let name = preText.split("[")[0];
        console.log('name', name);            

        // responseLet defined in people.js
        responseLet.then(data => {
            
            let lettersJson = data.results.bindings;
            console.log('AH!', lettersJson[0]);
        });

    } catch{
        console.log("Couldn't get the name"); 
    }

}




// Create the word cloud
function doWordCloud(words){
    
    // Clear word cloud div
    $('#myWordCloud').empty();


    // OVERALL GRAPHIC SETTINGS for the cloud container -- id, dimensions, position

    let width = 0.5*window.outerWidth;
    let height = 0.6*width;
  
    // append the svg object to the body of the page
    let svg = d3.select("#myWordCloud")
        .append("svg")
        .attr("id", "wordcloudNetwork")
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("viewBox", "0 0 " + width + " " + height)
        .classed("svg-content", true)
        .attr("width", width)
        .attr("height", height)
        .attr("style", "border:1px solid black")

    // In case of empty cloud, draw special page and exit
    if (words.length == 0){
        drawEmptyWordCloud();
        return;
    }
    
    // THE ACTUAL CLOUD
    svg = document.getElementById('wordcloudNetwork');
    console.log(svg);

    let zoom = window.devicePixelRatio;
    console.log('zoom', zoom);

    wcParameters = {
        svgWidth: svg.getBoundingClientRect().width,
        svgHeight: svg.getBoundingClientRect().height,
        maxFontSize: 30/((1+zoom)/2),
        minFontSize: 10/((1+zoom)/2)
    }
    let svgWords = hackWords(words, wcParameters);
    svg.innerHTML = svgWords;

    let wordCloudText = createWordCloud(words, wcParameters);
    svg.innerHTML = wordCloudText;

    addEventsToWordCloud(words);

}

// Helper function -- draw special empty word cloud if there are no occurrences
function drawEmptyWordCloud(){
    let wordIcon = "<div id='users_icon' class='no_info_icon'> \
    <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='30' height='30' viewBox='0 0 256 256' xml:space='preserve'> \
        <g transform='translate(128 128) scale(0.72 0.72)'> \
            <g style='stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;' transform='translate(-175.05 -175.05000000000004) scale(3.89 3.89)'> \
                <path d='M 45 49.519 L 45 49.519 c -7.68 0 -13.964 -6.284 -13.964 -13.964 v -5.008 c 0 -7.68 6.284 -13.964 13.964 -13.964 h 0 c 7.68 0 13.964 6.284 13.964 13.964 v 5.008 C 58.964 43.236 52.68 49.519 45 49.519 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;' transform='matrix(1 0 0 1 0 0)' stroke-linecap='round' /> \
                <path d='M 52.863 51.438 c -2.362 1.223 -5.032 1.927 -7.863 1.927 s -5.501 -0.704 -7.863 -1.927 C 26.58 53.014 18.414 62.175 18.414 73.152 v 14.444 c 0 1.322 1.082 2.403 2.403 2.403 h 48.364 c 1.322 0 2.403 -1.082 2.403 -2.403 V 73.152 C 71.586 62.175 63.42 53.014 52.863 51.438 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;' transform='matrix(1 0 0 1 0 0)' stroke-linecap='round' /> \
                <path d='M 71.277 34.854 c -2.362 1.223 -5.032 1.927 -7.863 1.927 c -0.004 0 -0.007 0 -0.011 0 c -0.294 4.412 -2.134 8.401 -4.995 11.43 c 10.355 3.681 17.678 13.649 17.678 24.941 v 0.263 h 11.511 c 1.322 0 2.404 -1.082 2.404 -2.404 V 56.568 C 90 45.59 81.834 36.429 71.277 34.854 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;' transform='matrix(1 0 0 1 0 0)' stroke-linecap='round' /> \
                <path d='M 63.414 0 c -7.242 0 -13.237 5.589 -13.898 12.667 c 8 2.023 13.947 9.261 13.947 17.881 v 2.385 c 7.657 -0.027 13.914 -6.298 13.914 -13.961 v -5.008 C 77.378 6.284 71.094 0 63.414 0 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;' transform='matrix(1 0 0 1 0 0)' stroke-linecap='round' /> \
                <path d='M 13.915 73.152 c 0 -11.292 7.322 -21.261 17.677 -24.941 c -2.861 -3.029 -4.702 -7.019 -4.995 -11.43 c -0.004 0 -0.007 0 -0.011 0 c -2.831 0 -5.5 -0.704 -7.863 -1.927 C 8.166 36.429 0 45.59 0 56.568 v 14.444 c 0 1.322 1.082 2.404 2.404 2.404 h 11.511 V 73.152 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;' transform='matrix(1 0 0 1 0 0)' stroke-linecap='round' /> \
                <path d='M 26.536 32.932 v -2.385 c 0 -8.62 5.946 -15.858 13.947 -17.881 C 39.823 5.589 33.828 0 26.586 0 c -7.68 0 -13.964 6.284 -13.964 13.964 v 5.008 C 12.622 26.635 18.879 32.905 26.536 32.932 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;' transform='matrix(1 0 0 1 0 0)' stroke-linecap='round' /> \
            </g> \
        </g> \
    </svg> \
    <p>Nessuna persona trovata</p> \
    </div>";

    $("#person_map").css("display", "none");
    $("#wordcloudNetwork").css("display", "none");
    $("#references_network").css("display", "none");

    document.getElementById("person_map_no_res").innerHTML = wordIcon;

}


/*****************************
* Customized word cloud code *
*****************************/

function hackWords(words, parameters){

    let weights = words.map(word => word.count);
    let minWeight = Math.min(...weights);
    let maxFontSize = parameters.maxFontSize;
    let minFontSize = parameters.minFontSize;
    console.log('weights', weights);
    console.log('maxFontSize', maxFontSize);
    console.log('minFontSize',minFontSize);
    let stringOfWords = "";

    for(let ind=0; ind<words.length; ind++){

        let word = words[ind];
        word.fontSize = getFontSize(words[ind].count, minWeight, maxFontSize, minFontSize);
        stringOfWords = stringOfWords+
        '<text x="100" y ="' + (maxFontSize + maxFontSize*ind).toString() + '" + font-family="Verdana" font-size="'+(word.fontSize)+'" id="word' + ind + '">'+words[ind].text+'</text>\n';
    }
    return stringOfWords;
}


// Takes a list of words, returns the innerHTML for a Word Cloud as a string containing multiple <g> svg elements
function createWordCloud(words, parameters){

    let actualUsefulWidth = parameters.svgWidth;
    let actualUsefulHeight = parameters.svgHeight;
    console.log('Actual SVG dimensions', actualUsefulWidth, actualUsefulHeight);

    maxFontSize = parameters.maxFontSize;
    minFontSize = parameters.minFontSize;

    const rectObjs = []
    let allBooms = 0
    let attempts = 0;
    let outOfBorder = 0;
    for(let ind=0;ind<words.length;ind++){
    //for(let ind=0;ind<3;ind++){

        // Control vars
        if(allBooms>=20*(ind+1)) break;
        attempts++;
        let boom = false;

        // word + bounding box parameters definition
        let word = words[ind];
        let id0 = "word"+ind;
        let wordBB = document.getElementById(id0).getBoundingClientRect();
        let fontSize = word.fontSize;
        let width = wordBB.width;
        let height = wordBB.height;
        let multiplier = 0.1 + 0.4*Math.max((maxFontSize-fontSize)/(maxFontSize-minFontSize), allBooms/(20*(ind+1)));
        let xR = Math.floor(actualUsefulWidth/2-width/2 + randomRange(-multiplier*actualUsefulWidth, multiplier*actualUsefulWidth));
        let yR = Math.floor(actualUsefulHeight/2 + randomRange(-multiplier*actualUsefulHeight, multiplier*actualUsefulHeight));
        //console.log('x', 'y', xR, yR)
        let angle;
        if(word.received/word.sent>3) angle = -3;
        else if(word.received/word.sent<0.3) angle = 3;
        let text = word.text;
        //console.log('Rect:', width, height, xR, yR, angle, text);

        // 
        let newRect = new Rect(width, height, xR, yR, angle, text, fontSize);
        boom = checkBorder(newRect, 0, actualUsefulWidth, 0, actualUsefulHeight)
        if(boom){
            outOfBorder++;
            if(outOfBorder<30){
                ind--;
                continue;
            } else{
                boom = false;
            }
        }
        for(let rect of rectObjs){
            boom = checkColl(newRect, rect);
            if(boom) break;
        }
        if(boom){
            allBooms++;
            ind--;
            continue;
        }
        allBooms = 0;
        rectObjs.push(newRect);
    }
    console.log('Attempted:', attempts);
    console.log('Placed:', rectObjs.length);
    console.log('booms!', allBooms);

    const rectTexts = [];
    rectObjs.forEach(rect => rectTexts.push(rect.printCoords(false, maxFontSize, minFontSize)));
    let rects = rectTexts.join('\n');

    return rects;
}

function getFontSize(weight, minWeight, maxFontSize, minFontSize){
    let r1 = weight/10*minWeight - 1/10; // between 0 and a big num
    let res = minFontSize + (maxFontSize-minFontSize)*r1/Math.sqrt(1+r1**2);
    return res;
}

function randomRange(a, b=0){
    return (a-b)*Math.random()+b;
}
function randomInt(a){
    return Math.floor(a*Math.random());
}
function randomRangeInt(a, b=0){
    let ap = Math.floor(a);
    let bp = Math.floor(b);
    return Math.floor((ap-bp)*Math.random())+bp;
}

// Check border collision
function checkBorder(rect, minX, maxX, minY, maxY){
    if(rect.minX<minX) return true;
    if(rect.maxX>maxX) return true;
    if(rect.minY<minY) return true;
    if(rect.maxY>maxY) return true;
    return false;
}


function addEventsToWordCloud(words){

    for(let word of words){
        let wcElem = document.getElementById('word-' + word.text.replace('"', '').replace("'", ''));
        if(wcElem!=null){
            wcElem.addEventListener("click", focusPersonInList);
            wcElem.addEventListener("mouseover", highlightWord);
            wcElem.addEventListener("mouseout", unHighlightWord);
        }
    }
}

function focusPersonInList(e){
    let targetId = e.target.id;
    console.log(targetId);
    let listElem = document.getElementById(targetId.replace('word-', 'list-'));
    listElem.scrollIntoView({behavior: "smooth", block: "center"});
}

function highlightWord(e){
    e.target.style['text-decoration'] = "underline";
}
function unHighlightWord(e){
    e.target.style['text-decoration'] = "";
}