Rename advancedFilters to facet search

This commit is contained in:
Yohan Boniface 2023-08-02 08:47:06 +02:00
parent 9abbfbc01e
commit 81a7bdcd6a
9 changed files with 42 additions and 52 deletions

View file

@ -481,7 +481,7 @@ i.info {
.umap-datalayer-container,
.umap-layer-properties-container,
.umap-browse-data,
.umap-filter-data,
.umap-facet-search,
.umap-browse-datalayers {
padding: 0 10px;
}

View file

@ -753,11 +753,7 @@ L.U.Map.include({
const build = () => {
ul.innerHTML = ''
datalayer.eachFeature((feature) => {
if (
(filterValue && !feature.matchFilter(filterValue, filterKeys)) ||
feature.properties.isVisible === false
)
return
if (filterValue && !feature.matchFilter(filterValue, filterKeys)) return
ul.appendChild(addFeature(feature))
})
}
@ -795,23 +791,16 @@ L.U.Map.include({
})
},
_openFilter: function () {
const container = L.DomUtil.create('div', 'umap-filter-data'),
title = L.DomUtil.add('h3', 'umap-filter-title', container, this.options.name),
propertiesContainer = L.DomUtil.create(
'div',
'umap-filter-properties',
container
),
keys = this.getAdvancedFilterKeys()
_openFacet: function () {
const container = L.DomUtil.create('div', 'umap-facet-search'),
title = L.DomUtil.add('h3', 'umap-filter-title', container, L._('Facet search')),
keys = this.getFacetKeys()
const knownValues = {}
if (!this.options.advancedFilters) this.options.advancedFilters = {}
keys.forEach((key) => {
knownValues[key] = []
if (!this.options.advancedFilters[key])
this.options.advancedFilters[key] = []
if (!this.facets[key]) this.facets[key] = []
})
this.eachBrowsableDataLayer((datalayer) => {
@ -833,13 +822,13 @@ L.U.Map.include({
})
// TODO: display a results counter in the panel instead.
if (!found)
this.ui.alert({ content: L._('No results for these filters'), level: 'info' })
this.ui.alert({ content: L._('No results for these facets'), level: 'info' })
}
const fields = keys.map((current) => [
`options.advancedFilters.${current}`,
`facets.${current}`,
{
handler: 'AdvancedFilter',
handler: 'FacetSearch',
choices: knownValues[current],
},
])
@ -941,11 +930,11 @@ L.U.Map.include({
labelBrowser.textContent = labelBrowser.title = L._('Browse data')
L.DomEvent.on(browser, 'click', this.openBrowser, this)
const actions = [browser]
if (this.options.advancedFilterKey) {
if (this.options.facetKey) {
const filter = L.DomUtil.create('li', '')
L.DomUtil.create('i', 'umap-icon-16 umap-add', filter)
const labelFilter = L.DomUtil.create('span', '', filter)
labelFilter.textContent = labelFilter.title = L._('Select data')
labelFilter.textContent = labelFilter.title = L._('Facet search')
L.DomEvent.on(filter, 'click', this.openFilter, this)
actions.push(filter)
}

View file

@ -568,8 +568,8 @@ L.U.Help = L.Class.extend({
),
slugKey: L._('The name of the property to use as feature unique identifier.'),
filterKey: L._('Comma separated list of properties to use when filtering features'),
advancedFilterKey: L._(
'Comma separated list of properties to use for checkbox filtering'
facetKey: L._(
'Comma separated list of properties to use for facet search'
),
interactive: L._('If false, the polygon will act as a part of the underlying map.'),
outlink: L._('Define link to open in a new window on polygon click.'),

View file

@ -474,9 +474,9 @@ L.U.FeatureMixin = {
return false
},
matchAdvancedFilters: function () {
const filters = this.map.options.advancedFilters
for (const [property, expected] of Object.entries(filters)) {
matchFacets: function () {
const facets = this.map.facets
for (const [property, expected] of Object.entries(facets)) {
if (expected.length) {
let value = this.properties[property]
if (!value || !expected.includes(value)) return false

View file

@ -431,7 +431,7 @@ L.FormBuilder.OnLoadPanel = L.FormBuilder.Select.extend({
['none', L._('None')],
['caption', L._('Caption')],
['databrowser', L._('Data browser')],
['datafilters', L._('Data filters')],
['facet', L._('Facet search')],
],
})
@ -684,7 +684,7 @@ L.FormBuilder.Switch = L.FormBuilder.CheckBox.extend({
},
})
L.FormBuilder.AdvancedFilter = L.FormBuilder.Element.extend({
L.FormBuilder.FacetSearch = L.FormBuilder.Element.extend({
build: function () {
this.container = L.DomUtil.create('div', 'property-container', this.parentNode)
this.headline = L.DomUtil.add('h5', '', this.container, this.name)

View file

@ -151,12 +151,14 @@ L.U.Map.include({
this.options.slideshow.active === undefined
)
this.options.slideshow.active = true
if (this.options.advancedFilterKey) this.options.facetKey = this.options.advancedFilterKey
// Global storage for retrieving datalayers and features
this.datalayers = {}
this.datalayers_index = []
this.dirty_datalayers = []
this.features_index = {}
this.facets = {}
if (this.options.hash) this.addHash()
this.initControls()
@ -250,7 +252,7 @@ L.U.Map.include({
if (L.Util.queryString('share')) this.renderShareBox()
else if (this.options.onLoadPanel === 'databrowser') this.openBrowser()
else if (this.options.onLoadPanel === 'caption') this.displayCaption()
else if (this.options.onLoadPanel === 'datafilters') this.openFilter()
else if (this.options.onLoadPanel === 'facet' || this.options.onLoadPanel === 'datafilters') this.openFacet()
})
this.onceDataLoaded(function () {
const slug = L.Util.queryString('feature')
@ -953,9 +955,9 @@ L.U.Map.include({
})
},
openFilter: function () {
openFacet: function () {
this.onceDatalayersLoaded(function () {
this._openFilter()
this._openFacet()
})
},
@ -1067,7 +1069,7 @@ L.U.Map.include({
'sortKey',
'labelKey',
'filterKey',
'advancedFilterKey',
'facetKey',
'slugKey',
'showLabel',
'labelDirection',
@ -1394,13 +1396,12 @@ L.U.Map.include({
},
],
[
'options.advancedFilterKey',
'options.facetKey',
{
handler: 'Input',
helpEntries: 'advancedFilterKey',
helpEntries: 'facetKey',
placeholder: L._('Example: key1,key2,key3'),
label: L._('Advanced filter keys'),
inheritable: true,
label: L._('Facet keys')
},
],
[
@ -1785,7 +1786,7 @@ L.U.Map.include({
this.openBrowser,
this
)
if (this.options.advancedFilterKey) {
if (this.options.facetKey) {
const filter = L.DomUtil.add(
'a',
'umap-open-filter-link',
@ -1796,7 +1797,7 @@ L.U.Map.include({
L.DomEvent.on(filter, 'click', L.DomEvent.stop).on(
filter,
'click',
this.openFilter,
this.openFacet,
this
)
}
@ -2014,10 +2015,10 @@ L.U.Map.include({
text: L._('Browse data'),
callback: this.openBrowser,
})
if (this.options.advancedFilterKey) {
if (this.options.facetKey) {
items.push({
text: L._('Select data'),
callback: this.openFilter,
text: L._('Facet search'),
callback: this.openFacet,
})
}
items.push(
@ -2102,8 +2103,8 @@ L.U.Map.include({
return (this.options.filterKey || this.options.sortKey || 'name').split(',')
},
getAdvancedFilterKeys: function () {
return (this.options.advancedFilterKey || '').split(',')
getFacetKeys: function () {
return (this.options.facetKey || '').split(',')
},
getLayersBounds: function () {

View file

@ -301,7 +301,7 @@ L.U.DataLayer = L.Evented.extend({
filter = this.map.options.filter
this.eachLayer(function (layer) {
if (filter && !layer.matchFilter(filter, filterKeys)) return
if (!layer.matchAdvancedFilters()) return
if (!layer.matchFacets()) return
this.layer.addLayer(layer)
})
if (visible) this.map.addLayer(this.layer)

View file

@ -805,7 +805,7 @@ a.add-datalayer:hover,
margin-bottom: 14px;
border-radius: 2px;
}
.umap-browse-features h5, .umap-filter-data h5 {
.umap-browse-features h5, .umap-facet-search h5 {
margin-bottom: 0;
overflow: hidden;
padding-left: 5px;
@ -822,7 +822,7 @@ a.add-datalayer:hover,
.umap-browse-features li {
padding: 2px 0;
}
.umap-browse-features li, .umap-filter-data li {
.umap-browse-features li, .umap-facet-search li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -855,7 +855,7 @@ a.add-datalayer:hover,
.umap-browse-features .polygon .feature-color {
background-position: -32px -16px;
}
.umap-filter-data .property-container:not(:first-child) {
.umap-facet-search .property-container:not(:first-child) {
margin-top: 14px;
}
.show-on-edit {

View file

@ -409,7 +409,7 @@ describe('L.U.DataLayer', function () {
/\/datalayer\/63\/\?.*/,
JSON.stringify(RESPONSES.datalayer63_GET)
)
this.map.options.advancedFilterKey = 'name'
this.map.options.facetKey = 'name'
this.map.createDataLayer(RESPONSES.datalayer63_GET._umap_options)
this.server.respond()
})
@ -417,8 +417,8 @@ describe('L.U.DataLayer', function () {
assert.ok(qs('path[fill="SteelBlue"]'))
})
it('should allow advanced filter', function () {
this.map.openFilter()
assert.ok(qs('div.umap-filter-properties'))
this.map.openFacet()
assert.ok(qs('div.umap-facet-search'))
// This one if from the normal datalayer
// it's name is "test", so it should be hidden
// by the filter