Move TargetedMS QC/chart UI off ExtJS to plain JS + HTML

resources/views/configureQCMetric.html

@@ -230,7 +230,7 @@
 
                         const windowConfig = {
                             parent: this,
-                            traces: tracesPresent ? traces : {} ,
+                            traces: tracesPresent ? traces : [] ,
                             tracesPresent: tracesPresent,
                             operation: op
                         }
@@ -239,7 +239,7 @@
                             windowConfig.metric = clickedMetric;
                         }
 
-                        Ext4.create('Panorama.Window.AddTraceMetricWindow', windowConfig).show();
+                        Panorama.Window.AddTraceMetricWindow.show(windowConfig);
                     }
                 });
             },

resources/views/configureQCMetric.view.xml

@@ -4,6 +4,8 @@
     </requiresPermissions>
     <dependencies>
         <dependency path="internal/jQuery"/>
+        <!-- The three metric dialogs below are plain jQuery/HTML but still style their chrome with
+             the Ext4 stylesheet's x4-window* classes, so this dependency is not yet removable. -->
         <dependency path="Ext4"/>
         <dependency path="PanoramaPremium/window/AddNewMetricWindow.js"/>
         <dependency path="PanoramaPremium/window/AddNewTraceMetricWindow.js"/>

resources/web/PanoramaPremium/window/AddNewAnnotationMetricWindow.js

@@ -13,9 +13,28 @@
     let _allAnnotations = [];
 
     function closeDialog() {
+        $(document).off('keydown.lkAnnotationMetric');
         $('#' + DIALOG_ID).remove();
     }
 
+    // Keep Tab inside the modal
+    function trapFocus(e) {
+        const $focusable = $('#' + DIALOG_ID).find('input, select, button').filter(':visible').not(':disabled');
+        if ($focusable.length === 0) {
+            return;
+        }
+        const first = $focusable[0];
+        const last = $focusable[$focusable.length - 1];
+        if (e.shiftKey && e.target === first) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && e.target === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
+
     function showError(msg) {
         $('#lk-annotation-metric-error').text(msg).show();
     }
@@ -162,10 +181,13 @@
         const isPrecursor = op === 'update' && metric.PrecursorScoped;
         const title = op === 'insert' ? 'Add Annotation-Backed Metric' : 'Edit Annotation-Backed Metric';
 
-        return '<div id="' + DIALOG_ID + '" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;">'
+        return '<div id="' + DIALOG_ID + '" role="dialog" aria-modal="true" aria-labelledby="lk-annotation-metric-title"'
+            + ' style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;">'
             + '<div class="x4-window x4-window-default" style="min-width:480px;max-width:580px;">'
+            // The x4-window* classes come from the Ext4 stylesheet, which configureQCMetric.view.xml
+            // still declares. Dropping that dependency strips this dialog's border, header and background.
             +   '<div class="x4-window-header x4-window-header-default x4-window-header-default-top" style="padding:4px 8px;border:none;">'
-            +     '<p class="x4-window-header-text-container-default" style="font-size:14px;margin:0;">' + LABKEY.Utils.encodeHtml(title) + '</p>'
+            +     '<p class="x4-window-header-text-container-default" id="lk-annotation-metric-title" style="font-size:14px;margin:0;">' + LABKEY.Utils.encodeHtml(title) + '</p>'
             +   '</div>'
             +   '<div class="x4-window-body" style="background:white;padding:10px 12px;">'
             +     '<table style="border-collapse:collapse;width:100%;">'
@@ -197,7 +219,7 @@
             _config = config;
             _allAnnotations = [];
 
-            $('#' + DIALOG_ID).remove();
+            closeDialog();
             $('body').append(buildDialogHtml());
 
             $('#lk-annotation-metric-cancel').on('click', closeDialog);
@@ -212,6 +234,17 @@
                 if (e.target === this) closeDialog();
             });
 
+            $('#lk-annotation-metric-name').trigger('focus');
+
+            $(document).on('keydown.lkAnnotationMetric', function(e) {
+                if (e.key === 'Escape') {
+                    closeDialog();
+                }
+                else if (e.key === 'Tab') {
+                    trapFocus(e);
+                }
+            });
+
             LABKEY.Query.selectRows({
                 schemaName: 'targetedms',
                 queryName: 'AnnotationSettings',

resources/web/PanoramaPremium/window/AddNewMetricWindow.js

@@ -13,9 +13,28 @@
     let _queries = [];
 
     function closeDialog() {
+        $(document).off('keydown.lkCustomMetric');
         $('#' + DIALOG_ID).remove();
     }
 
+    // Ext.window.Window used to keep Tab inside the modal; do the same by hand
+    function trapFocus(e) {
+        const $focusable = $('#' + DIALOG_ID).find('input, select, button').filter(':visible').not(':disabled');
+        if ($focusable.length === 0) {
+            return;
+        }
+        const first = $focusable[0];
+        const last = $focusable[$focusable.length - 1];
+        if (e.shiftKey && e.target === first) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && e.target === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
+
     function showError(msg) {
         $('#lk-custom-metric-error').text(msg).show();
     }
@@ -169,10 +188,13 @@
         const isPrecursor = op === 'update' ? !!metric.PrecursorScoped : false;
         const title = op === 'insert' ? 'Add New Custom Metric' : 'Edit Custom Metric';
 
-        return '<div id="' + DIALOG_ID + '" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;">'
+        return '<div id="' + DIALOG_ID + '" role="dialog" aria-modal="true" aria-labelledby="lk-custom-metric-title"'
+            + ' style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;">'
             + '<div class="x4-window x4-window-default" style="min-width:480px;max-width:580px;">'
+            // The x4-window* classes come from the Ext4 stylesheet, which configureQCMetric.view.xml
+            // still declares. Dropping that dependency strips this dialog's border, header and background.
             +   '<div class="x4-window-header x4-window-header-default x4-window-header-default-top" style="padding:4px 8px;border:none;">'
-            +     '<p class="x4-window-header-text-container-default" style="font-size:14px;margin:0;">' + LABKEY.Utils.encodeHtml(title) + '</p>'
+            +     '<p class="x4-window-header-text-container-default" id="lk-custom-metric-title" style="font-size:14px;margin:0;">' + LABKEY.Utils.encodeHtml(title) + '</p>'
             +   '</div>'
             +   '<div class="x4-window-body" style="background:white;padding:10px 12px;">'
             +     '<table style="border-collapse:collapse;width:100%;">'
@@ -204,7 +226,7 @@
             _config = config;
             _queries = [];
 
-            $('#' + DIALOG_ID).remove();
+            closeDialog();
             $('body').append(buildDialogHtml());
 
             $('#lk-custom-metric-cancel').on('click', closeDialog);
@@ -217,6 +239,17 @@
                 if (e.target === this) closeDialog();
             });
 
+            $('#lk-custom-metric-name').trigger('focus');
+
+            $(document).on('keydown.lkCustomMetric', function(e) {
+                if (e.key === 'Escape') {
+                    closeDialog();
+                }
+                else if (e.key === 'Tab') {
+                    trapFocus(e);
+                }
+            });
+
             LABKEY.Query.getQueries({
                 schemaName: 'targetedms',
                 success: function(queriesInfo) {