Select patient/study/series using a dynamic form

Author: Alexis Girault

examples/Dicom/dist/index.html

@@ -14,6 +14,24 @@
       <input name="inputFile" type="file" multiple>
     </div>
 
+    <!-- Serie selector -->
+    <form name="dicomForm" id="dicomForm">
+      Patient:
+      <select id="patientSelect" size="1">
+        <option value="" selected="selected">Select patient</option>
+      </select>
+      <br>
+      Study:
+      <select id="studySelect" size="1">
+        <option value="" selected="selected">Please select patient first</option>
+      </select>
+      <br>
+      Serie:
+      <select id="serieSelect" size="1">
+        <option value="" selected="selected">Please select study first</option>
+      </select>
+    </form>
+
     <!-- File information -->
     <textarea readonly name="fileInformation">File information...</textarea>
 

examples/Dicom/dist/styles.css

@@ -5,11 +5,6 @@ html, body {
 textarea {
   resize: none;
   overflow-y: scroll;
-  position: absolute;
-  box-sizing: border-box;
   width: 100%;
-  height: 80%;
-  bottom: 0px;
-  left: 0px;
-  top: 50px;
+  height: 100%;
 }

examples/Dicom/src/dicomForm.js

@@ -0,0 +1,55 @@
+
+function setupDicomForm(patientDict, callback) {
+  const patientSelect = document.getElementById("patientSelect")
+  const studySelect = document.getElementById("studySelect")
+  const serieSelect = document.getElementById("serieSelect")
+
+  patientSelect.length = 1; // remove all options bar first
+  const patients = Array.from(patientDict.values())
+  patientDict.forEach((patient) => {
+    const value = patient.name + " - " + patient.dateOfBirth
+    patientSelect.options[patientSelect.options.length] = new Option(value, value);
+  })
+
+  patientSelect.onchange = function () {
+    studySelect.length = 1; // remove all options bar first
+    serieSelect.length = 1; // remove all options bar first
+    if (this.selectedIndex < 1) return; // done
+    const patientId = this.selectedIndex - 1
+    const patient = patients[patientId]
+    patient.studyDict.forEach((study) => {
+      const value = study.description + " - " + study.date
+      studySelect.options[studySelect.options.length] = new Option(value, value);
+    })
+  }
+  patientSelect.onchange(); // reset in case page is reloaded
+
+  studySelect.onchange = function () {
+    serieSelect.length = 1; // remove all options bar first
+    if (this.selectedIndex < 1) return; // done
+    const patientId = patientSelect.selectedIndex - 1
+    const patient = patients[patientId]
+    const studies = Array.from(patient.studyDict.values())
+    const studyId = this.selectedIndex - 1
+    const study = studies[studyId]
+    study.serieDict.forEach((serie) => {
+      const value = serie.description + " - " + serie.modality
+      serieSelect.options[serieSelect.options.length] = new Option(value, value);
+    })
+  }
+
+  serieSelect.onchange = function () {
+    if (this.selectedIndex < 1) return; // done
+    const patientId = patientSelect.selectedIndex - 1
+    const patient = patients[patientId]
+    const studies = Array.from(patient.studyDict.values())
+    const studyId = studySelect.selectedIndex - 1
+    const study = studies[studyId]
+    const series = Array.from(study.serieDict.values())
+    const serieId = this.selectedIndex - 1
+    const serie = series[serieId]
+    callback(serie.files)
+  }
+}
+
+export default setupDicomForm;

examples/Dicom/src/index.js

@@ -2,6 +2,8 @@ import readImageDICOMFileSeries from 'itk/readImageDICOMFileSeries'
 import PromiseFileReader from 'promise-file-reader'
 import curry from 'curry'
 import dicomParser from 'dicom-parser'
+
+import setupDicomForm from './dicomForm'
 import "regenerator-runtime/runtime";
 
 const parseDICOMFiles = async (fileList) => {
@@ -221,7 +223,7 @@ class DICOMSerie {
 }
 
 const outputFileInformation = curry(async function outputFileInformation (outputTextArea, event) {
-  outputTextArea.textContent = "Loading..."
+  outputTextArea.textContent = "Parsing..."
 
   // Get files
   const dataTransfer = event.dataTransfer
@@ -231,23 +233,23 @@ const outputFileInformation = curry(async function outputFileInformation (output
   const patientDict = await parseDICOMFiles(files)
 
   // Select DICOM serie
-  const patient = patientDict.values().next().value
-  const study = patient.studyDict.values().next().value
-  const serie = study.serieDict.values().next().value
-
-  // Read DICOM serie
-  const { image, webWorker } = await readImageDICOMFileSeries(null, serie.files)
-  console.log(image)
-  webWorker.terminate()
-
-  // Display
-  function replacer (key, value) {
-    if (!!value && value.byteLength !== undefined) {
-      return String(value.slice(0, 6)) + '...'
-    }
-    return value
-  }
-  outputTextArea.textContent = JSON.stringify(image, replacer, 4)
+  outputTextArea.textContent = "Please select serie..."
+  setupDicomForm(patientDict, async (files) => {
+    outputTextArea.textContent = "Loading..."
+
+    // Read DICOM serie
+    const { image, webWorker } = await readImageDICOMFileSeries(null, files)
+    webWorker.terminate()
+
+    // Display
+    function replacer (key, value) {
+      if (!!value && value.byteLength !== undefined) {
+        return String(value.slice(0, 6)) + '...'
+      }
+      return value
+    }
+    outputTextArea.textContent = JSON.stringify(image, replacer, 4)
+  })
 })
 
 export { outputFileInformation }