This is the main page to observe the data of a dataset. This page has two components: a data table and a map. The map will be displayed only for geographical datasets (it makes sense).
The Data tab allows users to explore the records associated with a given dataset. The tab includes two main components:
1. a data table;
2. a map, displayed only for geographical datasets (it makes sense, doesn't it?).
## Fullscreen and Toggle Map/data
The user can toggle the visibility of each of the two components by clicking on the dedicated buttons. The entire tab can also go fullscreen.
## Data table
Each entry of a given dataset is rendered as a line in a table. Data value having simple types (string, integer, float, ...) are fully displayed. Complex data values, such as JSON objects, are replaced by a placeholder signaling the presence of a complex property. Records are retrieved from the search engine in a paginated way (30 items per page), in order not to overload the browser.
To increase the flexibility and the comfort of the user to display the data, it's possible to put in fullscreen the components.
Furtheremore there is the ability to hide and show each component as we wish, depending if we want more to focus on the data values itself or to have a geographical representation.
**QUESTION: how is scrolling achieved? Do we use the dedicated Elasticsearch feature?**
## The data table
### Search within the data entries
Each data entry of the dataset is rendered as a line, where columns are the properties names. All the values are displayed, with an exception with what we call *complex properties*. It's arrays or objects that might be difficult to display properly in a table (such as opening and closing hours). In this case, these values will be rendered correctly in the right window if we click on the data entry.
All the data are not retrieved in first place. We get them 30 entries by 30 entries after scrolling, to create a more smooth experience for the user.
A dedicated text input allows the user to perform a full-text search within the entire dataset. The number of matching records is shown and visually illustrated in the guise of a progress bar.
### Research in the data
**QUESTION: how are search terms handled? Do we use a + concatenating the various terms?**
The research input allows the user to make a full-text research on all the data for all the properties. At any time it is possible to have the number of data matching with the current research.
### Column visibility
### Properties display toggle
The visibility of each column can be toggled by clicking on a dedicated button and (de)selecting the various checkboxes.
In case of datasets with a lot of properties, the user might want to display only few properties to compare or sort it's values. Thus it is possible to select or unselect the active properties in the data table.
### Interactions with the data table
### Data table interactions
* Each column can be sorted either alphabetically or numerically, according to the data type detected by the search engine.
*Each column is enabled for sorting alphabetically.
*Upon clicking on a given entry on the table, the entry gets fully displayed (including complex properties) on a dedicated viewer. If the map component is visible, then the map gets centered on the clicked entry.
*If the map component is displayed (geographical datasets), after a click in an entry in the data table, the map will be centered to the clicked element and a window on the right is opened with all the detailed data (including complex properties)
*Already visited entries are highlighted, on the table, with a different background color.
* All the entries that have been clicked (both from the data table but also from the map) are highligthed with a different background color
## The map
## Map
### Mapbox GL JS
### Implementation
On the client side, the library [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) is used. This is a very interesting tool improving quickly.
Just for information the creator of Leaflet, Vladimir Agafonkin, is now working for Mapbox.
The map is rendered thanks to the [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) library.
### How is the map data fetched and displayed
### How data is fetched and displayed
The main difficulty to display correctly the data was the heterogeneity of the datasets, both in size and in types. For example we can have a dataset with millions of polygons to display, or a very small one but with personnalized icons instead of a geometric figure.
To manage this very broad range of display we came with the following strategy.
...
...
@@ -76,7 +79,7 @@ It is possible to search an address in the map. We use an internal geocoder API
It's also possible to center the map to the user position. It uses the native [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/geolocation).
### *Copy the map* feature
### *Share* feature
This allow with a button click to copy the link of the map with the current context.
This context contains: the zoom, position, bearing, pitch and base layer.
