Memorizeable filter values (#281)

main
Boris Sekachev 7 years ago committed by Nikita Manovich
parent 1f0e15845a
commit 95aa518593

@ -9,7 +9,7 @@
class FilterModel {
constructor(update) {
this._filter = '';
this._filter = "";
this._update = update;
this._labels = window.cvat.labelsInfo.labels();
this._attributes = window.cvat.labelsInfo.attributes();
@ -19,8 +19,8 @@ class FilterModel {
return {
id: shape.model.id,
label: shape.model.label,
type: shape.model.type.split('_')[1],
mode: shape.model.type.split('_')[0],
type: shape.model.type.split("_")[1],
mode: shape.model.type.split("_")[0],
occluded: shape.interpolation.position.occluded ? true : false,
attr: convertAttributes(shape.interpolation.attributes),
lock: shape.model.lock
@ -30,7 +30,7 @@ class FilterModel {
function convertAttributes(attributes) {
let converted = {};
for (let attrId in attributes) {
converted[attributes[attrId].name.toLowerCase().replace(/-/g, "_")] = ('' + attributes[attrId].value).toLowerCase();
converted[attributes[attrId].name.toLowerCase().replace(/-/g, "_")] = ("" + attributes[attrId].value).toLowerCase();
}
return converted;
}
@ -79,9 +79,9 @@ class FilterController {
updateFilter(value, silent) {
if (value.length) {
value = value.split('|').map(x => '/d:data/' + x).join('|').toLowerCase().replace(/-/g, "_");
value = value.split("|").map(x => "/d:data/" + x).join("|").toLowerCase().replace(/-/g, "_");
try {
document.evaluate(value, document, () => 'ns');
document.evaluate(value, document, () => "ns");
}
catch (error) {
return false;
@ -90,7 +90,7 @@ class FilterController {
return true;
}
else {
this._model.updateFilter('', silent);
this._model.updateFilter("", silent);
return true;
}
}
@ -104,41 +104,62 @@ class FilterController {
class FilterView {
constructor(filterController) {
this._controller = filterController;
this._filterString = $('#filterInputString');
this._resetFilterButton = $('#resetFilterButton');
this._filterString = $("#filterInputString");
this._resetFilterButton = $("#resetFilterButton");
this._filterString.on("keypress keydown keyup", (e) => e.stopPropagation());
this._filterSubmitList = $("#filterSubmitList");
let predefinedValues = null;
try {
predefinedValues = JSON.parse(localStorage.getItem("filterValues")) || [];
}
catch {
predefinedValues = [];
}
let initSubmitList = () => {
this._filterSubmitList.empty();
for (let value of predefinedValues) {
this._filterSubmitList.append(`<option value=${value}> ${value} </option>`);
}
}
initSubmitList();
this._filterString.attr('placeholder', 'car[attr/model="mazda"]');
this._filterString.on('keypress keydown keyup', (e) => e.stopPropagation());
this._filterString.on('change', (e) => {
this._filterString.on("change", (e) => {
let value = $.trim(e.target.value);
if (this._controller.updateFilter(value, false)) {
this._filterString.css('color', 'green');
this._filterString.css("color", "green");
if (!predefinedValues.includes(value)) {
predefinedValues = (predefinedValues.concat([value])).slice(-10);
localStorage.setItem("filterValues", JSON.stringify(predefinedValues));
initSubmitList();
}
}
else {
this._filterString.css('color', 'red');
this._controller.updateFilter('', false);
this._filterString.css("color", "red");
this._controller.updateFilter("", false);
}
});
let shortkeys = window.cvat.config.shortkeys;
this._filterString.attr('title', `
${shortkeys['prev_filter_frame'].view_value} - ${shortkeys['prev_filter_frame'].description}` + `\n` +
`${shortkeys['next_filter_frame'].view_value} - ${shortkeys['next_filter_frame'].description}`);
this._filterString.attr("title", `
${shortkeys["prev_filter_frame"].view_value} - ${shortkeys["prev_filter_frame"].description}` + `\n` +
`${shortkeys["next_filter_frame"].view_value} - ${shortkeys["next_filter_frame"].description}`);
this._resetFilterButton.on('click', () => {
this._filterString.prop('value', '');
this._controller.updateFilter('', false);
this._resetFilterButton.on("click", () => {
this._filterString.prop("value", "");
this._controller.updateFilter("", false);
});
let initialFilter = window.cvat.search.get('filter');
let initialFilter = window.cvat.search.get("filter");
if (initialFilter) {
this._filterString.prop('value', initialFilter);
this._filterString.prop("value", initialFilter);
if (this._controller.updateFilter(initialFilter, true)) {
this._filterString.css('color', 'green');
this._filterString.css("color", "green");
}
else {
this._filterString.prop('value', '');
this._filterString.css('color', 'red');
this._filterString.prop("value", "");
this._filterString.css("color", "red");
}
}
}

@ -134,7 +134,8 @@
<div style="margin-top: 20px">
<button id="menuButton" class="regular h1"> Open Menu </button>
<label class="regular h1" style="margin-left: 50px"> Filter: </label>
<input type="text" id="filterInputString" class="regular h2"/>
<datalist id="filterSubmitList" style="display: none;"> </datalist>
<input type="text" list="filterSubmitList" id="filterInputString" class="regular h2" placeholder='car[attr/model=/"mazda"'/>
<button id="resetFilterButton" class="regular h1"> Reset </button>
<button class="regular h1" id="undoButton" disabled> &#x27F2; </button>
<select size="2" class="regular" style="overflow: hidden; width: 15%; top: 0.5em; position: relative;" disabled>

Loading…
Cancel
Save