Skip to content

Commit

Permalink
fix(visualize): Interface enhancements for sqlite tiles
Browse files Browse the repository at this point in the history 
This is the commit that add support for serving images from sqlite databases from the server. Really, very little had to change (mainly just the URL generator), however while I was here I made a few improvements:

- I deleted the distributionVisualisationMultiScale control since it was just and out of date and unmaintained copy of distributionVisualisation
- I updated distributionVisualisation to render tiles and images the same way the main control does (so there are no longer visual mismatches). 💯 so much better now
- I removed unused click handlers from distributionDetail
- I fixed how distributionVisualisation determined it's width and as such the detail and visualisation controls now center on the same date!
- I made distribution visualisation pannable! That way there's less cognitive dissonance when using the two controls!!!
- Changed the way zoom scale is reported to user... it's now reported as a factor of 60.0s/px
- I fixed a bug in how the tile generator calculates dates: it now correctly uses UTC midnight as the calculation point rather than midnight of the local time zone.
- I updated the available tile resolutions to match what AP.exe now generates
- I updated our standard tile width to 180px
- Important: distributionVisualisation now no longer uses the standard image tiles but actually only uses zooming spectrogram tiles
  • Loading branch information
@atruskie
atruskie committed Feb 20, 2018
1 parent 355609a commit 7fbf0a1
Show file tree
Hide file tree
Showing 14 changed files with 368 additions and 601 deletions.
21 changes: 16 additions & 5 deletions src/app/d3Bindings/eventDistribution/_eventDistribution.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ $smaller-font-size: $font-size-small - 2px;
$out-of-bounds-color: #DDD;
$dataset-in-bounds-bg-color: #ffffff;

$tile-border-color: #777;
$tile-border-color: #888888;

