diff --git a/api-src/org/labkey/api/targetedms/model/QCMetricConfiguration.java b/api-src/org/labkey/api/targetedms/model/QCMetricConfiguration.java
index 73d10893e..3a9000ac8 100644
--- a/api-src/org/labkey/api/targetedms/model/QCMetricConfiguration.java
+++ b/api-src/org/labkey/api/targetedms/model/QCMetricConfiguration.java
@@ -33,6 +33,7 @@ public class QCMetricConfiguration implements Comparable<QCMetricConfiguration>
     private String _yAxisLabel;
     private Double _upperBound;
     private Double _lowerBound;
+    private String _annotationName;
 
     public int getId()
     {
@@ -164,6 +165,16 @@ public void setLowerBound(Double lowerBound)
         _lowerBound = lowerBound;
     }
 
+    public String getAnnotationName()
+    {
+        return _annotationName;
+    }
+
+    public void setAnnotationName(String annotationName)
+    {
+        _annotationName = annotationName;
+    }
+
     public JSONObject toJSON(){
         JSONObject jsonObject = new JSONObject();
         jsonObject.put("id", _id);
@@ -195,6 +206,9 @@ public JSONObject toJSON(){
         if (_upperBound != null) {
             jsonObject.put("upperBound", _upperBound);
         }
+        if (_annotationName != null) {
+            jsonObject.put("annotationName", _annotationName);
+        }
 
         return jsonObject;
     }
diff --git a/resources/queries/targetedms/qcMetricsConfig.sql b/resources/queries/targetedms/qcMetricsConfig.sql
index d1f1248ef..bb5d5082d 100644
--- a/resources/queries/targetedms/qcMetricsConfig.sql
+++ b/resources/queries/targetedms/qcMetricsConfig.sql
@@ -30,7 +30,8 @@ SELECT
        qmc.MaxTimeValue,
        qmc.TimeValueOption,
        qmc.TraceName,
-       qmc.YAxisLabel
+       qmc.YAxisLabel,
+       qmc.AnnotationName
 FROM
       qcmetricconfiguration qmc
 FULL JOIN   qcenabledmetrics qem
diff --git a/resources/schemas/dbscripts/postgresql/targetedms-26.007-26.008.sql b/resources/schemas/dbscripts/postgresql/targetedms-26.007-26.008.sql
new file mode 100644
index 000000000..17c40a29a
--- /dev/null
+++ b/resources/schemas/dbscripts/postgresql/targetedms-26.007-26.008.sql
@@ -0,0 +1 @@
+ALTER TABLE targetedms.QCMetricConfiguration ADD COLUMN AnnotationName VARCHAR(255);
diff --git a/resources/schemas/targetedms.xml b/resources/schemas/targetedms.xml
index b864b0d66..1ba2d107b 100644
--- a/resources/schemas/targetedms.xml
+++ b/resources/schemas/targetedms.xml
@@ -1366,6 +1366,7 @@
             <column columnName="TimeValueOption"/>
             <column columnName="TraceName"/>
             <column columnName="YAxisLabel"/>
+            <column columnName="AnnotationName"/>
         </columns>
     </table>
     <table tableName="QCMetricExclusion" tableDbType="TABLE">
diff --git a/resources/views/configureQCMetric.html b/resources/views/configureQCMetric.html
index 9a608a2c5..0d65d3017 100644
--- a/resources/views/configureQCMetric.html
+++ b/resources/views/configureQCMetric.html
@@ -12,6 +12,10 @@
         LABKEY.internal = {};
 
     LABKEY.internal.ConfigureQCMetrics = new function () {
+        const METRIC_TYPE_CUSTOM = 'custom';
+        const METRIC_TYPE_TRACE = 'trace';
+        const METRIC_TYPE_ANNOTATION = 'annotation';
+
         let qcMetrics;
         let qcMetricsTable ='';
         let configRows = [];
@@ -36,7 +40,7 @@
                 qcMetricsTable += '<tr class="' + rowClass + '">';
 
                 qcMetricsTable += '<td>' + (editLock ? '<a id="editLink' + row.id + '" href="#">' : '' ) + LABKEY.Utils.encodeHtml(row.name) + '</td>' + (editLock ? '</a>' : '' );
-                qcMetricsTable += '<td>' + (row.PrecursorScoped ? 'Precursor' : 'Run') + '</td>';
+                qcMetricsTable += '<td>' + (row.PrecursorScoped ? 'Precursor' : 'Replicate') + '</td>';
 
                 if (row.EffectiveStatus === 'NoData') {
                     qcMetricsTable += '<td id=\"' + LABKEY.Utils.encodeHtml(row.name) + '\">No data in this folder</td>';
@@ -59,11 +63,14 @@
             });
 
             qcMetricsTable += '</table><br>' +
-                    '<button type="button" class="labkey-button primary" id="saveButton" style="margin-right: 20px;">Save</button>' +
-                    '<button type="button" class="labkey-button" id="cancelButton" style="margin-right: 20px;">Cancel</button>' +
-                    '<button type="button" class="labkey-button" id="createNewCustomMetricButton" style="margin-right: 20px;">Add New Custom Metric</button>' +
-                    '<button type="button" class="labkey-button" id="createNewTraceMetricButton" style="margin-right: 20px;">Add New Trace Metric</button>' +
+                    '<div style="display:flex;flex-wrap:wrap;gap:8px;">' +
+                    '<button type="button" class="labkey-button primary" id="saveButton">Save</button>' +
+                    '<button type="button" class="labkey-button" id="cancelButton">Cancel</button>' +
+                    '<button type="button" class="labkey-button" id="createNewCustomMetricButton">Add New Custom Metric</button>' +
+                    '<button type="button" class="labkey-button" id="createNewTraceMetricButton">Add New Trace Metric</button>' +
+                    '<button type="button" class="labkey-button" id="createNewAnnotationMetricButton">Add Annotation-Backed Metric</button>' +
                     '<button type="button" class="labkey-button" id="clearCacheButton">Clear Cached Metric Values</button>' +
+                    '</div>' +
                     '</form><br>Edits to queries backing existing custom metrics require a manual cache clearing to display the updated results.</p>';
 
             jQuery('#qcMetricsTable').html(qcMetricsTable);
@@ -77,10 +84,13 @@
                 LABKEY.internal.ConfigureQCMetrics.resetQCMetrics();
             });
             jQuery('#createNewCustomMetricButton').click(function() {
-                LABKEY.internal.ConfigureQCMetrics.addNewMetric('custom');
+                LABKEY.internal.ConfigureQCMetrics.addNewMetric(METRIC_TYPE_CUSTOM);
             });
             jQuery('#createNewTraceMetricButton').click(function() {
-                LABKEY.internal.ConfigureQCMetrics.addNewMetric('trace')
+                LABKEY.internal.ConfigureQCMetrics.addNewMetric(METRIC_TYPE_TRACE);
+            });
+            jQuery('#createNewAnnotationMetricButton').click(function() {
+                LABKEY.internal.ConfigureQCMetrics.addNewMetric(METRIC_TYPE_ANNOTATION);
             });
             jQuery('#clearCacheButton').click(function() {
                 jQuery('#qcMetricsError').text('Clearing cached metrics...');
@@ -169,7 +179,10 @@
 
                 const op = 'update';
                 if (clickedQcMetricConfig.TraceName) {
-                    LABKEY.internal.ConfigureQCMetrics.showTraceMetricWindow(op, clickedQcMetricConfig)
+                    LABKEY.internal.ConfigureQCMetrics.showTraceMetricWindow(op, clickedQcMetricConfig);
+                }
+                else if (clickedQcMetricConfig.AnnotationName) {
+                    LABKEY.internal.ConfigureQCMetrics.showAnnotationMetricWindow(op, clickedQcMetricConfig);
                 }
                 else {
                     LABKEY.internal.ConfigureQCMetrics.showCustomMetricWindow(op, clickedQcMetricConfig);
@@ -181,22 +194,11 @@
             },
 
             showCustomMetricWindow: function (op, clickedMetric) {
-                LABKEY.Query.getSchemas({
-                    scope: this,
-                    containerPath: LABKEY.container.id,
-                    success:  function(schemasInfo) {
-                        const windowConfig = {
-                            parent: this,
-                            schemas: schemasInfo.schemas,
-                            operation: op
-                        };
-
-                        if (clickedMetric) {
-                            windowConfig.metric = clickedMetric;
-                        }
-                        Ext4.create('Panorama.Window.AddCustomMetricWindow', windowConfig).show();
-                    }
-                });
+                const windowConfig = { operation: op };
+                if (clickedMetric) {
+                    windowConfig.metric = clickedMetric;
+                }
+                Panorama.Window.AddCustomMetricWindow.show(windowConfig);
             },
 
             showTraceMetricWindow: function (op, clickedMetric) {
@@ -242,13 +244,27 @@
                 });
             },
 
