<commit_before><!DOCTYPE html>
<html>

  <head>
    <title>Map Upload</title>
  </head>

  <body>
    {% block content %}
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <link href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" rel="stylesheet">
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js">
    </script>
    <!--<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>-->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <script src="//cdn.bootcss.com/oboe.js/2.1.2/oboe-browser.min.js">
    </script>
    <script src="{{url_for('static', filename='PruneCluster.js')}}">
    </script>
    <link href="{{ url_for('static', filename='styles/app.css') }}" rel="stylesheet">
    <script src="{{url_for('static', filename='SimpleShape.js') }}">
    </script>
    <script src="{{ url_for('static', filename='Rectangle.js') }}">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js">
    </script>
    <style>
      * {
        font-family: 'HKGroteskRegular', 'Arial'
      }
      
      body {
        margin: 0px;
        height: 100vh;
        z-index: -1
      }
      
      #mapid {
        height: 100vh
      }
      
      .table>thead>tr>th {
        border-bottom: 0px
      }
      
      #upload {
        background-color: #FFF;
        height: 50vh;
        z-index: 1000;
        padding-top: 50px;
        height: 100vh;
        box-shadow: 5px 5px 10px #000
      }
      
      h1 {
        font-family: 'HKGroteskBold', 'Arial'
      }
      
      p {
        font-size: 18px
      }
    </style>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-4" id="upload">
          <div class="row">
            <div class="col-md-12">
              <h1>Step 1: Upload</h1>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <p>Please select a valid Google Location Map History file (should be in format of LocationHistory.json)</p>
            </div>
            <div class="col-md-12">
              <div class="input-group">
                <label class="input-group-btn"><span class="btn btn-primary">Upload&hellip; <input accept=".json" id="uploadInput" multiple style="display: none;" type="file"></span></label> <input class="form-control" readonly type="text">
              </div>
            </div>
          </div>
          <br>
        <div class="row">
          <div class="col-md-12">
            Progress:
            <div class="progress">
              <div id="done" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em">
                0%
              </div>
            </div>
            <div id="stats"></div>
            <br>
            </div>
          </div>
        <div class="row">
          <div class="col-md-12">
            Upload Progress:
            <div class="progress">
              <div id="doneupload" class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em">
                0%
              </div>
            </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <table class="table" id="locationTable">
                <thead>
                  <tr>
                    <th>Locations</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="input-group">
                <button class="btn btn-primary" id="newBoxButton">New Box</button> &nbsp;&nbsp;&nbsp;
                <button class="btn btn-danger" id="cancel">Cancel</button>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-8" id="mapid"></div>
      </div>
    </div>
    <script>
      // initial state
      var mymap = L.map('mapid', {
        scrollWheelZoom: false,
        zoomControl: false
      }).setView([39.9526, -75.163], 3);

      L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=<KEY>', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap<\/a> contributors, ' +
          '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA<\/a>, ' +
          'Imagery © <a href="http://mapbox.com">Mapbox<\/a>',
      }).addTo(mymap);
      L.control.zoom({
        position: 'bottomright'
      }).addTo(mymap);
      $("#cancel").prop('disabled', true);
      var newBoxMode = false;
      var bounds = [];
      var boxes = {};
      var currentBox;
      var clicking = false;
      var dragStart, dragEnd;

      function mousedownMap(e) {
        if (newBoxMode) {
          clicking = true;
          bounds[0] = e.latlng;
          bounds[1] = e.latlng;
          currentBox = L.rectangle(bounds, {
            color: 'blue',
            weight: 1
          });
        }
      }

      function mousemoveMap(e) {
        if (newBoxMode && clicking) {
          bounds[1] = e.latlng;
          currentBox.setBounds(bounds);
          currentBox.addTo(mymap);
        }
      }

      function createBox(name) {
        if (name) {
          boxes[currentBox._leaflet_id] = {
            'name': name,
            'rectangle': currentBox,
          };

          $('#locationTable tr:last').after(
            '<tr id="' + currentBox._leaflet_id + '"><td>' + name + '</td><td><button class="btn btn-danger deleteBox">Delete</button></td></tr>'
          );

          $('.deleteBox').on('click', function (e) {
            var id = this.parentNode.parentNode.id;
            boxes[id].rectangle.editing.disable();
            boxes[id].rectangle.remove();
            delete boxes[id];
            this.parentNode.parentNode.remove();
          });

          currentBox.bindPopup(name).openPopup();
          currentBox.editing.enable();
        } else {
          currentBox.remove();
        }
        currentBox = null;
      }

      function mouseupMap(e) {
        if (newBoxMode && currentBox) {<commit_msg>added ability to zoom<commit_after><!DOCTYPE html>
<html>

  <head>
    <title>Map Upload</title>
  </head>

  <body>
    {% block content %}
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <link href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" rel="stylesheet">
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js">
    </script>
    <!--<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>-->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <script src="{{url_for('static', filename='PruneCluster.js')}}">
    </script>
    <link href="{{ url_for('static', filename='styles/app.css') }}" rel="stylesheet">
    <script src="{{url_for('static', filename='SimpleShape.js') }}">
    </script>
    <script src="{{url_for('static', filename='oboe.min.js') }}">
    </script>
    <script src="{{ url_for('static', filename='Rectangle.js') }}">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js">
    </script>
    <style>
      * {
        font-family: 'HKGroteskRegular', 'Arial'
      }
      
      body {
        margin: 0px;
        height: 100vh;
        z-index: -1
      }
      
      #mapid {
        height: 100vh
      }
      
      .table>thead>tr>th {
        border-bottom: 0px
      }
      
      #upload {
        background-color: #FFF;
        height: 50vh;
        z-index: 1000;
        padding-top: 50px;
        min-height: 100vh;
        box-shadow: 5px 5px 10px #000;
        overflow-y: scroll;
      }
      
      h1 {
        font-family: 'HKGroteskBold', 'Arial'
      }
      
      p {
        font-size: 18px
      }
    </style>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-4" id="upload">
          <div class="row">
            <div class="col-md-12">
              <h1>Step 1: Upload</h1>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <p>Please select a valid Google Location Map History file (should be in format of LocationHistory.json)</p>
            </div>
            <div class="col-md-12">
              <div class="input-group">
                <label class="input-group-btn"><span class="btn btn-primary">Upload&hellip; <input accept=".json" id="uploadInput" multiple style="display: none;" type="file"></span></label> <input class="form-control" readonly type="text">
              </div>
            </div>
          </div>
          <br>
        <div class="row">
          <div class="col-md-12">
            Progress:
            <div class="progress">
              <div id="done" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em">
                0%
              </div>
            </div>
            <div id="stats"></div>
            <br>
            </div>
          </div>
        <div class="row">
          <div class="col-md-12">
            Upload Progress:
            <div class="progress">
              <div id="doneupload" class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em">
                0%
              </div>
            </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <h1>Step 2: Select Bounding Boxes </h1>
            </div>
            <div class="col-md-12">
              <p>Click "New Box" and drag to select an area to process on the map.</p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <table class="table" id="locationTable">
                <thead>
                  <tr>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="input-group">
                <button class="btn btn-primary" id="newBoxButton">New Box</button> &nbsp;&nbsp;&nbsp;
                <button class="btn btn-danger" id="cancel">Cancel</button>
              </div>
            </div>
          </div>
          <br>
          <div class="row">
            <div class="col-md-12">
              <h1>Step 3: Submit</h1>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <button class="btn btn-success" style="width: 100%" id="submitProcess">Submit for processing</button>
            </div>
          </div>
          <br><br><br>
        </div>
        <div class="col-md-8" id="mapid"></div>
      </div>
    </div>
    <script>
      
      // initial state
      var mymap = L.map('mapid', {
        scrollWheelZoom: false,
        zoomControl: false
      }).setView([39.9526, -75.163], 3);

      L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=<KEY>', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap<\/a> contributors, ' +
          '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA<\/a>, ' +
          'Imagery © <a href="http://mapbox.com">Mapbox<\/a>',
      }).addTo(mymap);
      L.control.zoom({
        position: 'bottomright'
      }).addTo(mymap);
      $("#cancel").prop('disabled', true);
      var newBoxMode = false;
      var bounds = [];
      var boxes = {};
      var currentBox;
      var clicking = false;
      var dragStart, dragEnd;

      function mousedownMap(e) {
        if (newBoxMode) {
          clicking = true;
          bounds[0] = e.latlng;
          bounds[1] = e.latlng;
          currentBox = L.rectangle(bounds, {
            color: 'blue',
            weight: 1
          });
        }
      }

      function mousemoveMap(e) {
        if (newBoxMode && clicking) {
          bounds[1] = e.latlng;
          currentBox.setBounds(bounds);
          currentBox.addTo(mymap);
        }
      }



      function createBox(name) {
        if (name) {
          boxes[currentBox._leaflet_id] = {
            'name': name,
            'rectangle': currentBox,
            'zoomLevel': mymap.getZoom()
          };


          $('#locationTable tr:last').after(
            '<tr id="' + currentBox._leaflet_id + '"><td>' + name + 
              '</td><td><button id="goToButton' + currentBox._leaflet_id + '" data-box-id="' + currentBox._leaflet_id + '" class="btn btn-default">Go To Box</button>&nbsp;<button class="btn btn-danger deleteBox">Delete</button></td></tr>'
          );

          $('#goToButton' + currentBox._leaflet_id).on('click', function(e) {
            var obj = boxes[$(this).data('boxId')]
            console.log(obj);
            var bounds = obj.rectangle._bounds;
            var neLat = bounds._northEast.lat
            var neLon = bounds._northEast.lng
            var swLat = bounds._southWest.lat
            var swLon = bounds._southWest.lng
            var lat = swLat + ((neLat - swLat)/2);
            var long = swLon - ((neLon - swLon)/2);
            mymap.setView(L.latLng(lat, long), obj.zoomLevel);
          })

          $('.deleteBox').on('click', function (e) {
            var id = this.parentNode.parentNode.id;
            boxes[id].rectangle.editing.disable();
            boxes[id].rectangle.remove();
            delete boxes[id];
            this.parentNode.parentNode.remove();
          });

          currentBox.bindPopup(name).openPopup();
          currentBox.editing.enable();
        } else {
          currentBox.remove();
        }
        currentBox = null;
      }

      function mouseupMap(e) {
        if (newBoxMode && currentBox) {
{'fraction_non_alphanumeric': 0.17009155645981688, 'fraction_numerical': 0.01627670396744659, 'mean_word_length': 1.737330610729534, 'pattern_counts': {'":': 0, '<': 273, '<?xml version=': 0, '>': 279, 'https://': 16, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2617218', 'n_tokens_mistral': 4856, 'n_tokens_neox': 4634, 'n_words': 838}