Add a web browser dose viewer gui to EGSnrc

HEN_HOUSE/gui/dose-viewer/.gitignore

@@ -0,0 +1,6 @@
+# ignore local data
+data/
+assets/
+
+# ignore hidden system files
+.DS_Store

HEN_HOUSE/gui/dose-viewer/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore Javascript files (they are formatted with JS Standard)
+*.js
+*.mjs

HEN_HOUSE/gui/dose-viewer/.prettierrc.json

@@ -0,0 +1 @@
+

HEN_HOUSE/gui/dose-viewer/README.md

@@ -0,0 +1,34 @@
+# Dose Viewer
+
+Dose viewer is a (WIP) web-based visualization tool for EGSnrc phantom and dose
+files. To use, either upload .3ddose and .egsphant files or use the test files
+available. If two or more dose files are uploaded, they can be compared in the
+viewer. Dose contours can be added with the input box in the dose legend.
+Contours can be toggled on and off by clicking the corresponding colour block in
+the legend. Voxel information can be viewed by selecting the checkbox to show
+voxel data and selecting a point in any of the three plots. Dose profiles can be
+viewed by selecting the checkbox to plot dose profiles and choosing a point on
+the plot to investigate.
+
+## Usage
+
+To run this webpage locally:
+
+1.  Clone the repo
+2.  Using the command line, `cd` into the dose-viewer folder
+3.  If you have Python 3, start a local server using the command
+
+         python -m http.server
+
+    If you have Python 2, use the command
+
+         python -m SimpleHTTPServer
+
+4.  If the command is successful, it should give you a link (e.g.
+    http://0.0.0.0:8000/) which you can paste into your browser to view the web page
+
+## Acknowledgements
+
+This project is a collaboration between Elise Badun and Magdalena
+Bazalova-Carter of the University of Victoria, and Frederic Tessier, Reid
+Townson, and Ernesto Mainegra-Hing of the NRC.

HEN_HOUSE/gui/dose-viewer/cache-worker.mjs

@@ -0,0 +1,144 @@
+/* global addEventListener */
+/* global close */
+/* global d3 */
+/* global importScripts */
+/* global postMessage */
+/* global removeEventListener */
+
+if (typeof importScripts === 'function') {
+  importScripts('https://d3js.org/d3-color.v2.min.js')
+  importScripts('https://d3js.org/d3-scale.v3.min.js')
+  importScripts('https://d3js.org/d3-interpolate.v2.min.js')
+  importScripts('https://d3js.org/d3-scale-chromatic.v2.min.js')
+  addEventListener('message', handleMessage)
+}
+
+function handleMessage (e) {
+  // Process position to get centre voxel position rather than boundaries
+  var position = e.data.voxArr
+  position = position.map((val, i) => {
+    return val + (e.data.voxArr[i + 1] - val) / 2
+  })
+  position.pop()
+
+  // Get the function to get colour
+  const colourFn = getColourFunction(e.data.minVal, e.data.maxVal)
+
+  // TODO: Modify getSlice to take sliceNum instead of pos!
+  // Get and cache image for each slice in axis
+  const promiseImgCache = position.map((slicePos) => {
+    const slice = getSlice(e.data.data, e.data.dimensions, e.data.axis, slicePos, 'density')
+    return getDataArray(slice, colourFn)
+  })
+
+  Promise.all(promiseImgCache).then(imgCache => {
+    postMessage(imgCache)
+    removeEventListener('message', handleMessage)
+    close()
+  })
+}
+
+/**
+ * Create the function to return the pixel colour of each pixel value
+ *
+ * @param {number} minVal The minimum density value
+ * @param {number} maxVal The maximum density value
+ * @returns {getColourFunction~colourFn}
+ */
+function getColourFunction (minVal, maxVal) {
+  return d3.scaleSqrt().domain([minVal, maxVal]).range([0, 255])
+}
+
+/**
+ * Returns the data image of the slice
+ *
+ * @param {Object} slice The slice of the density data.
+ * @returns {number[]}
+ */
+function getDataArray (slice, colourFn) {
+  // Create the image data
+  var imageData = new Uint8ClampedArray(slice.xVoxels * slice.yVoxels * 4)
+  var j = 0
+  for (let i = 0; i < slice.sliceData.length; i++) {
+    const val = colourFn(slice.sliceData[i])
+
+    if (val !== null) {
+      // Modify pixel data
+      imageData[j++] = val // R value
+      imageData[j++] = val // G value
+      imageData[j++] = val // B value
+      imageData[j++] = 255 // A value
+    }
+  }
+
+  return imageData
+}
+
+/**
+ * Get a slice of data through an axis.
+ *
+ * @param {string} axis The axis of the slice (xy, yz, or xz).
+ * @param {number} sliceNum The number of the slice.
+ * @param {string} dataName The type of data, either "density" or "dose".
+ * @returns {Object}
+ */
+function getSlice (data, dimensions, axis, slicePos, dataName) {
+  // TODO: Cache previous slices
+  // TODO: Only redefine slice attributes on axis change
+  // For slice structure
+  // /~https://github.com/nrc-cnrc/EGSnrc/blob/master/HEN_HOUSE/omega/progs/dosxyz_show/dosxyz_show.c#L1502-L1546
+
+  // Get the axes and slice dimensions
+  const [dim1, dim2, dim3] =
+    axis === 'xy'
+      ? ['x', 'y', 'z']
+      : axis === 'yz'
+        ? ['y', 'z', 'x']
+        : ['x', 'z', 'y']
+
+  const xVoxels = data.voxelNumber[dim1]
+  const yVoxels = data.voxelNumber[dim2]
+
+  //  Find zScale to get sliceNum from slicePos
+  const z = data.voxelArr[dim3]
+  const totalSlices = data.voxelNumber[dim3] - 1
+  const zDomain = [z[0], z[z.length - 1]]
+  const zRange = [0, totalSlices]
+  const zScale = (val) => (
+    zRange[0] + (zRange[1] - zRange[0]) * ((val - zDomain[0]) / (zDomain[1] - zDomain[0]))
+  )
+  const sliceNum = Math.round(zScale(slicePos))
+
+  // Get the slice data for the given axis and index
+  // For address calculations:
+  // /~https://github.com/nrc-cnrc/EGSnrc/blob/master/HEN_HOUSE/omega/progs/dosxyz_show/dosxyz_show.c#L1999-L2034
+  const sliceData = new Array(xVoxels * yVoxels)
+
+  for (let i = 0; i < xVoxels; i++) {
+    for (let j = 0; j < yVoxels; j++) {
+      let address
+      if (axis === 'xy') {
+        address = i + xVoxels * (j + sliceNum * yVoxels)
+      } else if (axis === 'yz') {
+        address =
+          sliceNum + data.voxelNumber.x * (i + j * xVoxels)
+      } else if (axis === 'xz') {
+        address =
+          i + xVoxels * (sliceNum + j * data.voxelNumber.y)
+      }
+      const newAddress = i + xVoxels * j
+      sliceData[newAddress] = data[dataName][address]
+    }
+  }
+
+  const slice = {
+    xVoxels: xVoxels,
+    yVoxels: yVoxels,
+    slicePos: slicePos,
+    sliceData: sliceData,
+    sliceNum: sliceNum,
+    axis: axis
+  }
+
+  return slice
+}