improve activity mapper

biogames2.json

@@ -73,8 +73,8 @@
     "type": "Biogames",
     "url": "http://0.0.0.0:5000/game2/instance/log/list/",
     "login_url": "http://localhost:5000/game2/auth/json-login",
-    "username": "dev",
+    "username": "ba",
-    "password": "dev",
+    "password": "853451",
     "host":"http://0.0.0.0:5000"
   }
 }

filter_todo/pre_filter.py

@@ -62,7 +62,7 @@ distribution = defaultdict(lambda: 0)
 finished_and_simu = defaultdict(list)
 files = {}
 actions_dist = defaultdict(list)
-with open('/home/agp8x/git/uni/ma/project/data/0000_ref') as src:
+with open('/home/clemens/git/ma/test/src') as src:
 	for line in src:
 		line = line.strip()
 		instance_id, log = get_json(line)

log_analyzer.py

@@ -58,7 +58,8 @@ def load_ids(name: str):
 
 
 def urach_logs(log_ids, settings):
-	return ["data/inst_{id}.{format}".format(id=log_id, format=settings.log_format) for log_id in log_ids]
+	#return ["data/inst_{id}.{format}".format(id=log_id, format=settings.log_format) for log_id in log_ids]
+	return ["data/{id}.{format}".format(id=log_id, format=settings.log_format) for log_id in log_ids]
 
 
 def write_logentry_count_csv():

static/progress/index.html

@@ -12,87 +12,14 @@
 <script src="https://rawgit.com/Leaflet/Leaflet.heat/gh-pages/dist/leaflet-heat.js"></script>
 
 <script src="my.js"></script>
-<style>
+<link href="style.css" rel="stylesheet"/>
-    .mapDiv {
+<main>
-        width: 1024px;
+    <div class="mapDiv" id="mainMap"></div>
-        height: 768px;
+    <div class="sequenceContainer">
-    }
+        <div class="sequence"></div>
+    </div>
+</main>
 
-    .board {
+<!--div style="font-size:0.1px;position:absolute;bottom:0;">OSM Logo: CC-BY-SA
-        width: 32px;
-        height: 32px;
-        display: inline-block;
-        position: relative;
-    }
-
-    .board img {
-        max-width: 100%;
-        max-height: 100%;
-        position: absolute;
-        /*bottom: 0px;*/
-    }
-
-    .board img:hover {
-        max-width: inherit;
-        max-height: inherit;
-        z-index: 99;
-        top: 20px;
-    }
-
-    .highlight {
-        /*what a nice way to highlight*/
-        display: none;
-    }
-
-    .simu {
-        background-color: blue;
-    }
-
-    .question {
-        background-color: orange;
-    }
-
-    .image {
-        background-color: green;
-    }
-
-    .audio {
-        background-color: red;
-    }
-
-    .video {
-        background-color: purple;
-    }
-
-    .other {
-        background-color: brown;
-    }
-
-    .map {
-        background-color: violet;
-    }
-
-    .error {
-        background-color: grey;
-    }
-
-    ul {
-        list-style-type: none;
-        overflow: auto;
-        overflow-y: hidden;
-        display: inline-block;
-        /*max-width:100%;
-        margin: 0 0 1em;
-        white-space: nowrap;
-        height:200px;*/
-    }
-
-    li {
-        display: inline-block;
-        vertical-align: top;
-    }
-
-</style>
-<div style="font-size:0.1px;position:absolute;bottom:0;">OSM Logo: CC-BY-SA
     http://wiki.openstreetmap.org/wiki/File:Mag_map-120x120.png
-</div>
+</div-->

static/progress/my.js

@@ -1,24 +1,29 @@
 //$.getJSON("data/ff8f1e8f-6cf5-4a7b-835b-5e2226c1e771_03b9b6b4-c8ab-4182-8902-1620eebe8889.json", function (data) {
 $.getJSON("data/ff8f1e8f-6cf5-4a7b-835b-5e2226c1e771_de7df5b5-edd5-4070-840f-68854ffab9aa.json", function (data) {
     var images = {};
-    var mapContainer = $("<div />", {id: "mainMap", class: "mapDiv"});
-    mapContainer.appendTo("body");
     var tiles = {
         "osm": L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+            maxNativeZoom: 19,
+            maxZoom: 24,
             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
         }),
         "openstreetmap": L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxNativeZoom: 19,
+            maxZoom: 24,
             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
         }),
         "esri sat": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+            maxNativeZoom: 19,
