Sample map browse not working and throws javascript errors

[rija]

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behaviour:

1. go to https://gigadb.org (can be reproduced on staging at https://staging.gigadb.org if you don't have admin to live)
2. log in as an admin
3. click on "Browse Samples"
4. no map is showing

Expected behavior a map will show

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari and Firefox
• Version: latest

Additional context

There is a javascript warning:

Loading failed for the <script> with source “https://cdn.jsdelivr.net/npm/ol@v8.1.0/dist/ol.js”. mapbrowse:187:65

followed by a javascript error:

Uncaught ReferenceError: ol is not defined
    <anonymous> https://staging.gigadb.org/site/mapbrowse:199
mapbrowse:199:16

There is also a javascript log entry:

Object { type: "FeatureCollection", features: [] }
​
features: Array []
​
type: "FeatureCollection"
​
<prototype>: Object { … }
mapbrowse:197:13

[only1chunts]

Notes

These should effect the action of ticket but useful info to know:

• The map itself cannot be Google maps as that has restrictions within China, but I'm not precious as to which source map is used as long as it functions globaly.

• There is an extension to this bug in #831 where the map wont show much at the moment as its looking for the combined lat-lon attributes in the database. We stopped adding them as a combined value many years ago we now add them to the database as separate latitude and longitude attributes.

[rija]

Hi @only1chunts,

Regarding the second point, I believe this is out-dated information, as the problem you are describing has been fixed in this PR: https://github.com/gigascience/gigadb-website/pull/979

[rija]

We haven't changed the map provider, so we are not using Google map, so there shouldn't be any problem in that respect here.

[luistoptal]

@rija based on what I observe in staging (the map shows up okay in local), the issue might be related to Content Security Policy blocking loading map files from the cdn

Maybe need to add something along this lines here ops/configuration/nginx-conf/sites/nginx.target_deployment.https.conf.dist?

add_header Content-Security-Policy "default-src 'self'; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net/npm/ol@v8.1.0/ol.css";

I'm not sure how to test this locally but I can spend some time looking into if it sounds like a good idea, please let me know

As for the console logs you mention, they are hardcoded in the view and should probably be removed

[kencho51]

Hi @rija,

When I executed the query in the actionMapbrowse in my staging database,

SELECT d.identifier,  d.title, satt.value, sp.scientific_name as sciname, s.id as sampleid FROM dataset as d
INNER JOIN dataset_sample as dsam on dsam.dataset_id = d.id
INNER JOIN sample as s on s.id = dsam.sample_id
INNER JOIN sample_attribute as satt on satt.sample_id=s.id
INNER JOIN species as sp on sp.id = s.species_id
where satt.attribute_id = 269 and d.upload_status='Published' order by sampleid;

the returned value are something like, not recorded, 00°15' N 98°08' E, off Heligoland, North Sea or 31.48.

I then further looked into the sample_attribute table using:

SELECT attribute_id, value, count(*) FROM sample_attribute WHERE attribute_id = 269 GROUP BY attribute_id, value order by count desc;

And then got this returns:

