ptt-sententree/static/js/ptt.js

init()
var tsvPath = ''
var titlePath = ''
var defaultStartDate
var defaultEndDate
var totalPosts
var startDate
var endDate
var wordTitleList
var randId
var globKeyword = ''
var stopwords = []
var tsvString

function init() {
    $.ajax({
        type: 'POST',
        url: '/init',
        dataType: 'json',
        success: function (data) {
            console.log(data)
            setDate(data.Result.startDate, data.Result.endDate)
            document.getElementById('keywordBox').value = data.Result.keyword
            titlePath = data.Result.titlePath
            tsvString = data.Result.info.tsv
            defaultStartDate = data.Result.startDate
            defaultEndDate = data.Result.endDate
            json = JSON.parse(data.Result.info.json)
            console.log(json)
            wordTitleList = json
            keywordCountString = ''
            stopwords = data.Result.info.stopWords
            if (json.info.keyword != '') {
                keywordCountString = ' 關鍵字出現次數：' + json.info.count
            }
            $('#graphInfo').empty()
            $('#graphInfo').attr('style', 'margin: 10px;').append('總文章數：' + json.info.posts + ',' + keywordCountString)
            totalPosts = json.info.posts
            buildSentetree()
        }
    })
    $(document).ready(function () {
        $(window).keydown(function (event) {
            if (event.keyCode == 13) {
                event.preventDefault()
                sendRequest()
            }
        });
    });
    $(window).on('mousemove', function (e) {
        $('#nodeTitle').css({
            left: e.pageX,
            top: e.pageY
        })
    })
    $('#titleListContainer').hover(
        function () { // Run on hover/mouseenter
            $(this).css('overflow', 'auto')
        },
        function () { // Run on mouseleave
            $(this).css('overflow', 'hidden')
        }
    )
    $('#titleListLayer').click(function (e) {
        if ($('#titleListLayer').is(e.target)) {
            hideTitles()
        }
    })
    $('#stopWordEditorLayer').click(function (e) {
        if ($('#stopWordEditorLayer').is(e.target)) {
            hideStopWordEditor()
        }
    })
    $('#idfEditorLayer').click(function (e) {
        if ($('#idfEditorLayer').is(e.target)) {
            hideIdfEditor()
        }
    })
    $('#pttPageWindow').click(function (e) {
        if ($('#pttPageWindow').is(e.target)) {
            hidePTTPage()
        }
    })
    changeMode(0)
    destroyCurrentGraph()
    buildSentetree()
}

function loadTemplate(num) {
    templates = [{
        startDate: '2020-12-01',
        endDate: '2020-12-31',
        keyword: '',
        mode: 1
    },
    {
        startDate: '2020-01-01',
        endDate: '2020-03-01',
        keyword: '衛生紙',
        mode: 2
    },
    {
        startDate: '2020-01-11',
        endDate: '2020-01-12',
        keyword: '',
        mode: 2
    }
    ]
    chosenTemp = templates[num]
    setDate(chosenTemp.startDate, chosenTemp.endDate)
    $('#keywordBox').val(chosenTemp.keyword)
    changeMode(chosenTemp.mode)
    sendRequest()
}

function clearStopWord() {
    stopwords = []
    $('#sweContainer').html('')
}

function addStopWord() {
    newswRaw = $('#newStopWord').val()
    newswList = newswRaw.split(' ')
    for (newsw of newswList) {
        if (newsw != '') {
            if (stopwords.includes(newsw)) {

            } else {
                stopwords.push(newsw)
                $('#sweContainer').append($('<li>').attr('class', 'w3-display-container').append($('<span>').append(newsw)).append($('<span>').attr('class', 'w3-button w3-hover-red w3-transparent w3-display-right').click(function (e) {
                    var index = $(this).parent().index()
                    console.log(stopwords[index])
                    stopwords.splice(index, 1)
                    console.log(stopwords)
                    $('#sweContainer li').eq(index).remove()
                }).append("&times;")))
                console.log(document.getElementById('sweContainer').children[stopwords.indexOf(newsw)])
            }
            document.getElementById("sweContainer").scrollTop = document.getElementById('sweContainer').children[stopwords.indexOf(newsw)].offsetTop
        }
    }
    $('#newStopWord').val('')
}

function changeMode(_mode) {
    for (i = 0; i < 4; i++) {
        if (i == _mode) {
            $('#modeSelector button').eq(i).css("color", "#aaa")
        } else {
            $('#modeSelector button').eq(i).css("color", "#000")
        }
    }
    mode = _mode
}