+            maxZoom: 24,
             attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
         }),
         "google sat": L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
-            maxZoom: 20,
+            maxNativeZoom: 20,
+            maxZoom: 24,
             subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
         })
     };
-    var map = L.map("mainMap", {layers: [tiles.osm], maxZoom: 22, maxNativeZoom: 19});
+    var map = L.map("mainMap", {layers: [tiles.osm]});
 
     function styleTrack(feature) {
         var styles = {};
@@ -68,23 +73,32 @@ $.getJSON("data/ff8f1e8f-6cf5-4a7b-835b-5e2226c1e771_de7df5b5-edd5-4070-840f-688
     var heat = L.heatLayer(coords);
     L.control.layers(tiles, {"heatmap": heat}).addTo(map);
 
-    var marker = null;
     var list = $("<ul />");
+    var current = {
+        "pos":data["boards"][1].coordinate.coordinates
+    };
+    console.log(current);
+    var marker = L.marker([current.pos[1], current.pos[0]]).addTo(map);
     $.each(data["boards"], function (index, entry) {
         //console.log(index, entry);
         var item = $("<li>", {class: entry.extra_data.activity_type});
         var container = $("<div>", {class: "board"});
-        var image = $("<img>", {src: entry.image.replace("static/progress/", ""), height: 200});
+        var image = $("<img>", {src: entry.image.replace("static/progress/", "")});
         image.attr("data-time", entry.timestamp);
         image.hover(function () {
-            marker = L.geoJSON(entry.coordinate).addTo(map);
+            marker.setLatLng([entry.coordinate.coordinates[1], entry.coordinate.coordinates[0]]);
         }, function () {
-            map.removeLayer(marker);
+            marker.setLatLng(current.pos.coordinates[1], current.pos.coordinates[0]);
+        });
+        image.click(function (e) {
+            current.board = image;
+            current.pos = entry.coordinate;
         });
         images[entry.timestamp] = {image: image, coordinate: entry.coordinate};
         image.appendTo(container);
         container.appendTo(item);
         item.appendTo(list);
     });
-    list.appendTo("body");
+    current.board=images[data["boards"][1].timestamp];
+    list.appendTo(".sequence");
 });

static/progress/style.css

@@ -0,0 +1,105 @@
+/*.mapDiv {
+    width: 1024px;
+    height: 768px;
+}*/
+
+
+
+.highlight {
+    /*what a nice way to highlight*/
+    display: none;
+}
+
+.simu {
+    background-color: blue;
+}
+
+.question {
+    background-color: orange;
+}
+
+.image {
+    background-color: green;
+}
+
+.audio {
+    background-color: red;
+}
+
+.video {
+    background-color: purple;
+}
+
+.other {
+    background-color: brown;
+}
+
+.map {
+    background-color: violet;
+}
+
+.error {
+    background-color: grey;
+}
+
+
+.board {
+    width: 32px;
+    height: 32px;
+    display: inline-block;
+}
+
+.board img {
+    max-width: 32px;
+    max-height: 32px;
+    position: absolute;
+    /*bottom: 0px;*/
+}
+
+.board:hover img{
+    max-width: 205px;
+    max-height: 295px;
+    z-index: 99;
+    top: 5px;
+    right:0px;
+}
+ul {
+    list-style-type: none;
+    overflow: auto;
+    overflow-y: hidden;
+    display: inline-block;
+    /*max-width:100%;
+    margin: 0 0 1em;
+    white-space: nowrap;
+    height:200px;*/
+}
+
+li {
+    display: inline-block;
+    vertical-align: top;
+    padding: 2px;
+    margin-bottom: 2px;
+}
+
+body{
+    height: 100%;
+    padding:0;
+    margin:0;
+}
+
+main{
+    display: flex;
+    flex-direction: column;
+    height:100%;
+}
+
+.mapDiv {
+    flex-grow:1;
+}
+.sequenceContainer{
+    flex-grow: 0;
+    min-height:300px;
+    padding-right: 210px;
+    position: relative;
+
+}