+            showAnnotationMetricWindow: function (op, clickedMetric) {
+                const windowConfig = {
+                    parent: this,
+                    operation: op
+                };
+                if (clickedMetric) {
+                    windowConfig.metric = clickedMetric;
+                }
+                Panorama.Window.AddAnnotationMetricWindow.show(windowConfig);
+            },
+
             addNewMetric: function (metricType) {
                 const op = 'insert';
-                if (metricType === 'custom') {
+                if (metricType === METRIC_TYPE_CUSTOM) {
                     this.showCustomMetricWindow(op);
                 }
-                else if (metricType === 'trace') {
-                    this.showTraceMetricWindow(op)
+                else if (metricType === METRIC_TYPE_TRACE) {
+                    this.showTraceMetricWindow(op);
+                }
+                else if (metricType === METRIC_TYPE_ANNOTATION) {
+                    this.showAnnotationMetricWindow(op);
                 }
             },
 
diff --git a/resources/views/configureQCMetric.view.xml b/resources/views/configureQCMetric.view.xml
index d10619e34..69c26d2dd 100644
--- a/resources/views/configureQCMetric.view.xml
+++ b/resources/views/configureQCMetric.view.xml
@@ -7,6 +7,7 @@
         <dependency path="Ext4"/>
         <dependency path="PanoramaPremium/window/AddNewMetricWindow.js"/>
         <dependency path="PanoramaPremium/window/AddNewTraceMetricWindow.js"/>
+        <dependency path="PanoramaPremium/window/AddNewAnnotationMetricWindow.js"/>
         <dependency path="TargetedMS/js/misc.js"/>
     </dependencies>
 </view>
\ No newline at end of file
diff --git a/resources/web/PanoramaPremium/window/AddNewAnnotationMetricWindow.js b/resources/web/PanoramaPremium/window/AddNewAnnotationMetricWindow.js
new file mode 100644
index 000000000..2d036864b
--- /dev/null
+++ b/resources/web/PanoramaPremium/window/AddNewAnnotationMetricWindow.js
@@ -0,0 +1,226 @@
+/*
+ * Copyright (c) 2025 LabKey Corporation. All rights reserved. No portion of this work may be reproduced in
+ * any form or by any electronic or mechanical means without written permission from LabKey Corporation.
+ */
+
+(function($) {
+    window.Panorama = window.Panorama || {};
+    window.Panorama.Window = window.Panorama.Window || {};
+
+    const DIALOG_ID = 'lk-annotation-metric-dialog';
+    let _config = null;
+    let _allAnnotations = [];
+
+    function closeDialog() {
+        $('#' + DIALOG_ID).remove();
+    }
+
+    function showError(msg) {
+        $('#lk-annotation-metric-error').text(msg).show();
+    }
+
+    function clearErrors() {
+        $('#lk-annotation-metric-error').hide().text('');
+        $('#lk-annotation-metric-name, #lk-annotation-metric-ylabel, #lk-annotation-name-select')
+            .css('border-color', '');
+    }
+
+    function markInvalid($field) {
+        $field.css('border-color', 'red');
+    }
+
+    function validate() {
+        clearErrors();
+        let isValid = true;
+
+        if (!$('#lk-annotation-metric-name').val().trim()) {
+            markInvalid($('#lk-annotation-metric-name'));
+            isValid = false;
+        }
+        if (!$('#lk-annotation-metric-ylabel').val().trim()) {
+            markInvalid($('#lk-annotation-metric-ylabel'));
+            isValid = false;
+        }
+        if (!$('#lk-annotation-name-select').val()) {
+            markInvalid($('#lk-annotation-name-select'));
+            isValid = false;
+        }
+
+        if (!isValid) {
+            showError('Please fill in all required fields.');
+        }
+        return isValid;
+    }
+
+    function getAnnotationTarget() {
+        return $('input[name="annotationType"]:checked').val() === 'precursor'
+            ? 'precursor_result'
+            : 'replicate';
+    }
+
+    function getFilteredAnnotations() {
+        const target = getAnnotationTarget();
+        const seen = {};
+        const result = [];
+        _allAnnotations.forEach(function(row) {
+            const targets = (row['Targets'] || '').split(',').map(function(s) { return s.trim(); });
+            if (targets.indexOf(target) >= 0 && !seen[row['Name']]) {
+                seen[row['Name']] = true;
+                result.push(row['Name']);
+            }
+        });
+        result.sort();
+        return result;
+    }
+
+    function refreshAnnotationsSelect() {
+        const $select = $('#lk-annotation-name-select');
+        const currentVal = $select.val();
+        $select.empty().append($('<option>').val('').text('-- Select annotation --'));
+        getFilteredAnnotations().forEach(function(name) {
+            $select.append($('<option>').val(name).text(name));
+        });
+
+        const metric = _config && _config.metric;
+        if (_config.operation === 'update' && metric && metric.AnnotationName) {
+            $select.val(metric.AnnotationName);
+        } else if (currentVal) {
+            $select.val(currentVal);
+        }
+    }
+
+    function checkMetricNameExists(metricName, callback) {
+        const filterArray = [LABKEY.Filter.create('Name', metricName, LABKEY.Filter.Types.EQUAL)];
+        if (_config.operation === 'update' && _config.metric) {
+            filterArray.push(LABKEY.Filter.create('id', _config.metric.id, LABKEY.Filter.Types.NOT_EQUAL));
+        }
+        LABKEY.Query.selectRows({
+            containerPath: LABKEY.container.path,
+            schemaName: 'targetedms',
+            queryName: 'qcmetricconfiguration',
+            filterArray: filterArray,
+            success: function(data) { callback(data.rows.length > 0); },
+            failure: function() { callback(false); }
+        });
+    }
+
+    function save() {
+        if (!validate()) return;
+
+        const metricName = $('#lk-annotation-metric-name').val().trim();
+        checkMetricNameExists(metricName, function(exists) {
+            if (exists) {
+                showError('A metric with the name "' + LABKEY.Utils.encodeHtml(metricName) + '" already exists. Please choose a different name.');
+                markInvalid($('#lk-annotation-metric-name'));
+                return;
+            }
+
+            const newMetric = {
+                Name: metricName,
+                QueryName: 'QCAnnotationMetric',
+                YAxisLabel: $('#lk-annotation-metric-ylabel').val().trim(),
+                PrecursorScoped: $('input[name="annotationType"]:checked').val() === 'precursor',
+                AnnotationName: $('#lk-annotation-name-select').val()
+            };
+            if (_config.operation === 'update') {
+                newMetric.id = _config.metric.id;
+            }
+
+            LABKEY.Query.saveRows({
+                containerPath: LABKEY.container.id,
+                commands: [{ schemaName: 'targetedms', queryName: 'qcmetricconfiguration', command: _config.operation, rows: [newMetric] }],
+                method: 'POST',
+                success: function() { window.location.reload(); },
+                failure: function(response) {
+                    showError((response && (response.exception || response.message)) || 'Error saving metric');
+                }
+            });
+        });
+    }
+
+    function deleteMetric() {
+        if (!confirm('This will delete the "' + _config.metric.name + '" metric. Are you sure?')) return;
+
+        LABKEY.Query.saveRows({
+            containerPath: LABKEY.container.path,
+            commands: [
+                { schemaName: 'targetedms', queryName: 'qcenabledmetrics', command: 'delete', rows: [{ metric: _config.metric.id }] },
+                { schemaName: 'targetedms', queryName: 'qcmetricconfiguration', command: 'delete', rows: [{ id: _config.metric.id }] }
+            ],
+            method: 'POST',
+            success: function() { window.location.reload(); },
+            failure: function(response) {
+                showError((response && (response.exception || response.message)) || 'Error deleting metric');
+            }
+        });
+    }
+
+    function buildDialogHtml() {
+        const op = _config.operation;
+        const metric = _config.metric || {};
+        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;">'
+            + '<div class="x4-window x4-window-default" style="min-width:480px;max-width:580px;">'
+            +   '<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>'
+            +   '</div>'
+            +   '<div class="x4-window-body" style="background:white;padding:10px 12px;">'
+            +     '<table style="border-collapse:collapse;width:100%;">'
+            +       '<tr><td style="padding:5px 10px 5px 0;white-space:nowrap;"><label for="lk-annotation-metric-name">Metric Name *</label></td>'
+            +           '<td style="padding:5px 0;"><input type="text" id="lk-annotation-metric-name" style="width:100%;box-sizing:border-box;" value="' + LABKEY.Utils.encodeHtml(metric.name || '') + '"/></td></tr>'
+            +       '<tr><td style="padding:5px 10px 5px 0;white-space:nowrap;"><label for="lk-annotation-metric-ylabel">Y-Axis Label *</label></td>'
+            +           '<td style="padding:5px 0;"><input type="text" id="lk-annotation-metric-ylabel" style="width:100%;box-sizing:border-box;" value="' + LABKEY.Utils.encodeHtml(metric.YAxisLabel || '') + '"/></td></tr>'
+            +       '<tr><td style="padding:5px 10px 5px 0;white-space:nowrap;">Annotation Type</td>'
+            +           '<td style="padding:5px 0;">'
+            +             '<label style="margin-right:16px;"><input type="radio" name="annotationType" value="replicate"' + (!isPrecursor ? ' checked' : '') + '> Replicate</label>'
+            +             '<label><input type="radio" name="annotationType" value="precursor"' + (isPrecursor ? ' checked' : '') + '> Precursor</label>'
+            +           '</td></tr>'
+            +       '<tr><td style="padding:5px 10px 5px 0;white-space:nowrap;"><label for="lk-annotation-name-select">Annotation *</label></td>'
+            +           '<td style="padding:5px 0;"><select id="lk-annotation-name-select" style="width:100%;box-sizing:border-box;"><option value="">Loading...</option></select></td></tr>'
+            +     '</table>'
+            +     '<div id="lk-annotation-metric-error" class="labkey-error" style="display:none;margin-top:8px;"></div>'
+            +     '<div style="margin-top:12px;text-align:right;">'
+            +       '<button type="button" class="labkey-button" id="lk-annotation-metric-cancel">Cancel</button>'
+            +       (op === 'update' ? ' <button type="button" class="labkey-button" id="lk-annotation-metric-delete">Delete</button>' : '')
+            +       ' <button type="button" class="labkey-button primary" id="lk-annotation-metric-save">Save</button>'
+            +     '</div>'
+            +   '</div>'
+            + '</div>'
+            + '</div>';
+    }
+
+    window.Panorama.Window.AddAnnotationMetricWindow = {
+        show: function(config) {
+            _config = config;
+            _allAnnotations = [];
+
+            $('#' + DIALOG_ID).remove();
+            $('body').append(buildDialogHtml());
+
+            $('#lk-annotation-metric-cancel').on('click', closeDialog);
+            $('#lk-annotation-metric-save').on('click', save);
+            if (config.operation === 'update') {
+                $('#lk-annotation-metric-delete').on('click', deleteMetric);
+            }
+            $('input[name="annotationType"]').on('change', refreshAnnotationsSelect);
+
+            // close on overlay click
+            $('#' + DIALOG_ID).on('click', function(e) {
+                if (e.target === this) closeDialog();
+            });
+
+            LABKEY.Query.selectRows({
+                schemaName: 'targetedms',
+                queryName: 'AnnotationSettings',
+                columns: ['Name', 'Targets', 'Type'],
+                filterArray: [LABKEY.Filter.create('Type', 'number', LABKEY.Filter.Types.EQUAL)],
+                success: function(data) {
+                    _allAnnotations = data.rows || [];
+                    refreshAnnotationsSelect();
+                }
+            });
+        }
+    };
+})(jQuery);
diff --git a/resources/web/PanoramaPremium/window/AddNewMetricWindow.js b/resources/web/PanoramaPremium/window/AddNewMetricWindow.js
index 5ab7bfd43..f08ee53a2 100644
--- a/resources/web/PanoramaPremium/window/AddNewMetricWindow.js
+++ b/resources/web/PanoramaPremium/window/AddNewMetricWindow.js
@@ -3,394 +3,226 @@
  * any form or by any electronic or mechanical means without written permission from LabKey Corporation.
  */
 
-Ext4.define('Panorama.Window.AddCustomMetricWindow', {
-    extend: 'Ext.window.Window',
+(function($) {
+    window.Panorama = window.Panorama || {};
+    window.Panorama.Window = window.Panorama.Window || {};
 
-    modal: true,
-    closeAction: 'destroy',
-    bodyStyle: 'padding: 10px;',
-    autoScroll: true,
-    border: false,
-    update: 'update',
-    insert: 'insert',
+    const DIALOG_ID = 'lk-custom-metric-dialog';
+    let _config = null;
+    let _queries = [];
 
-    SCHEMA_NAME: 'targetedms',
-
-
-    initComponent: function() {
-        var title = this.operation === this.insert ? 'Add New Metric' : 'Edit Metric';
-        this.setTitle(title);
-        this.height = Ext4.max([Ext4.getBody().getHeight() * 0.25, 200]);
-        this.width = Ext4.max([Ext4.getBody().getWidth() * 0.2, 450]);
-        this.items = this.getItems();
-        this.dockedItems= [{
-            xtype: 'toolbar',
-            dock: 'bottom',
-            ui: 'footer',
-            items: this.getButtons()
-        }]
-
-        this.callParent();
-
-        LABKEY.Query.getQueries({
-            scope: this,
-            schemaName: this.SCHEMA_NAME,
-            success: function(queriesInfo) {
-                this.queries = queriesInfo.queries;
-            }
-        });
-
-    },
-
-    getItems: function() {
-        return [
-            this.getMetricNameField(),
-            this.getQueriesCombo(),
-            this.getMetricTypeCombo(),
-            this.getYAxisLabelField(),
-            this.getQueryError(),
-        ];
-    },
-
-    getButtons: function () {
-        var buttons = [];
-
-        buttons.push(this.getCancelButton());
-        buttons.push('->'); // to push remaining buttons to the right
-        if (this.operation === this.update) {
-            buttons.push(this.getDeleteButton());
-        }
-        buttons.push(this.getSaveButton());
-        return buttons;
-    },
-
-    getMetricNameField: function() {
-        if (!this.metricNameField) {
-            this.metricNameField = Ext4.create('Ext.form.field.Text', {
-                fieldLabel: 'Name',
-                labelWidth: 150,
-                width: 400,
-                name: 'metricName'
-            });
-
-            if(this.operation === this.update) {
-                this.metricNameField.setValue(this.metric.name);
-            }
-        }
-
-        return this.metricNameField;
-    },
-
-    getQueriesConfig: function(label, name) {
-        return {
-            fieldLabel: label,
-            name: name,
-            labelWidth: 150,
-            width: 400,
-            displayField : 'title',
-            valueField : 'name'
-        };
-    },
-
-    getQueriesStore: function() {
-        return  Ext4.create('Ext.data.Store', {
-            data: this.queries,
-            fields: ['name','title'],
-            sorters: [{
-                sorterFn: this.getQueriesSorter
-            }]
-        });
-    },
-
-    getQueriesSorter: function(val1, val2) {
-        return LABKEY.internal.SortUtil.naturalSort(val1.get('name'), val2.get('name'));
-    },
-
-    getQueriesCombo: function() {
-        if(!this.queriesCombo) {
-            var config = Ext4.apply(this.getQueriesConfig('Metrics Query', 'queryName'), {
-                listeners: {
-                    scope: this,
-                    expand: function (field, options) {
-                        if (this.queries) {
-                            this.queriesCombo.bindStore(this.getQueriesStore());
-                        }
-                    },
-                    select: function(combo, records) {
-                        this.validateQCMetricQuery(records[0].data.name, this.queries, combo);
-                    }
-                }
-            });
-            this.queriesCombo = Ext4.create('Ext.form.field.ComboBox', config);
-
-            if(this.operation === this.update) {
-                this.queriesCombo.setValue(this.metric.QueryName);
-            }
-        }
-
-        return this.queriesCombo;
-    },
-
-    getYAxisLabelField: function() {
-        if (!this.yAxisLabelField) {
-            this.yAxisLabelField = Ext4.create('Ext.form.field.Text', {
-                fieldLabel: 'Y-Axis Label',
-                labelWidth: 150,
-                width: 400,
-                name: 'yAxisLabel'
-            });
-
-            if(this.operation === this.update) {
-                this.yAxisLabelField.setValue(this.metric.YAxisLabel);
-            }
-        }
-
-        return this.yAxisLabelField;
-    },
-
-    getMetricTypeCombo: function() {
-        if(!this.metricTypeCombo) {
-            var metricTypeStore = Ext4.create('Ext.data.Store', {
-                data: [{name: 'Precursor', value: true}, {name: 'Run', value: false}],
-                fields: ['name','value']
-            });
-
-            var config = {
-                fieldLabel: 'Metric Type',
-                name: 'metricType',
-                labelWidth: 150,
-                width: 400,
-                store: metricTypeStore,
-                displayField : 'name',
-                valueField : 'value'
-            };
-            this.metricTypeCombo = Ext4.create('Ext.form.field.ComboBox', config);
-
-            this.metricTypeCombo.setValue(this.operation === this.insert ? true : this.metric.PrecursorScoped);
-        }
-        return this.metricTypeCombo;
-    },
-
-    getQueryError: function() {
-        if (!this.queryError) {
-            this.queryError = Ext4.create('Ext.form.Label', {
-                name: 'errorMsg',
-                hidden: true,
-                cls: 'labkey-error',
-                text:''
-            });
-        }
-
-        return this.queryError;
-    },
+    function closeDialog() {
+        $('#' + DIALOG_ID).remove();
+    }
 
-    getSaveButton: function() {
-        if (!this.saveButton) {
-            this.saveButton = Ext4.create('Ext.button.Button', {
-                text: 'Save',
-                scope: this,
-                handler: this.saveNewMetric
-            });
-        }
-        return this.saveButton;
-    },
+    function showError(msg) {
+        $('#lk-custom-metric-error').text(msg).show();
+    }
 
-    getDeleteButton: function() {
-        if (!this.deleteButton) {
-            this.deleteButton = Ext4.create('Ext.button.Button', {
-                text: 'Delete',
-                scope: this,
-                handler: this.deleteMetric
-            });
-        }
-        return this.deleteButton;
-    },
+    function clearErrors() {
+        $('#lk-custom-metric-error').hide().text('');
+        $('#lk-custom-metric-name, #lk-custom-metric-ylabel, #lk-custom-metric-query')
+            .css('border-color', '');
+    }
 
-    getCancelButton: function() {
-        if (!this.cancelButton) {
-            this.cancelButton = Ext4.create('Ext.button.Button', {
-                text: 'Cancel',
-                scope: this,
-                handler: function(btn){
-                    btn.up('window').close();
-                }
-            });
-        }
-        return this.cancelButton;
-    },
+    function markInvalid($field) {
+        $field.css('border-color', 'red');
+    }
 
-    validateValues: function() {
-        var isValid = true;
-        var errorText = 'Required';
+    function validate() {
+        clearErrors();
+        let isValid = true;
 
-        if(!this.metricNameField.getValue().length > 0) {
-            this.metricNameField.setActiveError(errorText);
+        if (!$('#lk-custom-metric-name').val().trim()) {
+            markInvalid($('#lk-custom-metric-name'));
             isValid = false;
         }
-
-        if(!this.queriesCombo.getValue()) {
-            this.queriesCombo.setActiveError(errorText);
+        if (!$('#lk-custom-metric-ylabel').val().trim()) {
+            markInvalid($('#lk-custom-metric-ylabel'));
             isValid = false;
         }
-
-        if(this.metricTypeCombo.getValue() == null) {
-            this.metricTypeCombo.setActiveError(errorText);
+        if (!$('#lk-custom-metric-query').val()) {
+            markInvalid($('#lk-custom-metric-query'));
             isValid = false;
         }
 
-        return isValid;
-    },
-
-    validateQCMetricQuery: function(query, queries, combo) {
-        var requiredColumns = [
-                {name: 'MetricValue', isPresent: false},
-                {name: 'SampleFileId', isPresent: false},
-                {name: 'PrecursorChromInfoId', isPresent: false},
-                ];
-        var queryConfig;
-        var isValid = true;
-
-        for(var q=0; q<queries.length; q++) {
-            if (query === queries[q].name) {
-                queryConfig = queries[q];
-            }
+        if (!isValid) {
+            showError('Please fill in all required fields.');
         }
+        return isValid;
+    }
 
-        for(var i=0; i<requiredColumns.length; i++) {
-            var requiredColumnName = requiredColumns[i].name;
-
-            for(var j=0; j<queryConfig.columns.length;j++) {
-                var presentColumnName = queryConfig.columns[j].name;
-
-                if(requiredColumnName === presentColumnName) {
-                    requiredColumns[i].isPresent = true;
-                }
+    function validateQueryColumns(queryName, callback) {
+        const requiredColumns = ['MetricValue', 'SampleFileId', 'PrecursorChromInfoId'];
+        let query;
+        for (let i = 0; i < _queries.length; i++) {
+            if (_queries[i].name === queryName) {
+                query = _queries[i];
+                break;
             }
         }
-        var errorMessage = 'Query ' + query + ' is missing required column(s): ';
-
-        var separator = '';
-        Ext4.Array.forEach(requiredColumns, function (column) {
-           if(!column.isPresent) {
-               errorMessage += separator + column.name;
-               separator = ', ';
-               isValid = false;
-           }
-        });
-
-        if(!isValid) {
-            this.queryError.setText(errorMessage);
-            combo.setActiveError('Invalid query');
+        if (!query) {
+            callback(null);
+            return;
         }
-        this.queryError.setVisible(!isValid);
-    },
-
-    checkMetricNameExists: function (metricName, callback) {
-        let filterArray = [LABKEY.Filter.create('Name', metricName, LABKEY.Filter.Types.EQUAL)];
+        const presentNames = (query.columns || []).map(function(c) { return c.name; });
+        const missing = requiredColumns.filter(function(c) { return presentNames.indexOf(c) < 0; });
+        callback(missing.length > 0 ? missing : null);
+    }
 
-        // If updating, exclude the current metric from the check
-        if (this.operation === this.update && this.metric) {
-            filterArray.push(LABKEY.Filter.create('id', this.metric.id, LABKEY.Filter.Types.NOT_EQUAL));
+    function checkMetricNameExists(metricName, callback) {
+        const filterArray = [LABKEY.Filter.create('Name', metricName, LABKEY.Filter.Types.EQUAL)];
+        if (_config.operation === 'update' && _config.metric) {
+            filterArray.push(LABKEY.Filter.create('id', _config.metric.id, LABKEY.Filter.Types.NOT_EQUAL));
         }
-
         LABKEY.Query.selectRows({
-            containerPath: LABKEY.container.id,
-            schemaName: this.SCHEMA_NAME,
+            containerPath: LABKEY.container.path,
+            schemaName: 'targetedms',
             queryName: 'qcmetricconfiguration',
             filterArray: filterArray,
-            scope: this,
-            success: function (data) {
-                callback.call(this, data.rows.length > 0);
-            },
-            failure: function () {
-                callback.call(this, false);
-            }
+            success: function(data) { callback(data.rows.length > 0); },
+            failure: function() { callback(false); }
         });
-    },
+    }
 
-    saveNewMetric: function () {
-        let isValid = this.validateValues();
+    function save() {
+        if (!validate()) return;
 
-        if(isValid) {
-            let metricName = this.metricNameField.getValue();
+        const metricName = $('#lk-custom-metric-name').val().trim();
+        const queryName = $('#lk-custom-metric-query').val();
 
-            // Check if metric name already exists
-            this.checkMetricNameExists(metricName, function (exists) {
+        validateQueryColumns(queryName, function(missing) {
+            if (missing) {
+                showError('Query ' + queryName + ' is missing required column(s): ' + missing.join(', '));
+                markInvalid($('#lk-custom-metric-query'));
+                return;
+            }
+
+            checkMetricNameExists(metricName, function(exists) {
                 if (exists) {
-                    let errorMessage = 'A metric with the name "' + metricName + '" already exists. Please choose a different name.';
-                    this.queryError.setText(errorMessage);
-                    this.queryError.setVisible(true);
-                    this.metricNameField.setActiveError('Metric name already exists');
+                    showError('A metric with the name "' + LABKEY.Utils.encodeHtml(metricName) + '" already exists. Please choose a different name.');
+                    markInvalid($('#lk-custom-metric-name'));
                     return;
                 }
 
-                let records = [];
-                let newMetric = {};
-                newMetric.Name = metricName;
-                newMetric.QueryName = this.queriesCombo.getValue();
-                newMetric.YAxisLabel = this.yAxisLabelField.getValue();
-                newMetric.PrecursorScoped = this.metricTypeCombo.getValue();
-
-                if (this.operation === this.update) {
-                    newMetric.id = this.metric.id;
+                const newMetric = {
+                    Name: metricName,
+                    QueryName: queryName,
+                    YAxisLabel: $('#lk-custom-metric-ylabel').val().trim(),
+                    PrecursorScoped: $('input[name="customMetricType"]:checked').val() === 'precursor'
+                };
+                if (_config.operation === 'update') {
+                    newMetric.id = _config.metric.id;
                 }
 
-                records.push(newMetric);
-
                 LABKEY.Query.saveRows({
                     containerPath: LABKEY.container.id,
-                    commands: [{
-                        schemaName: 'targetedms',
-                        queryName: 'qcmetricconfiguration',
-                        command: this.operation,
-                        rows: records
-                    }],
-                    scope: this,
+                    commands: [{ schemaName: 'targetedms', queryName: 'qcmetricconfiguration', command: _config.operation, rows: [newMetric] }],
                     method: 'POST',
-                    success: function () {
-                        window.location.reload();
-                    },
-                    failure: function (response) {
-                        let errorMessage = 'Error saving metric';
-                        if (response && response.exception) {
-                            errorMessage = response.exception;
-                        } else if (response && response.message) {
-                            errorMessage = response.message;
-                        }
-                        this.queryError.setText(errorMessage);
-                        this.queryError.setVisible(true);
+                    success: function() { window.location.reload(); },
+                    failure: function(response) {
+                        showError((response && (response.exception || response.message)) || 'Error saving metric');
                     }
                 });
             });
+        });
+    }
+
+    function deleteMetric() {
+        if (!confirm('This will delete the "' + _config.metric.name + '" metric. Are you sure?')) return;
+
+        LABKEY.Query.saveRows({
+            containerPath: LABKEY.container.id,
+            commands: [
+                { schemaName: 'targetedms', queryName: 'qcenabledmetrics', command: 'delete', rows: [{ metric: _config.metric.id }] },
+                { schemaName: 'targetedms', queryName: 'qcmetricconfiguration', command: 'delete', rows: [{ id: _config.metric.id }] }
+            ],
+            method: 'POST',
+            success: function() { window.location.reload(); },
+            failure: function(response) {
+                showError((response && (response.exception || response.message)) || 'Error deleting metric');
+            }
+        });
+    }
+
+    function populateQueriesSelect() {
+        const $select = $('#lk-custom-metric-query');
+        $select.empty().append($('<option>').val('').text('-- Select query --'));
+
+        const sorted = _queries.slice().sort(function(a, b) {
+            return LABKEY.internal.SortUtil.naturalSort(a.name, b.name);
+        });
+        sorted.forEach(function(q) {
+            $select.append($('<option>').val(q.name).text(q.title || q.name));
+        });
+
+        const metric = _config && _config.metric;
+        if (_config.operation === 'update' && metric && metric.QueryName) {
+            $select.val(metric.QueryName);
         }
+    }
+
+    function buildDialogHtml() {
+        const op = _config.operation;
+        const metric = _config.metric || {};
+        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;">'
+            + '<div class="x4-window x4-window-default" style="min-width:480px;max-width:580px;">'
+            +   '<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>'
+            +   '</div>'
+            +   '<div class="x4-window-body" style="background:white;padding:10px 12px;">'
+            +     '<table style="border-collapse:collapse;width:100%;">'
+            +       '<tr><td style="padding:5px 10px 5px 0;white-space:nowrap;"><label for="lk-custom-metric-name">Metric Name *</label></td>'
+            +           '<td style="padding:5px 0;"><input type="text" id="lk-custom-metric-name" style="width:100%;box-sizing:border-box;" value="' + LABKEY.Utils.encodeHtml(metric.name || '') + '"/></td></tr>'
+            +       '<tr><td style="padding:5px 10px 5px 0;white-space:nowrap;"><label for="lk-custom-metric-ylabel">Y-Axis Label *</label></td>'
+            +           '<td style="padding:5px 0;"><input type="text" id="lk-custom-metric-ylabel" style="width:100%;box-sizing:border-box;" value="' + LABKEY.Utils.encodeHtml(metric.YAxisLabel || '') + '"/></td></tr>'
+            +       '<tr><td style="padding:5px 10px 5px 0;white-space:nowrap;">Metric Type</td>'
+            +           '<td style="padding:5px 0;">'
+            +             '<label style="margin-right:16px;"><input type="radio" name="customMetricType" value="replicate"' + (!isPrecursor ? ' checked' : '') + '> Replicate</label>'
+            +             '<label><input type="radio" name="customMetricType" value="precursor"' + (isPrecursor ? ' checked' : '') + '> Precursor</label>'
+            +           '</td></tr>'
+            +       '<tr><td style="padding:5px 10px 5px 0;white-space:nowrap;"><label for="lk-custom-metric-query">Metrics Query *</label></td>'
+            +           '<td style="padding:5px 0;"><select id="lk-custom-metric-query" style="width:100%;box-sizing:border-box;"><option value="">Loading...</option></select></td></tr>'
+            +     '</table>'
+            +     '<div id="lk-custom-metric-error" class="labkey-error" style="display:none;margin-top:8px;"></div>'
+            +     '<div style="margin-top:12px;text-align:right;">'
+            +       '<button type="button" class="labkey-button" id="lk-custom-metric-cancel">Cancel</button>'
+            +       (op === 'update' ? ' <button type="button" class="labkey-button" id="lk-custom-metric-delete">Delete</button>' : '')
+            +       ' <button type="button" class="labkey-button primary" id="lk-custom-metric-save">Save</button>'
+            +     '</div>'
+            +   '</div>'
+            + '</div>'
+            + '</div>';
+    }
+
+    window.Panorama.Window.AddCustomMetricWindow = {
+        show: function(config) {
+            _config = config;
+            _queries = [];
+
+            $('#' + DIALOG_ID).remove();
+            $('body').append(buildDialogHtml());
 
-    },
+            $('#lk-custom-metric-cancel').on('click', closeDialog);
+            $('#lk-custom-metric-save').on('click', save);
+            if (config.operation === 'update') {
+                $('#lk-custom-metric-delete').on('click', deleteMetric);
+            }
+
+            $('#' + DIALOG_ID).on('click', function(e) {
+                if (e.target === this) closeDialog();
+            });
 
-    deleteMetric: function() {
-        Ext4.Msg.confirm('Delete Custom Metric', 'This will delete ' + LABKEY.Utils.encodeHtml(this.metric.name) +   ' metric. Are you sure you want to do this?', function(val){
-                if (val === 'yes'){
-                    var qcMetricToDelete = {metric: this.metric.id};
-                    var metricToDelete = {id: this.metric.id};
-                    LABKEY.Query.saveRows({
-                        containerPath: LABKEY.container.id,
-                        commands: [{
-                            schemaName: 'targetedms',
-                            queryName: 'qcenabledmetrics',
-                            command: 'delete',
-                            rows: [qcMetricToDelete]
-                        },{
-                            schemaName: 'targetedms',
-                            queryName: 'qcmetricconfiguration',
-                            command: 'delete',
-                            rows: [metricToDelete]
-                        }],
-                        scope: this,
-                        method: 'POST',
-                        success: function () {
-                            window.location.reload();
-                        }
-                    });
+            LABKEY.Query.getQueries({
+                schemaName: 'targetedms',
+                success: function(queriesInfo) {
+                    _queries = queriesInfo.queries || [];
+                    populateQueriesSelect();
                 }
-            }, this);
-    }
-});
+            });
+        }
+    };
+})(jQuery);
diff --git a/src/org/labkey/targetedms/TargetedMSModule.java b/src/org/labkey/targetedms/TargetedMSModule.java
index b3bf9a4a7..d4739e31e 100644
--- a/src/org/labkey/targetedms/TargetedMSModule.java
+++ b/src/org/labkey/targetedms/TargetedMSModule.java
@@ -231,7 +231,7 @@ public String getName()
     @Override
     public Double getSchemaVersion()
     {
-        return 26.007;
+        return 26.008;
     }
 
     @Override
diff --git a/src/org/labkey/targetedms/outliers/OutlierGenerator.java b/src/org/labkey/targetedms/outliers/OutlierGenerator.java
index f2c42bbdb..64a3c1e53 100644
--- a/src/org/labkey/targetedms/outliers/OutlierGenerator.java
+++ b/src/org/labkey/targetedms/outliers/OutlierGenerator.java
@@ -100,6 +100,31 @@ private String getEachSeriesTypePlotDataSql(QCMetricConfiguration configuration)
             sql.append(" WHERE metric = ").append(configuration.getId());
             sql.append(")");
         }
+        else if (configuration.getAnnotationName() != null)
+        {
+            // annotation-backed metrics: escape names for SQL string literals
+            String escapedName = configuration.getAnnotationName().replace("'", "''");
+            String escapedMetricName = configuration.getName().replace("'", "''");
+            if (configuration.isPrecursorScoped())
+            {
+                sql.append("(SELECT pcia.PrecursorChromInfoId, pci.SampleFileId,");
+                sql.append(" '").append(escapedMetricName).append("' AS SeriesLabel,");
+                sql.append(" CAST(pcia.Value AS REAL) AS MetricValue, ").append(configuration.getId()).append(" AS MetricId");
+                sql.append(" FROM ").append(schemaName).append(".PrecursorChromInfoAnnotation pcia");
+                sql.append(" INNER JOIN ").append(schemaName).append(".PrecursorChromInfo pci ON pcia.PrecursorChromInfoId = pci.Id");
+                sql.append(" WHERE pcia.Name = '").append(escapedName).append("')");
+            }
+            else
+            {
+                sql.append("(SELECT 0 AS PrecursorChromInfoId, sf.Id AS SampleFileId,");
+                sql.append(" '").append(escapedMetricName).append("' AS SeriesLabel,");
+                sql.append(" CAST(ra.Value AS REAL) AS MetricValue, ").append(configuration.getId()).append(" AS MetricId");
+                sql.append(" FROM ").append(schemaName).append(".ReplicateAnnotation ra");
+                sql.append(" INNER JOIN ").append(schemaName).append(".Replicate r ON ra.ReplicateId = r.Id");
+                sql.append(" INNER JOIN ").append(schemaName).append(".SampleFile sf ON sf.ReplicateId = r.Id");
+                sql.append(" WHERE ra.Name = '").append(escapedName).append("')");
+            }
+        }
         else
         {
             sql.append("(SELECT PrecursorChromInfoId, SampleFileId, ");
diff --git a/test/src/org/labkey/test/pages/panoramapremium/ConfigureMetricsUIPage.java b/test/src/org/labkey/test/pages/panoramapremium/ConfigureMetricsUIPage.java
index b87419916..ae9a4a7fb 100644
--- a/test/src/org/labkey/test/pages/panoramapremium/ConfigureMetricsUIPage.java
+++ b/test/src/org/labkey/test/pages/panoramapremium/ConfigureMetricsUIPage.java
@@ -7,7 +7,6 @@
 import org.labkey.test.components.targetedms.QCPlotsWebPart;
 import org.labkey.test.pages.PortalBodyPanel;
 import org.labkey.test.util.Ext4Helper;
-import org.openqa.selenium.NoSuchElementException;
 import org.openqa.selenium.WebDriver;
 
 import java.util.Map;
@@ -16,6 +15,7 @@ public class ConfigureMetricsUIPage extends PortalBodyPanel
 {
 
     public static final String ADD_NEW_CUSTOM_METRIC = "Add New Custom Metric";
+    public static final String ADD_NEW_ANNOTATION_METRIC = "Add Annotation-Backed Metric";
 
     public ConfigureMetricsUIPage(WebDriver driver)
     {
@@ -121,9 +121,18 @@ public String clickSaveExpectingError()
     public void addNewCustomMetric(Map<CustomMetricProperties, String> metricProperties, boolean duplicateNameErrorExpected)
     {
         click(Locator.tagWithText("button", ADD_NEW_CUSTOM_METRIC));
-        waitForElement(Ext4Helper.Locators.window("Add New Metric"));
-        Window<?> metricWindow = new Window.WindowFinder(getDriver()).withTitle("Add New Metric").waitFor();
-        editCustomMetricValues(metricWindow, metricProperties, duplicateNameErrorExpected);
+        waitForCustomMetricDialog();
+        fillCustomMetricForm(metricProperties);
+        if (duplicateNameErrorExpected)
+        {
+            click(Locator.id("lk-custom-metric-save"));
+            assertTextPresent("A metric with the name \"" + metricProperties.get(CustomMetricProperties.metricName) + "\" already exists. Please choose a different name.");
+            click(Locator.id("lk-custom-metric-cancel"));
+        }
+        else
+        {
+            clickAndWait(Locator.id("lk-custom-metric-save"));
+        }
     }
 
     public void addNewTraceMetric(Map<TraceMetricProperties, String> traceProperties, boolean duplicateNameErrorExpected)
@@ -134,56 +143,80 @@ public void addNewTraceMetric(Map<TraceMetricProperties, String> traceProperties
         editTraceMetricValues(metricWindow, traceProperties, duplicateNameErrorExpected);
     }
 
+    public void addNewAnnotationMetric(Map<AnnotationMetricProperties, String> metricProperties, boolean duplicateNameErrorExpected)
+    {
+        click(Locator.tagWithText("button", ADD_NEW_ANNOTATION_METRIC));
+        waitForAnnotationDialog();
+        fillAnnotationForm(metricProperties);
+        if (duplicateNameErrorExpected)
+        {
+            click(Locator.id("lk-annotation-metric-save"));
+            String metricName = metricProperties.get(AnnotationMetricProperties.metricName);
+            assertTextPresent("A metric with the name \"" + metricName + "\" already exists. Please choose a different name.");
+            click(Locator.id("lk-annotation-metric-cancel"));
+        }
+        else
+        {
+            clickAndWait(Locator.id("lk-annotation-metric-save"));
+        }
+    }
+
+    public void editAnnotationMetric(String metric, Map<AnnotationMetricProperties, String> metricProperties)
+    {
+        waitAndClick(Locator.linkWithText(metric));
+        waitForAnnotationDialog();
+        fillAnnotationForm(metricProperties);
+        clickAndWait(Locator.id("lk-annotation-metric-save"));
+    }
+
+    public void deleteAnnotationMetric(String metric)
+    {
+        waitAndClick(Locator.linkWithText(metric));
+        waitForAnnotationDialog();
+        click(Locator.id("lk-annotation-metric-delete"));
+        acceptAlert();
+        waitForPage();
+        waitForElementToDisappear(Locator.linkWithText(metric));
+    }
+
     public void editMetric(String metric, Map<CustomMetricProperties, String> metricProperties)
     {
-        Window<?> metricWindow = openForEdit(metric);
-        editCustomMetricValues(metricWindow, metricProperties, false);
+        openForEdit(metric);
+        fillCustomMetricForm(metricProperties);
+        clickAndWait(Locator.id("lk-custom-metric-save"));
     }
 
     public void deleteMetric(String metric)
     {
         openForEdit(metric);
-        clickButton("Delete", 0);
-        clickButton("Yes");
-        waitForPage();
+        doAndWaitForPageToLoad(() -> {
+            click(Locator.id("lk-custom-metric-delete"));
+            acceptAlert();
+        });
     }
 
-    private Window<?> openForEdit(String metric)
+    private void openForEdit(String metric)
     {
         waitAndClick(Locator.linkWithText(metric));
-        waitForElement(Ext4Helper.Locators.window("Edit Metric"));
-        return new Window.WindowFinder(getDriver()).withTitle("Edit Metric").waitFor();
+        waitForCustomMetricDialog();
     }
 
-    private void editCustomMetricValues(Window<?> metricWindow, Map<CustomMetricProperties, String> metricProperties, boolean duplicateNameErrorExpected)
+    private void waitForCustomMetricDialog()
     {
-        metricProperties.forEach((prop, val) -> {
-            if (!prop.isSelect)
-            {
-                setFormElement(Locator.name(prop.name()), val);
-            }
-            else
-            {
-                String label = prop.formLabel;
-                //adding waits does not help here, however it passes in catch block
-                try
-                {
-                    _ext4Helper.selectComboBoxItem(label, val);
-                }
-                catch (NoSuchElementException e)
-                {
-                    _ext4Helper.selectComboBoxItem(label, val);
-                }
-            }
-        });
-        if (duplicateNameErrorExpected)
-        {
-            duplicateNameErrorExpected(metricProperties.get(CustomMetricProperties.metricName));
-        }
-        else
-        {
-            clickAndWait(Ext4Helper.Locators.ext4Button("Save").findElement(metricWindow));
-        }
+        waitForElement(Locator.id("lk-custom-metric-dialog"));
+        waitForElement(Locator.tagWithText("option", "-- Select query --"));
+    }
+
+    private void fillCustomMetricForm(Map<CustomMetricProperties, String> props)
+    {
+        if (props.containsKey(CustomMetricProperties.metricName))
+            setFormElement(Locator.id("lk-custom-metric-name"), props.get(CustomMetricProperties.metricName));
+        if (props.containsKey(CustomMetricProperties.yAxisLabel))
+            setFormElement(Locator.id("lk-custom-metric-ylabel"), props.get(CustomMetricProperties.yAxisLabel));
+        if (props.containsKey(CustomMetricProperties.metricType))
+            click(Locator.css("input[name='customMetricType'][value='" + props.get(CustomMetricProperties.metricType).toLowerCase() + "']"));
+        if (props.containsKey(CustomMetricProperties.queryName))
+            selectOptionByText(Locator.id("lk-custom-metric-query"), props.get(CustomMetricProperties.queryName));
     }
 
     private void editTraceMetricValues(Window<?> metricWindow, Map<TraceMetricProperties, String> metricProperties, boolean duplicateNameErrorExpected)
@@ -215,11 +248,33 @@ else if (prop.formLabel != null)
         }
     }
 
+    private void waitForAnnotationDialog()
+    {
+        waitForElement(Locator.id("lk-annotation-metric-dialog"));
+        waitForElement(Locator.tagWithText("option", "-- Select annotation --"));
+    }
+
+    private void fillAnnotationForm(Map<AnnotationMetricProperties, String> props)
+    {
+        if (props.containsKey(AnnotationMetricProperties.metricName))
+            setFormElement(Locator.id("lk-annotation-metric-name"), props.get(AnnotationMetricProperties.metricName));
+        if (props.containsKey(AnnotationMetricProperties.yAxisLabel))
+            setFormElement(Locator.id("lk-annotation-metric-ylabel"), props.get(AnnotationMetricProperties.yAxisLabel));
+        if (props.containsKey(AnnotationMetricProperties.annotationType))
+            click(Locator.css("input[name='annotationType'][value='" + props.get(AnnotationMetricProperties.annotationType) + "']"));
+        if (props.containsKey(AnnotationMetricProperties.annotationName))
+        {
+            String annotationName = props.get(AnnotationMetricProperties.annotationName);
+            waitForElement(Locator.tagWithText("option", annotationName));
+            selectOptionByText(Locator.id("lk-annotation-name-select"), annotationName);
+        }
+    }
+
     private void duplicateNameErrorExpected(String metricName)
     {
-        click(Ext4Helper.Locators.ext4Button("Save"));
+        click(Locator.id("lk-custom-metric-save"));
         assertTextPresent("A metric with the name \"" + metricName + "\" already exists. Please choose a different name.");
-        click(Ext4Helper.Locators.ext4Button("Cancel"));
+        click(Locator.id("lk-custom-metric-cancel"));
     }
 
     public void clearMetricCache()
@@ -251,6 +306,14 @@ public enum CustomMetricProperties
         }
     }
 
+    public enum AnnotationMetricProperties
+    {
+        metricName,
+        yAxisLabel,
+        annotationType,   // "replicate" or "precursor"
+        annotationName
+    }
+
     public enum TraceMetricProperties
     {
         metricName(null, false),
diff --git a/test/src/org/labkey/test/tests/targetedms/TargetedMSQCConfigureMetricTest.java b/test/src/org/labkey/test/tests/targetedms/TargetedMSQCConfigureMetricTest.java
index e34b17b0f..6095cfd79 100644
--- a/test/src/org/labkey/test/tests/targetedms/TargetedMSQCConfigureMetricTest.java
+++ b/test/src/org/labkey/test/tests/targetedms/TargetedMSQCConfigureMetricTest.java
@@ -23,7 +23,7 @@
  * Tests the QC metric configuration UI and verifies settings propagate consistently across folder hierarchies.
  */
 @Category({})
-@BaseWebDriverTest.ClassTimeout(minutes = 5)
+@BaseWebDriverTest.ClassTimeout(minutes = 15)
 public class TargetedMSQCConfigureMetricTest extends TargetedMSPremiumTest
 {
     private final static String SUBFOLDER_1 = "QC Subfolder 1";
@@ -206,6 +206,54 @@ public void testPlotOnlyOption()
         verifyOutlierCount(replicate, metric, "N/A");
     }
 
+    @Test
+    public void testAnnotationBackedMetric()
+    {
+        String subfolderName = "AnnotationMetricsFolder";
+        String metricName = "Annotation Metric R Squared";
+        String yAxisLabel = "R Squared";
+        String updatedYAxisLabel = "Updated R Squared";
+
+        log("Create subfolder and import data with numeric precursor_result annotations");
+        setupSubfolder(getProjectName(), subfolderName, FolderType.QC);
+        importData(ISOTOPOLOGUE_FILE_ANNOTATED);
+        navigateToFolder(getProjectName(), subfolderName);
+
+        log("Add annotation-backed metric backed by the RSquared precursor annotation");
+        ConfigureMetricsUIPage configureQCMetrics = goToDashboard().getQcSummaryWebPart().clickConfigureQCMetrics();
+        configureQCMetrics.addNewAnnotationMetric(Map.of(
+                ConfigureMetricsUIPage.AnnotationMetricProperties.metricName, metricName,
+                ConfigureMetricsUIPage.AnnotationMetricProperties.yAxisLabel, yAxisLabel,
+                ConfigureMetricsUIPage.AnnotationMetricProperties.annotationType, "precursor",
+                ConfigureMetricsUIPage.AnnotationMetricProperties.annotationName, "RSquared"), false);
+
+        log("Verify metric appears in configure QC metrics table");
+        waitForElement(Locator.linkWithText(metricName));
+
+        goToDashboard();
+        log("Verify metric appears in QC plots dropdown");
+        QCPlotsWebPart qcPlotsWebPart = new PanoramaDashboard(this).getQcPlotsWebPart();
+        Assert.assertTrue("Annotation-backed metric should appear in QC plots dropdown",
+                verifyMetricIsPresent(qcPlotsWebPart, metricName));
+
+        log("Test that a duplicate metric name is rejected");
+        configureQCMetrics = goToDashboard().getQcSummaryWebPart().clickConfigureQCMetrics();
+        configureQCMetrics.addNewAnnotationMetric(Map.of(
+                ConfigureMetricsUIPage.AnnotationMetricProperties.metricName, metricName,
+                ConfigureMetricsUIPage.AnnotationMetricProperties.yAxisLabel, "Duplicate Label",
+                ConfigureMetricsUIPage.AnnotationMetricProperties.annotationType, "precursor",
+                ConfigureMetricsUIPage.AnnotationMetricProperties.annotationName, "RSquared"), true);
+
+        log("Edit the annotation-backed metric's y-axis label (still on same page after cancel)");
+        configureQCMetrics.editAnnotationMetric(metricName, Map.of(
+                ConfigureMetricsUIPage.AnnotationMetricProperties.yAxisLabel, updatedYAxisLabel));
+
+        log("Delete the annotation-backed metric");
+        configureQCMetrics = goToDashboard().getQcSummaryWebPart().clickConfigureQCMetrics();
+        configureQCMetrics.deleteAnnotationMetric(metricName);
+        assertTextNotPresent(metricName);
+    }
+
     private void verifyOutlierCount(String replicate, QCPlotsWebPart.MetricType metricType, String count)
     {
         QCSummaryWebPart qcSummaryWebPart = new PanoramaDashboard(this).getQcSummaryWebPart();