<!DOCTYPE html>
<html lang="en">
    <head>
        <% include ../partials/head %>
    </head>
    <body>
        <% include ../partials/nav %>
        <div class="container">
            <div class="jumbotron">
                <h1 class="display-4">AIFEX </h1>
                <p class="lead">Improve the quality, efficiency and diversity of your exploratory test sessions</p>
                <hr class="my-4"></hr>
                <h3>Join the session </h3>
                <p>If you want to join the session and perform several exporations.</p>
                <ul>
                    <li>Install the extension <a href="/documentation-extension" target="_blank"><i class="fas fa-question-circle"></i></a></li>
                    <li>Open the extension and enter this key <input type="text" id="sessionId" value="<%=session.id %>$<%=model.id %>" readonly> </input><button id="copy" class="btn btn-primary">copy</button></li>
                    <li>Invite your collaborators to join the session, just give them the URL of this page.</li>
                </ul>
                
                <h3>Details</h3>

                <table id="session-list" class="table table-striped table-bordered">
                    <thead class="thead-dark">
                    <tr>
                        <th scope="col" align="center">Target WebSite</th>
                        <th scope="col" align="center">Number of Explorations</th>
                        <th scope="col" align="center">Explorations List</th>
                        <th scope="col" align="center">AI Model</th>
                        <th scope="col" align="center">Create Test Files</th>
                    </tr>
                    </thead>
                
                    <tbody>
                        <tr>
                        <td><%=session.webSite.name%></td>
                        <td><%= session.explorationList.length %></td>
                        <td><a href="/dashboard/session/<%=connectionCode %>/exploration"><i class="fas fa-list-ol"></i></a></td>
                        <td><a href="/dashboard/session/<%=connectionCode %>/ngram"><i class="fas fa-brain"></i></a></td>
                        <td><a href="/dashboard/session/<%=connectionCode %>/print"><i class="fas fa-file"></i></a></td>
                        </tr>
                    </tbody>
                </table>
                
                <!--<h2>Profile Coverage</h2>
                    <form action="/dashboard/session/profile_coverage_view/<%=connectionCode %>" method="post" id="viewmodelform">
                        <div class="form-row">
                            <div class="col-auto">
                                <input placeholder="Profile Connection Code" type="text" class="form-control" name="connectionCodeProfile" id="connectionCodeProfileInput" required>
                            </div>
                            <div class="col-auto">
                                <button type="submit" class="btn btn-primary">Compute</button>
                            </div>
                        </div>
                    </form>-->
                <h3>Cross Entropy </h3>

                <p>The cross entropy measures how surprising is an exploration regarding the previous performed ones.
                    The following figures shows the cross entropy for each exploration of the session.
                    20 means that the exploration is highly surprising, 3 or less means than the AI would generate it.
                </p>
                
                    
                <div id="chart_div" 
                    style="width: 900px; height: 500px" 
                    model="<%= model.id %>"
                    connectionCode="<%= connectionCode %>"
                    data="<%= crossEntropies %>" 
                    socketProtocol="<%= socketProtocol %>"
                    socketPort="<%= socketPort %>">
                </div>
            
                
            </div>
        </div>
    </div>
        
    <script type="text/javascript" src="/static/socket.io.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    
    <script defer>
        function copy() {
            var copyText = document.getElementById("sessionId");
            copyText.select();
            document.execCommand("copy");
        }
        document.getElementById("copy").addEventListener("click", copy);
    </script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart', 'line']});
        google.charts.setOnLoadCallback(drawChart);

        let socketPort = document.getElementById("chart_div").getAttribute("socketPort")
        let socketProtocol = document.getElementById("chart_div").getAttribute("socketProtocol")
        let modelId = document.getElementById("chart_div").getAttribute("model")

        if (socketPort && socketProtocol) {
            const socket = io(`${socketProtocol}://${window.location.hostname}:${socketPort}`,
            {
                rejectUnauthorized: false
            });
            socket.on('connect', function(data) {
                console.log("socket connected")
                socket.emit("listenModel", {
                    modelId
                });
            });
            socket.on('crossEntropy', function(data) {
                let crossEntropy = JSON.parse(data).crossEntropy
                addToChart(crossEntropy)
            })
        }

        let chart
        let index
        let data

        let options = {
                hAxis: {
                    title: 'Exploration', 
                    minValue: 1,
                    format: '0'

                },
                vAxis: {
                    title: 'Cross Entropy', 
                    minValue: 0, 
                    maxValue: 20,
                },

                trendlines: { 0: {
                    opacity: 0.5,
                    type: 'polynomial',
                    color: 'red',
                } }
            };

        function drawChart() {
            let crossEntropies = JSON.parse(document.getElementById("chart_div").getAttribute("data"))
            let lines = crossEntropies.map(line => [
                parseInt(line[0].toString()),
                line[1],
                line[1].toString(),
            ])
            data = new google.visualization.DataTable();
            data.addColumn("number", "Exploration");
            data.addColumn("number", "Cross Entropy");
            data.addColumn({type: 'string', role: 'tooltip'});

            data.addRows(lines)
            index = crossEntropies.length

            chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }

        function addToChart(crossEntropy) {
            data.addRows([
                [index++, parseInt(crossEntropy), crossEntropy.toString()]
            ])
            chart.draw(data, options);
        }
      </script>
    </body>
</html>