function scrollIdfList() {
    let targetWord = $('#idfTarget').val()
    let wordList = $("#ieContainer").find("tr").slice(1).map((_, a) => { return $($(a).find("td")[0]).html() }).get()
    console.log({ "targetWord": targetWord, 'list': wordList })
    if (targetWord != '') {
        if (wordList.indexOf(targetWord) >= 0) {

        } else {
            wordList.push(targetWord)
            $('#ieContainer').find('tbody').append($('<tr>').attr('class', 'w3-display-container').append($('<td>').attr('style', 'vertical-align: middle;').append(targetWord)).append($('<td>').attr('class', 'w3-right-align').attr('style', 'vertical-align: middle;').append($('<input>').attr('type', 'number').val(Object.keys(idfTable).indexOf(targetWord) < 0 ? 0 : idfTable[targetWord]))))
        }
        console.log($($('#ieContainer').children('tbody').find('tr')[[wordList.indexOf(targetWord)]]).position())
        $("#ieTableContainer").scrollTop($($('#ieContainer').children('tbody').find('tr')[[wordList.indexOf(targetWord)]]).position().top - 50)
    }
    $('#newStopWord').val('')
}

function showStopwordEditor() {
    $(window).unbind('keydown')
    $(window).keydown(function (event) {
        if (event.keyCode == 13) {
            addStopWord()
        }
    })
    $('#sweContainer').empty()
    for (word of stopwords) {
        $('#sweContainer').append($('<li>').append($('<span>').append(word)).append($('<span>').attr('class', 'w3-button w3-hover-red w3-transparent w3-display-right').click(function (e) {
            var index = $(this).parent().index()
            console.log(stopwords[index])
            stopwords.splice(index, 1)
            console.log(stopwords)
            $('#sweContainer li').eq(index).remove()
        }).append("&times;")))
    }
    $('#stopWordEditorLayer').removeClass('hidden')
}

function showIdfEditor() {
    $(window).unbind('keydown')
    $(window).keydown(function (event) {
        if (event.keyCode == 13) {
            scrollIdfList()
        }
    })
    $('#ieContainer').empty().append(
        $('<thead>').append($('<tr>')
            .append($('<th>')
                .attr('style', 'position: sticky; top: 0; background: white;')
                .append('單詞'))
            .append($('<th>')
                .attr('class', 'w3-center-align')
                .attr('style', 'position: sticky; top: 0; background: white;')
                .append('操作'))
            .append($('<th>')
                .attr('class', 'w3-right-align')
                .attr('style', 'position: sticky; top: 0; background: white;')
                .append('單詞頻率')
            )
        )
    )
        .append($('<tbody>'))
    for (word of Object.entries(idfTable).sort((a, b) => { return (b[1] - a[1]) }).map((a) => { return a[0] }).slice(0, 1000)) {
        $('#ieContainer').find('tbody')
            .append($('<tr>')
                .attr('class', 'w3-display-container')
                .append($('<td>')
                    .attr('style', 'vertical-align: middle;')
                    .append(word))
                .append($('<td>')
                    .attr('class', 'w3-right-align')
                    .append($('<button>')
                        .attr('class', 'general-button')
                        .html('設為最小')
                        .click(function () {
                            $(this)
                                .parent()
                                .parent()
                                .find('input').val(0)
                        })
                    )
                    .append($('<button>')
                        .attr('class', 'general-button')
                        .html('設為最大')
                        .click(function () {
                            $(this)
                                .parent()
                                .parent()
                                .find('input').val(Object.values(idfTableOrig).reduce((a, b) => {
                                    return a > b ? a : b
                                }))
                        })
                    )
                    .append($('<button>')
                        .attr('class', 'general-button')
                        .html('重設')
                        .click(function () {
                            var _word = $($(this)
                                .parent()
                                .parent()
                                .find('td')[0]).html()
                            $(this)
                                .parent()
                                .parent()
                                .find('input').val(idfTableOrig[_word])
                        })
                    )
                )
                .append($('<td>')
                    .attr('class', 'w3-right-align')
                    .attr('style', 'vertical-align: middle;')
                    .append($('<input>')
                        .attr('type', 'number')
                        .val(idfTable[word])
                    )
                )
            )
    }
    $('#idfEditorLayer').removeClass('hidden')
}

function hideStopWordEditor() {
    $(window).unbind('keydown')
    $(window).keydown(function (event) {
        if (event.keyCode == 13) {
            event.preventDefault()
            sendRequest()
        }
    })
    $('#stopWordEditorLayer').addClass('hidden')
}

function hideIdfEditor() {
    $(window).unbind('keydown')
    $(window).keydown(function (event) {
        if (event.keyCode == 13) {
            event.preventDefault()
            sendRequest()
        }
    })
    $('#idfEditorLayer').addClass('hidden')
}

