Organize a folders and files structure inside a project is never an easy task, and it exists many ways to do so.
We think that at the beginning we should just not overthink about it, choose one way to do it, keep to it, until a natural re-organization will happen if needed.
Here is our `/src` folder structure:
*`src/app`: where the Angular code is located. With time we organized this part in different modules taking care on one main functionnality each. Inside one module each component has its own folder with one `.ts`, one `.scss` and one `html` file.
*`/src/assets`: contains all the images, favicon, svg, fonts, Mapbox style files.
*`src/environments`:
## CSS integration with Bulma
For building the style on the portal,[Bulma](https://bulma.io/), a free and open source CSS framework based on Flexbox, has been used.
All the styling work has been done with[Bulma](https://bulma.io/), a free and open source CSS framework based on Flexbox, has been used.
It is highlighy customizable and easy to integrate in a project.
To do so, a `variables.scss` file that contains our project variables, also overrides the Bulma variables (color, padding, anything you want). Then Bulma is imported and added to our main `style.scss`. That's it, our style incorporate a personalized Bulma .
To do so, a `variables.scss` file that contains our project variables, overrides the Bulma variables (color, padding, anything you want). Then Bulma is imported and added to our main `style.scss`. That's it, our style incorporate a personalized Bulma .
## Research features
This core feature is based on [Elasticsearch](https://www.elastic.co/fr/)(ES). Almost all the information in the portal (including datasets, articles, geographical data) is indexed in ES. This allows lot's of possibilities with the powerful features of this tool.
Here are the features existing on the portal:
**research*: thanks to ES great indexation, to go through millions of documents is super fast (millions because we are not only look inside the metadata, but also inside the data)
**research*: thanks to ES great indexation, to go through millions of documents is super fast (millions because we are not only looking inside the metadata, but also inside the data)
**autocompletion*: using the score based on some criteria, we provides an autocompletion feature that helps to give a context for some research keywords.
**suggestion*: if a result didn't give good result (for example because of a typo), a word with more results will be suggested.
**suggestion*: if a research didn't give good or no results (for example because of a typo), a word with more results will be suggested.
Of course there is a plenty of room for improvements for these features (and for new ones). ES is very powerful but also very complex to master. It's in a constant improvement.
## Map features
For each dataset it's possible to display the data on a map. Here is what have been done to make this happen.
For each geographical dataset it's possible to display the data on a map. Here is what have been done to make this happen.
#### Mapbox GL JS
On the client side, the library [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) is used. This is very interesting tool improving quickly. The only drawback using it with Angular is because we need to wait the @types are updated. (it can have 2 or 3 versions of difference).
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. The only drawback using it with Angular is that we cannot always use its last version. Indeed as we are using Typescript, we need to wait until the @types are updated.
#### Styling
Mapbox use a[Mapbox style specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/) to define the visual appearance of a map.
In our project we have created diffrent styles depending how we want to display the map. For example when we display the aerial layer, we don't necessary want the names of, say the roads and the river, have the same color than when we display the vectorial layer.
Mapbox use the[Mapbox style specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/) to define the visual appearance of a map.
In our project we have created different styles depending on how we want to display the map. For example when we display the aerial layer, we don't necessary want the names of, say the roads and the river, to have the same color than when we display the vectorial layer.
So when we change these layers, we load the appropriate style.
