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-datalayer-container,
.umap-layer-properties-container, .umap-layer-properties-container,
.umap-browse-data, .umap-browse-data,
.umap-filter-data, .umap-facet-search,
.umap-browse-datalayers { .umap-browse-datalayers {
padding: 0 10px; padding: 0 10px;
} }

View file

@ -753,11 +753,7 @@ L.U.Map.include({
const build = () => { const build = () => {
ul.innerHTML = '' ul.innerHTML = ''
datalayer.eachFeature((feature) => { datalayer.eachFeature((feature) => {
if ( if (filterValue && !feature.matchFilter(filterValue, filterKeys)) return
(filterValue && !feature.matchFilter(filterValue, filterKeys)) ||
feature.properties.isVisible === false
)
return
ul.appendChild(addFeature(feature)) ul.appendChild(addFeature(feature))
}) })
} }
@ -795,23 +791,16 @@ L.U.Map.include({
}) })
}, },
_openFilter: function () { _openFacet: function () {
const container = L.DomUtil.create('div', 'umap-filter-data'), const container = L.DomUtil.create('div', 'umap-facet-search'),
title = L.DomUtil.add('h3', 'umap-filter-title', container, this.options.name), title = L.DomUtil.add('h3', 'umap-filter-title', container, L._('Facet search')),
propertiesContainer = L.DomUtil.create( keys = this.getFacetKeys()
'div',
'umap-filter-properties',
container
),
keys = this.getAdvancedFilterKeys()
const knownValues = {} const knownValues = {}
if (!this.options.advancedFilters) this.options.advancedFilters = {}
keys.forEach((key) => { keys.forEach((key) => {
knownValues[key] = [] knownValues[key] = []
if (!this.options.advancedFilters[key]) if (!this.facets[key]) this.facets[key] = []
this.options.advancedFilters[key] = []
}) })
this.eachBrowsableDataLayer((datalayer) => { this.eachBrowsableDataLayer((datalayer) => {
@ -833,13 +822,13 @@ L.U.Map.include({
}) })
// TODO: display a results counter in the panel instead. // TODO: display a results counter in the panel instead.
if (!found) 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) => [ const fields = keys.map((current) => [
`options.advancedFilters.${current}`, `facets.${current}`,
{ {
handler: 'AdvancedFilter', handler: 'FacetSearch',
choices: knownValues[current], choices: knownValues[current],
}, },
]) ])
@ -941,11 +930,11 @@ L.U.Map.include({
labelBrowser.textContent = labelBrowser.title = L._('Browse data') labelBrowser.textContent = labelBrowser.title = L._('Browse data')
L.DomEvent.on(browser, 'click', this.openBrowser, this) L.DomEvent.on(browser, 'click', this.openBrowser, this)
const actions = [browser] const actions = [browser]
if (this.options.advancedFilterKey) { if (this.options.facetKey) {
const filter = L.DomUtil.create('li', '') const filter = L.DomUtil.create('li', '')
L.DomUtil.create('i', 'umap-icon-16 umap-add', filter) L.DomUtil.create('i', 'umap-icon-16 umap-add', filter)
const labelFilter = L.DomUtil.create('span', '', 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) L.DomEvent.on(filter, 'click', this.openFilter, this)
actions.push(filter) 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.'), 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'), filterKey: L._('Comma separated list of properties to use when filtering features'),
advancedFilterKey: L._( facetKey: L._(
'Comma separated list of properties to use for checkbox filtering' '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.'), 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.'), outlink: L._('Define link to open in a new window on polygon click.'),

View file

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

View file

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

View file

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

View file

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

View file

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