cornerstone: display NIfTI and dicom image previews

Author: kousu

package.json

@@ -7,6 +7,11 @@
     "node": ">= 14.0.0"
   },
   "dependencies": {
+    "cornerstone-core": "^2.6.1",
+    "cornerstone-tools": "^6.0.8",
+    "@cornerstonejs/nifti-image-loader": "^1.0.7",
+    "cornerstone-wado-image-loader": "^4.3.0",
+    "dicom-parser": "^1.8.19",
     "@citation-js/core": "0.6.5",
     "@citation-js/plugin-bibtex": "0.6.5",
     "@citation-js/plugin-csl": "0.6.5",

routers/web/repo/view.go

@@ -597,6 +597,10 @@ func renderFile(ctx *context.Context, entry *git.TreeEntry, treeLink, rawLink st
 	case fInfo.st.IsImage() && (setting.UI.SVG.Enabled || !fInfo.st.IsSvgImage()):
 		ctx.Data["IsImageFile"] = true
 		ctx.Data["CanCopyContent"] = true
+	case strings.HasSuffix(strings.ToLower(blob.Name()), ".nii") || strings.HasSuffix(strings.ToLower(blob.Name()), ".nii.gz"):
+		ctx.Data["IsNIfTI"] = true
+	case strings.HasSuffix(strings.ToLower(blob.Name()), ".dcm") || strings.HasSuffix(strings.ToLower(blob.Name()), ".dicom"):
+		ctx.Data["IsDICOM"] = true
 	default:
 		if fInfo.fileSize >= setting.UI.MaxDisplayFileSize {
 			ctx.Data["IsFileTooLarge"] = true

templates/repo/view_file.tmpl

@@ -80,6 +80,10 @@
 						</audio>
 					{{else if .IsPDFFile}}
 						<iframe width="100%" height="600px" src="{{AssetUrlPrefix}}/vendor/plugins/pdfjs/web/viewer.html?file={{$.RawFileLink}}"></iframe>
+					{{else if .IsNIfTI}}
+						<div class="cornerstone-viewport" style="width: 100%; height: 600px" data-src="nifti:{{$.RawFileLink}}"></div>
+					{{else if .IsDICOM}}
+						<div class="cornerstone-viewport" style="width: 100%; height: 600px" data-src="wadouri:{{$.RawFileLink}}"></div>
 					{{else}}
 						<a href="{{$.RawFileLink}}" rel="nofollow" class="btn btn-gray btn-radius">{{.locale.Tr "repo.file_view_raw"}}</a>
 					{{end}}

web_src/js/features/cornerstone.js

@@ -0,0 +1,53 @@
+/* CornerstoneJS is a renderer and UI toolkit meant for
+ * medical image formats: .nii, .dcm, and some others.
+ *
+ * To use: create an element like
+ *
+ * <div class='.cornerstone-viewport' data-src='nifti:/path/to/file.nii.gz' style='width: 100%; height 500px'></div>
+ *
+ * and file.nii.gz will load when the page loads.
+ *
+ * Swap out 'nifti' for 'wadouri:' if using a DICOM file.
+ *
+ *
+ * **NOTE**: this is written using the _legacy_ cornerstone library,
+ *           cornerstone-core, and is *not* compatible with the rewrite
+ *           @cornerstonejs/core because @cornerstonejs/nifti-image-loader
+ *           isn't: https://github.com/cornerstonejs/cornerstone-nifti-image-loader/issues/48#issuecomment-1271794397
+ *           and rendering NIfTIs is the main reason this is here at all.
+ */
+
+export async function initCornerstone() {
+    if (!document.querySelector('.cornerstone-viewport')) return;
+
+    const cornerstone = await import( /* webpackChunkName: "cornerstone-core" */ 'cornerstone-core');
+    const dicomParser = await import( /* webpackChunkName: "dicom-parser" */ 'dicom-parser');
+    const cornerstoneWADOImageLoader = await import( /* webpackChunkName: "cornerstone-wado-image-loader" */ 'cornerstone-wado-image-loader');
+    const cornerstoneNIFTIImageLoader = await import( /* webpackChunkName: "@cornerstonejs/nifti-image-loader" */ '@cornerstonejs/nifti-image-loader');
+
+    // why are these necessary? too much abstraction, that's why.
+    cornerstoneWADOImageLoader.external.dicomParser = dicomParser
+    cornerstoneWADOImageLoader.external.cornerstone = cornerstone
+    cornerstoneNIFTIImageLoader.external.cornerstone = cornerstone
+
+    document.querySelectorAll('.cornerstone-viewport').forEach(function (canvas) {
+        if (canvas.dataset.src === undefined) {
+            return
+        }
+        cornerstone.enable(canvas)
+
+        console.info('Loading', canvas.dataset.src, 'into CornerstoneJS')
+        cornerstone
+            .loadAndCacheImage(canvas.dataset.src)
+            .then((image) => {
+                console.debug(image)
+
+                const viewport = cornerstone.getDefaultViewportForImage(canvas, image)
+                cornerstone.displayImage(canvas, image, viewport)
+            })
+            .catch((err) => {
+                console.error(err)
+            })
+    })
+
+}

web_src/js/index.js

@@ -87,6 +87,7 @@ import {initCommonOrganization} from './features/common-organization.js';
 import {initRepoWikiForm} from './features/repo-wiki.js';
 import {initRepoCommentForm, initRepository} from './features/repo-legacy.js';
 import {initFormattingReplacements} from './features/formatting.js';
+import {initCornerstone} from './features/cornerstone.js';
 import {initCopyContent} from './features/copycontent.js';
 import {initCaptcha} from './features/captcha.js';
 import {initRepositoryActionView} from './components/RepoActionView.vue';
@@ -191,6 +192,7 @@ $(document).ready(() => {
 
   initCommitStatuses();
   initCaptcha();
+  initCornerstone();
 
   initUserAuthLinkAccountView();
   initUserAuthOauth2();