mention #34 and input granularity issues and fix grid drawing bug

- the zoom range does not get updated depending on the input. This causes issues with datasets that require a wider range. Increased the range for now. Filed as #34.

- Datasets that have an event granularity (minTimeDiff) that is too small become flat/invisible lines (aspect ratio). Mentioned this behaviour, which can be avoided by binning timestamps, in `spec.md`. If this level of granularity is needed a way to manually set minTimeDiff could possibly be created but might break all assumptions about co-occurring events in the code base.

- the grid drawing routine previously used the svgport for determining the sizes of the lines which is wrong (lines would normally extend beyond the viewport due to this so it wasn't noticeable)

index.html

@@ -181,7 +181,7 @@
     var visRect = jkjs.zui.computeVisibleRect(translate, scale, w, h);
     overview.updateCameraRect(canvasRect, visRect, isSmooth);
     pool.onViewportChange(box, visRect, scale, isSmooth);
-  }, [ 1e-2, 3 ]);
+  }, [ 1e-6, 12 ]); // be generous with zooming! FIXME: adapt zoom extent depending on minTimeDiff #34
 
   function updateViewport() {
     zui.move(0, 0, false);

js/typepool.js

@@ -707,7 +707,13 @@ function TypePool(busy, overview, setBox, onVC, cw, rh) {
   var hGrids = [];
   var newHGrids = [];
   var gridSize = 100;
-  function updateGrid(svgport, viewport, scale, smooth) {
+  function updateGrid(_ /*svgport*/, viewport, scale, smooth) {
+    var vrect = {
+      x: 0,
+      y: 0,
+      width: viewport.width * scale,
+      height: viewport.height * scale
+    };
     if(smooth || inTransition) {
       vGrids.forEach(function(s) {
         s.remove();
@@ -746,8 +752,8 @@ function TypePool(busy, overview, setBox, onVC, cw, rh) {
       s.attr({
         "x1": x,
         "x2": x,
-        "y1": svgport.y - gridSize - (viewport.y * scale - gridSize) % gridSize,
-        "y2": svgport.height + gridSize
+        "y1": vrect.y - gridSize - (viewport.y * scale - gridSize) % gridSize,
+        "y2": vrect.y + vrect.height + gridSize
       });
     });
     newVGrids = [];
@@ -760,8 +766,8 @@ function TypePool(busy, overview, setBox, onVC, cw, rh) {
     while(dist > gridSize * 1.5) {
       dist /= 2;
     }
-    var yStart = svgport.y - dist - (viewport.y * scale - dist) % dist;
-    for(var yPos = yStart;yPos < svgport.y + svgport.height;yPos += dist) {
+    var yStart = vrect.y - dist - (viewport.y * scale - dist) % dist;
+    for(var yPos = yStart;yPos <= vrect.y + vrect.height;yPos += dist) {
       newHGrids.push(yPos);
     }
     adjust(hGrids, newHGrids, "line", {
@@ -773,8 +779,8 @@ function TypePool(busy, overview, setBox, onVC, cw, rh) {
     hGrids.forEach(function(s, ix) {
       var y = newHGrids[ix];
       s.attr({
-        "x1": svgport.x - gridSize - (viewport.x * scale - gridSize) % gridSize,
-        "x2": svgport.width + gridSize,
+        "x1": vrect.x - gridSize - (viewport.x * scale - gridSize) % gridSize,
+        "x2": vrect.width + gridSize,
         "y1": y,
         "y2": y
       });

spec.md

@@ -12,6 +12,10 @@ apply and they must be globally unique).
 Colors are all valid CSS colors (named, hexadecimal, rgb, …)
 A set of good colors is `["#80b1d3", "#4daf4a", "#fb8072", "#ff7f00", "#eb9adb"]`.
 Timestamps are UNIX timestamps in seconds since standard epoch.
+Keep in mind that the unit for positions is determined by the smallest difference
+between events. It might be better to bin timestamps into coarser steps when
+the input times are too granular (the visualization might become flat or invisible).
+Binning also helps to make co-occurring events behave more intuitive.
 
 ## Patient file creation format