.

static/js/anatomy.js

@@ -0,0 +1,451 @@
+import * as dicomViewer from "./dicomViewer.js"
+
+window.marked_answers = {
+  "correct": [],
+  "half-correct": [],
+  "incorrect": [],
+}
+
+window.control_pressed = false;
+
+
+$(document).ready(function () {
+  $(".answer-list li").each(function (index, element) {
+    $(element).append($("<span class='google-link' title='search for answer with google'><a href='https://www.google.com/search?q=" + $(element).text() + "' target='_blank'>G</a></span>"));
+  });
+
+  $(".answer-list span.answer").each(function (index, element) {
+    console.log(element);
+
+    $(element).click(function (e) {
+
+      var classes = ['answer correct', 'answer half-correct', 'answer incorrect'];
+      $(element).each(function () {
+        this.className = classes[($.inArray(this.className, classes) + 1) % classes.length];
+      });
+
+      prepAnswerData();
+
+
+
+    });
+  });
+  prepAnswerData();
+
+  if ($(".post-form").length > 0) {
+    $(".post-form").get(0).addEventListener("submit", function (e) {
+      if ($(".not-marked").length > 0 && e.submitter.name != "skip") {
+        e.preventDefault(); // before the code
+        alert("Ensure all answers are marked first");
+      }
+
+    });
+  }
+
+  let dicom_images = document.getElementsByClassName("dicom-image");
+  if (dicom_images.length) {
+
+    for (let element of dicom_images) {
+      setUpDicom(element)
+    }
+
+  }
+
+
+  loadDicomViewer();
+
+  if ($("#question-mark-list").length) {
+    $(".show-all-button").click(() => {
+      $("#question-mark-list li").show();
+    });
+    $(".show-unmarked-button").click(() => {
+      console.log("TESTIG");
+      $("#question-mark-list li").each((n, el) => {
+        console.log(el);
+        if (el.dataset.markcount < 1) { $(el).hide(); }
+      })
+    });
+
+  }
+
+  $(document).keydown(keyDownHandler);
+  $(document).keyup(keyUpHandler);
+
+  $("#button-select-add-exam").click(function (evt) {
+    // Find selected objects
+
+
+
+    var jqxhr = $.get(evt.target.dataset.exam_list_url, function (data) {
+      console.log(data);
+      $("#exam-options").empty();
+      data.forEach((obj, n) => {
+        $("#exam-options").append($(document.createElement('button')).prop({
+          type: 'button',
+          innerHTML: obj.name,
+          class: '',
+
+        }).data("exam-id", obj.id).click((evt) => { addToExam(evt) }))
+      })
+    })
+      .done(function () {
+        //alert( "second success" );
+      })
+      .fail(function () {
+        //alert( "error" );
+      })
+      .always(function () {
+        //alert( "finished" );
+      });
+
+    return;
+
+
+    function addToExam(evt) {
+
+      let ids = []
+      $("table input:checked").each((n, el) => {
+        ids.push(el.value)
+      })
+
+      // if no question selected 
+      if (ids.length < 1) { 
+          toastr.info('No question selected.');
+          return
+      }
+      let post_url = document.getElementById("button-select-add-exam").dataset.exam_json_edit_url;
+      let type = document.getElementById("button-select-add-exam").dataset.type;
+      let csrf = document.getElementById("button-select-add-exam").dataset.csrf;
+      $.ajax({
+        url: post_url,
+        data: {
+          csrfmiddlewaretoken: csrf,
+          add_exam_questions: JSON.stringify(ids),
+          type: type,
+          exam_id: $(evt.target).data("exam-id"),
+        },
+        type: "POST",
+        dataType: "json",
+      })
+        // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
+        .done(function (data) {
+          console.log(data);
+
+          if (data.status == "success") {
+            toastr.info('Questions added to exams.')
+          }
+        })
+        .always(function () {
+          console.log('[Done]');
+          $("#exam-options").empty();
+        })
+    }
+  });
+
+
+});
+
+window.loadDicomViewerEvent = new Event('loadDicomViewer');
+window.addEventListener('loadDicomViewer', function (e) {
+  //console.log("listen", e.detail)
+  let images = [];
+  //console.log($("#image_form_set img"));
+  $(e.detail).each((n, el) => {
+    images.push($(el).attr("src"));
+  });
+  //console.log("listen2", images)
+  loadDicomViewer(images);
+}, false);
+
+function loadDicomViewer(images_to_load) {
+  console.log("loadDicomViewer", images_to_load);
+  let single_dicom = document.getElementById("single-dicom-viewer");
+  if (single_dicom) {
+
+    let images = single_dicom.dataset.images;
+
+    if (images_to_load != undefined) {
+      images = images_to_load;
+      console.log("i1", images)
+    } else if (images.indexOf(",") > 0) {
+      images = images.split(",");
+    }
+
+    console.log(images);
+
+    let annotations = single_dicom.dataset.annotations;
+    if (annotations != undefined && annotations.indexOf(",") > 0) {
+      annotations = annotations;
+    }
+    let load_as_stack;
+    if (images.length > 5) {
+      load_as_stack = true;
+    } else {
+      load_as_stack = false;
+    }
+
+    if (images) {
+      dicomViewer.loadCornerstone($(single_dicom), null, images, annotations, load_as_stack);
+    }
+  }
+}
+
+function prepAnswerData() {
+  //$("#id_correct").val($("li.correct").map(function() {
+  //    ans = $(this).text();
+  //    window.marked_answers["correct"].push(ans);
+  //    return ans
+  //}).get().join('--//--'));
+  //$("#id_half_correct").val($("li.half-correct").map(function() {
+  //    ans = $(this).text();
+  //    window.marked_answers["half-correct"].push(ans);
+  //    return ans;
+  //}).get().join('--//--'));
+  //$("#id_incorrect").val($("li.incorrect").map(function() {
+  //    ans = $(this).text();
+  //    window.marked_answers["incorrect"].push(ans);
+  //    return ans;
+  //}).get().join('--//--'));
+
+  window.marked_answers["correct"] = [];
+  window.marked_answers["half-correct"] = [];
+  window.marked_answers["incorrect"] = [];
+  $("li span.correct").map(function () {
+    let ans = $(this).text();
+    window.marked_answers["correct"].push(ans);
+  })
+  $("li span.half-correct").map(function () {
+    let ans = $(this).text();
+    window.marked_answers["half-correct"].push(ans);
+  })
+  $("li span.incorrect").map(function () {
+    let ans = $(this).text();
+    window.marked_answers["incorrect"].push(ans);
+  })
+  $("#id_marked_answers").val(JSON.stringify(window.marked_answers));
+}
+
+function loadJsonToolStateOnCurrentImage(json) {
+  let el = document.getElementById("dicom-image");
+
+  const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
+
+  const c = cornerstone.getEnabledElement(el);
+
+  let image_id = c.image.imageId;
+
+  let tool_state_no_id = JSON.parse(json);
+
+  let tool_state = {};
+  tool_state[image_id] = tool_state_no_id;
+
+  toolStateManager.restoreToolState(tool_state);
+
+  cornerstone.reset(el);
+
+  return tool_state;
+
+
+}
+
+function setUpDicom(element) {
+
+  console.log("Dicom element found ", $(element));
+
+  $(element).bind('contextmenu', function (e) {
+    return false;
+  });
+
+  $(element).dblclick((evt) => {
+    element.requestFullscreen();
+  })
+
+  cornerstoneBase64ImageLoader.external.cornerstone = cornerstone;
+  cornerstoneWebImageLoader.external.cornerstone = cornerstone;
+  cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
+
+  cornerstoneTools.init();
+  const PanTool = cornerstoneTools.PanTool;
+  const ZoomTool = cornerstoneTools.ZoomTool;
+  const ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool;
+  const WwwcTool = cornerstoneTools.WwwcTool;
+  const WwwcRegionTool = cornerstoneTools.WwwcRegionTool;
+  const RotateTool = cornerstoneTools.RotateTool;
+  const StackScrollTool = cornerstoneTools.StackScrollTool;
+  const MagnifyTool = cornerstoneTools.MagnifyTool;
+  const ArrowAnnotateTool = cornerstoneTools.ArrowAnnotateTool;
+
+
+  const imageIds = element.dataset.url.split(",");
+
+  console.log("Dicom - load imageId: ", imageIds);
+
+  cornerstone.enable(element);
+  cornerstone.loadAndCacheImage(imageIds[0]).then(function (image) {
+    cornerstone.displayImage(element, image);
+
+    cornerstoneTools.addTool(PanTool);
+    cornerstoneTools.addTool(ZoomTool);
+    cornerstoneTools.addTool(ZoomMouseWheelTool);
+    cornerstoneTools.addTool(WwwcTool);
+    cornerstoneTools.addTool(WwwcRegionTool);
+    cornerstoneTools.addTool(RotateTool);
+    cornerstoneTools.addTool(StackScrollTool);
+    cornerstoneTools.addTool(MagnifyTool);
+
+    cornerstoneTools.addTool(ArrowAnnotateTool, {
+      configuration: {
+        getTextCallback: () => { },
+        changeTextCallback: () => { },
+        allowEmptyLabel: true,
+        renderDashed: false,
+        drawHandles: false,
+        drawHandlesOnHover: true,
+      },
+    });
+
+
+
+    // Enable our tools
+    // Avoid incorrect aspect ratio
+    cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
+    cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 2 });
+    cornerstoneTools.setToolActive("ZoomMouseWheel", { mouseButtonMask: 3 });
+    cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 4 });
+
+    if (element.dataset.edit_annotation == "true") {
+      cornerstoneTools.setToolActive("ArrowAnnotate", { mouseButtonMask: 2 });
+    } else {
+      cornerstoneTools.setToolEnabled("ArrowAnnotate");
+    }
+
+    if (element.dataset.annotations) {
+      loadJsonToolStateOnCurrentImage(element.dataset.annotations)
+    }
+
+    cornerstone.resize(element);
+
+
+  });
+
+}
+
+function keyUpHandler(e) {
+  if (e.key == "Control") {
+    dicomViewer.registerPrimaryDicomInterface(e);
+    window.control_pressed = false;
+  }
+}
+
+function keyDownHandler(e) {
+  // Ignore our custom keybindings if we are currently in a field that
+  // accepts some kind of input
+  if ($("*:focus:not(disabled)").is("textarea, input")) {
+    // unless a modifier key is pressed (not shift)
+    if (e.altKey ? true : false || e.ctrlKey ? true : false) {
+    } else {
+      return;
+    }
+  }
+
+  if (e.key == "Control") {
+    if (window.control_pressed == false) {
+      window.control_pressed = true;
+      dicomViewer.registerAltDicomInterface(e);
+    }
+  }
+
+  var charCode = typeof e.which == "number" ? e.which : e.keyCode;
+  console.log(e, charCode);
+
+  function numberKeyPressed(e, x) {
+    if (e.altKey ? true : false) {
+      dicomViewer.selectThumb(x);
+      e.preventDefault();
+    } else {
+    }
+  }
+
+  switch (charCode) {
+    case 13: // Return
+      if (e.shiftKey ? true : false) {
+        //$(".next-button:last").click();
+      } else {
+        //$(".check-button:last").click();
+      }
+      break;
+    case 32: // Space
+      if (e.shiftKey ? true : false) {
+        //$(".previous-button:last").click();
+      } else {
+        //$(".next-button:last").click();
+      }
+      e.preventDefault(); // Needed to stop the default action (scroll)
+      break;
+    case 46: // .
+      //toggleFlagged();
+      break;
+
+    // Numbers 1-9 select the corresponding answer (if it exists)
+    // TODO: fix for multi question questions
+    case 49: // 1
+      numberKeyPressed(e, 0);
+      break;
+    case 50: // 2
+      numberKeyPressed(e, 1);
+      break;
+    case 51: // 3
+      numberKeyPressed(e, 2);
+      break;
+    case 52: // 4
+      numberKeyPressed(e, 3);
+      break;
+    case 53: // 5
+      numberKeyPressed(e, 4);
+      break;
+    case 54: // 6
+      numberKeyPressed(e, 5);
+      break;
+    case 55: // 7
+      numberKeyPressed(e, 6);
+      break;
+    case 56: // 8
+      numberKeyPressed(e, 7);
+      break;
+    case 57: // 9
+      numberKeyPressed(e, 8);
+      break;
+    case 72: // H
+      previousQuestion();
+      break;
+    case 76: // L
+      //nextQuestion();
+      break;
+
+    case 102: // f
+      //$("#filter-toggle").click();
+      break;
+    case 103: // g
+      //$("#options").slideDown("slow");
+      //$("#goto-question-input").focus();
+      //e.preventDefault();
+      break;
+
+    // Vim like scrolling (incredibly important)
+    case 106: // j
+      //window.scrollBy(0, 25);
+      break;
+    case 107: // k
+      //window.scrollBy(0, -25);
+      break;
+  }
+}
+
+
+function create_popup_window(url, title) {
+  newwindow = window.open(url, title, 'height=800,width=600');
+  if (window.focus) { newwindow.focus() }
+  return false;
+}
+
+window.create_popup_window = create_popup_window

