improve marking layout

anatomy/static/css/anatomy.css

@@ -97,4 +97,13 @@ button a {
 #stats-plot {
   width: 50%;
   float: right;
+}
+
+#dicom-element {
+  width: 60%;
+  float: left;
+}
+
+.marking {
+  float: right;
 }

anatomy/static/js/anatomy.js

@@ -1,4 +1,3 @@
-var dwvapp = [];
 
 var marked_answers = {
     "correct": [],
@@ -50,13 +49,29 @@ cornerstone.enable(element);
 cornerstone.loadAndCacheImage(imageId).then(function(image) {
   cornerstone.displayImage(element, image);
 
+  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;
+
+  cornerstoneTools.addTool(PanTool);
+  cornerstoneTools.addTool(ZoomTool);
+  cornerstoneTools.addTool(ZoomMouseWheelTool);
+  cornerstoneTools.addTool(WwwcTool);
+  cornerstoneTools.addTool(WwwcRegionTool);
+  cornerstoneTools.addTool(RotateTool);
+  cornerstoneTools.addTool(StackScrollTool);
+  cornerstoneTools.addTool(MagnifyTool);
   // Enable our tools
-  cornerstoneTools.mouseInput.enable(element);
-  cornerstoneTools.mouseWheelInput.enable(element);
-  cornerstoneTools.wwwc.activate(element, 1); // Left Click
-  cornerstoneTools.pan.activate(element, 2); // Middle Click
-  cornerstoneTools.zoom.activate(element, 4); // Right Click
-  cornerstoneTools.zoomWheel.activate(element); // Mouse Wheel
+
+  cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
+  cornerstoneTools.setToolActive("WwwcTool", { mouseButtonMask: 2 });
+  cornerstoneTools.setToolActive("ZoomMouseWheel", { mouseButtonMask: 3 });
+  cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 4 });
 });
     }