attribute_id value count
269 not provided    3473
269 restricted access   1096
269 not recorded    257
269 not collected   131
269 32°35'N 103°37'E  74
269 30°0'N 103°02'E   38
269 31°04′37″N, 121°10′35″E   29
269 Multiple    27
269 Not Recorded    22
269 29°02'N 100°17'E  19
269 30°34'N 104°03'E  19
269 35°24'N 116°34'E  19
269 29°24'N 105°36'E  18
269 19°07′16″N, 109°05′00″E   11
269 42°20' N, 126°50' E   11
269 not applicable  10
269 31.48   9
269 N31°, E117°   9
269 35.9940° N, 78.8986° W    8
269 Aldabra, Indian Ocean   5
269 Sri Lanka, Indian Ocean 4
269 off Heligoland, North Sea   4
269 Morro Bay, San Luis Obispo, California, USA, Pacific Ocean  3
269 02°50'56'' N 95°56'24'' E 3
269 19°00′07″N, 109°32′33″E   3
269 Costa Brava, Spain, Mediterranean Sea   3
269 Kobe, Japan, Pacific Ocean  3
269 62°14'S, 58°47'W  3
269 29°24′00″N, 110°09′56″E   3
269 nor recorded    3
269 24°04′34″N, 110°08′17″E   3
269 Loblolly Bay, Anegada, British Virgin Islands, Caribbean Sea    2
269 00°15' N 98°07' E 2
269 00°02' S 73°24' E 2
269 23°20′22″N, 108°22′49″E   2
269 Weddell Sea, Southern Ocean 2
269 Caribbean Sea   2
269 Iceland Basin, Atlantic Ocean   2
269 37°26'N, 126°22'E 2
269 Atapupu, Timor, Indonesia, Indian Ocean 2
269 Singapore, Pacific Ocean    2
269 30.50′–30.180′N, 114.210′–114.390′E 2
269 Arendal, Norway, Skagerrak, North Sea   2
269 33°35'20'' N 135°10'50'' E    2
269 East Asia, Pacific Ocean    2
269 21°54′3″N, 111°23′58″E    2
269 13894; 19°33’3�N, 110°47’25� E    2
269 S off New Scotia, Atlantic Ocean    2
269 New Caledonia, Pacific Ocean    2
269 Bassin de la Gazelle, Kerguelen Islands, Southern Ocean 2
269 00°15' N 98°08' E 2
269 Gauss Base, Antarctica, Southern Ocean  2
269 18°59′58″N, 109°05′03″E   2
269 North Sea   2
269 off Florida, USA, Gulf of Mexico    2
269 not available   2
269 Penguin Bank, Oahu Island, Hawaii, USA, Pacific Ocean   2
269 35.202773   1
269 off Elephant Island, Southern Ocean 1
269 Monrovia, Liberia   1
269 24°58′12″N, 112°53′17″E   1
269 35.114876   1
269 23°36′21″N, 113°57′18″E   1
269 Abeloya, Kong Karls Land    1
269 Not recorded    1
269 30°36′28″N, 119°52′22″E   1
269 Romblon, Philippines, Pacific Ocean 1
269 Hastings, Barbados, Caribbean Sea   1
269 Dry Tortugas, Florida, USA, Gulf of Mexico  1
269 29°37′51″N, 109°50′17″E   1
269 Rovinj, Croatia, Mediterranean Sea  1
269 26°47′29″N, 117°02′21″E   1
269 Polana Beach, Mozambique, Indian Ocean  1
269 21°50′13″N, 108°03′27″E   1
269 Madeira, Portugal, Atlantic Ocean   1
269 Misaki, Japan, Pacific Ocean    1
269 Parry Island, Eniwetok Atoll, Marshall Islands, Pacific Ocean   1
269 18°54′40″N, 109°41′12″E   1
269 25°40'00'' S 86°46'05'' W 1
269 23°10′47″N, 113°21′33″E   1
269 18°39′43″N, 110°16′19″E   1
269 Pemba Channel, Tanzania, Indian Ocean   1
269 33°56' N 26°43' E 1
269 Port Jackson, Sydney, Australia, Pacific Ocean  1
269 Mombasa, Kenya, Indian Ocean    1
269 30°11′36″N, 118°09′20″E   1
269 35°10' S 23°02' E 1
269 Low Island, Low Isles, Australia, Pacific Ocean 1
269 01°49' N 45°29' E 1
269 Ecuador, Pacific Ocean  1
269 Ralum, East New Britain, Papua New Guinea, Pacific Ocean,   1
269 60° 9′ 0″ N, 24° 39′ 30″ E    1
269 Maroon Point, Mauritius, Indian Ocean   1
269 40°0´38.02´'N3°52´41.4´´E  1
269 Paita, Peru, Pacific Ocean  1
269 St. Thomas, Caribbean Sea   1
269 22°26′46″N, 106°53′17″E   1
269 61°42' N 09°36' W 1
269 35.161870   1
269 29°46′34″N, 110°05′50″E   1
269 Golf of Suez, Red Sea, Indian Ocean 1
269 31°58'82'' S 174°15'87'' E    1
269 29°33′33″N, 103°18′45″E   1
269 Azores, Portugal, Atlantic Ocean    1
269 43°56' S 60°52' W 1
269 Papua New Guinea, Pacific Ocean 1
269 45.5° N, 122.7° W 1
269     1
269 06°19' S 12°02' E 1
269 18°45′15″N, 110°12′43″E   1
269 35.192253   1
269 Angra Pequena, Lüderitz, Namibia, Atlantic Ocean 1
269 34.0689° N, 118.4452° W   1
269 Jakarta, Indonesia, Pacific Ocean   1
269 30°02'09'' N 28°24'02'' W 1
269 S Chile, Pacific Ocean  1

So clearly, besides the CSP problem, the value itself in the sample_attribute table is not standardized and not formatted well, it causes the geojson_features array is empty, which leads to no dots can be seen in the map in the /site/mapbrowse page.

The sanity check in the mapbrowse.php is not enough to check all the value cases in the sample_attribute table in the current production database.