diff --git a/index.html b/index.html index 0f2d33e..b581e5e 100644 --- a/index.html +++ b/index.html @@ -210,6 +210,9 @@ cursor: default; } body { + --omeRed: #df283f; + --omeGreen: #128669; + --omeLinkBlue: #1d8dcd; padding: 0; font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; @@ -230,7 +233,7 @@ background: white; margin: 10px 0; text-align: center; - box-shadow: 10px 10px 20px rgba(125, 22, 2, 0.5); + box-shadow: 10px 10px 20px rgba(212, 239, 253, 0.5); width: 100%; position: relative; } diff --git a/package-lock.json b/package-lock.json index 981019f..43a26bf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,10 @@ "version": "0.3.0", "dependencies": { "ajv": "^8.11.0", + "ndarray": "^1.0.19", "svelte-icons-pack": "^1.4.6", "svelte-simple-modal": "^1.4.1", - "zarr": "^0.6.0" + "zarrita": "^0.4.0-next.15" }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30", @@ -59,6 +60,40 @@ } } }, + "node_modules/@zarrita/core": { + "version": "0.1.0-next.13", + "resolved": "https://registry.npmjs.org/@zarrita/core/-/core-0.1.0-next.13.tgz", + "integrity": "sha512-aoGq1mS3SAfDhmMVtCQAcgNeD4O2SKbCqFmJ/hyAeHoCpAwOWpc+6grpKqMtuVNQdFtRl+r4pt7UQPZgsxdIrQ==", + "dependencies": { + "@zarrita/storage": "^0.1.0-next.5", + "@zarrita/typedarray": "^0.1.0-next.3", + "numcodecs": "^0.3.1" + } + }, + "node_modules/@zarrita/indexing": { + "version": "0.1.0-next.15", + "resolved": "https://registry.npmjs.org/@zarrita/indexing/-/indexing-0.1.0-next.15.tgz", + "integrity": "sha512-1WAHDZvWYq0bnMquwWbCsKnx1rsuvDNcgersD5e6tNMpYnqPRUZUyOFpYaxBhrvJjEf5AM9CI3uCPE8RGYg7ag==", + "dependencies": { + "@zarrita/core": "^0.1.0-next.13", + "@zarrita/storage": "^0.1.0-next.5", + "@zarrita/typedarray": "^0.1.0-next.3" + } + }, + "node_modules/@zarrita/storage": { + "version": "0.1.0-next.5", + "resolved": "https://registry.npmjs.org/@zarrita/storage/-/storage-0.1.0-next.5.tgz", + "integrity": "sha512-E1VSxhNGZHL4RsKfIuyaz0HRsDk7hOU8Y7R+8yvKolaHDjK31XQsUgu97oaR24qS1j1OOg5vGyFyd+y0q7FNOA==", + "dependencies": { + "reference-spec-reader": "^0.2.0", + "unzipit": "^1.4.3" + } + }, + "node_modules/@zarrita/typedarray": { + "version": "0.1.0-next.3", + "resolved": "https://registry.npmjs.org/@zarrita/typedarray/-/typedarray-0.1.0-next.3.tgz", + "integrity": "sha512-DpSaU3Cr6HmYDC/v8oM+e219cHU/kzKma309Z9E+QbpRnZycKNbSTKcxFR7FqB6HgB9640gzNUVFG5P+wzX5Xg==" + }, "node_modules/ajv": { "version": "8.11.0", "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz", @@ -461,16 +496,16 @@ "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", "dev": true }, - "node_modules/eventemitter3": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", - "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" - }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, + "node_modules/fflate": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", + "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==" + }, "node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -503,6 +538,16 @@ "node": ">= 0.4.0" } }, + "node_modules/iota-array": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/iota-array/-/iota-array-1.0.0.tgz", + "integrity": "sha512-pZ2xT+LOHckCatGQ3DcG/a+QuEqvoxqkiL7tvE8nn3uuu+f6i1TtpB5/FtWFbxUuVr5PZCx8KskuGatbJDXOWA==" + }, + "node_modules/is-buffer": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", + "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==" + }, "node_modules/is-core-module": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz", @@ -559,38 +604,21 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, - "node_modules/numcodecs": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/numcodecs/-/numcodecs-0.2.2.tgz", - "integrity": "sha512-Y5K8mv80yb4MgVpcElBkUeMZqeE4TrovxRit/dTZvoRl6YkB6WEjY+fiUjGCblITnt3T3fmrDg8yRWu0gOLjhQ==", - "engines": { - "node": ">=12" - } - }, - "node_modules/p-queue": { - "version": "7.3.0", - "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-7.3.0.tgz", - "integrity": "sha512-5fP+yVQ0qp0rEfZoDTlP2c3RYBgxvRsw30qO+VtPPc95lyvSG+x6USSh1TuLB4n96IO6I8/oXQGsTgtna4q2nQ==", + "node_modules/ndarray": { + "version": "1.0.19", + "resolved": "https://registry.npmjs.org/ndarray/-/ndarray-1.0.19.tgz", + "integrity": "sha512-B4JHA4vdyZU30ELBw3g7/p9bZupyew5a7tX1Y/gGeF2hafrPaQZhgrGQfsvgfYbgdFZjYwuEcnaobeM/WMW+HQ==", "dependencies": { - "eventemitter3": "^4.0.7", - "p-timeout": "^5.0.2" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "iota-array": "^1.0.0", + "is-buffer": "^1.0.2" } }, - "node_modules/p-timeout": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-5.1.0.tgz", - "integrity": "sha512-auFDyzzzGZZZdHz3BtET9VEz0SE/uMEAx7uWfGPucfzEwwe/xH0iVeZibQmANYE/hp9T2+UUZT5m+BKyrDp3Ew==", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "node_modules/numcodecs": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/numcodecs/-/numcodecs-0.3.2.tgz", + "integrity": "sha512-6YSPnmZgg0P87jnNhi3s+FVLOcIn3y+1CTIgUulA3IdASzK9fJM87sUFkpyA+be9GibGRaST2wCgkD+6U+fWKw==", + "dependencies": { + "fflate": "^0.8.0" } }, "node_modules/path-parse": { @@ -649,6 +677,11 @@ "node": ">=6" } }, + "node_modules/reference-spec-reader": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/reference-spec-reader/-/reference-spec-reader-0.2.0.tgz", + "integrity": "sha512-q0mfCi5yZSSHXpCyxjgQeaORq3tvDsxDyzaadA/5+AbAUwRyRuuTh0aRQuE/vAOt/qzzxidJ5iDeu1cLHaNBlQ==" + }, "node_modules/require-from-string": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", @@ -749,6 +782,17 @@ "svelte": "^3.31.2" } }, + "node_modules/unzipit": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/unzipit/-/unzipit-1.4.3.tgz", + "integrity": "sha512-gsq2PdJIWWGhx5kcdWStvNWit9FVdTewm4SEG7gFskWs+XCVaULt9+BwuoBtJiRE8eo3L1IPAOrbByNLtLtIlg==", + "dependencies": { + "uzip-module": "^1.0.2" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -757,6 +801,11 @@ "punycode": "^2.1.0" } }, + "node_modules/uzip-module": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/uzip-module/-/uzip-module-1.0.3.tgz", + "integrity": "sha512-AMqwWZaknLM77G+VPYNZLEruMGWGzyigPK3/Whg99B3S6vGHuqsyl5ZrOv1UUF3paGK1U6PM0cnayioaryg/fA==" + }, "node_modules/vite": { "version": "2.9.9", "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.9.tgz", @@ -794,16 +843,14 @@ } } }, - "node_modules/zarr": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/zarr/-/zarr-0.6.0.tgz", - "integrity": "sha512-WgGe+aFyK6EmTyZcqJ2OFeFQ9fJFuJqeJgM5sKnbap7HJboaI+rBpDp0rPXSTq5ITu/rLEQjZQ2mPlcfYk7DYA==", + "node_modules/zarrita": { + "version": "0.4.0-next.15", + "resolved": "https://registry.npmjs.org/zarrita/-/zarrita-0.4.0-next.15.tgz", + "integrity": "sha512-s2ZElXObBqmsTZOkSMuamc1c05pc2Ar+OBlPndFPvzAcnx/G8cQoLe5Yo3mdqwTd7a28Lq/zrTvFc/Qbpj22VA==", "dependencies": { - "numcodecs": "^0.2.2", - "p-queue": "^7.1.0" - }, - "engines": { - "node": ">=12" + "@zarrita/core": "^0.1.0-next.13", + "@zarrita/indexing": "^0.1.0-next.15", + "@zarrita/storage": "^0.1.0-next.5" } } }, @@ -832,6 +879,40 @@ "svelte-hmr": "^0.14.11" } }, + "@zarrita/core": { + "version": "0.1.0-next.13", + "resolved": "https://registry.npmjs.org/@zarrita/core/-/core-0.1.0-next.13.tgz", + "integrity": "sha512-aoGq1mS3SAfDhmMVtCQAcgNeD4O2SKbCqFmJ/hyAeHoCpAwOWpc+6grpKqMtuVNQdFtRl+r4pt7UQPZgsxdIrQ==", + "requires": { + "@zarrita/storage": "^0.1.0-next.5", + "@zarrita/typedarray": "^0.1.0-next.3", + "numcodecs": "^0.3.1" + } + }, + "@zarrita/indexing": { + "version": "0.1.0-next.15", + "resolved": "https://registry.npmjs.org/@zarrita/indexing/-/indexing-0.1.0-next.15.tgz", + "integrity": "sha512-1WAHDZvWYq0bnMquwWbCsKnx1rsuvDNcgersD5e6tNMpYnqPRUZUyOFpYaxBhrvJjEf5AM9CI3uCPE8RGYg7ag==", + "requires": { + "@zarrita/core": "^0.1.0-next.13", + "@zarrita/storage": "^0.1.0-next.5", + "@zarrita/typedarray": "^0.1.0-next.3" + } + }, + "@zarrita/storage": { + "version": "0.1.0-next.5", + "resolved": "https://registry.npmjs.org/@zarrita/storage/-/storage-0.1.0-next.5.tgz", + "integrity": "sha512-E1VSxhNGZHL4RsKfIuyaz0HRsDk7hOU8Y7R+8yvKolaHDjK31XQsUgu97oaR24qS1j1OOg5vGyFyd+y0q7FNOA==", + "requires": { + "reference-spec-reader": "^0.2.0", + "unzipit": "^1.4.3" + } + }, + "@zarrita/typedarray": { + "version": "0.1.0-next.3", + "resolved": "https://registry.npmjs.org/@zarrita/typedarray/-/typedarray-0.1.0-next.3.tgz", + "integrity": "sha512-DpSaU3Cr6HmYDC/v8oM+e219cHU/kzKma309Z9E+QbpRnZycKNbSTKcxFR7FqB6HgB9640gzNUVFG5P+wzX5Xg==" + }, "ajv": { "version": "8.11.0", "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz", @@ -1032,16 +1113,16 @@ "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", "dev": true }, - "eventemitter3": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", - "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" - }, "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, + "fflate": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", + "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==" + }, "fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -1064,6 +1145,16 @@ "function-bind": "^1.1.1" } }, + "iota-array": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/iota-array/-/iota-array-1.0.0.tgz", + "integrity": "sha512-pZ2xT+LOHckCatGQ3DcG/a+QuEqvoxqkiL7tvE8nn3uuu+f6i1TtpB5/FtWFbxUuVr5PZCx8KskuGatbJDXOWA==" + }, + "is-buffer": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", + "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==" + }, "is-core-module": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz", @@ -1105,24 +1196,22 @@ "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", "dev": true }, - "numcodecs": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/numcodecs/-/numcodecs-0.2.2.tgz", - "integrity": "sha512-Y5K8mv80yb4MgVpcElBkUeMZqeE4TrovxRit/dTZvoRl6YkB6WEjY+fiUjGCblITnt3T3fmrDg8yRWu0gOLjhQ==" - }, - "p-queue": { - "version": "7.3.0", - "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-7.3.0.tgz", - "integrity": "sha512-5fP+yVQ0qp0rEfZoDTlP2c3RYBgxvRsw30qO+VtPPc95lyvSG+x6USSh1TuLB4n96IO6I8/oXQGsTgtna4q2nQ==", + "ndarray": { + "version": "1.0.19", + "resolved": "https://registry.npmjs.org/ndarray/-/ndarray-1.0.19.tgz", + "integrity": "sha512-B4JHA4vdyZU30ELBw3g7/p9bZupyew5a7tX1Y/gGeF2hafrPaQZhgrGQfsvgfYbgdFZjYwuEcnaobeM/WMW+HQ==", "requires": { - "eventemitter3": "^4.0.7", - "p-timeout": "^5.0.2" + "iota-array": "^1.0.0", + "is-buffer": "^1.0.2" } }, - "p-timeout": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-5.1.0.tgz", - "integrity": "sha512-auFDyzzzGZZZdHz3BtET9VEz0SE/uMEAx7uWfGPucfzEwwe/xH0iVeZibQmANYE/hp9T2+UUZT5m+BKyrDp3Ew==" + "numcodecs": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/numcodecs/-/numcodecs-0.3.2.tgz", + "integrity": "sha512-6YSPnmZgg0P87jnNhi3s+FVLOcIn3y+1CTIgUulA3IdASzK9fJM87sUFkpyA+be9GibGRaST2wCgkD+6U+fWKw==", + "requires": { + "fflate": "^0.8.0" + } }, "path-parse": { "version": "1.0.7", @@ -1158,6 +1247,11 @@ "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==" }, + "reference-spec-reader": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/reference-spec-reader/-/reference-spec-reader-0.2.0.tgz", + "integrity": "sha512-q0mfCi5yZSSHXpCyxjgQeaORq3tvDsxDyzaadA/5+AbAUwRyRuuTh0aRQuE/vAOt/qzzxidJ5iDeu1cLHaNBlQ==" + }, "require-from-string": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", @@ -1224,6 +1318,14 @@ "integrity": "sha512-em/uxH1xvQZoXTOq81Kk0u9ltjf/EyQkNiKTQJQmdCygDMqyUfMCFzLnbIQ4ApfV4BcRh6eYbwbCeeWTOyfpsg==", "requires": {} }, + "unzipit": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/unzipit/-/unzipit-1.4.3.tgz", + "integrity": "sha512-gsq2PdJIWWGhx5kcdWStvNWit9FVdTewm4SEG7gFskWs+XCVaULt9+BwuoBtJiRE8eo3L1IPAOrbByNLtLtIlg==", + "requires": { + "uzip-module": "^1.0.2" + } + }, "uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -1232,6 +1334,11 @@ "punycode": "^2.1.0" } }, + "uzip-module": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/uzip-module/-/uzip-module-1.0.3.tgz", + "integrity": "sha512-AMqwWZaknLM77G+VPYNZLEruMGWGzyigPK3/Whg99B3S6vGHuqsyl5ZrOv1UUF3paGK1U6PM0cnayioaryg/fA==" + }, "vite": { "version": "2.9.9", "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.9.tgz", @@ -1245,13 +1352,14 @@ "rollup": "^2.59.0" } }, - "zarr": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/zarr/-/zarr-0.6.0.tgz", - "integrity": "sha512-WgGe+aFyK6EmTyZcqJ2OFeFQ9fJFuJqeJgM5sKnbap7HJboaI+rBpDp0rPXSTq5ITu/rLEQjZQ2mPlcfYk7DYA==", + "zarrita": { + "version": "0.4.0-next.15", + "resolved": "https://registry.npmjs.org/zarrita/-/zarrita-0.4.0-next.15.tgz", + "integrity": "sha512-s2ZElXObBqmsTZOkSMuamc1c05pc2Ar+OBlPndFPvzAcnx/G8cQoLe5Yo3mdqwTd7a28Lq/zrTvFc/Qbpj22VA==", "requires": { - "numcodecs": "^0.2.2", - "p-queue": "^7.1.0" + "@zarrita/core": "^0.1.0-next.13", + "@zarrita/indexing": "^0.1.0-next.15", + "@zarrita/storage": "^0.1.0-next.5" } } } diff --git a/package.json b/package.json index f66b677..e88da54 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,9 @@ }, "dependencies": { "ajv": "^8.11.0", + "ndarray": "^1.0.19", "svelte-icons-pack": "^1.4.6", "svelte-simple-modal": "^1.4.1", - "zarr": "^0.6.0" + "zarrita": "^0.4.0-next.15" } } diff --git a/public/ome-main-nav.svg b/public/ome-main-nav.svg new file mode 100644 index 0000000..78c5f52 --- /dev/null +++ b/public/ome-main-nav.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/App.svelte b/src/App.svelte index a62e5dd..b959e10 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -6,7 +6,7 @@ import Modal from "svelte-simple-modal"; import SplashScreen from "./SplashScreen.svelte"; - import { getJson } from "./utils"; + import { getZarrGroupAttrs } from "./utils"; import CheckMark from "./CheckMark.svelte"; const searchParams = new URLSearchParams(window.location.search); @@ -15,14 +15,17 @@ source = source.slice(0, -1); } - let location = window.location.href; - let promise; if (source) { // load JSON to be validated... - console.log("Loading JSON... " + source + "/.zattrs"); - promise = getJson(source + "/.zattrs"); + console.log("Loading JSON... " + source); + promise = getZarrGroupAttrs(source); + } + + function isBioFormats2Raw(data) { + let omeAttrs = data?.attributes?.ome || data; + return omeAttrs["bioformats2raw.layout"] === 3 && !omeAttrs.plate; } @@ -38,7 +41,7 @@ {:then data} <div> - {#if data["bioformats2raw.layout"] === 3 && !data.plate} + {#if isBioFormats2Raw(data)} <Bioformats2rawLayout rootAttrs={data} {source} /> {:else} <JsonValidator rootAttrs={data} {source} /> @@ -74,24 +77,7 @@ width: 100%; flex: 1; padding: 15px 0; - background: #ff512f; /* fallback for old browsers */ - background: -webkit-linear-gradient( - to right, - #f09819, - #ff512f - ); /* Chrome 10-25, Safari 5.1-6 */ - background: linear-gradient( - to right, - #f09819, - #ff512f - ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ - /* https://uigradients.com/ */ - /* OME green->blue rgb(61,132,107), rgb(68,139,200) */ - } - - article { - width: 90%; - margin: auto; + background: white; } section > div { @@ -108,14 +94,6 @@ section > div { flex-direction: row; } - - article { - width: 60%; - margin: auto; - } - a { - white-space: nowrap; - } } .error { diff --git a/src/Bioformats2rawLayout/index.svelte b/src/Bioformats2rawLayout/index.svelte index c31967c..82ab370 100644 --- a/src/Bioformats2rawLayout/index.svelte +++ b/src/Bioformats2rawLayout/index.svelte @@ -1,27 +1,83 @@ <script> - import { getXmlDom, getJson, validate } from "../utils"; + import { + getJson, + getXmlDom, + getZarrGroupAttrs, + validate, + getVersion, + getZarrGroupAttrsFileName, + } from "../utils"; import JsonBrowser from "../JsonBrowser/index.svelte"; import ImageContainer from "../JsonValidator/Well/ImageContainer.svelte"; + import RoCrate from "../JsonValidator/RoCrate/index.svelte"; + import OpenWith from "../JsonValidator/OpenWithViewers/index.svelte"; export let source; export let rootAttrs; const metadataName = "OME/METADATA.ome.xml"; + const version = getVersion(rootAttrs); + console.log("BF2RAW version", version, rootAttrs); + const zarrAttrsFileName = getZarrGroupAttrsFileName(version); + console.log("zarrAttrsFileName", zarrAttrsFileName); + // source/OME/METADATA.ome.xml const metadataUrl = `${source}/${metadataName}`; - async function loadXml(url) { - let dom = await getXmlDom(url); + async function loadXmlOrSeries(url) { + // We can get the series info from /OME/METADATA.ome.xml or + // /OME/zarr.json group attributes + // returns {images: [{name, id}]} or {error: message} + let dom; + try { + dom = await getXmlDom(url); + } catch (error) {} + let xmlRsp; + if (dom) { + xmlRsp = parseXml(dom); + } + // Try to get series info + let rsp = {}; + let series; + try { + let zarrAttrs = await getJson(`${source}/OME/${zarrAttrsFileName}`); + series = zarrAttrs?.attributes?.ome?.series || zarrAttrs.series; + } catch (error) {} + + if (series && xmlRsp && xmlRsp?.images) { + // MUST match if we have both... + if (series.length !== xmlRsp.images.length) { + rsp.errors = [ + `Images length mismatch: series: ${series.length} != ome.xml: ${xmlRsp.images.length}`, + ]; + } + } + if (series) { + rsp.images = series.map((seriesName) => ({ + name: seriesName, + path: seriesName, + })); + } else if (xmlRsp) { + rsp = xmlRsp; + } else { + rsp.errors = ["No OME/METADATA.ome.xml or /OME series found"]; + } + return rsp; + } + + function parseXml(dom) { const root = dom.documentElement; let rsp = { images: [] }; + let index = 0; for (const child of root.children) { console.log(child.tagName); if (child.tagName === "Image") { rsp.images.push({ name: child.getAttribute("Name"), id: child.getAttribute("ID"), + path: "" + index++, }); } // error handling - parsererror gives html doc @@ -35,12 +91,12 @@ } return rsp; } - const promise = loadXml(metadataUrl); + const promise = loadXmlOrSeries(metadataUrl); // wait for schema to be cached, so we don't load them multiple times // let schemasPromise = getSchema("0.2", "image"); async function preloadSchema(imagePath) { - let imgAttrs = await getJson(imagePath + "/.zattrs"); + let imgAttrs = getZarrGroupAttrs(imagePath); console.log("preloadSchema", imgAttrs); let errs = await validate(imgAttrs); return errs; @@ -53,11 +109,7 @@ </script> <article> - Reading: <a href={source}>/{zarrName}/.zattrs</a> - - <div class="json"> - <JsonBrowser name="" version="" contents={rootAttrs} expanded /> - </div> + Reading: <a href={source}/{zarrAttrsFileName}>/{zarrName}/{zarrAttrsFileName}</a> Loading metadata:<a href={metadataUrl}>{metadataName}</a><br /> @@ -65,20 +117,28 @@ <div>loading {metadataUrl}...</div> {:then metadataJson} <!-- Show list of Images --> - <h1>Images</h1> + <h1>{metadataJson.images.length} Images</h1> <ol> {#await preloadSchema(source + "/0")} <div>loading schema...</div> {:then ok} <ul> - {#each metadataJson.images as image, i} + {#each metadataJson.images as image} <li class="image"> - /{i} - <a title="Open Image" href="{url}?source={source}/{i}/" + /{image.path} + <a title="Open Image" href="{url}?source={source}/{image.path}/" >{image.name}</a > - <ImageContainer {source} path={i} /> + <ImageContainer {source} path={image.path} /> + + <a title="Open Image" href="{url}?source={source}/{image.path}/" + >Open in validator</a + > + + <div style="margin-top: 10px"> + <OpenWith source={`${source}/${image.path}`} dtype={"image"} {version} /> + </div> </li> {/each} </ul> @@ -87,10 +147,15 @@ {/await} </ol> + <h3>{zarrName}/{zarrAttrsFileName}</h3> + <div class="json"> + <JsonBrowser name="" version="" contents={rootAttrs} expanded /> + </div> + <!-- Error handling... --> {#if metadataJson.errors} <div class="error"> - <h2>Error parsing {metadataName}</h2> + <h3>Error loading series metadata:</h3> {#each metadataJson.errors as err, i} <div>{err}</div> {/each} @@ -99,16 +164,20 @@ {:catch error} <p style="color: red">{error.message}</p> {/await} + + <!-- for v0.5+ we check for ro-crate-metadata.json --> + {#if !["0.1", "0.2", "0.3", "0.4"].includes(version)} + <RoCrate {source}></RoCrate> + {/if} </article> <style> - h1 { margin-top: 20px; } a, a:visited { - color: #ff512f; + color: var(--omeLinkBlue); } .json { diff --git a/src/JsonBrowser/DetailsPrePanel.svelte b/src/JsonBrowser/DetailsPrePanel.svelte new file mode 100644 index 0000000..b08668b --- /dev/null +++ b/src/JsonBrowser/DetailsPrePanel.svelte @@ -0,0 +1,31 @@ + + +<script> + export let jsonData; + export let summary; +</script> + +<details> + <summary>{summary}</summary> + <pre><code>{JSON.stringify(jsonData, null, 2)}</code></pre> + </details> + + +<style> + +details { + font-size: 1.1em; + text-align: left; + margin: 0 15px; + } + pre { + margin-top: 10px; + color: #faebd7; + background-color: #2c3e50; + padding: 10px; + font-size: 14px; + border-radius: 10px; + overflow: auto; + } + +</style> diff --git a/src/JsonValidator/Labels/LabelsInfoLink.svelte b/src/JsonValidator/Labels/LabelsInfoLink.svelte index 5f882be..f1a76b2 100644 --- a/src/JsonValidator/Labels/LabelsInfoLink.svelte +++ b/src/JsonValidator/Labels/LabelsInfoLink.svelte @@ -1,11 +1,14 @@ <script> export let source; export let labelsAttrs; + export let zarrAttrsFileName; console.log("labelsAttrs:", labelsAttrs); const url = window.location.origin + window.location.pathname; let labelsPaths; if (labelsAttrs.labels) { labelsPaths = labelsAttrs.labels; + } else if (labelsAttrs?.attributes?.ome?.labels) { + labelsPaths = labelsAttrs.attributes.ome.labels; } </script> @@ -19,11 +22,11 @@ {/each} </ul> {:else} - <div style="color:red">labels/.zattrs has no 'labels' list</div> + <div style="color:red">labels/{zarrAttrsFileName} has no 'labels' list</div> {/if} <details> - <summary>labels/.zattrs</summary> + <summary>labels/{zarrAttrsFileName}</summary> <pre><code>{JSON.stringify(labelsAttrs, null, 2)}</code></pre> </details> </div> @@ -49,6 +52,6 @@ } a, a:visited { - color: #ff512f; + color: var(--omeLinkBlue); } - </style> \ No newline at end of file + </style> diff --git a/src/JsonValidator/MultiscaleArrays/Multiscale.svelte b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte index 7ddbeef..b13d6af 100644 --- a/src/JsonValidator/MultiscaleArrays/Multiscale.svelte +++ b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte @@ -1,5 +1,5 @@ <script> - import { getJson } from "../../utils"; + import { getZarrArrayJson } from "../../utils"; import CheckMark from "../../CheckMark.svelte"; export let source; @@ -15,6 +15,11 @@ const permitDtypeMismatch = ["0.1", "0.2", "0.3", "0.4"].includes(version); const checkDimSeparator = ["0.2", "0.3", "0.4"].includes(version); + const allowMissingDimNames = ["0.1", "0.2", "0.3", "0.4"].includes(version); + let successMsg = "dtypes match and shapes are consistent"; + if (!allowMissingDimNames) { + successMsg = "dimension_names checked, " + successMsg; + } function allEqual(items) { return items.every((value) => value == items[0]); @@ -29,14 +34,17 @@ let dimCounts = []; let shapes = []; let dimSeparators = []; + let zarrayJsonList = []; for (let i = 0; i < datasets.length; i++) { let dataset = datasets[i]; - let zarray = await getJson(source + "/" + dataset.path + "/.zarray"); + let zarray = await getZarrArrayJson(source + "/" + dataset.path); + zarrayJsonList.push(zarray); + // Need to handle Zarr v2 and Zarr v3: dimCounts.push(zarray.shape.length); - dtypes.push(zarray.dtype); + dtypes.push(zarray.dtype || zarray.data_type); shapes.push(zarray.shape); - dimSeparators.push(zarray.dimension_separator); + dimSeparators.push(zarray.dimension_separator || zarray.chunk_key_encoding?.configuration?.separator); } // Each check is {msg: "Message"}, with status: "warning" if it isn't an Error. @@ -72,6 +80,24 @@ }); } }); + + if (!allowMissingDimNames) { + let axesNames = JSON.stringify(axes.map(axis => axis.name)); + zarrayJsonList.forEach((arrData, i) => { + let msg; + if (!arrData.dimension_names) { + msg = `No dimension_names found for dataset ${i}`; + } else { + let dimNames = JSON.stringify(arrData.dimension_names); + if (dimNames != axesNames) { + msg = `dimension_names: ${dimNames} don't match axes names: ${axesNames}`; + } + } + if (msg) { + checks.push({msg}); + } + }); + } } if (checkDimSeparator) { dimSeparators.forEach((sep) => { @@ -95,7 +121,7 @@ <!-- only show X if not valid - no tick if valid --> <CheckMark valid={false} /> {:else} - <p title="dtypes match and shapes are consistent"> + <p title="{successMsg}"> {datasets.length} Datasets checked <span style="color:green">✓</span> </p> {/if} diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte index 2fedd11..e486283 100644 --- a/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte +++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte @@ -1,17 +1,22 @@ <script> - import { openArray, slice } from "zarr"; - import { range } from "../../../utils"; + import { range, getChunkAndShardShapes } from "../../../utils"; import { get, writable } from "svelte/store"; import ChunkViewer from "./ChunkViewer.svelte"; + import * as zarr from "zarrita"; + import { slice } from "@zarrita/indexing"; + export let source; export let path; export let zarray; + // zarrita wants /path/to/data.zarr directory + let zarrPath = path.replace("/zarr.json", "").replace("/.zarray", "") + let showChunks = false; let chunk; - const chunks = zarray.chunks; + const [chunks, shards] = getChunkAndShardShapes(zarray); const chunkCounts = zarray.shape.map((sh, index) => Math.ceil(sh / chunks[index]) ); @@ -33,20 +38,26 @@ if (!showChunks) return; // clear previous chunk chunk = undefined; - const store = await openArray({ store: source + "/" + path, mode: "r" }); + + let url = source + "/" + zarrPath; + const store = new zarr.FetchStore(url); + const arr = await zarr.open(store, { kind: "array" }); // we want to get exactly 1 chunk // e.g. chunkIndices is (0, 1, 0, 0) and chunk is (1, 125, 125, 125) // we want to get [0, 125:250, 0:125, 0:125] - let ch = store.meta.chunks; - const indices = get(chunkIndices).map((index, dim) => { + let ch = arr.chunks; + const indices = get(chunkIndices); + let slices = indices.map((index, dim) => { if (ch[dim] > 1) { return slice(index * ch[dim], (index + 1) * ch[dim]); } else { - return index * ch[dim]; + return index; } }); - chunk = await store.get(indices); + // Updating chunk will trigger ChunkViewer to re-render + console.log("loading chunk", slices) + chunk = await zarr.get(arr, slices); } chunkIndices.subscribe(function () { diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkViewer.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkViewer.svelte index ffd4a75..b267035 100644 --- a/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkViewer.svelte +++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkViewer.svelte @@ -1,6 +1,7 @@ <script> import { onMount, afterUpdate } from "svelte"; - import { slice } from "zarr"; + import { slice, get } from "@zarrita/indexing"; + import ndarray from "ndarray"; export let chunk; // e.g. chunkSlice is [1,0,0]... @@ -19,12 +20,11 @@ const shape = chunk2d.shape; const height = shape[0]; const width = shape[1]; - const data = chunk2d.data; let maxV = 0; let minV = Infinity; for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { - let rawValue = data[y][x]; + let rawValue = chunk2d.get(y, x); maxV = Math.max(maxV, rawValue); minV = Math.min(minV, rawValue); } @@ -34,10 +34,18 @@ function sliceArray(ndChunk, toSlice) { let slice2D = [...toSlice]; + slice2D[slice2D.length - 1] = null; + slice2D[slice2D.length - 2] = null; // don't slice last 2 dims - so we get 2D array - slice2D[slice2D.length - 1] = slice(null); - slice2D[slice2D.length - 2] = slice(null); - return ndChunk.get(slice2D); + let nddata = ndarray(ndChunk.data, ndChunk.shape, ndChunk.stride); + + console.log(nddata.shape); + + let data2d = nddata.pick(...slice2D); + console.log('nddata', data2d) + + + return data2d; } export function renderTo8bitArray(ndChunks, minMaxValues) { @@ -60,9 +68,8 @@ for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { for (let p = 0; p < ndChunks.length; p++) { - let data = ndChunks[p].data; let range = minMaxValues[p]; - let rawValue = data[y][x]; + let rawValue = ndChunks[p].get(y, x); let fraction = (rawValue - range[0]) / (range[1] - range[0]); // for red, green, blue, for (let i = 0; i < 3; i++) { @@ -83,6 +90,7 @@ let chunk2d = chunk; if (chunkSlice) { try { + console.log('renderImageToCanvas...', chunk.shape) chunk2d = sliceArray(chunk, chunkSlice); errorMsg = undefined; } catch (error) { @@ -91,6 +99,7 @@ } if (!errorMsg) { let minMax = getMinMaxValues(chunk2d); + console.log('minMax', minMax); minMaxMsg = `Min: ${minMax[0]} Max: ${minMax[1]}`; let rgb = renderTo8bitArray([chunk2d], [minMax]); ctx.putImageData(new ImageData(rgb, width, height), 0, 0); diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte index e30b365..2b1c180 100644 --- a/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte +++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte @@ -1,8 +1,7 @@ <script> + import { getChunkAndShardShapes } from "../../../utils"; export let zarray; - // reference to parent element - let parent; let scrollX = 50; function handleMousemove(event) { // scrollX goes from 20 -> 50. parent is 200px wide @@ -14,20 +13,31 @@ const sizeY = shape[shape.length - 2]; const sizeZ = shape.length < 3 ? 1 : shape[shape.length - 3]; - // Scale 3D so the longest dimension is 200px... - const scale = 200 / Math.max(sizeX, sizeY, sizeZ); + // Scale 3D so the longest dimension is 300px... + const scale = 300 / Math.max(sizeX, sizeY, sizeZ); const scaledX = sizeX * scale; const scaledY = sizeY * scale; const scaledZ = sizeZ * scale; - const minC = 5; - const chunks = zarray.chunks; - const chunkX = Math.max(minC, chunks[chunks.length - 1] * scale); - const chunkY = Math.max(minC, chunks[chunks.length - 2] * scale); - const chunkZ = Math.max(minC, chunks[chunks.length - 3] * scale); + const [chunks, shards] = getChunkAndShardShapes(zarray); + let chunkX = chunks[chunks.length - 1] * scale; + let chunkY = chunks[chunks.length - 2] * scale; + let chunkZ = chunks[chunks.length - 3] * scale; + + let shardX = 100; + let shardY = 100; + let shardZ = 100; + let shardColor = "transparent"; + + if (shards) { + shardX = shards[shards.length - 1] * scale; + shardY = shards[shards.length - 2] * scale; + shardZ = shards[shards.length - 3] * scale; + shardColor = "var(--omeLinkBlue)" + } </script> -<div class="parent" bind:this={parent} on:mousemove={handleMousemove}> +<div class="parent" on:mousemove={handleMousemove}> <div class="container" style=" @@ -37,6 +47,10 @@ --chunkX: {chunkX}px; --chunkY: {chunkY}px; --chunkZ: {chunkZ}px; + --shardX: {shardX}px; + --shardY: {shardY}px; + --shardZ: {shardZ}px; + --shardColor: {shardColor}; --scrollX: {scrollX}deg" > <div class="cube"> @@ -57,7 +71,7 @@ <style> .parent { - width: 200px; + width: 400px; margin: auto; } .container { @@ -84,6 +98,20 @@ width: 100%; height: 100%; background-image: repeating-linear-gradient( + 0deg, + var(--shardColor) 0px, + var(--shardColor) 2px, + transparent 2px, + transparent calc(var(--shardY)) + ), + repeating-linear-gradient( + 90deg, + var(--shardColor) 0px, + var(--shardColor) 2px, + transparent 2px, + transparent calc(var(--shardX)) + ), + repeating-linear-gradient( 0deg, rgba(70, 70, 70, 0.7) 0px, rgba(70, 70, 70, 0.7) 1px, @@ -125,8 +153,22 @@ .top { top: calc((var(--size-y) - var(--size-z)) / 2); height: var(--size-z); - transform: rotateX(90deg) translateZ(calc(var(--size-y) / 2)); + transform: rotateX(270deg) translateZ(calc(var(--size-y)* -1 / 2)); background-image: repeating-linear-gradient( + 0deg, + var(--shardColor) 0px, + var(--shardColor) 2px, + transparent 2px, + transparent calc(var(--shardZ)) + ), + repeating-linear-gradient( + 90deg, + var(--shardColor) 0px, + var(--shardColor) 2px, + transparent 2px, + transparent calc(var(--shardX)) + ), + repeating-linear-gradient( 0deg, rgba(70, 70, 70, 0.7) 0px, rgba(70, 70, 70, 0.7) 1px, @@ -158,6 +200,20 @@ left: calc((var(--size-x) - var(--size-z)) / 2); transform: rotateY(-90deg) translateZ(calc(var(--size-x) / 2)); background-image: repeating-linear-gradient( + 0deg, + var(--shardColor) 0px, + var(--shardColor) 2px, + transparent 2px, + transparent calc(var(--shardY)) + ), + repeating-linear-gradient( + 90deg, + var(--shardColor) 0px, + var(--shardColor) 2px, + transparent 2px, + transparent calc(var(--shardZ)) + ), + repeating-linear-gradient( 0deg, rgba(70, 70, 70, 0.7) 0px, rgba(70, 70, 70, 0.7) 1px, diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte index 2892319..82e32b9 100644 --- a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte +++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte @@ -1,24 +1,47 @@ <script> - import { getJson, formatBytes, range } from "../../../utils"; + import { getJson, formatBytes, getChunkAndShardShapes, getArrayDtype } from "../../../utils"; import Cube3D from "./Cube3D.svelte"; import ChunkLoader from "./ChunkLoader.svelte"; + import DetailsPrePanel from "../../../JsonBrowser/DetailsPrePanel.svelte"; export let source; export let path; - const promise = getJson(source + "/" + path + "/.zarray"); + const promise = getJson(source + "/" + path); function totalChunkCount(zarray) { return chunkCounts(zarray).reduce((prev, curr) => prev * curr, 1); } + function totalShardCount(zarray) { + return shardCounts(zarray).reduce((prev, curr) => prev * curr, 1); + } + function chunkCounts(zarray) { - const ch = zarray.chunks; + const [ch, shards] = getChunkAndShardShapes(zarray); return zarray.shape.map((sh, index) => Math.ceil(sh / ch[index])); } + function shardCounts(zarray) { + const [ch, shards] = getChunkAndShardShapes(zarray); + if (!shards) { + return []; + } + return zarray.shape.map((sh, index) => Math.ceil(sh / shards[index])); + } + function getBytes(shape, zarray) { - let bytesPerPixel = [1, 2, 4, 8].find((n) => zarray.dtype.includes(n)); + // handle v2 and v3 zarr + let dtype = getArrayDtype(zarray); + let bytesPerPixel; + // e.g. v3: uint8, uint16, uint32, uint64, int8, int16, int32 (4), int64 (8), float32 (4), float64 (8) + if (dtype.includes("int") || dtype.includes("float")) { + // use regex to get numbers from dtype + bytesPerPixel = parseInt(dtype.match(/\d+/)[0]) / 8; + } else { + // e.g. v2: >i1, >i2, >i4, >i8, >u1, >u2, >u4, >u8, >f4, >f8 + bytesPerPixel = [1, 2, 4, 8].find((n) => dtype.includes(n)); + } if (!bytesPerPixel) return ""; let pixels = shape.reduce((i, p) => i * p, 1); return formatBytes(bytesPerPixel * pixels); @@ -26,33 +49,40 @@ </script> <div class="array"> - <p>Path <a href="{source + "/" + path + '/.zarray'} ">{path + "/.zarray"}</a></p> + <p>Path <a href="{source + "/" + path} ">{path}</a></p> {#await promise} - <div>loading array .zarray ...</div> + <div>loading array data ...</div> {:then zarray} + {@const shard = getChunkAndShardShapes(zarray)[1]} <table> <tr> - <th /><th>Array</th><th>Chunk</th> + <th /> + <th>Array</th> + <th>Chunk</th> + {#if shard}<th style:border-color="var(--omeLinkBlue)">Shard</th>{/if} </tr> <tr> <th>Bytes</th> <td>{getBytes(zarray.shape, zarray)}</td> - <td>{getBytes(zarray.chunks, zarray)}</td> + <td>{getBytes(getChunkAndShardShapes(zarray)[0], zarray)}</td> + {#if shard}<td>{getBytes(shard, zarray)}</td>{/if} </tr> <tr> <th>Shape</th> <td>{JSON.stringify(zarray.shape)}</td> - <td>{JSON.stringify(zarray.chunks)}</td> + <td>{JSON.stringify(getChunkAndShardShapes(zarray)[0])}</td> + {#if shard}<td>{JSON.stringify(shard)}</td>{/if} </tr> <tr> <th>Counts</th> <td>{chunkCounts(zarray)}</td> <td>{totalChunkCount(zarray)} Chunks</td> + {#if shard}<td>{totalShardCount(zarray)} Shards</td>{/if} </tr> <tr> <th>Type</th> - <td>{zarray.dtype}</td> + <td>{getArrayDtype(zarray)}</td> <td>numpy.ndarray</td> </tr> </table> @@ -61,10 +91,7 @@ <Cube3D {zarray} /> - <details> - <summary>{path}/.zarray</summary> - <pre><code>{JSON.stringify(zarray, null, 2)}</code></pre> - </details> + <DetailsPrePanel jsonData={zarray} summary={path} /> {:catch error} <p style="color: red">{error.message}</p> {/await} @@ -80,13 +107,6 @@ text-align: center; } - pre { - color: #faebd7; - background-color: #2c3e50; - padding: 10px; - font-size: 14px; - } - table { background-color: white; font-size: 14px; @@ -110,20 +130,6 @@ a, a:visited { - color: #ff512f; - } - - details { - font-size: 1.1em; - margin: 0 15px; - text-align: left; - } - pre { - margin-top: 10px; - color: #faebd7; - background-color: #2c3e50; - padding: 10px; - font-size: 14px; - border-radius: 10px; + color: var(--omeLinkBlue); } </style> diff --git a/src/JsonValidator/MultiscaleArrays/index.svelte b/src/JsonValidator/MultiscaleArrays/index.svelte index 1ba56cf..d654097 100644 --- a/src/JsonValidator/MultiscaleArrays/index.svelte +++ b/src/JsonValidator/MultiscaleArrays/index.svelte @@ -1,9 +1,13 @@ <script> import ZarrArray from "./ZarrArray/index.svelte"; import Multiscale from "./Multiscale.svelte"; + import {getVersion, getZarrArrayAttrsFileName} from "../../utils"; export let source; export let rootAttrs; + + const msVersion = getVersion(rootAttrs); + const zarrAttrsFileName = getZarrArrayAttrsFileName(msVersion); </script> {#each rootAttrs.multiscales as multiscale, idx} @@ -11,7 +15,7 @@ <h2>Multiscale {idx}</h2> <Multiscale {source} {multiscale} /> {#each multiscale.datasets as dataset} - <ZarrArray {source} path={dataset.path} /> + <ZarrArray {source} path={dataset.path + "/" + zarrAttrsFileName} /> {/each} </article> {/each} diff --git a/src/JsonValidator/OpenWithViewers/index.svelte b/src/JsonValidator/OpenWithViewers/index.svelte index 02ef655..3655c0d 100644 --- a/src/JsonValidator/OpenWithViewers/index.svelte +++ b/src/JsonValidator/OpenWithViewers/index.svelte @@ -7,6 +7,7 @@ export let source; export let dtype; + export let version; let viewers = viewers_json.viewers.map((viewer_data) => { let href = viewer_data.href; @@ -22,6 +23,11 @@ return {...viewer_data, href, logo_path} }); + if (version == "0.5") { + // TODO: update when other viewers support zarr v3 + viewers = viewers.filter((viewer) => viewer.name == "vizarr"); + } + </script> <div class="openwith"> @@ -86,7 +92,7 @@ a, a:visited { - color: #ff512f; + color: var(--omeLinkBlue); } .viewer_icon { diff --git a/src/JsonValidator/Plate/WellContainer/PlateWell.svelte b/src/JsonValidator/Plate/WellContainer/PlateWell.svelte index 8c64c3c..4822f5e 100644 --- a/src/JsonValidator/Plate/WellContainer/PlateWell.svelte +++ b/src/JsonValidator/Plate/WellContainer/PlateWell.svelte @@ -1,10 +1,14 @@ <script> - import { getJson, validate, getSearchParam, range } from "../../../utils"; + import { getZarrGroupAttrs, validate, getSearchParam, range } from "../../../utils"; export let wellAttrs; export let source; export let path; + let rootAttrs = wellAttrs; + // unwrap attributes.ome if present + wellAttrs = wellAttrs.attributes?.ome || wellAttrs; + const wellToValidate = getSearchParam("well"); let wellIndex = parseInt(wellToValidate); let wellIndices = [0]; @@ -20,21 +24,24 @@ async function loadAndValidate() { let errs = []; + console.log("loadAndValidate wellAttrs", wellAttrs); + const imgs = wellAttrs.well.images; for (let i=0; i < wellIndices.length; i++) { - // this will fail if e.g. any getJson() raises exception + // this will fail if e.g. any getZarrGroupAttrs() raises exception let index = wellIndices[i]; if (index >= imgs.length) { return ["Invalid Well index: " + index]; } loadingIndex = index; - let imgAttrs = await getJson(source + "/" + path + "/" + imgs[index].path + "/.zattrs"); + let imgAttrs = await getZarrGroupAttrs(source + "/" + path + "/" + imgs[index].path); errs = errs.concat(await validate(imgAttrs)); + console.log("PlateWell imgAttrs errs", errs); }; return errs; } - let validatePromise = validate(wellAttrs); + let validatePromise = validate(rootAttrs); let imagePromise = loadAndValidate(); diff --git a/src/JsonValidator/Plate/WellContainer/index.svelte b/src/JsonValidator/Plate/WellContainer/index.svelte index a6f4148..780dd3d 100644 --- a/src/JsonValidator/Plate/WellContainer/index.svelte +++ b/src/JsonValidator/Plate/WellContainer/index.svelte @@ -1,10 +1,10 @@ <script> - import { getJson } from "../../../utils"; + import { getZarrGroupAttrs } from "../../../utils"; import PlateWell from "./PlateWell.svelte"; export let source; export let path; - const promise = getJson(source + "/" + path + "/.zattrs"); + const promise = getZarrGroupAttrs(source + "/" + path); </script> {#await promise} diff --git a/src/JsonValidator/Plate/index.svelte b/src/JsonValidator/Plate/index.svelte index ad25c38..381275d 100644 --- a/src/JsonValidator/Plate/index.svelte +++ b/src/JsonValidator/Plate/index.svelte @@ -1,5 +1,5 @@ <script> - import { CURRENT_VERSION, getVersion, getSchema, getSearchParam, range } from "../../utils"; + import { CURRENT_VERSION, getVersion, getSchema, getSchemaUrl, getSearchParam, range } from "../../utils"; import WellContainer from "./WellContainer/index.svelte"; @@ -30,8 +30,8 @@ // wait for schemas to be cached, so we don't load them multiple times let schemasPromise = Promise.all([ - getSchema(version, "well"), - getSchema(version, "image"), + getSchema(getSchemaUrl("well", version)), + getSchema(getSchemaUrl("image", version)), ]); function handleSelect(event) { diff --git a/src/JsonValidator/RoCrate/RoCrateValidator.svelte b/src/JsonValidator/RoCrate/RoCrateValidator.svelte new file mode 100644 index 0000000..e7762de --- /dev/null +++ b/src/JsonValidator/RoCrate/RoCrateValidator.svelte @@ -0,0 +1,121 @@ + +<script> + import { getJson } from "../../utils"; + + export let jsonData; + + // Try to find various fields in the RO-Crate metadata + let license = jsonData["@graph"].find(item => item["license"])?.license; + let name = jsonData["@graph"].find(item => item["name"])?.name; + let description = jsonData["@graph"].find(item => item["description"])?.description; + + let biosample = jsonData["@graph"].find(item => item["@type"] === "biosample"); + let organismId = biosample?.organism_classification?.["@id"]; + + let image_acquisition = jsonData["@graph"].find(item => item["@type"] === "image_acquisition"); + let fbbiId = image_acquisition?.fbbi_id?.["@id"]; + + let organismName = ""; + let imagingMethod = ""; + + async function lookupOrganism(taxonId) { + // taxonId e.g. 9606 + const orgJson = await getJson(`https://rest.ensembl.org/taxonomy/id/${taxonId}?content-type=application/json`); + organismName = orgJson.name; + } + + async function lookupImagingMethod(fbbiId) { + // fbbiId e.g. FBbi_00000246 + // http://purl.obolibrary.org/obo/FBbi_00000246 + // https://www.ebi.ac.uk/ols4/api/ontologies/fbbi/terms/http%253A%252F%252Fpurl.obolibrary.org%252Fobo%252FFBbi_00000246 + const fbbi_id = fbbiId.replace("obo:", ""); + const methodJson = await getJson(`https://www.ebi.ac.uk/ols4/api/ontologies/fbbi/terms/http%253A%252F%252Fpurl.obolibrary.org%252Fobo%252F${fbbi_id}`); + imagingMethod = methodJson.label; + } + + if (organismId) { + lookupOrganism(organismId.replace("NCBI:txid", "")); + } + if (fbbiId) { + lookupImagingMethod(fbbiId); + } + + const report = [ + {name: "License", value: license, level: "SHOULD"}, + {name: "Name", value: name, level: "SUGGESTED"}, + {name: "Description", value: description, level: "SUGGESTED"}, + ]; + + const warningSymbols = { + SHOULD: "<span title='Missing SHOULD metadata'>❌</span>", // big red X + SUGGESTED: "<span title='Missing SUGGESTED metadata' style='font-size: 20px;'>×</span>", // black X + RECOMMENDED: "", + OK: "<span style='color: green;'>✓</span>", + } + +</script> + + +<ul> + {#each report as {name, value, level}} + <li> + <strong>{name}:</strong> + {#if value} + {@html warningSymbols.OK } + {#if value.startsWith("http")} + <a href={value} target="_blank">{value}</a> + {:else} + {value} + {/if} + {:else} + {@html warningSymbols[level] } Not found + {/if} + </li> + {/each} + <li> + <strong>Organism:</strong> + {#if organismId} + {@html warningSymbols.OK } + <a href="https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?mode=info&id={organismId.replace("NCBI:txid", "")}" target="_blank"> + {organismId} + </a> + {organismName} + + {:else} + {@html warningSymbols.SUGGESTED } Not found + {/if} + </li> + + <li> + <strong>Imaging method:</strong> + {#if fbbiId} + {@html warningSymbols.OK } + <a href="https://ontobee.org/ontology/FBbi?iri=http://purl.obolibrary.org/obo/FBbi_{fbbiId.replace("obo:FBbi_", "")}" target="_blank"> + {fbbiId} + </a> + {imagingMethod} + {:else} + {@html warningSymbols.SUGGESTED } Not found + {/if} + </li> +</ul> + + +<style> + ul { + list-style-type: none; + padding: 0; + text-align: left; + margin: 15px; + } + + li { + margin-bottom: 10px; + } + + .suggested { + color: orange; + font-size: 20px; + } + +</style> diff --git a/src/JsonValidator/RoCrate/index.svelte b/src/JsonValidator/RoCrate/index.svelte new file mode 100644 index 0000000..00fa08f --- /dev/null +++ b/src/JsonValidator/RoCrate/index.svelte @@ -0,0 +1,40 @@ +<script> + import DetailsPrePanel from "../../JsonBrowser/DetailsPrePanel.svelte"; + import { getJson } from "../../utils.js"; + import RoCrateValidator from "./RoCrateValidator.svelte"; + + export let source; + const promise = getJson(source + "/ro-crate-metadata.json"); +</script> + + +<div class="rocrate"> +<h1>RO-Crate metadata</h1> + + + +{#await promise} + <p>Loading ro-crate-metadata.json...</p> +{:then jsonData} + {#if jsonData} + <RoCrateValidator {jsonData} /> + <DetailsPrePanel {jsonData} summary="ro-crate-metadata.json" /> + {/if} +{:catch error} + <p>No ro-crate-metadata.json found</p> +{/await} + +</div> + + +<style> +.rocrate { + /* same as Array panels */ + border-radius: 10px; + padding: 15px 0; + margin: 15px 0; + box-shadow: 5px 5px 10px #c3c0c0; + background: linear-gradient(to right, #ccc, #aaa); + text-align: center; +} +</style> diff --git a/src/JsonValidator/Well/ImageContainer.svelte b/src/JsonValidator/Well/ImageContainer.svelte index dbfbfdd..6bb8ab8 100644 --- a/src/JsonValidator/Well/ImageContainer.svelte +++ b/src/JsonValidator/Well/ImageContainer.svelte @@ -1,5 +1,5 @@ <script> - import { getJson, validate } from "../../utils"; + import { getZarrGroupAttrs, validate } from "../../utils"; export let source; export let path; @@ -7,8 +7,7 @@ // const promise = getJson(source + path + "/.zattrs"); async function loadAndValidate() { - let imgAttrs = await getJson(source + "/" + path + "/.zattrs"); - console.log("imgAttrs", imgAttrs); + let imgAttrs = await getZarrGroupAttrs(source + "/" + path); let errs = await validate(imgAttrs); return errs; } diff --git a/src/JsonValidator/Well/index.svelte b/src/JsonValidator/Well/index.svelte index 44464af..ef5cdd4 100644 --- a/src/JsonValidator/Well/index.svelte +++ b/src/JsonValidator/Well/index.svelte @@ -1,5 +1,5 @@ <script> - import { CURRENT_VERSION, getVersion, getSchema } from "../../utils"; + import { CURRENT_VERSION, getVersion, getSchema, getSchemaUrl } from "../../utils"; import ImageContainer from "./ImageContainer.svelte"; @@ -13,7 +13,7 @@ const version = getVersion(rootAttrs) || CURRENT_VERSION; // wait for schema to be cached, so we don't load them multiple times - let schemasPromise = getSchema(version, "image") + let schemasPromise = getSchema(getSchemaUrl("image", version)) </script> <article> diff --git a/src/JsonValidator/index.svelte b/src/JsonValidator/index.svelte index de70a83..5ac4fd2 100644 --- a/src/JsonValidator/index.svelte +++ b/src/JsonValidator/index.svelte @@ -1,6 +1,7 @@ <script> import MultiscaleArrays from "./MultiscaleArrays/index.svelte"; import Plate from "./Plate/index.svelte"; + import RoCrate from "./RoCrate/index.svelte"; import Well from "./Well/index.svelte" import JsonBrowser from "../JsonBrowser/index.svelte"; import CheckMark from "../CheckMark.svelte"; @@ -14,35 +15,63 @@ getJson, getVersion, getDataType, + getZarrGroupAttrsFileName, } from "../utils"; export let source; export let rootAttrs; - const msVersion = getVersion(rootAttrs); + let versionMessage= ""; + let version = null; + // Initial validation of version + // Top level 'version' is required "MUST" for v0.5+ + if (rootAttrs?.attributes?.ome) { + if (!rootAttrs.attributes.ome.version) { + versionMessage = "Missing 'version' field under attributes.ome."; + } else { + version = rootAttrs.attributes.ome.version; + versionMessage = `Using version ${version}.`; + } + } else { + // version for older versions can be nested under "multiscales" or "plate" or "well" + version = getVersion(rootAttrs); + if (!version) { + versionMessage = "No version found. Using version 0.4."; + version = "0.4"; + } else { + versionMessage = `Using version ${version}.`; + } + } + + + // v0.5+ unwrap the attrs under "ome" + const omeAttrs = rootAttrs?.attributes?.ome || rootAttrs; - const dtype = getDataType(rootAttrs); - const schemaUrls = getSchemaUrlsForJson(rootAttrs); + + const dtype = getDataType(omeAttrs); + const schemaUrls = getSchemaUrlsForJson(omeAttrs); + console.log("index.svelte schemaUrls", schemaUrls) const promise = validate(rootAttrs); const dirs = source.split("/").filter(Boolean); const zarrName = dirs[dirs.length - 1]; // check for labels/.zattrs - const labelsPromise = getJson(source + '/labels/.zattrs'); + const zarrAttrsFileName = getZarrGroupAttrsFileName(version); + const labelsPromise = getJson(source + '/labels/' + zarrAttrsFileName); </script> <article> <p> - Validating: <a href={source}>/{zarrName}/.zattrs</a> + Validating: <a href={source}/{zarrAttrsFileName}>/{zarrName}/{zarrAttrsFileName}</a> </p> - {#if !msVersion}No version found. Using {CURRENT_VERSION}<br />{/if} + {versionMessage} Using schema{schemaUrls.length > 1 ? "s" : ""}: {#each schemaUrls as url, i} {i > 0 ? " and " : ""} - <a href={url} target="_blank">{url.split("main")[1]}</a> + <a href={url} target="_blank">{url.split("ngff")[1]}</a> {/each} {#await promise} @@ -62,33 +91,38 @@ <p style="color: red">{error.message}</p> {/await} - <OpenWith {source} {dtype} /> + <OpenWith {source} {dtype} {version} /> <div class="json"> - <JsonBrowser name="" version={msVersion || CURRENT_VERSION} contents={rootAttrs} expanded /> + <JsonBrowser name="" version={version || CURRENT_VERSION} contents={rootAttrs} expanded /> </div> + <!-- for v0.5+ we check for ro-crate-metadata.json --> + {#if !["0.1", "0.2", "0.3", "0.4"].includes(version)} + <RoCrate {source}></RoCrate> + {/if} + {#await labelsPromise} <p>checking for labels...</p> {:then labelsAttrs} - <LabelsInfoLink {labelsAttrs} source={source}></LabelsInfoLink> + <LabelsInfoLink {labelsAttrs} source={source} {zarrAttrsFileName}></LabelsInfoLink> {:catch error} <!-- <p>No table data</p> --> {/await} </article> -{#if rootAttrs.multiscales} - <MultiscaleArrays {source} {rootAttrs} /> -{:else if rootAttrs.plate} - <Plate {source} {rootAttrs} /> -{:else if rootAttrs.well} - <Well {source} {rootAttrs} /> +{#if omeAttrs.multiscales} + <MultiscaleArrays {source} rootAttrs={omeAttrs} /> +{:else if omeAttrs.plate} + <Plate {source} rootAttrs={omeAttrs} /> +{:else if omeAttrs.well} + <Well {source} rootAttrs={omeAttrs} /> {/if} <style> a, a:visited { - color: #ff512f; + color: var(--omeLinkBlue); } .json { text-align: left; diff --git a/src/Nav.svelte b/src/Nav.svelte index aa36f2d..d6d5e9d 100644 --- a/src/Nav.svelte +++ b/src/Nav.svelte @@ -3,9 +3,17 @@ import AboutDialog from "./Dialogs/AboutDialog.svelte"; const { open } = getContext("simple-modal"); const showAbout = () => open(AboutDialog); + import omelogo from "/ome-main-nav.svg" </script> -<h1>OME-NGFF Validator</h1> + +<div class="navLeft"> + + <img style="height: 30px" alt="OME Logo" src="{omelogo}"/> + + <h1>NGFF Validator</h1> + +</div> <ul> <li> @@ -14,6 +22,13 @@ </ul> <style> + .navLeft { + display: flex; + flex-direction: row; + align-items: center; + margin-left: 15px; + } + h1 { color: white; font-weight: 300; diff --git a/src/utils.js b/src/utils.js index 1008304..d352d6d 100644 --- a/src/utils.js +++ b/src/utils.js @@ -2,14 +2,19 @@ import Ajv from "ajv"; -export const CURRENT_VERSION = "0.4"; +export const CURRENT_VERSION = "0.5"; +export const FILE_NOT_FOUND = "File not found"; -const ajv = new Ajv({ strict: false }); // options can be passed, e.g. {allErrors: true} export function getSchemaUrl(schemaName, version) { + if (version == "0.5" || version == "0.5-dev2") { + // TEMP: use our branch based on Norman's spec-rfc2 PR at https://github.com/ome/ngff/pull/242 + return `https://raw.githubusercontent.com/ome/ngff/spec-rfc2/latest/schemas/${schemaName}.schema`; + } return `https://raw.githubusercontent.com/ome/ngff/main/${version}/schemas/${schemaName}.schema`; } + // fetch() doesn't error for 404 etc. async function fetchHandleError(url) { let msg = `Error Loading ${url}:`; @@ -18,7 +23,13 @@ async function fetchHandleError(url) { rsp = await fetch(url).then(function (response) { if (!response.ok) { // make the promise be rejected if we didn't get a 2xx response - msg += ` ${response.statusText}`; + // NB. statusText could be "Not Found" or "File not found" depending on server + // Standardise based on response.status + if (response.status == 404) { + msg += ` ${FILE_NOT_FOUND}`; + } else { + msg += ` ${response.statusText}`; + } } else { return response; } @@ -44,6 +55,58 @@ async function fetchHandleError(url) { throw Error(msg); } +export function getZarrGroupAttrsFileName(ngffVersion) { + if (["0.1", "0.2", "0.3", "0.4"].includes(ngffVersion)) { + return ".zattrs"; + } + return "zarr.json"; +} + +export function getZarrArrayAttrsFileName(ngffVersion) { + if (["0.1", "0.2", "0.3", "0.4"].includes(ngffVersion)) { + return ".zarray"; + } + return "zarr.json"; +} + +export async function getZarrGroupAttrs(zarr_dir) { + let groupAttrs = await getZarrJson(zarr_dir, ".zattrs"); + return groupAttrs; +} + +export async function getZarrArrayJson(zarr_dir) { + return getZarrJson(zarr_dir, ".zarray"); +} + +async function getZarrJson(zarr_dir, alternative=".zattrs") { + let zarrJson; + let msg; + // try to load v2 /.zattrs or v3 /zarr.json + try { + zarrJson = await getJson(zarr_dir + "/zarr.json"); + } catch (error) { + console.log("getZarrJson", error) + if (!error.message.includes(FILE_NOT_FOUND)) { + throw error; + } + // IF we got a 404 then try other URL + try { + zarrJson = await getJson(zarr_dir + `/${alternative}`); + } catch (err2) { + if (err2.message.includes(FILE_NOT_FOUND)) { + throw Error(`No ${alternative} or zarr.json at ${zarr_dir}: ${FILE_NOT_FOUND}`); + } else { + // First error was 404 but this isn't... + throw err2; + } + } + + } + if (zarrJson) { + return zarrJson; + } +} + export async function getJson(url) { return fetchHandleError(url).then((rsp) => rsp.json()); } @@ -63,32 +126,47 @@ export async function getText(url) { let schemas = {}; -export async function getSchema(version, schemaName = "image") { - let cacheKey = schemaName + version; - if (!schemas[cacheKey]) { - const schema_url = getSchemaUrl(schemaName, version); - console.log("Loading schema... " + schema_url); - try { - const schema = await getJson(schema_url); - // delete to avoid invalid: $schema: "https://json-schema.org/draft/2020-12/schema" not found - delete schema["$schema"]; - schemas[cacheKey] = schema; - } catch (error) { - throw new Error(`No schema at ${schema_url}. Version ${version} may be invalid.`); - } +export async function getSchema(schemaUrl) { + if (!schemas[schemaUrl]) { + console.log("Loading schema... " + schemaUrl); + const schema = await getJson(schemaUrl); + // delete to avoid invalid: $schema: "https://json-schema.org/draft/2020-12/schema" not found + delete schema["$schema"]; + schemas[schemaUrl] = schema; } - return schemas[cacheKey]; + return schemas[schemaUrl]; } -export function getVersion(jsonData) { - let version = jsonData.multiscales - ? jsonData.multiscales[0].version - : jsonData.plate - ? jsonData.plate.version - : jsonData.well - ? jsonData.well.version +export function getVersion(ngffData) { + // if we have attributes.ome then this is version 0.5+ + if (ngffData.attributes?.ome) { + if (ngffData.attributes.ome.version) { + return ngffData.attributes.ome.version; + } else { + throw Error("No version found in attributes.ome"); + } + } + + // Used if we have our 'attributes' at the root + if (ngffData.ome?.version) { + return ngffData.ome.version; + } + if (ngffData.version) { + return ngffData.version; + } + // Handle version 0.4 and earlier + let version = ngffData.multiscales + ? ngffData.multiscales[0].version + : ngffData.plate + ? ngffData.plate.version + : ngffData.well + ? ngffData.well.version : undefined; - return version; + console.log("version", version); + // for 0.4 and earlier, version wasn't MUST and we defaulted + // to using v0.4 for validation. To preserve that behaviour + // return "0.4" if no version found. + return version || "0.4"; } export function toTitleCase(text) { @@ -109,32 +187,39 @@ export function getSchemaName(jsonData) { return names[0]; } -export function getSchemaNames(jsonData) { +export function getSchemaNames(ngffData) { let names = []; - if (jsonData.multiscales) { + if (ngffData.multiscales) { names.push("image"); } - if (jsonData.plate) { + if (ngffData.plate) { names.push("plate"); } - if (jsonData.well) { + if (ngffData.well) { names.push("well"); } - if (jsonData["image-label"]) { + if (ngffData["image-label"]) { names.push("label"); } return names; } export function getSchemaUrlsForJson(rootAttrs) { - const msVersion = getVersion(rootAttrs); + console.log('getSchemaUrlsForJson rootAttrs', rootAttrs) + // v0.5+ unwrap the attrs under "attributes.ome" + let omeAttrs = rootAttrs?.attributes?.ome || rootAttrs; + + const msVersion = getVersion(omeAttrs); const version = msVersion || CURRENT_VERSION; - const schemaNames = getSchemaNames(rootAttrs); + const schemaNames = getSchemaNames(omeAttrs); return schemaNames.map(name => getSchemaUrl(name, version)); } -export function validateData(schema, jsonData) { - const validate = ajv.compile(schema); +export function validateData(schema, jsonData, extraSchemas) { + // call ajv.addSchema(schema) for each schema + const ajv = new Ajv({ strict: false }); // options can be passed, e.g. {allErrors: true} + let withSchema = extraSchemas.reduce((prev, curr) => prev.addSchema(curr), ajv); + const validate = withSchema.compile(schema); const valid = validate(jsonData); let errors = []; if (!valid) { @@ -146,25 +231,54 @@ export function validateData(schema, jsonData) { export async function validate(jsonData) { // get version, lookup schema, do validation... - const schemaNames = getSchemaNames(jsonData); + // v0.5+ unwrap the attrs under "attributes.ome" + let omeAttrs = jsonData?.attributes?.ome || jsonData; - if (schemaNames.length == 0) { - return ["Unrecognised JSON data"]; + let version = getVersion(omeAttrs); + // v0.5+ (with attributes.ome) MUST have top-level version + if (jsonData?.attributes?.ome) { + if (!jsonData.attributes.ome.version) { + return ["No version found under attributes.ome"]; + } + } else if (!version) { + // default to last version pre 0.5 rules. + version = "0.4"; } + + console.log("validate VERSION", version, jsonData); - let version = getVersion(jsonData); + const schemaUrls = getSchemaUrlsForJson(jsonData); + + if (schemaUrls.length == 0) { + return ["No schemas found. Unrecognised JSON data"]; + } if (!version) { console.log("No version found, using: " + CURRENT_VERSION); version = CURRENT_VERSION; } + let refSchemas = []; + // TODO: need to know whether to load other schemas... + // For now, we can use version check... + if (version === "0.5") { + const versionSchema = await getSchema(getSchemaUrl("_version", version)); + // const schemaSchema = await getSchema(getSchemaUrl("_schema_url", version)); + refSchemas = [versionSchema]; + // For version 0.5+, we validate the "attributes" content. + // If no "attributes" exist, then it will be assumed this is v0.4 data (see above) + jsonData = jsonData.attributes; + } let errors = []; - for (let s=0; s<schemaNames.length; s++) { - let schema = await getSchema(version, schemaNames[s]); - let errs = validateData(schema, jsonData); + for (let s=0; s<schemaUrls.length; s++) { + let schema = await getSchema(schemaUrls[s]); + let errs = validateData(schema, jsonData, refSchemas); errors = errors.concat(errs); } + + if (errors.length > 0) { + console.log("Validation errors", errors, jsonData); + } return errors; } @@ -175,6 +289,29 @@ export function formatBytes(bytes) { return (bytes / Math.pow(1000, i)).toFixed(2) + " " + sizes[i]; } +export function getChunkAndShardShapes(zarray) { + // Returns [chunkShape, shardShape]. shardShape may be undefined + // For zarr v2 we just have chunks: + if (zarray.chunks) { + return [zarray.chunks, undefined] + } + // For zarr v3 we check for sharding + // Based on https://github.com/zarr-developers/zarr-specs/blob/main/docs/v3/codecs/sharding-indexed/v1.0.rst#configuration-parameters + const chunk_shape = zarray.chunk_grid?.configuration?.chunk_shape; + let sharding_codecs = zarray.codecs?.filter(codec => codec.name == "sharding_indexed"); + const sub_chunks = sharding_codecs?.[0]?.configuration?.chunk_shape; + // if we have sharding, a 'chunk' is the sub-chunk of a shard + if (sub_chunks) { + return [sub_chunks, chunk_shape] + } else { + return [chunk_shape, undefined]; + } +} + +export function getArrayDtype(zarray) { + return zarray.dtype || zarray.data_type; +} + export function getSearchParam(key) { const searchParams = new URLSearchParams(window.location.search); let value = searchParams.get(key); diff --git a/vite.config.js b/vite.config.js index abb051d..a11c4c3 100644 --- a/vite.config.js +++ b/vite.config.js @@ -2,7 +2,17 @@ import { defineConfig } from 'vite' import { svelte } from '@sveltejs/vite-plugin-svelte' let config = { - plugins: [svelte()] + plugins: [svelte()], + + // https://stackoverflow.com/questions/75576741/how-to-solve-error-big-integer-literals-are-not-available-in-the-configured-tar + build: { + target: 'esnext', // you can also use 'es2020' here + }, + optimizeDeps: { + esbuildOptions: { + target: 'esnext', // you can also use 'es2020' here + }, + }, }; // this will be undefined when deployed from netlify, but is used by gh-pages if (process.env.GITHUB_REPOSITORY_OWNER) {