.

static/css/anatomy.css

@@ -709,4 +709,14 @@ input {
 .sticky-alert {
   position: sticky;
   top: 5px;
+}
+
+.marking-block {
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+
+.marking-block div {
+  padding-left: 20px;
+  padding-right: 20px;
 }

static/css/dicomViewer.css

@@ -100,4 +100,14 @@
 }
 #dicom-window-panel:hover {
   opacity: 1;
+}
+
+#dicom-summary {
+  position: relative;
+  z-index: 999;
+  max-width: 100%;
+  height: 100%;
+  color: red;
+  top: -100%;
+  overflow: scroll
 }

static/js/dicomViewer.js

@@ -18,6 +18,7 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
     // 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>"));
+    $(".canvas-panel").append($("<div id='dicom-summary'></div>").load("dicomSummary.html"));
 
     let single_dicom_viewer = main_element.find(".single-dicom-viewer").get(0);
     console.log(single_dicom_viewer);
@@ -258,7 +259,7 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
         console.log("load and cache", imageIds[0])
         cornerstone.loadAndCacheImage(imageIds[0]).then(function (image) {
 
-            console.log("LOAD and cache, then");
+            console.log("LOAD and cache, then", image);
             loadCornerstoneMainImage(single_dicom_viewer, image, stack, db, load_as_stack);
         })
             .catch((err, err2) => {
@@ -371,6 +372,7 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
 }
 
 function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
+    dumpDataSet(image.data)
     console.log("loadCornerstoneMainImage")
     console.log("load as stack:", load_as_stack)
     // It is probably silly to do this each time we load a question
@@ -666,4 +668,43 @@ function urltoFile(url, filename, mimeType) {
         .then(function (buf) {
             return new File([buf], filename, { type: mimeType });
         });
-}
+}
+
+function dumpDataSet(dataSet)
+    {
+        $('span[data-dicom]').each(function(index, value)
+        {
+            var attr = $(value).attr('data-dicom');
+            var element = dataSet.elements[attr];
+            var text = "";
+            if(element !== undefined)
+            {
+                var str = dataSet.string(attr);
+                if(str !== undefined) {
+                    text = str;
+                }
+            }
+            $(value).text(text);
+        });
+
+        $('span[data-dicomUint]').each(function(index, value)
+        {
+            var attr = $(value).attr('data-dicomUint');
+            var element = dataSet.elements[attr];
+            var text = "";
+            if(element !== undefined)
+            {
+                if(element.length === 2)
+                {
+                    text += dataSet.uint16(attr);
+                }
+                else if(element.length === 4)
+                {
+                    text += dataSet.uint32(attr);
+                }
+            }
+
+            $(value).text(text);
+        });
+
+    }