Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Map-Viewer] Added layer from a GeoJSON file #777

Merged
merged 5 commits into from
Jan 25, 2024
Merged

Conversation

ronitjadhav
Copy link
Collaborator

@ronitjadhav ronitjadhav commented Jan 19, 2024

This pull request adds the feature that allows users to add a layer from a GeoJSON file to their map.

  • Added a new add-layer-from-file component in src/app/components/add-layer-from-file/add-layer-from-file.component.ts

Task List:

  • Implement a help text: "Choose a file from your computer or drop it here to add it to the map; only GeoJSON format is supported for now."
  • Add a file selector and drop component for user interaction.
  • Ensure that dropped or selected files are added as vector layers with default styling. The 'add layer' panel remains accessible for further additions.
  • Auto-name the created layer using the file's name for easy identification.

Screenshots:

image

image

#756

Copy link
Contributor

github-actions bot commented Jan 19, 2024

Affected libs: feature-map, feature-dataviz, feature-record, feature-router,
Affected apps: metadata-editor, datahub, demo, webcomponents, search, map-viewer,

  • 🚀 Build and deploy storybook and demo on GitHub Pages
  • 📦 Build and push affected docker images

@coveralls
Copy link

coveralls commented Jan 19, 2024

Coverage Status

coverage: 85.818% (+1.8%) from 83.998%
when pulling 0c8d1af on mv-add-from-geojson
into 177cac3 on main.

Copy link
Collaborator

@Angi-Kinas Angi-Kinas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done! Your code looks good :-)
I only have a few comments. Let me know if you have any questions.

this.loading = true
try {
if (!this.isFileFormatValid(file)) {
this.errorMessage = 'Invalid file format'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can save the message in a constant outside this class to reuse it again, e.g. in line 52.
It's better to have a single source of truth. The sentence might change in the future and it could be messy to edit the message in several places.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have refactored the code to define the message as a constant for reuse.

}

private isFileFormatValid(file: File): boolean {
const fileExtension = file.name.split('.').pop()
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks quite similar to the logic in line 46.
Maybe you refactor this into a function and reuse it?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have refactored it into a function.

}
this.mapFacade.addLayer({ ...layerToAdd, title: title })
this.successMessage = 'File successfully added to map'
setTimeout(() => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are already using a setTimeout function in the displayError function. Maybe you could create a displayMessage function instead and use it for the error and success case but with a different message. WDYT?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for pointing it out. I have implemented this change. @Angi-Kinas

Copy link
Collaborator

@cmoinier cmoinier left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work here! Didn't test, just left a few remarks. I agree with what Angelika said as well 🙂

})

describe('handleFileChange', () => {
describe('should set error message if file is not selected', () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a remark in terms of UT naming :

Usually, we try to reserve the expectations, such as should do... to it blocks.

For describe blocks, we try to have either a condition (such as if file is not selected), or the name of the section we're testing (eg : #errorMessage,like you did line 40 for instance).

So for instance in this case, IMO, the name of the describe block should be if file is not selected (and the naming of the following it case is alright since it starts with should).

This remark is true for the next few tests in this file 🙂

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cmoinier Thanks for the note on UT naming. I have revised the describe blocks for clarity and consistency as suggested.

Copy link
Member

@fgravin fgravin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Marginal comments

this.errorMessage = message
}

setTimeout(() => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jahow do we have a notification système ? Could be another task for @ronitjadhav what do you guys think ?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's no global notification system and we might not need one, since for now all errors are "situational". Let's keep it like that for now.

}

const fileExtension = this.getFileExtension(file)
switch (fileExtension) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One improvement here would be to use DuckDB spatial WASM, to be able to load any kind of spatial dataset.

Copy link
Collaborator

@Angi-Kinas Angi-Kinas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work!
Thanks for addressing the comments. I found one more little thing, but I will already approve 👍

}

setTimeout(() => {
if (type === 'success') {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This condition might not be necessary, you can just set the values to null (as discussed).

@ronitjadhav ronitjadhav merged commit dc3a671 into main Jan 25, 2024
8 checks passed
@ronitjadhav ronitjadhav deleted the mv-add-from-geojson branch January 25, 2024 09:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants