From 5133c0cdbfe82a336e811871d113d8d217352b48 Mon Sep 17 00:00:00 2001 From: William Moore Date: Wed, 15 Feb 2023 16:10:10 +0000 Subject: [PATCH] Use csv table, combined with zarr data --- package-lock.json | 11 +++++ package.json | 1 + public/zarr_samples.csv | 91 +++++++++++++++++++++++++++++++++++++++++ src/App.jsx | 68 +++++++++++++++++++++++------- src/ImageItem.jsx | 63 +++++++++++++++------------- 5 files changed, 190 insertions(+), 44 deletions(-) create mode 100644 public/zarr_samples.csv diff --git a/package-lock.json b/package-lock.json index 0c492d4..2fd4d00 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@hms-dbmi/viv": "^0.13.3", + "papaparse": "^5.3.2", "react": "^16.14.0", "react-dom": "^16.14.0" }, @@ -2205,6 +2206,11 @@ "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz", "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==" }, + "node_modules/papaparse": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.3.2.tgz", + "integrity": "sha512-6dNZu0Ki+gyV0eBsFKJhYr+MdQYAzFUGlBMNj3GNrmHxmz1lfRa24CjFObPXtjcetlOv5Ad299MhIK0znp3afw==" + }, "node_modules/parse-headers": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz", @@ -4277,6 +4283,11 @@ "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz", "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==" }, + "papaparse": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.3.2.tgz", + "integrity": "sha512-6dNZu0Ki+gyV0eBsFKJhYr+MdQYAzFUGlBMNj3GNrmHxmz1lfRa24CjFObPXtjcetlOv5Ad299MhIK0znp3afw==" + }, "parse-headers": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz", diff --git a/package.json b/package.json index 1d26282..5e1b649 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@hms-dbmi/viv": "^0.13.3", + "papaparse": "^5.3.2", "react": "^16.14.0", "react-dom": "^16.14.0" }, diff --git a/public/zarr_samples.csv b/public/zarr_samples.csv new file mode 100644 index 0000000..db078c6 --- /dev/null +++ b/public/zarr_samples.csv @@ -0,0 +1,91 @@ +OME-NGFF version,URL,SizeX,SizeY,SizeZ,SizeC,SizeT,Axes,Wells,Fields,Keywords,License,Study,DOI,Date added,Representative Image ID +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/12689244.zarr,4992,4255,401,3,1,XYZCT,,,,CC BY 4.0,idr0106,,2020-11-04,12689244 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/179706.zarr,1344,1024,1,2,329,XYZCT,,,,CC BY 4.0,idr0002,,2020-11-04,179706 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/1884807.zarr,256,256,1,3,1,XYZCT,,,,CC BY 4.0,idr0021,,2020-11-04,1884807 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/1885619.zarr,30,30,571,1,1,XYZCT,,,,CC BY 4.0,idr0023,,2020-11-04,1885619 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/4007801.zarr,2169,2048,988,2,532,XYZCT,,,,CC BY 4.0,idr0044,,2020-11-04,4007801 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/4495402.zarr,921600,380928,1,1,1,XYZCT,,,,CC BY-NC-SA 3.0,idr0053,,2020-11-04,4495402 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001237.zarr,1024,1024,39,4,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001237 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001238.zarr,1024,1024,27,4,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001238 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001239.zarr,1024,1024,36,4,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001239 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001240.zarr,271,275,236,2,1,XYZCT,,,labels (0),CC BY 4.0,idr0062,,2020-11-04,6001240 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001241.zarr,278,263,236,2,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001241 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001242.zarr,481,275,237,2,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001242 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001243.zarr,212,218,237,2,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001243 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001244.zarr,325,281,239,2,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001244 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001245.zarr,220,226,257,2,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001245 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001246.zarr,281,284,257,2,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001246 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001247.zarr,253,210,257,2,1,XYZCT,,,labels (0),CC BY 4.0,idr0062,,2020-11-04,6001247 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001248.zarr,234,269,195,2,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001248 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001249.zarr,246,241,195,2,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001249 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001250.zarr,246,241,195,2,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001250 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001251.zarr,170,163,140,2,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001251 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001252.zarr,170,163,297,2,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001252 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001253.zarr,803,1024,297,2,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001253 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001254.zarr,393,354,51,4,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001254 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001255.zarr,551,416,32,4,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001255 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001256.zarr,350,372,61,4,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001256 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001257.zarr,3763,2860,145,4,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001257 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001258.zarr,1282,838,36,3,1,XYZCT,,,,CC BY 4.0,idr0062,,2020-11-04,6001258 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9822151.zarr,79360,167424,1,1,1,XYZCT,,,,CC BY 4.0,idr0083,https://doi.org/10.5281/zenodo.5546093,2020-11-04,9822151 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9822152.zarr,144384,93184,1,1,1,XYZCT,,,,CC BY 4.0,idr0083,,2020-11-04,9822152 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836831.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836831 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836832.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836832 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836833.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836833 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836834.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836834 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836835.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836835 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836836.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836836 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836837.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836837 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836838.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836838 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836839.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836839 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836840.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836840 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836841.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836841 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836842.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836842 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836843.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836843 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836844.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836844 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836845.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836845 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836846.zarr,1920,1920,259,4,1,XYZCT,,,,CC BY 4.0,idr0077,,2020-11-04,9836846 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836950.zarr,1636,816,156,1,1,XYZCT,,,,CC BY 4.0,idr0079,,2020-11-04,9836950 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/plates/1751.zarr,672,510,10,2,1,XYZCT,69,1,,CC BY-NC-SA 3.0,idr0004,https://doi.org/10.5281/zenodo.5741293,2020-12-01,692166 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/plates/2551.zarr,1376,1040,16,2,1,XYZCT,96,6,,CC BY 4.0,idr0001,https://zenodo.org/record/5735098,2020-12-01,1230059 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/plates/422.zarr,1344,1024,1,2,329,XYZCT,96,1,,CC BY 4.0,idr0002,,2020-12-01,179693 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/plates/5966.zarr,1080,1080,1,5,1,XYZCT,384,9,,CC BY 4.0,idr0033,https://zenodo.org/record/5742744,2020-12-01,3231627 +0.1,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/plates/7825.zarr,1080,1080,1,1,1,XYZCT,96,9,,CC0 1.0,idr0094,https://zenodo.org/record/5745520,2020-12-01,10568780 +0.2,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.2/6001240.zarr,271,275,236,2,1,XYZCT,,,labels (0),CC BY 4.0,idr0062,,2021-03-09,6001240 +0.2,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.2/6001247.zarr,253,210,257,2,1,XYZCT,,,labels (0),CC BY 4.0,idr0062,,2020-12-01,6001247 +0.2,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.2/idr0070A/9838562.zarr,,,,,,,,,bioformats2raw.layout,CC BY 4.0,idr0070,,2022-10-14,9838562 +0.3,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/9836842.zarr,1920,1920,,4,,XYC,,,,CC BY 4.0,idr0077,,2021-12-16,9836842 +0.3,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0079A/9836998.zarr,1584,788,142,2,,XYZC ,,,labels (0),CC BY 4.0,idr0079,,2021-12-16,9836998 +0.3,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0052A/5514375.zarr,256,256,31,3,40,XYZCT,,,"labels (cells, chromosomes)",CC BY 4.0,idr0052,,2021-12-16,5514375 +0.3,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0095B/11511419.zarr,2048,2048,,3,,XYC,,,labels (0),CC BY 4.0,idr0095,,2021-12-16,11511419 +0.3,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0095B/11511420.zarr,2048,2048,,3,,XYC,,,labels (0),CC BY 4.0,idr0095,,2021-12-16,11511420 +0.3,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0095B/11511421.zarr,2048,2048,,3,,XYC,,,labels (0),CC BY 4.0,idr0095,,2021-12-16,11511421 +0.3,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0095B/11511422.zarr,2048,2048,,3,,XYC,,,labels (0),CC BY 4.0,idr0095,,2021-12-16,11511422 +0.3,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0095B/11511423.zarr,2048,2048,,3,,XYC,,,labels (0),CC BY 4.0,idr0095,,2021-12-16,11511423 +0.3,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0095B/11511424.zarr,2048,2048,,3,,XYC,,,labels (0),CC BY 4.0,idr0095,,2021-12-16,11511424 +0.3,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0094A/7751.zarr,1080,1080,,,,XY,96,9,,CC0 1.0,idr0094,,2021-12-16,10503791 +0.3,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0109A/12922361.zarr,2560,2160,,,721,XYT,,,,CC BY 4.0,idr0109,,2021-12-16,12922361 +0.3,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0075A/9528933.zarr,512,512,91,,,XYZ,,,,CC BY 4.0,idr0075,,2021-12-16,9528933 +0.3,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0051A/4007817.zarr,333,333,201,,79,XYZT,,,,CC BY 4.0,idr0051,,2021-12-16,4007817 +0.3,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0040A/3491626.zarr,2048,2048,,5,20,XYCT,,,,CC BY 4.0,idr0040,,2021-12-16,3491626 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0073A/9798462.zarr,21115,16433,1,3,1,XYZCT,,,,CC BY 4.0,idr0073,,2022-05-05,9798462 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0072B/9512.zarr,1345,1017,1,2,1,XYC,72,20,,CC BY 4.0,idr0072,,2022-05-10,12867352 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0083A/9822152.zarr,144384,93184,1,1,1,XYZCT,,,,CC BY 4.0,idr0083,,2022-05-11,9822152 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0062A/6001247.zarr,253,210,257,2,,XYZC,,,labels (0),CC BY 4.0,idr0062,,2022-05-11,6001247 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0044A/4007801.zarr,2169,2048,988,2,532,XYZCT,,,,CC BY 4.0,idr0044,,2022-05-17,4007801 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0056B/7361.zarr,659,493,1,4,1,XYZCT,384,30,bioformats2raw.layout,CC BY 4.0,idr0056,,2022-06-06,9621401 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0128E/9701.zarr,2048,2048,1,2,1,XYZCT,384,1,bioformats2raw.layout,CC BY 4.0,idr0128,,2022-06-01,13966432 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0013A/3451.zarr,1344,1024,,,93,XYT,384,1,,CC0 1.0,idr0013,,2022-06-03,1483351 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0054A/5025551.zarr,2702,2700,1,27,1,XYZCT,,,,CC BY 4.0,idr0054,,2022-06-03,5025551 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0054A/5025552.zarr,2701,2701,1,27,1,XYZCT,,,,CC BY 4.0,idr0054,,2022-06-03,5025552 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0054A/5025553.zarr,2500,2500,1,27,1,XYZCT,,,,CC BY 4.0,idr0054,,2022-06-03,5025553 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0076A/10501752.zarr,464,494,,50,,XYC,,,labels (0),CC BY 4.0,idr0076,,2022-06-21,10501752 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0047A/4496763.zarr,2048,2048,25,4,,XYZC,,,labels (0),CC BY 4.0,idr0047,,2022-06-21,4496763 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0062A/6001240.zarr,271,275,236,2,,XYZC,,,labels (0),CC BY 4.0,idr0062,,2022-06-21,6001240 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0052A/5514375.zarr,256,256,31,3,40,XYZCT,,,"labels (Cell, Chromosomes)",CC BY 4.0,idr0052,,2022-06-21,5514375 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0001A/2551.zarr,1376,1040,16,2,1,XYZC,96,6,labels (0),CC BY 4.0,idr0001,,2022-07-06,1230059 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0101A/13457227.zarr,2048,2048,35,4,18,XYZCT,,,,CC BY 4.0,idr0101,,2022-10-13,13457227 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0101A/13457537.zarr,198,223,12,6,18,XYZCT,,,coordinateTransformation (translation) on dataset,CC BY 4.0,idr0101,,2022-10-13,13457537 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0101A/13457539.zarr,190,189,11,6,18,XYZCT,,,coordinateTransformation (translation) on multiscales,CC BY 4.0,idr0101,,2022-10-13,13457539 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0048A/9846151.zarr/,2947,5192,1402,3,1,XYZCT,,,bioformats2raw.layout,CC BY 4.0,idr0048,,2023-01-12,9846151 +0.4,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0048A/9846152.zarr/,19120,13350,91,3,1,XYZCT,,,,CC BY 4.0,idr0048,,2023-01-12,9846152 diff --git a/src/App.jsx b/src/App.jsx index be94feb..6895ad6 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,30 +1,68 @@ -/// app.js + import React from "react"; -import ImageItem from "./ImageItem"; +import Papa from "papaparse"; -import zarr_samples_json from "../public/zarr_samples.json"; +import ImageItem from "./ImageItem"; -// DeckGL react component export default function App() { - let sources = zarr_samples_json.urls; - let items = sources.map((source) => ); + const [tableData, setTableData] = React.useState([]); + + React.useEffect(() => { + Papa.parse("/zarr_samples.csv", { + header: true, + download: true, + complete: function (results) { + console.log(results); + setTableData(results.data); + }, + }); + }, []); + + let zarr_columns = [ + "URL", + "Version", + "Axes", + "shape, chunks", + "Wells", + "Fields", + "Keywords", + "Thumbnail", + ]; + + let custom_columns = ["License", "Study", "DOI", "Date added"]; + + function renderRow(rowdata) { + return + {custom_columns.map((col_name) => {rowdata[col_name]})} + + } + + const table_rows = tableData.map((rowdata) => { + console.log("Row....", rowdata); + return ( + {renderRow(rowdata)} + + + ); + }); return ( - - - - - - - - + {custom_columns.map((name) => ( + + ))} + {zarr_columns.map((name) => ( + + ))} - {items} + {table_rows}
Versions3 URLshape, chunksAxesWellsFieldsKeywordsThumbnail{name}{name}
); diff --git a/src/ImageItem.jsx b/src/ImageItem.jsx index b76d50f..1115edb 100644 --- a/src/ImageItem.jsx +++ b/src/ImageItem.jsx @@ -8,7 +8,7 @@ import { loadOmeroMultiscales, open, getNgffAxes } from "./util"; import { openArray } from "zarr"; // DeckGL react component -export default function ImageItem({ source }) { +export default function ImageItem({ source, zarr_columns }) { let config = { source }; // const [layers, setLayers] = React.useState([]); @@ -76,15 +76,16 @@ export default function ImageItem({ source }) { // setLayers([layerData]); + // ["URL", "Version", "Axes", "shape, chunks", "Wells", "Fields", "Keywords", "Thumbnail"]; setImageInfo({ attrs, - axes: axes.map((axis) => axis.name).join(""), - version: attrs.multiscales?.[0]?.version, - keywords, - wells, - shape, - chunks, - fields + "Axes": axes.map((axis) => axis.name).join(""), + "Version": attrs.multiscales?.[0]?.version, + "Keywords": keywords, + "Wells": wells, + "shape": shape.join(", "), + "chunks": chunks.join(", "), + "Fields": fields }); }; @@ -106,29 +107,33 @@ export default function ImageItem({ source }) { overflow: "hidden" } - return ( - - {imgInfo.version} - + // ["URL", "Version", "Axes", "shape, chunks", "Wells", "Fields", "Keywords", "Thumbnail"]; + + function renderColumn(col_name) { + if (col_name == "URL") { + return ( {source} - - - {imgInfo?.shape?.join(", ")}
- {imgInfo?.chunks?.join(", ")} - - {imgInfo.axes} - {imgInfo.wells} - {imgInfo.fields} - {imgInfo?.keywords?.join(", ")} - -
- {imgInfo.attrs && - - } -
- - + + ) + } else if (col_name == "Thumbnail") { + return ( +
+ {imgInfo.attrs && + + } +
) + } else if (col_name == "shape, chunks") { + return ({imgInfo.shape})
({imgInfo.chunks}) + } else { + return imgInfo[col_name]; + } + } + + return ( + + {zarr_columns.map(col_name => {renderColumn(col_name)})} + ); }