$tile-background-color: #e5ffd8;
$generating-tile-color: $text-color;
Expand Down Expand Up @@ -164,7 +164,7 @@ event-distribution-detail {



event-distribution-visualisation, event-distribution-visualisation-multi-scale {
event-distribution-visualisation {
text-align: center;

.metaTrack {
Expand All @@ -187,12 +187,23 @@ event-distribution-visualisation, event-distribution-visualisation-multi-scale {
fill: $dataset-in-bounds-bg-color;
}

.tiles {
.tiles, .focus-anchor {
cursor: pointer;
}

.tiles {


.tile rect {
stroke: $tile-border-color;
stroke-width: 1px;
//stroke: rgba(0, 0, 0, 0.5);
//stroke-width: 1px;
//border-left: rgba(255, 0, 0, 0.5) solid 1px;
//border-right: rgba(0, 255, 0, 0.5) solid 1px;

fill: rgba(255, 255, 255, 0);

//stroke: $tile-border-color;
//stroke-width: 1px;

//border-left: deeppink solid 1px;
//border-right: blue solid 1px;
Expand Down
34 changes: 33 additions & 1 deletion src/app/d3Bindings/eventDistribution/distributionCommon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,39 @@ angular

return availableWidth;
},
imageCheck(mainResolution, imageVisibilityThreshold, tile ) {
/**
* Filter out audio recordings.
* Additionally cluster audio recordings together into contiguous blocks
* to reduce the number of elements on the screen.
* @returns {Array.<T>}
*/
filterAndClusterAudioRecordings(itemsTree, visibleExtent) {
// get the duration (in real time) equivalent to 1px
//let visibleTime = xScale.invert(1);

let filtered = itemsTree.search([
visibleExtent[0],
-Infinity,
visibleExtent[1],
+Infinity
]);


// TODO: actually implement clustering
// pre: split items into lane groups
// pre: sort data in each group by start time
// loop over each group
// start a new group
// loop over all items
// if next item's start - this item's end < visibleTime
// add to group
// else
// start a new group


return filtered;
},
imageCheck(mainResolution, imageVisibilityThreshold, tile ) {
let resolutionRatio = tile.resolution / mainResolution;
if (resolutionRatio < imageVisibilityThreshold) {
return null;
Expand Down
93 changes: 5 additions & 88 deletions src/app/d3Bindings/eventDistribution/distributionDetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -444,8 +444,6 @@ angular
tilesGroup.clipPath("url(#" + tilesGroupClipId + ")");

tilesGroup.on("mousedown", onMouseDown);
tilesGroup.on("click", onClickNavigate);
tilesGroup.on("dblclick", onDblClick);

mainMeasure = new MeasureWidget(
main.append("g"),
Expand Down Expand Up @@ -690,47 +688,14 @@ angular
labelBackgrounds.attr("y", labelY);
}
}

/**
* Filter out audio recordings.
* Additionally cluster audio recordings together into contiguous blocks
* to reduce the number of elements on the screen.
* @returns {Array.<T>}
*/
function filterAndClusterAudioRecordings() {
// get the duration (in real time) equivalent to 1px
//let visibleTime = xScale.invert(1);

let filtered = itemsTree.search([
self.visibleExtent[0],
-Infinity,
self.visibleExtent[1],
+Infinity
]);


// TODO: actually implement clustering
// pre: split items into lane groups
// pre: sort data in each group by start time
// loop over each group
// start a new group
// loop over all items
// if next item's start - this item's end < visibleTime
// add to group
// else
// start a new group


return filtered;
}

/**
* Called when the extent is updated to repaint rects
*/
function renderRects() {

// filter out data that is not in range
var visibleItems = filterAndClusterAudioRecordings();
var visibleItems = common
.filterAndClusterAudioRecordings(itemsTree, self.visibleExtent);

// paint the visible rects
// update the visible rects
Expand Down Expand Up @@ -950,6 +915,9 @@ angular
categoryChanged,
zoomChanged: false
});

// updates the controller - bind back
dataFunctions.extentUpdate(self.visibleExtent, "DistributionDetail");
}
else {
//renderFocusGroup();
Expand Down Expand Up @@ -1275,57 +1243,6 @@ angular
renderFocusGroup();
}

function onClickNavigate() {
/*let now = $window.performance.now(),
deltaTime = now - _isZooming,
newPosition = d3.mouse(main.node()),
deltaPosition = distance(newPosition, _hasMouseMoved);
console.debug("distributionDetail::onClickNavigate: deltaTime, deltaPosition:", deltaTime, deltaPosition);
// if the mouse hasn't moved
if (deltaPosition < clickOrDragThresholdPixels) {
console.debug("distributionDetail::onClickNavigate: **click** NOT drag", $window.performance.now());
// and if we're not already tracking another click in a series for a double click
if (!_navigateTimeoutPromise) {
console.warn("distributionDetail::onClickNavigate::beforeTimeout:", $window.performance.now());
// delay navigate for a set amount of time...
// give the double click event handler time to cancel the navigate
_navigateTimeoutPromise = $timeout(
//() => console.debug("distributionDetail::onClickNavigate::timeoutComplete:",
// $window.performance.now()),
() => {
// only navigate if the timeout was successful
//console.warn("distributionDetail::onClickNavigate::timeoutResolved: Navigating now!", $window.performance.now());
//common.navigateTo(tilingFunctions, visibleTiles, xScale, tilesGroup);
},
clickOrDblTimeoutMilliseconds);
// make sure we keep original reference to $timeout promise (i.e. don't chain the then)
_navigateTimeoutPromise.finally(() => {
// this may not matter if we're navigating away,
// but cleaning up state is responsible
_navigateTimeoutPromise = null;
});
}
}
_isZooming = null;
_hasMouseMoved = null;*/
}

/**
* This handler exists solely to cancel navigation on a single click
* if it in fact turns out to be a double click.
*/
function onDblClick() {
console.debug("distributionDetail::onDblClick: Cancelling navigate");

// cancel the navigate from a single click
//$timeout.cancel(_navigateTimeoutPromise);
}

function updateFocusDate(fromMiddle) {
if (fromMiddle) {
self.focus = common.middle(self.visibleExtent);
Expand Down
Loading

0 comments on commit 7fbf0a1

Please sign in to comment.