alex/restaurant-search
1
Fork 0
Code Releases Activity

Add display type to UI

Browse Source
This commit is contained in:
Alex Yatskov 2015-03-21 20:46:20 +09:00
parent d6bb53e870
commit cab7eb21bb
4 changed files with 97 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/index.html
View File

@ -19,7 +19,7 @@
<div class="model-header"> <div class="model-header">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
<h3 class="modal-title">User Profile Editor</h3> <h3 class="modal-title">Personal Profile Editor</h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<iframe src="/profile.html" width="100%" height="250" frameborder="0"></iframe> <iframe src="/profile.html" width="100%" height="250" frameborder="0"></iframe>
@ -57,13 +57,20 @@
<label for="maxResults">Max results</label> <label for="maxResults">Max results</label>
<input class="form-control" type="number" value="100" id="maxResults"> <input class="form-control" type="number" value="100" id="maxResults">
</div> </div>
<div class="form-group">
<label for="displayType">Display type</label>
<select id="displayType" class="form-control">
<option value="density">Density</option>
<option value="compatibility">Compatibility</option>
</select>
</div>
<div class="checkbox"> <div class="checkbox">
<label><input type="checkbox" id="useLocalScale" checked="checked">Use local scale</label> <label><input type="checkbox" id="useLocalScale" checked="checked">Use local scale</label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label><input type="checkbox" id="useRelativeScale" checked="checked">Use relative scale</label> <label><input type="checkbox" id="useRelativeScale" checked="checked">Use relative scale</label>
</div> </div>
<button type="button" data-toggle="modal" data-target="#profileDlg" class="btn btn-primary">Edit profile</button> <button type="button" data-toggle="modal" data-target="#profileDlg" class="btn btn-primary">Edit personal profile</button>
</div> </div>
</div> </div>
</div> </div>

90
client/scripts/grapher.js
View File

@ -70,21 +70,21 @@
// //
function Column(params) { function Column(params) {
var _backdropColor = '#eeeeec'; var _backdropColor = '#eeeeec';
var _borderColor = '#babdb6'; var _borderColor = '#babdb6';
var _fillColorNeg = '#3465a4'; var _fillColorNeg = '#3465a4';
var _fillColorPos = '#cc0000'; var _fillColorPos = '#cc0000';
var _panelColor = '#babdb6'; var _panelColor = '#babdb6';
var _tickColor = '#888a85'; var _tickColor = '#888a85';
var _densitySize = 10; var _densitySize = 10;
var _desatOffset = -0.3; var _desatOffset = -0.3;
var _height = 500; var _height = 500;
var _padding = 5; var _padding = 5;
var _panelSize = 20; var _panelSize = 20;
var _tickSize = 5; var _tickSize = 5;
var _width = 100; var _width = 100;
var _easeTime = 400; var _easeTime = 400;
var _animation = null; var _animation = null;
var _canvas = params.canvas; var _canvas = params.canvas;
@ -160,8 +160,12 @@
} }
function updateDensity() { function updateDensity() {
var fill = _data.hints.length === 0 ? _backdropColor : _canvas.gradient(decimateHints()); var fill = _backdropColor;
_elements.density.attr({ fill: fill }); if (_data.hints.length > 0) {
fill = _canvas.gradient(decimateHints());
}
_elements.density.attr({fill: fill});
} }
function decimateHints() { function decimateHints() {
@ -197,15 +201,15 @@
var stepMax = _range.max - stepSize * i; var stepMax = _range.max - stepSize * i;
var stepMin = stepMax - stepSize; var stepMin = stepMax - stepSize;
var hintCount = 0; var hintValue = 0;
for (var j = 0, count = _data.hints.length; j < count; ++j) { for (var j = 0, count = _data.hints.length; j < count; ++j) {
var hint = _data.hints[j]; var hint = _data.hints[j];
if (hint.sample > stepMin && hint.sample <= stepMax) { if (hint.sample > stepMin && hint.sample <= stepMax) {
hintCount += hint.count; hintValue += hint.rating;
} }
} }
hintGroups.push(hintCount); hintGroups.push(hintValue);
} }
return hintGroups; return hintGroups;
@ -307,18 +311,38 @@
var _steps = params.steps || 20; var _steps = params.steps || 20;
var _useLocalScale = params.useLocalScale || true; var _useLocalScale = params.useLocalScale || true;
var _useRelativeScale = params.useRelativeScale || true; var _useRelativeScale = params.useRelativeScale || true;
var _displayType = params.displayType || 'density';
var _onValueChanged = params.onValueChanged; var _onValueChanged = params.onValueChanged;
function computeLocalScale(hints) { function processHintParameters(columns) {
var counts = _.pluck(hints, 'count'); var displayTypes = {compatibility: 'compatibility', density: 'count'};
var min = _useRelativeScale ? _.min(counts) : 0; var statKey = displayTypes[_displayType];
return new Range(min, _.max(counts));
for (var name in columns) {
var column = columns[name];
for (var i = 0, count = column.hints.length; i < count; ++i) {
column.hints[i].rating = column.hints[i].stats[statKey];
}
}
} }
function computeGlobalScale(hintData) { function computeLocalScale(column) {
var ratings = _.map(column.hints, function(hint) {
return hint.rating;
});
var min = 0;
if (_useRelativeScale) {
min = _.min(ratings);
}
return new Range(min, _.max(ratings));
}
function computeGlobalScale(columns) {
var globalScale = null; var globalScale = null;
for (var i = 0, count = hintData.length; i < count; ++i) { for (var i = 0, count = columns.length; i < count; ++i) {
var localScale = computeLocalScale(hintData[i]); var localScale = computeLocalScale(columns[i]);
if (globalScale) { if (globalScale) {
globalScale.include(localScale); globalScale.include(localScale);
} }
@ -331,17 +355,18 @@
} }
this.setColumns = function(columns) { this.setColumns = function(columns) {
processHintParameters(columns);
var scale = 0; var scale = 0;
if (!_useLocalScale) { if (!_useLocalScale) {
var hintData = _.pluck(columns, 'hints'); scale = computeGlobalScale(columns);
scale = computeGlobalScale(hintData);
} }
var index = 0; var index = 0;
for (var name in columns) { for (var name in columns) {
var data = _data[name] = columns[name]; var data = _data[name] = columns[name];
if (_useLocalScale) { if (_useLocalScale) {
scale = computeLocalScale(data.hints); scale = computeLocalScale(data);
} }
var column = _columns[name]; var column = _columns[name];
@ -376,5 +401,12 @@
this.setColumns(_data); this.setColumns(_data);
} }
}; };
this.setDisplayType = function(displayType) {
if (displayType != _displayType) {
_displayType = displayType;
this.setColumns(_data);
}
};
}; };
}(window.grapher = window.grapher || {})); }(window.grapher = window.grapher || {}));