static/js/cornerstone-base64-image-loader.es5.js

@@ -0,0 +1,242 @@
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+var _defaultOptions = {
+    channel: 4,
+    width: null,
+    height: null,
+    schema: 'base64://'
+};
+
+var CornerstoneBase64ImageLoader = /** @class */ (function () {
+    function CornerstoneBase64ImageLoader(cornerstone, options) {
+        if (options === void 0) { options = _defaultOptions; }
+        this._cornerstone = cornerstone;
+        this._options = options;
+        this._lastImageIdDrawn = null;
+        this._UPNG = null;
+        this._canvas = document.createElement('canvas');
+        this.arrayBufferToImage = this.arrayBufferToImage.bind(this);
+        this.getArrayBuffer = this.getArrayBuffer.bind(this);
+        this.decodeBase64 = this.decodeBase64.bind(this);
+        this.createImage = this.createImage.bind(this);
+        this.imageLoader = this.imageLoader.bind(this);
+        this.replaceImage = this.replaceImage.bind(this);
+    }
+    CornerstoneBase64ImageLoader.prototype.arrayBufferToImage = function (arrayBuffer) {
+        return new Promise(function (resolve, reject) {
+            var image = new Image();
+            var arrayBufferView = new Uint8Array(arrayBuffer);
+            var blob = new Blob([arrayBufferView]);
+            var urlCreator = window.URL || window.webkitURL;
+            var imageUrl = urlCreator.createObjectURL(blob);
+            image.src = imageUrl;
+            image.onload = function () {
+                urlCreator.revokeObjectURL(imageUrl);
+                resolve(image);
+            };
+            image.onerror = function (error) {
+                urlCreator.revokeObjectURL(imageUrl);
+                reject(error);
+            };
+        });
+    };
+    CornerstoneBase64ImageLoader.prototype.getArrayBuffer = function (str) {
+        var buf = new ArrayBuffer(str.length);
+        var bufView = new Uint8Array(buf);
+        Array.from(str).map(function (ch, idx) {
+            bufView[idx] = ch.charCodeAt(0);
+            return ch;
+        });
+        return bufView;
+    };
+    CornerstoneBase64ImageLoader.prototype.decodeBase64 = function (base64PixelData) {
+        var pixelDataAsString = window.atob(base64PixelData);
+        var arrayBuffer = this.getArrayBuffer(pixelDataAsString);
+        return arrayBuffer;
+    };
+    CornerstoneBase64ImageLoader.prototype.createImage = function (image, imageId) {
+        var _this = this;
+        var rows = image.naturalHeight;
+        var columns = image.naturalWidth;
+        var getImageData = function () {
+            var context;
+            if (_this._lastImageIdDrawn === imageId) {
+                context = _this._canvas.getContext('2d');
+            }
+            else {
+                _this._canvas.height = image.naturalHeight;
+                _this._canvas.width = image.naturalWidth;
+                context = _this._canvas.getContext('2d');
+                context.drawImage(image, 0, 0);
+                _this._lastImageIdDrawn = imageId;
+            }
+            return context.getImageData(0, 0, image.naturalWidth, image.naturalHeight);
+        };
+        var getPixelData = function () {
+            var imageData = getImageData();
+            return imageData.data;
+        };
+        var getCanvas = function () {
+            if (_this._lastImageIdDrawn === imageId) {
+                return _this._canvas;
+            }
+            _this._canvas.height = image.naturalHeight;
+            _this._canvas.width = image.naturalWidth;
+            var context = _this._canvas.getContext('2d');
+            context.drawImage(image, 0, 0);
+            _this._lastImageIdDrawn = imageId;
+            return _this._canvas;
+        };
+        var setLastImageIdDrawn = function (nextLastImageIdDrawn) {
+            if (nextLastImageIdDrawn === void 0) { nextLastImageIdDrawn = null; }
+            _this._lastImageIdDrawn = nextLastImageIdDrawn;
+        };
+        return {
+            imageId: imageId,
+            minPixelValue: 0,
+            maxPixelValue: 255,
+            slope: 1,
+            intercept: 0,
+            windowCenter: 128,
+            windowWidth: 255,
+            render: this.cornerstone.renderWebImage,
+            getPixelData: getPixelData,
+            getCanvas: getCanvas,
+            getImage: function () { return image; },
+            setLastImageIdDrawn: setLastImageIdDrawn,
+            rows: rows,
+            columns: columns,
+            height: rows,
+            width: columns,
+            color: true,
+            rgba: false,
+            columnPixelSpacing: null,
+            rowPixelSpacing: null,
+            invert: false,
+            sizeInBytes: rows * columns * this._options.channel
+        };
+    };
+    CornerstoneBase64ImageLoader.prototype.imageLoader = function (imageId) {
+        var _this = this;
+        // const schema = imageId.split('://')[0]
+        var base64PixelData = imageId.replace(this._options.schema, '');
+        var arrayBuffer;
+        if (this._options.width && this._options.height && this._UPNG) {
+            var columns = this._options.width;
+            var rows = this._options.height;
+            arrayBuffer = new Uint8Array(columns * rows * this._options.channel);
+            arrayBuffer = this._UPNG.encode([arrayBuffer.buffer], columns, rows, 0);
+        }
+        else {
+            arrayBuffer = this.decodeBase64(base64PixelData);
+        }
+        var imagePromise = this.arrayBufferToImage(arrayBuffer);
+        var promise = new Promise(function (resolve, reject) {
+            imagePromise.then(function (image) {
+                var imageObject = _this.createImage(image, imageId);
+                resolve(imageObject);
+            }, reject);
+        });
+        return {
+            promise: promise
+        };
+    };
+    CornerstoneBase64ImageLoader.prototype.replaceImage = function (layer, arrayBuffer) {
+        var _this = this;
+        if (!this._UPNG) {
+            return null;
+        }
+        var png = this._UPNG.encode([arrayBuffer.buffer], layer.image.columns, layer.image.rows, 0);
+        var imagePromise = this.arrayBufferToImage(png);
+        return imagePromise.then(function (image) {
+            layer.image = _this.createImage(image, layer.image.imageId);
+        });
+    };
+    Object.defineProperty(CornerstoneBase64ImageLoader.prototype, "options", {
+        get: function () {
+            return __assign({}, this._options);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CornerstoneBase64ImageLoader.prototype, "cornerstone", {
+        get: function () {
+            return this._cornerstone;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CornerstoneBase64ImageLoader.prototype, "UPNG", {
+        get: function () {
+            return this._UPNG;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    CornerstoneBase64ImageLoader.prototype.setUPNG = function (UPNG) {
+        this._UPNG = UPNG;
+    };
+    CornerstoneBase64ImageLoader.prototype.registerLoaders = function () {
+        this.cornerstone.registerImageLoader('base64', this.imageLoader);
+    };
+    return CornerstoneBase64ImageLoader;
+}());
+
+var _imageLoader;
+var _options = __assign({}, _defaultOptions);
+var cornerstoneBase64ImageLoader = {
+    external: {
+        set cornerstone(cs) {
+            _imageLoader = new CornerstoneBase64ImageLoader(cs, _options);
+            _imageLoader.registerLoaders();
+        },
+        get cornerstone() {
+            return _imageLoader.cornerstone;
+        },
+        get UPNG() {
+            return _imageLoader.UPNG;
+        },
+        set UPNG(_UPNG) {
+            _imageLoader.setUPNG(_UPNG);
+        }
+    },
+    initOptions: function () {
+        _options = __assign({}, _defaultOptions);
+    },
+    set options(newOptions) {
+        _options = __assign({}, _options, newOptions);
+    },
+    get options() {
+        return __assign({}, _options);
+    },
+    get imageLoader() {
+        return _imageLoader;
+    }
+};
+
+export default cornerstoneBase64ImageLoader;
+//# sourceMappingURL=cornerstone-base64-image-loader.es5.js.map

static/js/cornerstone-base64-image-loader.umd.js

@@ -0,0 +1,250 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global.cornerstoneBase64ImageLoader = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    var _defaultOptions = {
+        channel: 4,
+        width: null,
+        height: null,
+        schema: 'base64://'
+    };
+
+    var CornerstoneBase64ImageLoader = /** @class */ (function () {
+        function CornerstoneBase64ImageLoader(cornerstone, options) {
+            if (options === void 0) { options = _defaultOptions; }
+            this._cornerstone = cornerstone;
+            this._options = options;
+            this._lastImageIdDrawn = null;
+            this._UPNG = null;
+            this._canvas = document.createElement('canvas');
+            this.arrayBufferToImage = this.arrayBufferToImage.bind(this);
+            this.getArrayBuffer = this.getArrayBuffer.bind(this);
+            this.decodeBase64 = this.decodeBase64.bind(this);
+            this.createImage = this.createImage.bind(this);
+            this.imageLoader = this.imageLoader.bind(this);
+            this.replaceImage = this.replaceImage.bind(this);
+        }
+        CornerstoneBase64ImageLoader.prototype.arrayBufferToImage = function (arrayBuffer) {
+            return new Promise(function (resolve, reject) {
+                var image = new Image();
+                var arrayBufferView = new Uint8Array(arrayBuffer);
+                var blob = new Blob([arrayBufferView]);
+                var urlCreator = window.URL || window.webkitURL;
+                var imageUrl = urlCreator.createObjectURL(blob);
+                image.src = imageUrl;
+                image.onload = function () {
+                    urlCreator.revokeObjectURL(imageUrl);
+                    resolve(image);
+                };
+                image.onerror = function (error) {
+                    urlCreator.revokeObjectURL(imageUrl);
+                    reject(error);
+                };
+            });
+        };
+        CornerstoneBase64ImageLoader.prototype.getArrayBuffer = function (str) {
+            var buf = new ArrayBuffer(str.length);
+            var bufView = new Uint8Array(buf);
+            Array.from(str).map(function (ch, idx) {
+                bufView[idx] = ch.charCodeAt(0);
+                return ch;
+            });
+            return bufView;
+        };
+        CornerstoneBase64ImageLoader.prototype.decodeBase64 = function (base64PixelData) {
+            var pixelDataAsString = window.atob(base64PixelData);
+            var arrayBuffer = this.getArrayBuffer(pixelDataAsString);
+            return arrayBuffer;
+        };
+        CornerstoneBase64ImageLoader.prototype.createImage = function (image, imageId) {
+            var _this = this;
+            var rows = image.naturalHeight;
+            var columns = image.naturalWidth;
+            var getImageData = function () {
+                var context;
+                if (_this._lastImageIdDrawn === imageId) {
+                    context = _this._canvas.getContext('2d');
+                }
+                else {
+                    _this._canvas.height = image.naturalHeight;
+                    _this._canvas.width = image.naturalWidth;
+                    context = _this._canvas.getContext('2d');
+                    context.drawImage(image, 0, 0);
+                    _this._lastImageIdDrawn = imageId;
+                }
+                return context.getImageData(0, 0, image.naturalWidth, image.naturalHeight);
+            };
+            var getPixelData = function () {
+                var imageData = getImageData();
+                return imageData.data;
+            };
+            var getCanvas = function () {
+                if (_this._lastImageIdDrawn === imageId) {
+                    return _this._canvas;
+                }
+                _this._canvas.height = image.naturalHeight;
+                _this._canvas.width = image.naturalWidth;
+                var context = _this._canvas.getContext('2d');
+                context.drawImage(image, 0, 0);
+                _this._lastImageIdDrawn = imageId;
+                return _this._canvas;
+            };
+            var setLastImageIdDrawn = function (nextLastImageIdDrawn) {
+                if (nextLastImageIdDrawn === void 0) { nextLastImageIdDrawn = null; }
+                _this._lastImageIdDrawn = nextLastImageIdDrawn;
+            };
+            return {
+                imageId: imageId,
+                minPixelValue: 0,
+                maxPixelValue: 255,
+                slope: 1,
+                intercept: 0,
+                windowCenter: 128,
+                windowWidth: 255,
+                render: this.cornerstone.renderWebImage,
+                getPixelData: getPixelData,
+                getCanvas: getCanvas,
+                getImage: function () { return image; },
+                setLastImageIdDrawn: setLastImageIdDrawn,
+                rows: rows,
+                columns: columns,
+                height: rows,
+                width: columns,
+                color: true,
+                rgba: false,
+                columnPixelSpacing: null,
+                rowPixelSpacing: null,
+                invert: false,
+                sizeInBytes: rows * columns * this._options.channel
+            };
+        };
+        CornerstoneBase64ImageLoader.prototype.imageLoader = function (imageId) {
+            var _this = this;
+            // const schema = imageId.split('://')[0]
+            var base64PixelData = imageId.replace(this._options.schema, '');
+            var arrayBuffer;
+            if (this._options.width && this._options.height && this._UPNG) {
+                var columns = this._options.width;
+                var rows = this._options.height;
+                arrayBuffer = new Uint8Array(columns * rows * this._options.channel);
+                arrayBuffer = this._UPNG.encode([arrayBuffer.buffer], columns, rows, 0);
+            }
+            else {
+                arrayBuffer = this.decodeBase64(base64PixelData);
+            }
+            var imagePromise = this.arrayBufferToImage(arrayBuffer);
+            var promise = new Promise(function (resolve, reject) {
+                imagePromise.then(function (image) {
+                    var imageObject = _this.createImage(image, imageId);
+                    resolve(imageObject);
+                }, reject);
+            });
+            return {
+                promise: promise
+            };
+        };
+        CornerstoneBase64ImageLoader.prototype.replaceImage = function (layer, arrayBuffer) {
+            var _this = this;
+            if (!this._UPNG) {
+                return null;
+            }
+            var png = this._UPNG.encode([arrayBuffer.buffer], layer.image.columns, layer.image.rows, 0);
+            var imagePromise = this.arrayBufferToImage(png);
+            return imagePromise.then(function (image) {
+                layer.image = _this.createImage(image, layer.image.imageId);
+            });
+        };
+        Object.defineProperty(CornerstoneBase64ImageLoader.prototype, "options", {
+            get: function () {
+                return __assign({}, this._options);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CornerstoneBase64ImageLoader.prototype, "cornerstone", {
+            get: function () {
+                return this._cornerstone;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CornerstoneBase64ImageLoader.prototype, "UPNG", {
+            get: function () {
+                return this._UPNG;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        CornerstoneBase64ImageLoader.prototype.setUPNG = function (UPNG) {
+            this._UPNG = UPNG;
+        };
+        CornerstoneBase64ImageLoader.prototype.registerLoaders = function () {
+            this.cornerstone.registerImageLoader('base64', this.imageLoader);
+        };
+        return CornerstoneBase64ImageLoader;
+    }());
+
+    var _imageLoader;
+    var _options = __assign({}, _defaultOptions);
+    var cornerstoneBase64ImageLoader = {
+        external: {
+            set cornerstone(cs) {
+                _imageLoader = new CornerstoneBase64ImageLoader(cs, _options);
+                _imageLoader.registerLoaders();
+            },
+            get cornerstone() {
+                return _imageLoader.cornerstone;
+            },
+            get UPNG() {
+                return _imageLoader.UPNG;
+            },
+            set UPNG(_UPNG) {
+                _imageLoader.setUPNG(_UPNG);
+            }
+        },
+        initOptions: function () {
+            _options = __assign({}, _defaultOptions);
+        },
+        set options(newOptions) {
+            _options = __assign({}, _options, newOptions);
+        },
+        get options() {
+            return __assign({}, _options);
+        },
+        get imageLoader() {
+            return _imageLoader;
+        }
+    };
+
+    return cornerstoneBase64ImageLoader;
+
+})));
+//# sourceMappingURL=cornerstone-base64-image-loader.umd.js.map

static/js/cornerstone.min.css

@@ -0,0 +1 @@
+/*! cornerstone - v0.9.0 - 2016-02-03 | (c) 2014 Chris Hafey | https://github.com/chafey/cornerstone */.cornerstone-enabled-image{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}

static/js/cornerstone/cornerstone-base64-image-loader.umd.js

@@ -0,0 +1,250 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global.cornerstoneBase64ImageLoader = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    var _defaultOptions = {
+        channel: 4,
+        width: null,
+        height: null,
+        schema: 'base64://'
+    };
+
+    var CornerstoneBase64ImageLoader = /** @class */ (function () {
+        function CornerstoneBase64ImageLoader(cornerstone, options) {
+            if (options === void 0) { options = _defaultOptions; }
+            this._cornerstone = cornerstone;
+            this._options = options;
+            this._lastImageIdDrawn = null;
+            this._UPNG = null;
+            this._canvas = document.createElement('canvas');
+            this.arrayBufferToImage = this.arrayBufferToImage.bind(this);
+            this.getArrayBuffer = this.getArrayBuffer.bind(this);
+            this.decodeBase64 = this.decodeBase64.bind(this);
+            this.createImage = this.createImage.bind(this);
+            this.imageLoader = this.imageLoader.bind(this);
+            this.replaceImage = this.replaceImage.bind(this);
+        }
+        CornerstoneBase64ImageLoader.prototype.arrayBufferToImage = function (arrayBuffer) {
+            return new Promise(function (resolve, reject) {
+                var image = new Image();
+                var arrayBufferView = new Uint8Array(arrayBuffer);
+                var blob = new Blob([arrayBufferView]);
+                var urlCreator = window.URL || window.webkitURL;
+                var imageUrl = urlCreator.createObjectURL(blob);
+                image.src = imageUrl;
+                image.onload = function () {
+                    urlCreator.revokeObjectURL(imageUrl);
+                    resolve(image);
+                };
+                image.onerror = function (error) {
+                    urlCreator.revokeObjectURL(imageUrl);
+                    reject(error);
+                };
+            });
+        };
+        CornerstoneBase64ImageLoader.prototype.getArrayBuffer = function (str) {
+            var buf = new ArrayBuffer(str.length);
+            var bufView = new Uint8Array(buf);
+            Array.from(str).map(function (ch, idx) {
+                bufView[idx] = ch.charCodeAt(0);
+                return ch;
+            });
+            return bufView;
+        };
+        CornerstoneBase64ImageLoader.prototype.decodeBase64 = function (base64PixelData) {
+            var pixelDataAsString = window.atob(base64PixelData);
+            var arrayBuffer = this.getArrayBuffer(pixelDataAsString);
+            return arrayBuffer;
+        };
+        CornerstoneBase64ImageLoader.prototype.createImage = function (image, imageId) {
+            var _this = this;
+            var rows = image.naturalHeight;
+            var columns = image.naturalWidth;
+            var getImageData = function () {
+                var context;
+                if (_this._lastImageIdDrawn === imageId) {
+                    context = _this._canvas.getContext('2d');
+                }
+                else {
+                    _this._canvas.height = image.naturalHeight;
+                    _this._canvas.width = image.naturalWidth;
+                    context = _this._canvas.getContext('2d');
+                    context.drawImage(image, 0, 0);
+                    _this._lastImageIdDrawn = imageId;
+                }
+                return context.getImageData(0, 0, image.naturalWidth, image.naturalHeight);
+            };
+            var getPixelData = function () {
+                var imageData = getImageData();
+                return imageData.data;
+            };
+            var getCanvas = function () {
+                if (_this._lastImageIdDrawn === imageId) {
+                    return _this._canvas;
+                }
+                _this._canvas.height = image.naturalHeight;
+                _this._canvas.width = image.naturalWidth;
+                var context = _this._canvas.getContext('2d');
+                context.drawImage(image, 0, 0);
+                _this._lastImageIdDrawn = imageId;
+                return _this._canvas;
+            };
+            var setLastImageIdDrawn = function (nextLastImageIdDrawn) {
+                if (nextLastImageIdDrawn === void 0) { nextLastImageIdDrawn = null; }
+                _this._lastImageIdDrawn = nextLastImageIdDrawn;
+            };
+            return {
+                imageId: imageId,
+                minPixelValue: 0,
+                maxPixelValue: 255,
+                slope: 1,
+                intercept: 0,
+                windowCenter: 128,
+                windowWidth: 255,
+                render: this.cornerstone.renderWebImage,
+                getPixelData: getPixelData,
+                getCanvas: getCanvas,
+                getImage: function () { return image; },
+                setLastImageIdDrawn: setLastImageIdDrawn,
+                rows: rows,
+                columns: columns,
+                height: rows,
+                width: columns,
+                color: true,
+                rgba: false,
+                columnPixelSpacing: null,
+                rowPixelSpacing: null,
+                invert: false,
+                sizeInBytes: rows * columns * this._options.channel
+            };
+        };
+        CornerstoneBase64ImageLoader.prototype.imageLoader = function (imageId) {
+            var _this = this;
+            // const schema = imageId.split('://')[0]
+            var base64PixelData = imageId.replace(this._options.schema, '');
+            var arrayBuffer;
+            if (this._options.width && this._options.height && this._UPNG) {
+                var columns = this._options.width;
+                var rows = this._options.height;
+                arrayBuffer = new Uint8Array(columns * rows * this._options.channel);
+                arrayBuffer = this._UPNG.encode([arrayBuffer.buffer], columns, rows, 0);
+            }
+            else {
+                arrayBuffer = this.decodeBase64(base64PixelData);
+            }
+            var imagePromise = this.arrayBufferToImage(arrayBuffer);
+            var promise = new Promise(function (resolve, reject) {
+                imagePromise.then(function (image) {
+                    var imageObject = _this.createImage(image, imageId);
+                    resolve(imageObject);
+                }, reject);
+            });
+            return {
+                promise: promise
+            };
+        };
+        CornerstoneBase64ImageLoader.prototype.replaceImage = function (layer, arrayBuffer) {
+            var _this = this;
+            if (!this._UPNG) {
+                return null;
+            }
+            var png = this._UPNG.encode([arrayBuffer.buffer], layer.image.columns, layer.image.rows, 0);
+            var imagePromise = this.arrayBufferToImage(png);
+            return imagePromise.then(function (image) {
+                layer.image = _this.createImage(image, layer.image.imageId);
+            });
+        };
+        Object.defineProperty(CornerstoneBase64ImageLoader.prototype, "options", {
+            get: function () {
+                return __assign({}, this._options);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CornerstoneBase64ImageLoader.prototype, "cornerstone", {
+            get: function () {
+                return this._cornerstone;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CornerstoneBase64ImageLoader.prototype, "UPNG", {
+            get: function () {
+                return this._UPNG;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        CornerstoneBase64ImageLoader.prototype.setUPNG = function (UPNG) {
+            this._UPNG = UPNG;
+        };
+        CornerstoneBase64ImageLoader.prototype.registerLoaders = function () {
+            this.cornerstone.registerImageLoader('base64', this.imageLoader);
+        };
+        return CornerstoneBase64ImageLoader;
+    }());
+
+    var _imageLoader;
+    var _options = __assign({}, _defaultOptions);
+    var cornerstoneBase64ImageLoader = {
+        external: {
+            set cornerstone(cs) {
+                _imageLoader = new CornerstoneBase64ImageLoader(cs, _options);
+                _imageLoader.registerLoaders();
+            },
+            get cornerstone() {
+                return _imageLoader.cornerstone;
+            },
+            get UPNG() {
+                return _imageLoader.UPNG;
+            },
+            set UPNG(_UPNG) {
+                _imageLoader.setUPNG(_UPNG);
+            }
+        },
+        initOptions: function () {
+            _options = __assign({}, _defaultOptions);
+        },
+        set options(newOptions) {
+            _options = __assign({}, _options, newOptions);
+        },
+        get options() {
+            return __assign({}, _options);
+        },
+        get imageLoader() {
+            return _imageLoader;
+        }
+    };
+
+    return cornerstoneBase64ImageLoader;
+
+})));
+//# sourceMappingURL=cornerstone-base64-image-loader.umd.js.map

static/js/cornerstone/cornerstone.min.css

@@ -0,0 +1 @@
+/*! cornerstone - v0.9.0 - 2016-02-03 | (c) 2014 Chris Hafey | https://github.com/chafey/cornerstone */.cornerstone-enabled-image{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}

static/js/cornerstone/cornerstoneWebImageLoader.min.js

@@ -0,0 +1,3 @@
+/*! cornerstone-web-image-loader - 2.1.1 - 2018-12-05 | (c) 2016 Chris Hafey | https://github.com/cornerstonejs/cornerstoneWebImageLoader */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("cornerstoneWebImageLoader",[],t):"object"==typeof exports?exports.cornerstoneWebImageLoader=t():e.cornerstoneWebImageLoader=t()}(window,function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=5)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.external=void 0;var r,o=n(4),a=(r=o)&&r.__esModule?r:{default:r};var u=void 0,i={set cornerstone(e){u=e,(0,a.default)(u)},get cornerstone(){return u}};t.external=i},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.loadImage=function(e){var t=r.external.cornerstone,n=new XMLHttpRequest;return n.open("GET",e,!0),n.responseType="arraybuffer",i.beforeSend(n),n.onprogress=function(n){if(n.lengthComputable){var r=n.loaded,o=n.total,a=Math.round(r/o*100),u={imageId:e,loaded:r,total:o,percentComplete:a};t.triggerEvent(t.events,"cornerstoneimageloadprogress",u)}},{promise:new Promise(function(t,r){n.onload=function(){(0,o.default)(this.response).then(function(n){var r=(0,a.default)(n,e);t(r)},r)},n.send()}),cancelFn:function(){n.abort()}}},t.configure=function(e){i=e};var r=n(0),o=u(n(3)),a=u(n(2));function u(e){return e&&e.__esModule?e:{default:e}}var i={beforeSend:function(){}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){var n=e.naturalHeight,u=e.naturalWidth;return{imageId:t,minPixelValue:0,maxPixelValue:255,slope:1,intercept:0,windowCenter:128,windowWidth:255,render:r.external.cornerstone.renderWebImage,getPixelData:function(){return(n=void 0,a===t?n=o.getContext("2d"):(o.height=e.naturalHeight,o.width=e.naturalWidth,(n=o.getContext("2d")).drawImage(e,0,0),a=t),n.getImageData(0,0,e.naturalWidth,e.naturalHeight)).data;var n},getCanvas:function(){return a===t?o:(o.height=e.naturalHeight,o.width=e.naturalWidth,o.getContext("2d").drawImage(e,0,0),a=t,o)},getImage:function(){return e},rows:n,columns:u,height:n,width:u,color:!0,rgba:!1,columnPixelSpacing:void 0,rowPixelSpacing:void 0,invert:!1,sizeInBytes:n*u*4}};var r=n(0),o=document.createElement("canvas"),a=void 0},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return new Promise(function(t,n){var r=new Image,o=new Uint8Array(e),a=new Blob([o]),u=window.URL||window.webkitURL,i=u.createObjectURL(a);r.src=i,r.onload=function(){t(r),u.revokeObjectURL(i)},r.onerror=function(e){u.revokeObjectURL(i),n(e)}})}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){e.registerImageLoader("http",r.loadImage),e.registerImageLoader("https",r.loadImage)};var r=n(1)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.external=t.configure=t.loadImage=t.createImage=t.arrayBufferToImage=void 0;var r=i(n(3)),o=i(n(2)),a=n(1),u=n(0);function i(e){return e&&e.__esModule?e:{default:e}}var d={arrayBufferToImage:r.default,createImage:o.default,loadImage:a.loadImage,configure:a.configure,external:u.external};t.arrayBufferToImage=r.default,t.createImage=o.default,t.loadImage=a.loadImage,t.configure=a.configure,t.external=u.external,t.default=d}])});
+//# sourceMappingURL=cornerstoneWebImageLoader.min.js.map

static/js/cornerstoneWebImageLoader.min.js

@@ -0,0 +1,3 @@
+/*! cornerstone-web-image-loader - 2.1.1 - 2018-12-05 | (c) 2016 Chris Hafey | https://github.com/cornerstonejs/cornerstoneWebImageLoader */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("cornerstoneWebImageLoader",[],t):"object"==typeof exports?exports.cornerstoneWebImageLoader=t():e.cornerstoneWebImageLoader=t()}(window,function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=5)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.external=void 0;var r,o=n(4),a=(r=o)&&r.__esModule?r:{default:r};var u=void 0,i={set cornerstone(e){u=e,(0,a.default)(u)},get cornerstone(){return u}};t.external=i},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.loadImage=function(e){var t=r.external.cornerstone,n=new XMLHttpRequest;return n.open("GET",e,!0),n.responseType="arraybuffer",i.beforeSend(n),n.onprogress=function(n){if(n.lengthComputable){var r=n.loaded,o=n.total,a=Math.round(r/o*100),u={imageId:e,loaded:r,total:o,percentComplete:a};t.triggerEvent(t.events,"cornerstoneimageloadprogress",u)}},{promise:new Promise(function(t,r){n.onload=function(){(0,o.default)(this.response).then(function(n){var r=(0,a.default)(n,e);t(r)},r)},n.send()}),cancelFn:function(){n.abort()}}},t.configure=function(e){i=e};var r=n(0),o=u(n(3)),a=u(n(2));function u(e){return e&&e.__esModule?e:{default:e}}var i={beforeSend:function(){}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){var n=e.naturalHeight,u=e.naturalWidth;return{imageId:t,minPixelValue:0,maxPixelValue:255,slope:1,intercept:0,windowCenter:128,windowWidth:255,render:r.external.cornerstone.renderWebImage,getPixelData:function(){return(n=void 0,a===t?n=o.getContext("2d"):(o.height=e.naturalHeight,o.width=e.naturalWidth,(n=o.getContext("2d")).drawImage(e,0,0),a=t),n.getImageData(0,0,e.naturalWidth,e.naturalHeight)).data;var n},getCanvas:function(){return a===t?o:(o.height=e.naturalHeight,o.width=e.naturalWidth,o.getContext("2d").drawImage(e,0,0),a=t,o)},getImage:function(){return e},rows:n,columns:u,height:n,width:u,color:!0,rgba:!1,columnPixelSpacing:void 0,rowPixelSpacing:void 0,invert:!1,sizeInBytes:n*u*4}};var r=n(0),o=document.createElement("canvas"),a=void 0},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return new Promise(function(t,n){var r=new Image,o=new Uint8Array(e),a=new Blob([o]),u=window.URL||window.webkitURL,i=u.createObjectURL(a);r.src=i,r.onload=function(){t(r),u.revokeObjectURL(i)},r.onerror=function(e){u.revokeObjectURL(i),n(e)}})}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){e.registerImageLoader("http",r.loadImage),e.registerImageLoader("https",r.loadImage)};var r=n(1)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.external=t.configure=t.loadImage=t.createImage=t.arrayBufferToImage=void 0;var r=i(n(3)),o=i(n(2)),a=n(1),u=n(0);function i(e){return e&&e.__esModule?e:{default:e}}var d={arrayBufferToImage:r.default,createImage:o.default,loadImage:a.loadImage,configure:a.configure,external:u.external};t.arrayBufferToImage=r.default,t.createImage=o.default,t.loadImage=a.loadImage,t.configure=a.configure,t.external=u.external,t.default=d}])});
+//# sourceMappingURL=cornerstoneWebImageLoader.min.js.map