function showPTTPage(url) {
    $('#pttPageWindowContent iframe').attr('src', url)
    $('#pttPageWindow').removeClass('hidden')
}

function hidePTTPage() {
    $('#pttPageWindow').addClass('hidden')
}

function updateIdfTable() {
    let wordList = $("#ieContainer").find("tr").slice(1).map((_, a) => {
        return [
            [$($(a).find("td")[0]).html(), $($(a).find("td")[1]).find('input').val()]
        ]
    }).get()
    console.log(wordList)
    for (p of wordList) {
        idfTable[p[0]] = p[1]
    }
    console.log(idfTable)
}

function downloadStopWord() {
    stopWordString = stopwords.join('\n')
    download(stopWordString, 'stopwords.txt', 'text/plain')
}

function downloadIdfTable() {
    let idfTableJson = JSON.stringify(idfTable, null, "\t")
    download(idfTableJson, 'idfTable.json', 'text/plain')
}


function hidePopup() {
    $('#infoWindowLayer').toggleClass('hidden')
    $('#progressInfo').html('')
    $('#progBarInner').css('width', 0 + '%')
    closeEventListner()
}

function setDate(_startDate, _endDate) {
    document.getElementById('startDate').value = _startDate
    document.getElementById("endDate").value = _endDate
    startDate = _startDate
    endDate = _endDate
}

function getProgressing(event) {
    data = JSON.parse(event.data)
    $('#progressInfo').html(data.comment)
    $('#progBarInner').css('width', data.progress + '%')
}

function getProgressFinished(event) {
    data = JSON.parse(event.data)
    changeGraph(data)
    hidePopup()
}

function closeEventListner() {
    progListener.removeEventListener('progressing' + randId, getProgressing)
    progListener.removeEventListener('progressFinished' + randId, getProgressFinished)
}

function sendRequest() {
    content = getContent()
    startDate = $('#startDate').val()
    endDate = $('#endDate').val()
    console.log(content)
    $.ajax({
        type: 'POST',
        url: '/addRequest',
        data: content,
        contentType: 'application/json',
        success: function (data) {
            console.log(data)
            changeGraph(data.Result)
        }
    })
}

function getContent() {
    content = JSON.stringify({
        startDate: $('#startDate').val(),
        endDate: $('#endDate').val(),
        keyword: $('#keywordBox').val(),
        stopwords: [],
        pos: {
            noun: $('#noun').is(':checked'),
            verb: $('#verb').is(':checked'),
            adj: $('#adj').is(':checked'),
            adv: $('#adv').is(':checked'),
            pron: $('#pron').is(':checked'),
            aux: $('#aux').is(':checked'),
            other: $('#other').is(':checked')
        }
    })
    return content
}

function changeGraph(data) {
    console.log(data)
    tsvString = data.info.tsv
    json = JSON.parse(data.info.json)
    globKeyword = json.info.keyword
    console.log(json)
    wordTitleList = json
    keywordCountString = ''
    if (json.info.keyword != '') {
        keywordCountString = ', 關鍵字出現次數：' + json.info.count
    }
    $('#graphInfo').empty()
    $('#graphInfo').attr('style', 'margin: 10px;').append('總文章數：' + json.info.posts + keywordCountString)
    totalPosts = json.info.posts
    destroyCurrentGraph()
    buildSentetree()
}

function destroyCurrentGraph() {
    d3.selectAll('#vis').remove()
    d3.select('#graph').append('div').attr('id', 'vis')
}

function hideTitles() {
    $('#titleListLayer').addClass('hidden')
    $('#setToKeyword').unbind()
    $("#addToStopwords").unbind()
}