17
client/scripts/search.js
View File

@ -63,7 +63,7 @@
function onSearch() { function onSearch() {
_ctx.query = { _ctx.query = {
features: _ctx.query.features || {}, features: _ctx.query.features || {},
range: { min: -1.0, max: 1.0 }, range: {min: -1.0, max: 1.0},
profile: getProfile(), profile: getProfile(),
walkingDist: parseFloat($('#walkingDist').val()), walkingDist: parseFloat($('#walkingDist').val()),
minScore: parseFloat($('#minScore').val()), minScore: parseFloat($('#minScore').val()),
@ -85,18 +85,21 @@
steps: _ctx.query.hintSteps, steps: _ctx.query.hintSteps,
range: _ctx.query.range, range: _ctx.query.range,
onValueChanged: onAdjust, onValueChanged: onAdjust,
useLocalScale: true, displayType: $('#displayType').val(),
useRelativeScale: true useLocalScale: $('#useLocalScale').is(':checked'),
useRelativeScale: $('#useRelativeScale').is(':checked')
}); });
$('#useLocalScale').click(function() { $('#useLocalScale').click(function() {
var useLocalScale = $('#useLocalScale').is(':checked'); _ctx.grapher.setUseLocalScale($('#useLocalScale').is(':checked'));
_ctx.grapher.setUseLocalScale(useLocalScale);
}); });
$('#useRelativeScale').click(function() { $('#useRelativeScale').click(function() {
var useRelativeScale = $('#useRelativeScale').is(':checked'); _ctx.grapher.setUseRelativeScale($('#useRelativeScale').is(':checked'));
_ctx.grapher.setUseRelativeScale(useRelativeScale); });
$('#displayType').change(function() {
_ctx.grapher.setDisplayType($('#displayType').val());
}); });
var columns = {}; var columns = {};

35
server/search.js
View File

@ -53,13 +53,23 @@ function walkMatches(data, features, minScore, callback) {
} }
} }
function countRecords(data, features, minScore) { function statRecords(data, features, minScore) {
var count = 0; var compatibility = 0;
var count = 0;
walkMatches(data, features, minScore, function(record, score) { walkMatches(data, features, minScore, function(record, score) {
compatibility += record.compatibility;
++count; ++count;
}); });
return count; if (count > 0) {
compatibility /= count;
}
return {
compatibility: compatibility,
count: count
};
} }
function findRecords(data, features, minScore) { function findRecords(data, features, minScore) {
@ -104,7 +114,7 @@ function project(data, features, feature, minScore, range, steps) {
sample[feature] = position; sample[feature] = position;
results.push({ results.push({
sample: position, sample: position,
count: countRecords(data, sample, minScore) stats: statRecords(data, sample, minScore)
}); });
}); });
@ -125,7 +135,7 @@ function buildHints(data, features, feature, minScore, range, steps) {
_.each(projection, function(result) { _.each(projection, function(result) {
hints.push({ hints.push({
sample: result.sample, sample: result.sample,
count: result.count stats: result.stats
}); });
}); });
@ -193,8 +203,6 @@ function computeRecordGeo(records, context) {
} }
function computeRecordPopularity(records, context, callback) { function computeRecordPopularity(records, context, callback) {
var scoreMax = 0;
async.each( async.each(
records, records,
function(record, callback) { function(record, callback) {
@ -215,8 +223,6 @@ function computeRecordPopularity(records, context, callback) {
}); });
var groupScore = innerProduct(context.profile, reviewFeatures); var groupScore = innerProduct(context.profile, reviewFeatures);
scoreMax = Math.max(scoreMax, groupScore);
callback(err, groupScore); callback(err, groupScore);
} }
); );
@ -228,13 +234,7 @@ function computeRecordPopularity(records, context, callback) {
scoreAvg = scoreSum / groupScores.length; scoreAvg = scoreSum / groupScores.length;
} }
if (scoreMax !== 0) { record.compatibility = scoreAvg;
record.features.compatibility = scoreAvg / scoreMax;
}
else {
record.features.compatibility = 0;
}
callback(err); callback(err);
} }
); );
@ -269,8 +269,7 @@ function fixupFeatures(features) {
'affordable', 'affordable',
'atmospheric', 'atmospheric',
'nearby', 'nearby',
'accessible', 'accessible'
'compatible'
]; ];
if (!features) { if (!features) {