static/js/dicomViewer.js

@@ -0,0 +1,644 @@
+// Dicom saved settings
+var dicom_settings_db = new Dexie("dicom_settings");
+dicom_settings_db.version(1).stores({
+    mouse_bindings: "button,mode,tool",
+});
+
+
+cornerstoneBase64ImageLoader.external.cornerstone = cornerstone;
+cornerstoneWebImageLoader.external.cornerstone = cornerstone;
+cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
+
+cornerstoneTools.init();
+
+
+
+export function loadCornerstone(main_element, db, images, annotations_to_load, load_as_stack = false) {
+    // canvas-panel holds the enabled elements and all tools / menus
+    main_element.append("<div class='canvas-panel'></div>");
+    $(".canvas-panel").append($("<div class='single-dicom-viewer'></div>"));
+
+    let single_dicom_viewer = main_element.find(".single-dicom-viewer").get(0);
+    console.log(single_dicom_viewer);
+    // Add generic settings menus to canvas-panel
+    $(".canvas-panel").append(
+            $(`<div id='dicom-settings-panel'>
+            <span id="dicom-settings-close" class="close-button"><a href="#">close</a></span>
+            <h3>Image viewer settings:</h3>
+
+            Primary
+            <div id="primary-mouse-binding">
+            <label for="left-mouse-dicom">Left mouse button:</label>
+            <select
+            id="left-mouse-dicom"
+            class="mouse-binding-select"
+            data-button="1"
+            data-mode="0"
+            >
+            </select>
+            <label for="middle-mouse-dicom">Middle mouse button:</label>
+            <select
+            id="middle-mouse-dicom"
+            class="mouse-binding-select"
+            data-button="4"
+            data-mode="0"
+            >
+            </select>
+            <label for="right-mouse-dicom">Right mouse button:</label>
+            <select
+            id="right-mouse-dicom"
+            class="mouse-binding-select"
+            data-button="2"
+            data-mode="0"
+            >
+            </select>
+            </div>
+            <br />
+            Secondary (Ctrl)
+            <div id="secondary-mouse-binding">
+            <label for="left-mouse-dicom-secondary">Left mouse button:</label>
+            <select
+            id="left-mouse-dicom-secondary"
+            class="mouse-binding-select"
+            data-button="1"
+            data-mode="1"
+            >
+            </select>
+            <label for="middle-mouse-dicom-secondary">Middle mouse button:</label>
+            <select
+            id="middle-mouse-dicom-secondary"
+            class="mouse-binding-select"
+            data-button="4"
+            data-mode="1"
+            >
+            </select>
+            <label for="right-mouse-dicom-secondary">Right mouse button:</label>
+            <select
+            id="right-mouse-dicom-secondary"
+            class="mouse-binding-select"
+            data-button="2"
+            data-mode="1"
+            >
+            </select>
+            </div>
+
+        </div>`)
+    )
+        .append($("<span id='dicom-toggle-mode-button' class='dicom-button' title='toggle stack/thumbnail view'>↻</span>"))
+        .append($("<span id='dicom-fullscreen-button' class='dicom-button' title='toggle stack/thumbnail view'>⛶</span>"))
+        .append($("<span id='dicom-settings-button' class='dicom-button' title='open settings'>&#9881;</span>"));
+
+    $(single_dicom_viewer).append(
+        $(
+            "<div id='dicom-overlay'>Image <span id='current_image_number'></span> of <span id='total_image_number'></span><br />wc: <span id='wc'></span> ww: <span id='ww'></span></div>"
+        )
+    )
+        // Add buttons
+        .append(
+            $(`<div id='dicom-window-panel'>
+           <button id='window-btn-abdomen'>Abdomen</button> 
+           <button id='window-btn-liver'>Liver</button> 
+           <button id='window-btn-mediastinum'>Mediastinum</button> 
+           <button id='window-btn-lung'>Lungs</button> 
+           <button id='window-btn-brain'>Brain</button> 
+           <button id='window-btn-stroke'>Stroke</button> 
+           <button id='window-btn-bone'>Bone</button> 
+            </div>`)
+        );
+
+    let window_presets = {
+        "window-btn-abdomen": [400, 50],
+        "window-btn-liver": [150, 30],
+        "window-btn-mediastinum": [350, 50],
+        "window-btn-lung": [1500, -600],
+        "window-btn-brain": [80, 40],
+        "window-btn-stroke": [40, 40],
+        "window-btn-bone": [1800, 400]
+    }
+
+    $("#dicom-window-panel button").each((n, el) => {
+        $(el).click((e) => {
+            console.log(e);
+            console.log(e.target);
+            let button_id = e.target.id;
+            let [ww, wc] = window_presets[button_id];
+
+            let viewport = cornerstone.getViewport(single_dicom_viewer);
+            viewport.voi.windowWidth = parseFloat(ww);
+            viewport.voi.windowCenter = parseFloat(wc);
+            cornerstone.setViewport(single_dicom_viewer, viewport);
+
+            e.preventDefault();
+        })
+    })
+
+    $("#dicom-settings-close").click(e => {
+        $("#dicom-settings-panel").hide();
+        e.preventDefault();
+    });
+    $("#dicom-settings-button").click(e => {
+        $("#dicom-settings-panel").toggle();
+    });
+    $("#dicom-fullscreen-button").click(e => {
+        if (!document.fullscreenElement) {
+            $(".canvas-panel").get(0).requestFullscreen().catch(err => {
+                alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
+            });
+        } else {
+            document.exitFullscreen();
+        }
+    });
+    $("#dicom-toggle-mode-button").click(e => {
+        //$("#dicom-settings-panel").toggle();
+        let stack = !load_as_stack;
+        $(main_element).empty();
+        loadCornerstone(main_element, db, images, annotations_to_load, stack)
+    });
+
+    //let images = data["images"];
+
+    // Make sure we have an array
+    if (!Array.isArray(images)) {
+        images = [images];
+    }
+
+    //let annotations = [];
+    //if (annotations_to_load) { 
+    //annotations = annotations_to_load[figure_to_load.split("-")[1]];
+    //if (!Array.isArray(annotations)) {
+    //annotations = [annotations];
+    //}
+    //}
+    let annotations = annotations_to_load;
+    if (!Array.isArray(annotations)) {
+        annotations = [annotations];
+    }
+    console.log("annon", annotations);
+
+
+    function loadAnnotation(imageId, annotation) {
+        console.log("loadAnnotations", imageId, annotations);
+        const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
+
+        if (annotation == undefined || annotation.length < 1) { return }
+
+        console.log(annotation);
+        let tool_state_no_id = JSON.parse(annotation);
+
+        let tool_state = {};
+        tool_state[imageId] = tool_state_no_id;
+
+        toolStateManager.restoreToolState(tool_state);
+    }
+
+    async function load(images, annotations) {
+        console.log("LOAD");
+        let imageIds = [];
+        for (let i = 0; i < images.length; i++) {
+            let data_url = images[i];
+            const annotation = annotations[i];
+            // check stack type
+            if (data_url.startsWith("data:image")) {
+                let imageId = "base64://" + data_url.split(",")[1];
+
+                loadAnnotation(imageId, annotation);
+
+                imageIds.push(imageId);
+
+                // Treat application/octet-stream as if they are dicoms
+            } else if (data_url.startsWith("data:application/dicom") || data_url.startsWith("data:application/octet-stream")) {
+                //stack = stack.split(";")[1];
+
+                let dfile = await urltoFile(data_url, "dicom", "application/dicom");
+
+                const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(
+                    dfile
+                );
+
+                loadAnnotation(imageId, annotation);
+
+                imageIds.push(imageId);
+                //cornerstone.loadImage(imageId).then(function(image) {
+                //    tempFunction(image);
+                //});
+            } else {
+                let url;
+                if (data_url.startsWith("http")) {
+                    url = data_url;
+                } else {
+                    url = window.location.href.replace(/\/\#\/?$/, '') + "/" + data_url
+                }
+
+                if (url.endsWith("dcm")) {
+                    url = "wadouri:" + url;
+                }
+
+                // if there is no extension treat it as a dicom
+                if (/(?:\/|^)[^.\/]+$/.test(url)) {
+                    url = "wadouri:" + url;
+                }
+
+                loadAnnotation(url, annotation);
+
+                imageIds.push(url);
+
+
+            }
+        }
+        const stack = {
+            currentImageIdIndex: 0,
+            imageIds
+        };
+        //cornerstone.loadAndCacheImage(imageIds[0]).then(function(image) {
+        console.log("load and cache", imageIds[0])
+        cornerstone.loadAndCacheImage(imageIds[0]).then(function (image) {
+
+            console.log("LOAD and cache, then");
+            loadCornerstoneMainImage(single_dicom_viewer, image, stack, db, load_as_stack);
+        })
+            .catch((err, err2) => {
+                console.log(err);
+
+            });
+    }
+
+    if (images.length > 1 && load_as_stack == false) {
+        $(".canvas-panel").append("<div id='image-thumbs'></div>");
+        for (let id = 0; id < images.length; id++) {
+            let n = id + 1;
+            let thumb = $(
+                "<div class='thumb' id='thumb-" +
+                id +
+                "' data-id=" +
+                id +
+                "><span>" +
+                n +
+                "</span></div>"
+            );
+            $("#image-thumbs").append(thumb);
+            $("#thumb-" + id).click(selectThumbClick).mousedown(stopEvent);
+
+            let image_url = images[id];
+
+            let img;
+
+            if (image_url.startsWith("data")) {
+                // based (image) data url, just load the image directly
+                if (image_url.startsWith("data:image/")) {
+                    img = $("<img />", {
+                        src: image_url,
+                        id: "thumb-image-" + id,
+                        class: "thumbnail",
+                        title: "Click on the thumbnail to view and manipulate the image.",
+                        draggable: "false",
+                        style: "height: 100px;"
+                    });
+
+                    $("#thumb-" + id).append(img);
+
+                    // otherwise try to load it as a dicom
+                } else {
+                    // convert the data url to a file
+                    urltoFile(image_url, "dicom", "application/dicom").then(function (
+                        dfile
+                    ) {
+                        // load the file using cornerstoneWADO file loader
+                        const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(
+                            dfile
+                        );
+                        cornerstone.loadAndCacheImage(imageId).then(function (image) {
+                            img = $("<div></div>").get(0);
+                            img.id = "thumb-image-" + id;
+                            img.class = "thumbnail";
+                            img.title =
+                                "Click on the thumbnail to view and manipulate the image.";
+                            img.draggable = "false";
+                            img.style = "height: 100px; width: 100px";
+                            $("#thumb-" + id).append(img);
+
+                            const element = document.getElementById("thumb-image-" + id);
+                            cornerstone.enable(element);
+                            cornerstone.displayImage(element, image);
+                            cornerstone.resize(element);
+                        }); //.catch( function(error) {
+                    });
+                }
+            } else {
+                if (!image_url.endsWith("dicom") && !image_url.endsWith("dcm")) {
+                    img = $("<img />", {
+                        src: image_url,
+                        id: "thumb-image-" + id,
+                        class: "thumbnail",
+                        title: "Click on the thumbnail to view and manipulate the image.",
+                        draggable: "false",
+                        style: "height: 100px;"
+                    });
+
+                    $("#thumb-" + id).append(img);
+
+                    // otherwise try to load it as a dicom
+                } else {
+
+                    let url = "wadouri:" + image_url;
+                    cornerstone.loadAndCacheImage(url).then(function (image) {
+                        img = $("<div></div>").get(0);
+                        img.id = "thumb-image-" + id;
+                        img.class = "thumbnail";
+                        img.title =
+                            "Click on the thumbnail to view and manipulate the image.";
+                        img.draggable = "false";
+                        img.style = "height: 100px; width: 100px";
+                        $("#thumb-" + id).append(img);
+
+                        const element = document.getElementById("thumb-image-" + id);
+                        cornerstone.enable(element);
+                        cornerstone.displayImage(element, image);
+                        cornerstone.resize(element);
+                    });
+                }
+            }
+        }
+    }
+
+    load(images, annotations);
+}
+
+function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
+    console.log("loadCornerstoneMainImage")
+    console.log("load as stack:", load_as_stack)
+    // It is probably silly to do this each time we load a question
+    const PanTool = cornerstoneTools.PanTool;
+    const ZoomTool = cornerstoneTools.ZoomTool;
+    const ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool;
+    const StackScrollMouseWheelTool = cornerstoneTools.StackScrollMouseWheelTool;
+    const WwwcTool = cornerstoneTools.WwwcTool;
+    const WwwcRegionTool = cornerstoneTools.WwwcRegionTool;
+    const RotateTool = cornerstoneTools.RotateTool;
+    const StackScrollTool = cornerstoneTools.StackScrollTool;
+    const MagnifyTool = cornerstoneTools.MagnifyTool;
+    const ArrowAnnotateTool = cornerstoneTools.ArrowAnnotateTool;
+    const LengthTool = cornerstoneTools.LengthTool;
+
+    console.log("enable element", element);
+    cornerstone.enable(element);
+
+    cornerstone.displayImage(element, image);
+
+    cornerstoneTools.addStackStateManager(element, ["stack"]);
+    cornerstoneTools.addToolState(element, "stack", stack);
+
+    cornerstoneTools.addTool(PanTool);
+    cornerstoneTools.addTool(ZoomTool);
+    cornerstoneTools.addTool(ZoomMouseWheelTool);
+    cornerstoneTools.addTool(StackScrollMouseWheelTool);
+    cornerstoneTools.addTool(WwwcTool);
+    cornerstoneTools.addTool(WwwcRegionTool);
+    cornerstoneTools.addTool(RotateTool);
+    cornerstoneTools.addTool(StackScrollTool);
+    cornerstoneTools.addTool(MagnifyTool);
+    cornerstoneTools.addTool(LengthTool);
+
+    cornerstoneTools.addTool(ArrowAnnotateTool, {
+        configuration: {
+            getTextCallback: () => { },
+            changeTextCallback: () => { },
+            allowEmptyLabel: true,
+            renderDashed: false,
+            drawHandles: false,
+            drawHandlesOnHover: true,
+        },
+    });
+
+    cornerstoneTools.setToolEnabled("ArrowAnnotate");
+
+
+    let available_tools = [
+        "Pan",
+        "Zoom",
+        "Wwwc",
+        "WwwcRegion",
+        "Rotate",
+        "StackScroll",
+        "Magnify",
+        "Length",
+    ];
+    $(".mouse-binding-select option").remove();
+
+    available_tools.forEach(function (tool) {
+        let option = "<option value=" + tool + ">" + tool + "</option>";
+        $(".mouse-binding-select").append(option);
+        //$("#left-mouse-dicom").append(option);
+        //$("#middle-mouse-dicom").append(option);
+        //$("#right-mouse-dicom").append(option);
+    });
+    $(".mouse-binding-select").on("change", function (e) {
+        changeMouseBinding(e, db);
+    });
+
+    // Set default tools
+    $("#primary-mouse-binding .mouse-binding-select[data-button=1]").val("Pan");
+    $("#primary-mouse-binding .mouse-binding-select[data-button=2]").val("Wwwc");
+    $("#primary-mouse-binding .mouse-binding-select[data-button=4]").val("Zoom");
+    //cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
+
+    console.log(load_as_stack);
+    if (load_as_stack) {
+        cornerstoneTools.setToolActive("StackScrollMouseWheel", { mouseButtonMask: 3 });
+    } else {
+        cornerstoneTools.setToolActive("ZoomMouseWheel", { mouseButtonMask: 3 });
+    }
+    //cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 4 });
+    //cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 2 });
+    $("#secondary-mouse-binding .mouse-binding-select[data-button=1]").val(
+        "Magnify"
+    );
+    $("#secondary-mouse-binding .mouse-binding-select[data-button=2]").val(
+        "Rotate"
+    );
+    $("#secondary-mouse-binding .mouse-binding-select[data-button=4]").val(
+        "WwwcRegion"
+    );
+
+    loadPrimaryDicomInterface(db);
+    loadAltDicomInterface(db);
+
+    element.addEventListener("cornerstoneimagerendered", onImageRendered);
+
+    //setDicomCanvasNonFullscreen(element);
+    cornerstone.reset(element);
+    //element.scrollIntoView(false);
+    //element.scrollTo(0);
+
+    $(element).dblclick(function () {
+        cornerstone.reset(this);
+    });
+
+    element.removeEventListener("wheel", element.wheelEventHandler);
+
+    // Add tool selector
+    //$(".canvas-panel").append(
+    //  '<select class="control-overlay"><option value="pan">pan</option><option value="zoom">zoom</option><option value="rotate">rotate</option><option value="scroll" hidden="" disabled="">scroll (1/1)</option><option value="window">window ()</option><option value="abdomen" hidden="" disabled="">window = abdomen</option><option value="pulmonary" hidden="" disabled="">window = pulmonary</option><option value="brain" hidden="" disabled="">window = brain</option><option value="bone" hidden="" disabled="">window = bone</option><option value="reset">reset</option></select>'
+    //);
+
+    //$(".control-overlay")
+    //  .get(0)
+    //  .addEventListener("change", changeControlSelection);
+
+    resizeHandler();
+
+    window.addEventListener("resize", resizeHandler);
+    element.addEventListener(
+        "contextmenu",
+        function (e) {
+            // do something here...
+            e.preventDefault();
+        },
+        false
+    );
+
+
+    $(element).on("mouseup", function (event) {
+        $(".magnifyTool").hide();
+    });
+}
+
+function resizeHandler() {
+    let element = document.getElementsByClassName("single-dicom-viewer")[0];
+    let h = window.innerHeight - $("#header").height() - 16;
+    $(element).height(h);
+    cornerstone.resize(element, true);
+}
+
+async function loadPrimaryDicomInterface(db) {
+    const bindings = await dicom_settings_db.mouse_bindings.where({ mode: "0" }).toArray().catch((err) => { console.log(err); });
+    bindings.forEach(function (b) {
+        let sel = $("#primary-mouse-binding select[data-button=" + b.button + "]").get(
+            0
+        );
+        sel.value = b.tool;
+        //sel.dispatchEvent(new Event("change"));
+    });
+    registerPrimaryDicomInterface();
+}
+
+async function loadAltDicomInterface(db) {
+    const bindings = await dicom_settings_db.mouse_bindings.where({ mode: "1" }).toArray().catch((err) => { console.log(err); });
+    bindings.forEach(function (b) {
+        let sel = $(
+            "#secondary-mouse-binding select[data-button=" + b.button + "]"
+        ).get(0);
+        sel.value = b.tool;
+    });
+}
+
+// Called when the dicom image is loaded / rendered
+function onImageRendered(e) {
+    const eventData = e.detail;
+    //console.log(e);
+
+    // Update ww/wl
+    $("#wc").text(Math.round(eventData.viewport.voi.windowCenter));
+    $("#ww").text(Math.round(eventData.viewport.voi.windowWidth));
+
+    // update stack data
+    let stack = eventData.enabledElement.toolStateManager.toolState.stack.data[0];
+
+    $("#total_image_number").text(stack.imageIds.length);
+    $("#current_image_number").text(parseInt(stack.currentImageIdIndex) + 1);
+
+    if (stack.imageIds.length > 1) {
+        $(".thumb").removeClass("thumb-active");
+        $("#thumb-" + stack.currentImageIdIndex).addClass("thumb-active");
+    }
+    //if (stack.imageIds.length > 1) {
+    //  $("option[value=scroll").prop("disabled", false);
+    //  $("option[value=scroll").prop("hidden", false);
+    //  $("option[value=scroll").text(
+    //    "scroll (" +
+    //      (stack.currentImageIdIndex + 1) +
+    //      "/" +
+    //      stack.imageIds.length +
+    //      ")"
+    //  );
+}
+
+function stopEvent(evt) {
+    console.log("stop", evt)
+    evt.preventDefault();
+    evt.stopPropagation();
+}
+
+function selectThumbClick(evt) {
+    let new_index = evt.currentTarget.dataset.id;
+    selectThumb(new_index);
+    evt.preventDefault();
+}
+
+
+export function registerPrimaryDicomInterface() {
+    // Set mousetools based upon the selected options
+    let selections = $("#primary-mouse-binding select");
+    selections.each((i, option) => {
+        cornerstoneTools.setToolActive(option.value, {
+            mouseButtonMask: parseInt(option.dataset.button)
+        });
+    });
+}
+
+export function registerAltDicomInterface(e) {
+    // Called when control is pressed
+
+    // Set mousetools based upon the selected options
+    let selections = $("#secondary-mouse-binding select");
+    selections.each((i, option) => {
+        cornerstoneTools.setToolActive(option.value, {
+            mouseButtonMask: parseInt(option.dataset.button)
+        });
+    });
+}
+
+function changeMouseBinding(e, db) {
+    let select = e.currentTarget;
+    let button = select.dataset.button;
+    let mode = select.dataset.mode;
+    let tool = select.value;
+
+    // Directly activate primary tools (secondary will be activated when modifier
+    // key is pressed
+    if (mode == "0") {
+        cornerstoneTools.setToolActive(tool, { mouseButtonMask: parseInt(button) });
+    }
+
+    dicom_settings_db.mouse_bindings.put({ button: button, mode: mode, tool: tool });
+    //db.mouse_bindings.put({button: button, mode: mode, tool: tool}).then(loadPrimaryDicomInterface());
+}
+
+export function selectThumb(new_index) {
+    console.log("select thumb new index", new_index);
+    // There must be a better way to do this...
+    let dicom_element = document.getElementsByClassName("single-dicom-viewer")[0];
+    if (dicom_element == null) {
+        return;
+    }
+    let c = cornerstone.getEnabledElement(dicom_element);
+    //   let current_index =
+    //     c.toolStateManager.toolState.stack.data[0].currentImageIdIndex;
+    c.toolStateManager.toolState.stack.data[0].currentImageIdIndex = new_index;
+    let id = c.toolStateManager.toolState.stack.data[0].imageIds[new_index];
+    console.log("select thumb id", id);
+    console.log("select thumb el", dicom_element);
+    cornerstone.loadImage(id).then(b => {
+        console.log("b", b);
+        cornerstone.displayImage(dicom_element, b);
+    });
+    //c = cornerstone.getEnabledElement(dicom_element)
+}
+function urltoFile(url, filename, mimeType) {
+    return fetch(url)
+        .then(function (res) {
+            return res.arrayBuffer();
+        })
+        .then(function (buf) {
+            return new File([buf], filename, { type: mimeType });
+        });
+}

