Fixing measurement delete action

Packages/ohif-measurements/client/components/measurementTable/measurementTable.html

@@ -1,5 +1,6 @@
 <template name="measurementTable">
-    <div id="measurementTableContainer">
+    <div id="measurementTableContainer" class="flex-v">
+        <div class="measurementTableHeader">
             {{#if this.timepoints.get.length}}
                 <div class="measurementTableLayoutChanger viewerRoundedButtonGroup">
                     {{>roundedButtonGroup buttonGroupData}}
@@ -18,6 +19,9 @@
                 {{/each}}
                 <!-- TODO: Add header for cross-sectional / non-longitudinal data -->
             </div>
+        </div>
+        {{#scrollArea class='measurementTableView flex-grow fit' scrollStep=63}}
             {{>measurementTableView (clone this)}}
+        {{/scrollArea}}
     </div>
 </template>

Packages/ohif-measurements/client/components/measurementTable/measurementTableHUD/measurementTableHUD.html

@@ -1,16 +1,20 @@
 <template name="measurementTableHUD">
     <div id="measurementTableHUD" class="{{hudHidden}}">
+        <div class="flex-v full-height">
             <div class="header">
                 <span>Measurements</span>
                 <svg class="buttonClose">
                     <use xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-ui-close"}}></use>
                 </svg>
             </div>
-        {{>measurementTableView (clone this)}}
+            {{#scrollArea class='measurementTableView flex-grow fit' scrollStep=63}}
+                {{>measurementTableView (clone this isHud=true)}}
+            {{/scrollArea}}
             <div class="footer">
                 {{#each toolbarButton in toolbarButtons}}
                     {{>toolbarSectionButton toolbarButton}}
                 {{/each}}
             </div>
         </div>
+    </div>
 </template>

Packages/ohif-measurements/client/components/measurementTable/measurementTableHUD/measurementTableHUD.styl

@@ -16,7 +16,7 @@ $borderColor = rgba(77, 99, 110, 0.81)
   width: 318px
   z-index: 10000
 
-  .measurementTableView.scrollArea
+  .measurementTableView .scrollable
     margin-left: 0
     padding-left: 0
 
@@ -42,17 +42,14 @@ $borderColor = rgba(77, 99, 110, 0.81)
       top: 20px
       width: 14px
 
-  .measurementTableView.scrollArea
+  .measurementTableView
     height: calc(100% - 55px - 70px)
     padding-bottom: 20px
 
   .footer
     theme('background', '$uiGrayDarkest')
     border-top: $uiBorderThickness solid $borderColor
-    width: 100%
     height: 70px
-    position: absolute
-    bottom: 0
     padding: 10px
 
     .toolbarSectionButton

Packages/ohif-measurements/client/components/measurementTable/measurementTableRow/measurementTableRow.js

@@ -65,6 +65,7 @@ Template.measurementTableRow.events({
 
     'click .js-delete'(event, instance) {
         const dialogSettings = {
+            class: 'themed',
             title: 'Delete measurements',
             message: 'Are you sure you want to delete the measurement across all timepoints?',
             position: {

Packages/ohif-measurements/client/components/measurementTable/measurementTableTimepointCell/measurementTableTimepointCell.js

@@ -93,9 +93,15 @@ Template.measurementTableTimepointCell.events({
         if (keyCode === keys.DELETE || keyCode === keys.BACKSPACE || (keyCode === keys.D && event.ctrlKey === true)) {
             const timepointId = instance.data.timepointId;
 
+            const offset = $(event.currentTarget).offset();
             const dialogSettings = {
+                class: 'themed',
                 title: 'Delete measurements',
-                message: 'Are you sure you want to delete this measurement?'
+                message: 'Are you sure you want to delete this measurement?',
+                position: {
+                    x: offset.left,
+                    y: offset.top
+                }
             };
 
             OHIF.ui.showDialog('dialogConfirm', dialogSettings).then(() => {

Packages/ohif-measurements/client/components/measurementTable/measurementTableView/measurementTableView.html

@@ -1,5 +1,4 @@
 <template name="measurementTableView">
-    <div class="measurementTableView scrollArea">
     {{#let config=measurementConfiguration groups=measurementGroups.get}}
         {{#each measurementGroup in groups}}
             {{! #if hasMeasurements measurementGroup.toolGroup.id}}
@@ -30,10 +29,11 @@
             {{/let}}
         {{/each}}
     {{/let}}
+    {{#unless this.isHud}}
         {{#if or (hasMeasurements 'targets') (hasMeasurements 'nonTargets')}}
             <div class="report-area">
                 <div class="btn btn-sm js-pdf">Generate Report</div>
             </div>
         {{/if}}
-    </div>
+    {{/unless}}
 </template>

Packages/ohif-measurements/client/components/measurementTable/measurementTableView/measurementTableView.styl

@@ -1,17 +1,6 @@
 @import "{ohif:design}/app"
 
-.measurementTableView.scrollArea
+.measurementTableView
-  // height: calc(100% - 105px)
-  height: calc(100% - 50px)
-  overflow-x: hidden
-  overflow-y: auto
-  margin-right: -36px
-  padding-right: 36px
-  -webkit-overflow-scrolling: touch
-  -ms-overflow-style: none
-
-  &::-webkit-scrollbar
-    display: none
 
   .report-area
     theme('background-color', '$uiGrayDarker')

Packages/ohif-measurements/client/lib/syncMeasurementAndToolData.js

@@ -5,6 +5,12 @@ OHIF.measurements.syncMeasurementAndToolData = measurement => {
     OHIF.log.info('syncMeasurementAndToolData');
 
     const toolState = cornerstoneTools.globalImageIdSpecificToolStateManager.saveToolState();
+
+    // Stop here if the metadata for the measurement's study is not loaded yet
+    const { studyInstanceUid } = measurement;
+    const metadata = OHIF.viewer.StudyMetadataList.findBy({ studyInstanceUid });
+    if (!metadata) return;
+
     const imageId = OHIF.viewerbase.getImageIdForImagePath(measurement.imagePath);
     const toolType = measurement.toolType;