Feature/live monitoring

[emi420]

This PR adds a new view for live monitoring of mapping projects, providing data quality insights.

You can see how it looks here:

https://github.com/hotosm/tasking-manager/issues/6109#issuecomment-1843383333

There are some other tasks that needs to be completed in order to have this feature in production.

[royallsilwallz]

Hey @emi420, Are you finished with this PR or is there some work remaining from your side? I saw some warnings showing no-unused-vars by eslint. Are you planning to fix them? CC: @varun2948

[royallsilwallz]

Hey @emi420 I've addressed the issues by ignoring the eslint rules for the specific lines for now. Need to fix them when you are available later. CC - @varun2948

[royallsilwallz]

@kshitijrajsharma - @emi420 has used underpass api url as localhost:8000 in the PR What shall we put on TM for the underpass api url? CC - @varun2948

[kshitijrajsharma]

@royallsilwallz , For download service its a env variable in frontend and it doesn't need any API to communicate with it will directly point to s3 ! So different and unrelated !

[royallsilwallz]

@kshitijrajsharma do you mean we don't have to pass the apiUrl prop to the UnderpassFeatureStats component ?

[kshitijrajsharma]

I am not following @royallsilwallz , I believe for download service frontend @varun2948 will have more context

[royallsilwallz]

@kshitijrajsharma I think we need underpass api url for this to work. cc - @varun2948

[varun2948]

@kshitijrajsharma This is not related to the export tool but to the live monitoring part where EMI has used a localhost on the API part as emi has used underpass UI library.

[varun2948]

@kshitijrajsharma as emi is using a config for underpassmap component of his and it has this config file

where there is localhost so what do you think about that part?

[kshitijrajsharma]

@varun2948

where there is localhost so what do you think about that part?

oh okay unrelated to download service , for config best approach is to pick from env variable if not found fallback to localhost

• For future you can use github permalink to reference code like following : https://github.com/hotosm/tasking-manager/blob/24186da3becfd5476ac32f66963017e08211b1f1/frontend/src/views/projectLiveMonitoring.js#L19

On separate topic , Couldn't help but notice , I wonder why we are using mapbox though instead of maplibre @emi420 ?

[emi420]

On separate topic , Couldn't help but notice , I wonder why we are using mapbox though instead of maplibre @emi420 ?

@kshitijrajsharma we're using Maplibre, Mapbox API KEY is for background imagery only

[emi420]

@kshitijrajsharma - @emi420 has used underpass api url as localhost:8000 in the PR What shall we put on TM for the underpass api url? CC - @varun2948

API URL is https://underpass.hotosm.org:8000

Currently, it has data for one country (Libya) and is a development instance, it will be replaced later once we do the deployment (there are devops tasks already created for that)

[kshitijrajsharma]

On separate topic , Couldn't help but notice , I wonder why we are using mapbox though instead of maplibre @emi420 ?

@kshitijrajsharma we're using Maplibre, Mapbox API KEY is for background imagery only

Would it make sense to remove dependency from mapbox completely ? I think there are existing baselayers for OSM that ca n be injected on maplibre , It would be wise to remove mapbox atleast on the tools / feature we developing recently !

[emi420]

@varun2948

where there is localhost so what do you think about that part?

oh okay unrelated to download service , for config best approach is to pick from env variable if not found fallback to localhost

@kshitijrajsharma

Yes, ENV variables are the best approach, I just leave that for the project developers. You can pass a config property to the Underpass UI component and the values on that property will be the ENV variables. Makes sense?

[manjitapandey]

I have tested the feature by integrating it on my local device setup. I encountered few problems, which i am not quite sure if they are due to Underpass UI or feature issues. The team is digging further regarding this.

• Number of tasks are not shown complete. If there are total of 6 unsquared buildings only 4 are seen on the list.

• The pop up of buildings are still seen after filter is removed.

[emi420]

* Number of tasks are not shown complete. If there are total of 6 unsquared buildings only 4 are seen on the list.

I think some of them are hidden because a scroll/overflow problem, I'll fix it in the Underpass UI component.

* The pop up of buildings are still seen after filter is removed.

I'll check this and provide a solution.

[royallsilwallz]

The build file of CSS has been changed from 452.4KB (develop branch) to 6.54MB (feature/liveMonitoring branch).

The size is coming from @hotosm/underpass-ui/dist/index.css (5.9MB). It has 336,016 lines of code, almost all coming from Tailwind CSS.

This requires optimization. The solution would be to minify this file. Also, see if there are unwanted codes in the dist files.

Were you aware of this, @emi420 ?

Screenshot

• develop VS feature/liveMonitoring branch

[emi420]

@royallsilwallz Underpass UI CSS is now optimized, size reduced to 10kb :)

[sonarqubecloud[bot]]

Quality Gate passed

Issues
19 New issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[royallsilwallz]

I can confirm that the size is optimized now. Nice work @emi420 ! I've upgraded the latest Underpass UI repo and pushed the code. I think we should merge this now. What do you say ? CC - @ramyaragupathy @manjitapandey

[ramyaragupathy]

Since there are conflicts and merge that's unrelated to this PR which makes the conflict resolution difficult, we will have @emi420 create a separate branch.

Also, we will include this feature only in expert mode. Once the new PR is up from @emi420, @royallsilwallz will implement the changes to support the view for expert mode features

[emi420]

Closing this PR because we'll create a new one.

[sonarqubecloud[bot]]

Quality Gate passed

Issues
19 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[royallsilwallz]

Continued with #6299