<html>
  <head>

    <!-- Ignore Favicon -> Solved the warning in console of the browser. -->
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">

    <!-- Three.js and Lodash libraries-->
    <script src='./modules/three.js-r101/three.js'></script>
    <script src='./modules/lodash/lodash.js'></script>

    <!-- Importing D3 minified versions v3 and v5. -->
    <script src='./modules/d3v3/d3.min.js'></script>
    <script src='./modules/d3/d3.min.js'></script>
    
    <!-- Importing additional modules such as PCP, annotator, tip, legend, lasso, papaParse, and Jquery. -->
    <script src='./modules/d3-annotations/d3-annotator.js'></script>
    <script src="./modules/d3-tip/tip.js"></script>
    <script src="./modules/d3-legend/d3-legend.min.js"></script>
    <script src="./modules/d3-lasso/lasso.js"></script>
    <script src="./modules/plotly/plotly_min.js"></script>
    <script src="./modules/pcp/d3v3.parcoords.js"></script>
    
    <script src="./modules/papa/papaparse.min.js"></script>
    <script src="./modules/jquery/jquery.min.js"></script>

    <!-- Basic scripts that we execute. -->
    <script src="./js/tsne.js"></script>
    <script src="./js/data_form_handler.js"></script>
     <script src="./modules/pca/pca.js"></script>

    <!-- CSS - Styling -->
    <link rel="stylesheet" href="./css/style.css"/>
    <link rel="stylesheet" href="./css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="./css/d3.parcoords.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous">
    
    <!-- Bootstrap -->
    <script src="./modules/bootstrap/bootstrap.min.js"></script>
  
  </head>

  <body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <div class="panel panel-default" id="left-side-param">
                    <div class="panel-heading">
                      <h2 class="panel-title" style="display:inline-block">t-SNE Parameters</h2><div id="cost" style="display:inline-block; float:right"></div>
                    </div>
                  <div class="panel-body">
                    <div id="control-panel" data-sr="enter left over 8s">
                      <div class="param">
                          <label id="data" for="param-dataset">Data sets</label>
                          <select id="param-dataset" name="param-dataset" onChange="changeDataset(this.value);">
                            <option value="diabetes.csv" selected>Pima Indian Diabetes</option>
                            <option value="breast-cancer-wisconsin.csv">Breast Cancer Wisconsin</option>
                            <option value="iris.csv">Iris</option>
                            <option value="winequality-red.csv">Red Wine - Quality</option>
                            <option value="empty">Upload New File</option>
                          </select>
                          <button type="button" class="button" id="FactRes" onclick="FactoryReset()">Factory reset</button>
                      </div>
                          <div class="param">
                        <label for="param-perplexity">Perplexity</label>
                        <input id="param-perplexity" type="range" min="5" max="100" value="30", step="1">
                        <output for="param-perplexity" id="param-perplexity-value">30</output>
                          </div>
                          <div class="param">
                        <label for="param-learningrate">Learning rate</label>
                        <input id="param-learningrate" type="range" min="1" max="150" value="10", step="1">
                        <output for="param-learningrate" id="param-learningrate-value">10</output>
                          </div>


                          
                          <div class="param">
                              <div class="row">
                              <div class="col-md-3">
                              <label for="param-maxiter" style="padding: 25px 0 0 8px">Max iterations</label>
                              </div>
                              <div class="col-md-4" style="padding: 25px 0 0 0px">
                              <input id="param-maxiter" type="range" min="10" max="1000" value="500", step="10" >
                            </div>
                            <div class="col-md-1">
                              <output for="param-maxiter" id="param-maxiter-value" style="padding: 25px 0 0 0" >500</output>
                              </div>

                          <div class="col-md-4">
                              <div id="hider2"></div>
                              <div id="PlotCost"></div>
                            </div>

                          </div>
                          </div>
                          <div class="param">
                        <label for="param-distance">Distance metric</label>
                        <select id="param-distance" name="param-distance">
                            <option value="euclideanDist" selected>Euclidean distance</option>
                            <option value="jaccardDist">Jaccard dissimilarity</option>
                        </select>
                        <input id="file-input" type="file" name="name" style="display: none;" />
                        <button type="button" class="button" onclick='loadAnalysis();' style="padding:0 12px 0 12px">Load execut.</button>
                          </div>
                          <div class="param">
                        <label for="param-transform">Data transform</label>
                        <select id="param-transform" name="param-transform">
                            <option value="noTrans" selected>No transform</option>
                            <option value="logTrans">Log10</option>
                            <option value="asinhTrans">Asinh</option>
                            <option value="binTrans">Binarize</option>
                        </select>
                        <button type="button" class="button" onclick="SaveAnalysis()" style="padding:0 10px 0 10px">Store execut.</button>
                          </div>
                        <div class="row">
                          <div class="col-md-8">
                              <p><div id="run-button"><button id="ExecuteBut" class="btn btn-primary btn-block" onclick="getData();" value="Execute new t-SNE analysis" style="margin-top: 4px"><i class="fas fa-running fa-lg" style="margin-right: 10px"></i>Execute new t-SNE analysis</button></div></p>
                          </div>
                          <div class="col-md-4" style="margin-top: 10px">
                            <label>
                                <input id="downloadDists" checked type="checkbox">
                                Distances cached on "Store execution"
                            </label>
                          </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
          <div class="col-md-6">
            <svg id="SvgAnnotator"></svg>
            <svg id="modtSNEcanvas_svg"></svg>
            <svg id="modtSNEcanvas_svg_Schema"></svg>
            <div id="modtSNEDiv">
            <canvas id = "modtSNEcanvas" ></canvas>
          </div>
          </div>
          <div class="col-md-2" style="width: 24.999999995%">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title">Interaction Modes</h2>
                </div>
                <div class="panel-body">
                  <div id="resetAllFilters" style="margin-bottom: 20px">
                      <button class="btn btn-info active" onclick="setLayerProj();" style="margin-left: -1px !important" ><i class="fas fa-mouse-pointer fa-lg" ></i>t-SNE Points Exploration</button>
                      <button class="btn btn-info" onclick="setLayerComp();" style="margin-left: -1.4px"><i class="far fa-object-group fa-lg"  ></i>Group Selection</button>
                      <button class="btn btn-info" onclick="setLayerSche();" style="margin-left: -2px !important"><i class="fas fa-draw-polygon fa-lg" ></i>Dimension Correlation</button>
                  </div>
                      <button class="btn btn-info" onclick="setReset();" style="margin-left: 225px"><i class="fas fa-trash-alt fa-lg" style="margin-right: 10px"></i>Reset Filters</button>
                </div>
            </div>
          </div>
        </div>
        <div class="row">
            <div class="col-md-3"  style="margin-top:-4px">
                <div class="panel panel-default" style="padding-bottom: 35px;">
                  <div class="panel-heading">
                      <h2 class="panel-title" style="display:inline-block">t-SNE Overview</h2><div id="datasetDetails"style="display:inline-block; float:right"></div>
                  </div>
                  <div class="row">
                    <div class="panel-body">
                        <div class="col-md-6">
                            <div id="overviewRect"></div>
                        </div>
                        <div class="col-md-6">
                            <div style="display:block" id="CategoryName"></div>
                            <div class="legend" id = "legend2"></div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-3 col-md-offset-6">
                <div class="panel panel-default"  style="margin-top: -195px">
                    <div class="panel-heading">
                        <h2 class="panel-title">Visual Mapping</h2>
                    </div>
                    <div class="row">
                      <div class="panel-body">
                        <div class="col-md-12">
                          <div class="row">
                            <div class="col-md-8">
                            <div class="param" style="padding: 5px 0 5px 0">
                              <label for="male"></label>Density</label>
                              <select id="param-neighborHood" name ="param-neighborHood" onchange="setReInitialize(true);" style="display:inline-block;margin-left: 60px">
                                <option selected="selected" value="color" >Color-encoding</option>
                                <option value="size">Size-encoding</option>
                              </select> 
                            </div>
                            <div class="param" style="padding: 10px 0 10px 0" >
                              <output for="param-neighborHood" id="param-neighborHood-value " ></output>
                              <label for="male">Remaining cost</label>
                              <label id="selectionLabel" style="margin-top:4px; margin-left: 15px">Size-encoding</label>
                            </div>
                           <div class="param">
                              <div class="row" style="margin-top: 30px">
                                  <div class="col-md-6">
                              <label for="param-corr">Correlation threshold</label>
                              </div>
                              <div class="col-md-5">
                              <input id="param-corr" type="range" min="0" max="750" value="150", step="25" onchange="CalculateCorrel(true);" style="margin-left: -20px;">
                            </div>
                            <div class="col-md-1">
                              <output for="param-corr" id="param-corr-value" style="margin-left: -20px;">150</output>
                            </div>
                            </div>
                            </div>
                              <div class="param">
                                <div class="row" style="margin-top: 30px">
                                  <div class="col-md-6">
                                  <label for="param-lim" >Points radius scaling</label>
                                </div>
                                <div class="col-md-5">
                                  <input id="param-lim" type="range" min="1" max="4" value="3", step="0.5" onchange="setReInitialize(false);" style="margin-left: -20px;">
                                </div>
                                <div class="col-md-1">
                                  <output for="param-lim" id="param-lim-value" style="margin-left: -20px;">3</output>
                                  </div>
                                </div>
                              </div>
                          </div>
                          <div class="col-md-2">
                            <svg id="legend1" style =  "margin-left: -25px"></svg>
                          </div>
                          <div class="col-md-2">
                            <svg id="legend4" style =  "margin-left: -45px"></svg>
                          </div>
                          </div>
                          <div class="annotationAllClass" style="margin-top: 30px">
                            <label style="padding-bottom: 0px">
                                <input id="controls" type="checkbox" style="margin-top: 18px">
                                Hide annotations' controllers</input>
                              <button class="btn btn-default" onclick="BringBackAnnotations();" style="display:inline-block; float:right; margin-left:178px"><i class="fas fa-eye fa-lg" style="margin-right: 10px"></i>Reveal annotations</button>
                            </label>
                            <div id="param-correlation">
                              Annotation: <textarea type="text" id="comment" name="textforAnnotator" placeholder="Please, provide your comment."></textarea>
                            </div>
                            <div id="commBtn">
                              <div class="param" style="margin-top:10px">
                                <div id="toggleAnnotator" style= "margin-left: -120px"><button class="btn btn-default" onclick="setAnnotator();" style="display:inline-block; float:left; margin-left: 120px" ><i class="fas fa-comment fa-lg" style="margin-right: 10px"></i>Add annotation</button></div>
                                <div id="continue"></div><button class="btn btn-default active" onclick="setContinue();" style="display:inline-block; float:middle; margin-left: 6px"><i class="fas fa-chart-line fa-lg" style="margin-right: 10px"></i>Continue the analysis</button></div>
                                <button class="btn btn-default" onclick="deleteAnnotations();" style="display:inline-block; float:right; margin-top: -45px" ><i class="fas fa-comment-slash fa-lg" style="margin-right: 10px"></i>Delete annotations</button>
                              </div>
                            </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
        <div class="row">   
            <div class="col-md-3"  style="margin-top:-4px">
                <div class="panel panel-default" style="padding-bottom : 60px">
                  <div class="panel-heading">
                    <h2 class="panel-title">Shepard Heatmap</h2>
                  </div>
                <div class="panel-body">
                  <div class="row">
                    <div class="col-md-6">
                      <svg id="sheparheat"></svg>
                    </div>
                    <div class="col-md-2">
                      <svg id="legend3"></svg>
                    </div>
                  </div>
                </div>
                </div>
              </div>

      <div class="col-md-3 col-md-offset-6">
          <div class="panel panel-default right-side-cor">
              <div class="panel-heading">
                  <h2 class="panel-title" style="display:inline-block">Dimension Correlation</h2><div class="param" style="display:inline-block; margin-top:-5px; float:right"><label for="param-corlim" style="display:inline-block; float: right">Min. Visible Correlation: #<output for="param-corlim" id="param-corlim-value" style="display:inline-block; float:right">0.0</output></label>
                  <input id="param-corlim" type="range" min="0" max="1" value="0.0", step="0.1" style="display:inline-block; float:right" onchange="CalculateCorrel(true);">
                  </div>
              </div>
              <div class="panel-body">  
                <svg id="correlation"></svg>
              </div>
          </div>
        </div>
        </div>
      <div class="row">
        <div class="col-md-3">

        <div class="col-md-3" id="extra-information" style="width: 24.8vw">
            <div class="panel panel-default right-side-hist">
                <div class="panel-heading">
                      <h2 class="panel-title" style="display:inline-block;">Density and Remaining Cost Distributions</h2>
                    <div class="col-md-7"></div>
                    <div class="col-md-5">
                      <div class="param" style="display:inline-block; float:right; margin-top:-21.5px; margin-right: -18px">
                      <label for="param-costlim" style="display:inline-block; float: right">Min. Visible Cost Rate: #<output for="param-costlim" id="param-costlim-value" style="display:inline-block; float:right">1</output></label>
                      <input id="param-costlim" type="range" min="0.1" max="1" value="1", step="0.1" style="display:inline-block; float:right" onchange="setReInitialize(false);">
                    </div>
                  </div>
                  </div>
                <div class="panel-body">  
                  <div id="costHist"></div>
                </div>
            </div>
          </div>
          
        </div>
        <div class = col-md-6>
          <div class="panel panel-default med-bottom">
            <div class="panel-heading">
              <h2 class="panel-title" style="display:inline-block">Neighborhood Preservation</h2><div id="knnBarChartDetails"style="display:inline-block; float:right"></div>
            </div>
            <div class="panel-body">
              <div id="hider"></div>
              <div id="knnBarChart"></div>
            </div>
          </div>
        </div>

        <div class="col-md-3">
            <div class="panel panel-default right-side-PCP">
              <div class="panel-heading">
                  <h2 class="panel-title">Adaptive Parallel Coordinates Plot</h2>
              </div>
              <div class="panel-body">
                <div id="PCP" class="parcoords"></div>
            </div>
           </div>
          </div>
      </div>
    </div>

    <script>

      $("#cost").html('(Unknown Iteration and Cost Values)');
      $("#datasetDetails").html('(Unknown Number of Dimensions and Instances)');
      $("#CategoryName").html('No Classification');
      $("#knnBarChartDetails").html('(Number of Selected Points: 0/0)');
      /* This script is used in order to give functionalities to the different buttons provide through the front-end. */
      $('#param-lim').bind('input', function () { $('#param-lim-value').text($('#param-lim').val()); }); 
      $('#param-corr').bind('input', function () { $('#param-corr-value').text($('#param-corr').val()); });
      $('#param-corlim').bind('input', function () { $('#param-corlim-value').text($('#param-corlim').val()); });
      $('#param-costlim').bind('input', function () { $('#param-costlim-value').text($('#param-costlim').val()); });
      $('#param-perplexity').bind('input', function () { $('#param-perplexity-value').text($('#param-perplexity').val()); });
      $('#param-earlyexag').bind('input', function () { $('#param-earlyexag-value').text($('#param-earlyexag').val()); });
      $('#param-learningrate').bind('input', function () { $('#param-learningrate-value').text($('#param-learningrate').val()); });
      $('#param-maxiter').bind('input', function () { $('#param-maxiter-value').text($('#param-maxiter').val()); });

      // Get the container element
      var btnContainer = document.getElementById("commBtn"); //Add a new comment button

      // Get all buttons with class="btn" inside the container
      var btns = btnContainer.getElementsByClassName("btn");
      for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function() {
        let current = document.getElementById("commBtn").getElementsByClassName("active");
        current[0].className = current[0].className.replace("btn btn-default active", "btn btn-default");
        this.className += " active";
        });
      }

      // Get the container element
      var btnContainer2 = document.getElementById("resetAllFilters"); //resetAllFilters button

      // Get all buttons with class="btn" inside the container
      var btns2 = btnContainer2.getElementsByClassName("btn");
      
      for (var i = 0; i < btns2.length; i++) {
        btns2[i].addEventListener("click", function() {
        let current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace("btn btn-info active", "btn btn-info");
        this.className += " active";
        });
      }
      
    </script>

    <script>
      /* On resize refresh the shepardHeatmap */
      window.onresize = function(event) {
        if ( document.getElementById('cost').hasChildNodes() ) {
          
          // Clear legend for the shepardHeatmap
          //var svgLegend = d3.select("#legend3");
          //svgLegend.selectAll("*").remove();

          // Clear the SheapHeardmap before refreshing
          //var svg = d3.select("#sheparheat");
          //svg.selectAll("*").remove();
          
          // Call the ShepardHeatmap again to be redrawn
          //ShepardHeatMap();
          MainVisual();

        }
      }

      /* When the user clicks on the button, 
      toggle between hiding and showing the dropdown content */
      function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
      }

      // Close the dropdown menu if the user clicks outside of it
      window.onclick = function(event) {
        if (!event.target.matches('.dropbtn')) {
          var dropdowns = document.getElementsByClassName("dropdown-content");
          var i;
          for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
              openDropdown.classList.remove('show');
            }
          }
        }
      }
    </script>

    <!-- Load the core visualization script. -->
    <script src="./js/tsne_vis.js"></script>

  </body>

</html>