function buildSentetree() {
    console.log("Build.")
    var model;
    var tree;
    var data;
    if (typeof tsvString === 'undefined') {
        d3.tsv(tsvPath, buildTree)
    } else {
        data = d3.tsvParse(tsvString)
        buildTree(_, data)
    }

    function buildTree(error, rawdata) {
        const data = rawdata.map(d => Object.assign({}, d, { count: +d.count }));
        model = new SentenTree.SentenTreeBuilder()
            .tokenize(SentenTree.tokenizer.tokenizeBySpace)
            .transformToken(token => (/score(d|s)?/.test(token) ? 'score' : token))
            .buildModel(data, {
                maxSupportRatio: 0.5,
                minSupportCount: 10
            });
        tree = new SentenTree.SentenTreeVis('#vis', {
            fontSize: [15, 40],
            gapBetweenGraph: 10
        });
        console.log(tree)
        let nGraph = globKeyword == "" ? 5 : 2
        tree.data(model.getRenderedGraphs(nGraph))
            .on('nodeClick', node => {
                if ('mergedData' in node.data) {
                    seqList = node.data.mergedData.map((d) => {
                        return d.seq.DBs.map((n) => {
                            return n.rawText
                        })
                    })
                } else {
                    seqList = node.data.seq.DBs.map(function (n) {
                        return n.rawText
                    })
                }
                titleList = []
                for (s of seqList) {
                    titleTemp = wordTitleList[s]
                    if ((titleList.map(function (n) {
                        return n.title
                    })).indexOf(titleTemp.title) == -1) {
                        titleList.push(titleTemp)
                    }
                }
                console.log(titleList)
                info = wordTitleList[node.data.entity]
                $('#titleListKeyword').html(node.data.entity)
                $('#titleListKeywordInfo').html('')
                if (stopwords.indexOf(node.data.entity) < 0) {
                    $("#addToStopwords").html('設為停用詞').css('background-color', '#379').click(() => {
                        stopwords.push(node.data.entity)
                        destroyCurrentGraph()
                        buildSentetree()
                        hideTitles()
                    })
                } else {
                    $("#addToStopwords").html('從停用詞移除').css('background-color', '#933').click(() => {
                        stopwords.pop(node.data.entity)
                        destroyCurrentGraph()
                        buildSentetree()
                        hideTitles()
                    })
                }
                $('#setToKeyword').click(() => {
                    $('#keywordBox').val(node.data.entity)
                    sendRequest()
                    hideTitles()
                })
                $('#titleListLayer').removeClass('hidden')
                $.ajax({
                    type: 'POST',
                    url: '/ptt/keywordFrequency',
                    data: JSON.stringify({
                        startDate: startDate,
                        endDate: endDate,
                        keyword: node.data.entity,
                        globKeyword: globKeyword
                    }),
                    contentType: 'application/json',
                    success: function (data) {
                        console.log(data)
                        $('#titleListKeywordInfo').html('單詞出現次數：' + data.Result.wordCount + ', 單詞出現的文章數：' + data.Result.postCount + ', 單詞頻率：' + (data.Result.postCount * 100 / totalPosts).toFixed(2) + '%')
                    }
                })
                $('#titleListContainer').empty()
                for (i of titleList) {
                    $('#titleListContainer').append(
                        $('<li>').attr('class', 'w3-panel')
                            .css('cursor', 'pointer').append(
                                $('<p>').attr('target', '_blank').append(
                                    $('<h4>').html(i.title)
                                ).append(
                                    $('<span>').attr('style', 'margin: 0px 10px').html(i.author)
                                ).append(
                                    $('<span>').attr('style', 'margin: 0px 10px').html(i.date)
                                ).append(
                                    $('<span>').attr('style', 'margin: 0px 10px').html('推文數：' + i.pushes)
                                )
                            ).click(function () {
                                let indx = $(this).index()
                                showPTTPage((titleList[indx].url).replace('www.ptt.cc', 'www.pttweb.cc'))
                            })
                    )
                }
            })
            .on('nodeMouseenter', node => {
                console.log(node)
                titles = node.data.topEntries.map(function (x) {
                    return wordTitleList[x.rawText]
                })
                console.log(titles)
                infoStr = ''
                for (index in titles) {
                    if (index == 0) {
                        infoStr += titles[index].title + '<br>'
                    } else {
                        if (titles[index].title != titles[index - 1].title) {
                            infoStr += titles[index].title + '<br>'
                        }
                    }
                    pos = titles[index].part.indexOf(node.data.entity)
                    infoStr += '... ' + titles[index].part.slice(Math.max(0, pos - 20), Math.min(titles[index].part.length - 1, pos + 20)) + ' ...<br>'
                }
                $(nodeTitleContent).html(infoStr)
                $('#nodeTitle').removeClass('hidden')
                tree.highlightNeighbors(node)
            })
            .on('nodeMouseleave', node => {
                $('#nodeTitle').addClass('hidden')
                tree.clearHighlightNeighbors()
            }).on('layoutStart', layout => {
                console.log(layout)
            }).on('linkMouseenter', link => {
                console.log(link)
            })
        new ResizeSensor(jQuery('#d3kitRoot'), function () {
            var scale, origin;
            scale = Math.min(2, ($('#graph').outerWidth()) / ($('#d3kitRoot').outerWidth() + 60))

            $('#vis').css({
                transform: "scale(" + scale + ")",
                'transform-origin': 'top left'
            });
        })
    }
}