static/js/jq-ajax-progress.min.js

@@ -0,0 +1 @@
+!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof exports?module.exports=e(require("jquery")):e(jQuery)}(function(e){var t=e.ajax.bind(e);e.ajax=function(n,r){"object"==typeof n&&(r=n,n=void 0);var o=(r=r||{chunking:!1}).xhr?r.xhr():e.ajaxSettings.xhr(),s=r.chunking||e.ajaxSettings.chunking;return r.xhr=function(){if("function"==typeof r.uploadProgress){if(!o.upload)return;o.upload.onprogress=null,o.upload.addEventListener("progress",function(e){r.uploadProgress.call(this,e)},!1)}if("function"==typeof r.progress){var e=0;o.addEventListener("progress",function(t){var n=[t],o="";this.readyState===XMLHttpRequest.LOADING&&s&&(o=this.responseText.substr(e),e=this.responseText.length,n.push(o)),r.progress.apply(this,n)},!1)}return o},t(n,r)}});

static/js/jquery.modal.min.css

@@ -0,0 +1 @@
+.blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:1;padding:20px;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);text-align:center}.blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em}.blocker.behind{background-color:transparent}.modal{display:none;vertical-align:middle;position:relative;z-index:2;max-width:500px;box-sizing:border-box;width:90%;background:#fff;padding:15px 30px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-align:left}.modal a.close-modal{position:absolute;top:-12.5px;right:-12.5px;display:block;width:30px;height:30px;text-indent:-9999px;background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')}.modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:12px 16px;border-radius:5px;background-color:#111;height:20px}.modal-spinner>div{border-radius:100px;background-color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.5)}20%{-webkit-transform:scaleY(1.0)}}@keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}

static/js/jquery.modal.min.js

@@ -0,0 +1,5 @@
+/*
+    A simple jQuery modal (http://github.com/kylefox/jquery-modal)
+    Version 0.9.2
+*/
+!function(o){"object"==typeof module&&"object"==typeof module.exports?o(require("jquery"),window,document):o(jQuery,window,document)}(function(o,t,i,e){var s=[],l=function(){return s.length?s[s.length-1]:null},n=function(){var o,t=!1;for(o=s.length-1;o>=0;o--)s[o].$blocker&&(s[o].$blocker.toggleClass("current",!t).toggleClass("behind",t),t=!0)};o.modal=function(t,i){var e,n;if(this.$body=o("body"),this.options=o.extend({},o.modal.defaults,i),this.options.doFade=!isNaN(parseInt(this.options.fadeDuration,10)),this.$blocker=null,this.options.closeExisting)for(;o.modal.isActive();)o.modal.close();if(s.push(this),t.is("a"))if(n=t.attr("href"),this.anchor=t,/^#/.test(n)){if(this.$elm=o(n),1!==this.$elm.length)return null;this.$body.append(this.$elm),this.open()}else this.$elm=o("<div>"),this.$body.append(this.$elm),e=function(o,t){t.elm.remove()},this.showSpinner(),t.trigger(o.modal.AJAX_SEND),o.get(n).done(function(i){if(o.modal.isActive()){t.trigger(o.modal.AJAX_SUCCESS);var s=l();s.$elm.empty().append(i).on(o.modal.CLOSE,e),s.hideSpinner(),s.open(),t.trigger(o.modal.AJAX_COMPLETE)}}).fail(function(){t.trigger(o.modal.AJAX_FAIL);var i=l();i.hideSpinner(),s.pop(),t.trigger(o.modal.AJAX_COMPLETE)});else this.$elm=t,this.anchor=t,this.$body.append(this.$elm),this.open()},o.modal.prototype={constructor:o.modal,open:function(){var t=this;this.block(),this.anchor.blur(),this.options.doFade?setTimeout(function(){t.show()},this.options.fadeDuration*this.options.fadeDelay):this.show(),o(i).off("keydown.modal").on("keydown.modal",function(o){var t=l();27===o.which&&t.options.escapeClose&&t.close()}),this.options.clickClose&&this.$blocker.click(function(t){t.target===this&&o.modal.close()})},close:function(){s.pop(),this.unblock(),this.hide(),o.modal.isActive()||o(i).off("keydown.modal")},block:function(){this.$elm.trigger(o.modal.BEFORE_BLOCK,[this._ctx()]),this.$body.css("overflow","hidden"),this.$blocker=o('<div class="'+this.options.blockerClass+' blocker current"></div>').appendTo(this.$body),n(),this.options.doFade&&this.$blocker.css("opacity",0).animate({opacity:1},this.options.fadeDuration),this.$elm.trigger(o.modal.BLOCK,[this._ctx()])},unblock:function(t){!t&&this.options.doFade?this.$blocker.fadeOut(this.options.fadeDuration,this.unblock.bind(this,!0)):(this.$blocker.children().appendTo(this.$body),this.$blocker.remove(),this.$blocker=null,n(),o.modal.isActive()||this.$body.css("overflow",""))},show:function(){this.$elm.trigger(o.modal.BEFORE_OPEN,[this._ctx()]),this.options.showClose&&(this.closeButton=o('<a href="#close-modal" rel="modal:close" class="close-modal '+this.options.closeClass+'">'+this.options.closeText+"</a>"),this.$elm.append(this.closeButton)),this.$elm.addClass(this.options.modalClass).appendTo(this.$blocker),this.options.doFade?this.$elm.css({opacity:0,display:"inline-block"}).animate({opacity:1},this.options.fadeDuration):this.$elm.css("display","inline-block"),this.$elm.trigger(o.modal.OPEN,[this._ctx()])},hide:function(){this.$elm.trigger(o.modal.BEFORE_CLOSE,[this._ctx()]),this.closeButton&&this.closeButton.remove();var t=this;this.options.doFade?this.$elm.fadeOut(this.options.fadeDuration,function(){t.$elm.trigger(o.modal.AFTER_CLOSE,[t._ctx()])}):this.$elm.hide(0,function(){t.$elm.trigger(o.modal.AFTER_CLOSE,[t._ctx()])}),this.$elm.trigger(o.modal.CLOSE,[this._ctx()])},showSpinner:function(){this.options.showSpinner&&(this.spinner=this.spinner||o('<div class="'+this.options.modalClass+'-spinner"></div>').append(this.options.spinnerHtml),this.$body.append(this.spinner),this.spinner.show())},hideSpinner:function(){this.spinner&&this.spinner.remove()},_ctx:function(){return{elm:this.$elm,$elm:this.$elm,$blocker:this.$blocker,options:this.options,$anchor:this.anchor}}},o.modal.close=function(t){if(o.modal.isActive()){t&&t.preventDefault();var i=l();return i.close(),i.$elm}},o.modal.isActive=function(){return s.length>0},o.modal.getCurrent=l,o.modal.defaults={closeExisting:!0,escapeClose:!0,clickClose:!0,closeText:"Close",closeClass:"",modalClass:"modal",blockerClass:"jquery-modal",spinnerHtml:'<div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div>',showSpinner:!0,showClose:!0,fadeDuration:null,fadeDelay:1},o.modal.BEFORE_BLOCK="modal:before-block",o.modal.BLOCK="modal:block",o.modal.BEFORE_OPEN="modal:before-open",o.modal.OPEN="modal:open",o.modal.BEFORE_CLOSE="modal:before-close",o.modal.CLOSE="modal:close",o.modal.AFTER_CLOSE="modal:after-close",o.modal.AJAX_SEND="modal:ajax:send",o.modal.AJAX_SUCCESS="modal:ajax:success",o.modal.AJAX_FAIL="modal:ajax:fail",o.modal.AJAX_COMPLETE="modal:ajax:complete",o.fn.modal=function(t){return 1===this.length&&new o.modal(this,t),this},o(i).on("click.modal",'a[rel~="modal:close"]',o.modal.close),o(i).on("click.modal",'a[rel~="modal:open"]',function(t){t.preventDefault(),o(this).modal()})});

static/js/uuidv4.min.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).uuidv4=e()}(this,(function(){"use strict";var t,e=new Uint8Array(16);function o(){if(!t&&!(t="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return t(e)}var n=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;function r(t){return"string"==typeof t&&n.test(t)}for(var i=[],u=0;u<256;++u)i.push((u+256).toString(16).substr(1));return function(t,e,n){var u=(t=t||{}).random||(t.rng||o)();if(u[6]=15&u[6]|64,u[8]=63&u[8]|128,e){n=n||0;for(var f=0;f<16;++f)e[n+f]=u[f];return e}return function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,o=(i[t[e+0]]+i[t[e+1]]+i[t[e+2]]+i[t[e+3]]+"-"+i[t[e+4]]+i[t[e+5]]+"-"+i[t[e+6]]+i[t[e+7]]+"-"+i[t[e+8]]+i[t[e+9]]+"-"+i[t[e+10]]+i[t[e+11]]+i[t[e+12]]+i[t[e+13]]+i[t[e+14]]+i[t[e+15]]).toLowerCase();if(!r(o))throw TypeError("Stringified UUID is invalid");return o}(u)}}));