ptt-sententree/static/js/generalText.js

var tsvPath
var stopwords = []

const init = () => {
    $(window).on('mousemove', (e) => {
        $('#nodeTitle').css({
            left: e.pageX,
            top: e.pageY
        })
    })
    $('#minRatioLabel').on('mouseenter', () => {
        $('#nodeTitle').removeClass('hidden')
        $('#nodeTitleContent').html('兩個相鄰單詞之間出現頻率比值的最小值，小於該值不會被演算法選擇')
    }).on('mouseleave', () => {
        $('#nodeTitle').toggleClass('hidden')
    })
    $('#maxRatioLabel').on('mouseenter', () => {
        $('#nodeTitle').removeClass('hidden')
        $('#nodeTitleContent').html('兩個相鄰單詞之間出現頻率比值的最大值，大於該值不會被演算法選擇')
    }).on('mouseleave', () => {
        $('#nodeTitle').toggleClass('hidden')
    })
    $('#wordcount').on('mouseenter', () => {
        $('#nodeTitle').removeClass('hidden')
        $('#nodeTitleContent').html('僅計算中文字的字數')
    }).on('mouseleave', () => {
        $('#nodeTitle').toggleClass('hidden')
    })
}

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 showStopwordEditor() {
    console.log(stopwords)
    $(window).unbind('keydown')
    $(window).keydown(function (event) {
        if (event.keyCode == 13) {
            addStopWord()
        }
    })
    $('#sweContainer').empty()
    for (word of stopwords) {
        $('#sweContainer').append($('<li>').attr('class', 'w3-display-container').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 hideStopWordEditor() {
    $(window).unbind('keydown')
    $(window).keydown(function (event) {
        if (event.keyCode == 13) {
            event.preventDefault()
            sendRequest()
        }
    })
    $('#stopWordEditorLayer').addClass('hidden')
}

function submit() {
    text = $('#rawTextBox').val()
    $('#rawText').addClass('hidden')
    $('#toggleTextBox').html('顯示文字輸入區')
    $.ajax({
        type: 'POST',
        url: '/post/generalTxt/addText',
        data: JSON.stringify({
            text: text,
            stopwords: stopwords
        }),
        contentType: 'application/json',
        success: function (data) {
            tsvPath = data.Result.path
            destroyCurrentGraph()
            d3.select('#graph').append('div').attr('id', 'vis')
            buildSentetree()
            $('#graph').removeClass('hidden')
        }
    })
}

function buildSentetree() {
    console.log("Build.")
    let model;
    let tree;
    let data;
    const graph = d3.json(tsvPath, buildTree);

    function buildTree(error, rawdata) {
        console.log(rawdata)
        const data = rawdata.map(d => Object.assign({}, d, { count: +d.count }));
        console.log({ data })
        let minRatio = $('#minRatio').val()
        let maxRatio = $('#maxRatio').val()
        console.log({ minRatio, maxRatio })
        model = new SentenTree.SentenTreeBuilder()
            .tokenize(SentenTree.tokenizer.tokenizeBySpace)
            .transformToken(token => (/score(d|s)?/.test(token) ? 'score' : token))
            .buildModel(data, { maxSupportRatio: maxRatio, minSupportRatio: minRatio });
        tree = new SentenTree.SentenTreeVis('#vis', {
            fontSize: [15, 40],
            gapBetweenGraph: 10
        });
        tree.data(model.getRenderedGraphs(2))
            .on('nodeMouseenter', (node) => {
                console.log(node)
                $('#nodeTitle').removeClass('hidden')
                $('#nodeTitleContent').html('<ul>' + node.data.topEntries.map((n) => "<li>" + data[n.id].rawtxt + "</li>").join('') + "</ul>")
            })
            .on('nodeMouseleave', () => {
                $('#nodeTitle').addClass('hidden')
            })
            .on('linkMouseenter', (node) => {
                $('#nodeTitle').removeClass('hidden')
                $('#nodeTitleContent').html('頻率：' + (node.freq / 10))
            }).on('linkMouseleave', () => {
                $('#nodeTitle').addClass('hidden')
            })
        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'
            });
        })
    }
}

function destroyCurrentGraph() {
    d3.selectAll('#vis').remove()
}

function switchMessageBox() {
    $('#rawText').toggleClass('hidden')
    if ($('#rawText').hasClass('hidden')) {
        $('#toggleTextBox').html('顯示文字輸入區')
    } else {
        $('#toggleTextBox').html('隱藏文字輸入區')
    }
}

function countWords() {
    text = $("#rawTextBox").val()
    let wordCount = text.split(new RegExp("[\u4e00-\u9fa5]")).length - 1
    console.log(wordCount)
    $("#wordcount").html('字數：' + wordCount)
}

init()