compare view: Metadata sidebar

Agentic assisted, have caution. Reviewed and patched up with care, seems to be good.

Author: mcmonkey4eva

src/Pages/_Generate/GenerateTab.cshtml

@@ -218,6 +218,7 @@
                         <button class="basic-button translate" data-compare-mode="transparency" type="button">Transparency Overlay</button>
                         <button class="basic-button translate" data-compare-mode="single" type="button">Single View</button>
                         <button class="basic-button translate" id="image_compare_swap_button" type="button">Switch Image</button>
+                        <button class="basic-button translate" id="image_compare_metadata_toggle_button" type="button">Toggle Metadata</button>
                     </div>
                 </div>
             </div>

src/wwwroot/css/genpage.css

@@ -820,6 +820,8 @@ body {
 .image_compare_modal .imageview_modal_imagewrap {
     flex: 1 1 auto;
     min-height: 0;
+    display: flex;
+    align-items: stretch;
 }
 .image_compare_modal .imageview_popup_modal_undertext {
     flex: 0 0 auto;
@@ -856,13 +858,67 @@ body {
     background-color: var(--button-background-hover);
     border-color: var(--emphasis);
 }
+.image_compare_metadata {
+    width: min(42rem, 40vw);
+    max-width: min(42rem, 40vw);
+    height: 100%;
+    overflow: auto;
+    text-align: left;
+    flex: 0 0 auto;
+    padding: 0.25rem;
+    background-color: var(--background);
+    border-left: 1px solid var(--light-border);
+    box-sizing: border-box;
+}
+.image_compare_metadata_table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 0.15rem;
+}
+.image_compare_metadata_table th, .image_compare_metadata_table td {
+    padding: 0.15rem 0.35rem;
+    vertical-align: top;
+    overflow-wrap: anywhere;
+}
+.image_compare_metadata_table th {
+    color: var(--text);
+    background-color: var(--background-soft);
+}
+.image_compare_metadata_table .param_view_block {
+    display: table-row;
+    width: auto;
+}
+.image_compare_metadata_table td {
+    border-top: 1px solid var(--light-border);
+    border-bottom: 1px solid var(--light-border);
+    color: inherit;
+}
+.image_compare_metadata_table td:first-child {
+    border-left: 1px solid var(--light-border);
+    border-top-left-radius: 0.3rem;
+    border-bottom-left-radius: 0.3rem;
+    min-width: 8rem;
+}
+.image_compare_metadata_table td:last-child {
+    border-right: 1px solid var(--light-border);
+    border-top-right-radius: 0.3rem;
+    border-bottom-right-radius: 0.3rem;
+}
+.image_compare_metadata_table .param_view_block_model td {
+    background-color: color-mix(in srgb, transparent 99%, var(--tag-color));
+}
+.image_compare_metadata_same {
+    opacity: 0.45;
+}
 .image_compare_stage {
     width: 100%;
     height: 100%;
+    min-width: 0;
     min-height: 0;
     overflow: hidden;
     padding: 0;
     background-color: transparent;
+    flex: 1 1 auto;
 }
 .image_compare_stage.image_compare_stage_side {
     display: grid;
@@ -987,10 +1043,19 @@ body {
     pointer-events: none;
 }
 @media (max-width: 900px) {
+    .image_compare_modal .imageview_modal_imagewrap {
+        flex-direction: column;
+    }
     .image_compare_stage.image_compare_stage_side {
         grid-template-columns: 1fr;
         grid-template-rows: 1fr 1fr;
     }
+    .image_compare_metadata {
+        width: 100%;
+        max-width: 100%;
+        height: 35vh;
+        padding-left: 0;
+    }
 }
 .browser-folder-tree-container {
     width: 15rem;

src/wwwroot/js/genpage/gentab/currentimagehandler.js

@@ -1408,7 +1408,7 @@ class ImageCompareHelper {
             if (e.target.tagName == 'BODY') {
                 return;
             }
-            if (!this.noClose && this.isOpen() && !findParentOfClass(e.target, 'imageview_popup_modal_undertext')) {
+            if (!this.noClose && this.isOpen() && !findParentOfClass(e.target, 'imageview_popup_modal_undertext') && !findParentOfClass(e.target, 'image_compare_metadata')) {
                 this.close();
                 e.preventDefault();
                 e.stopPropagation();
@@ -1432,6 +1432,7 @@ class ImageCompareHelper {
         this.mode = 'side';
         this.left = null;
         this.right = null;
+        this.showMetadata = false;
         this.resetViewportState();
         this.modeButtonMap = {};
         for (let button of this.modal.querySelectorAll('[data-compare-mode]')) {
@@ -1441,6 +1442,8 @@ class ImageCompareHelper {
         }
         this.swapButton = getRequiredElementById('image_compare_swap_button');
         this.swapButton.addEventListener('click', () => this.swapImages());
+        this.metadataToggleButton = getRequiredElementById('image_compare_metadata_toggle_button');
+        this.metadataToggleButton.addEventListener('click', () => this.toggleMetadataVisibility(!this.showMetadata));
         this.transparencyRow = getRequiredElementById('image_compare_transparency_row');
         this.transparencySlider = getRequiredElementById('image_compare_transparency_slider');
         this.transparencyValue = getRequiredElementById('image_compare_transparency_value');
@@ -1449,6 +1452,9 @@ class ImageCompareHelper {
             this.transparencyValue.innerText = `${Math.round(this.transparencyPercent)}%`;
             this.getOverlay()?.style.setProperty('--image-compare-transparency', `${this.transparencyPercent / 100}`);
         });
+        this.metadataDiv = createDiv(null, 'image_compare_metadata current-image-data extras-wrapper-sideblock');
+        this.modal.querySelector('.imageview_modal_imagewrap').appendChild(this.metadataDiv);
+        this.updateMetadataVisibility();
         this.updateModeControls();
         this.supportedTypes = ['image', 'video'];
     }
@@ -1657,6 +1663,58 @@ class ImageCompareHelper {
         return `<img class="${mediaClass}" src="${encodedSrc}" ${imageAttrs}>`;
     }
 
+    getMetadataEntryMap(metadata) {
+        let formatted = getFormattedMetadataEntries(metadata);
+        let result = {};
+        for (let entry of formatted.entries) {
+            result[entry.id] = entry;
+        }
+        return result;
+    }
+
+    renderMetadataCell(entry) {
+        if (!entry) {
+            return '';
+        }
+        return entry.valueHtml + entry.extras;
+    }
+
+    renderMetadataTable() {
+        let leftEntries = this.getMetadataEntryMap(this.left?.metadata);
+        let rightEntries = this.getMetadataEntryMap(this.right?.metadata);
+        let ids = Object.keys(leftEntries);
+        for (let id of Object.keys(rightEntries)) {
+            if (!ids.includes(id)) {
+                ids.push(id);
+            }
+        }
+        if (ids.length == 0) {
+            return '';
+        }
+        let result = '<table class="image_compare_metadata_table"><thead><tr><th class="translate">Parameter</th><th class="translate">Image 1</th><th class="translate">Image 2</th></tr></thead><tbody>';
+        for (let id of ids) {
+            let entry = leftEntries[id] || rightEntries[id];
+            let leftEntry = leftEntries[id];
+            let rightEntry = rightEntries[id];
+            let sameClass = leftEntry && rightEntry && leftEntry.compareValue == rightEntry.compareValue ? ' image_compare_metadata_same' : '';
+            result += `<tr class="param_view_block tag-text tag-type-${entry.hash}${entry.added}${sameClass}"><td><span class="param_view_name" title="${escapeHtmlNoBr(entry.keyTitle)}">${escapeHtml(entry.key)}</span></td><td>${this.renderMetadataCell(leftEntry)}</td><td>${this.renderMetadataCell(rightEntry)}</td></tr>`;
+        }
+        return `${result}</tbody></table>`;
+    }
+
+    updateMetadataVisibility() {
+        this.metadataDiv.style.display = this.showMetadata && this.metadataDiv.innerHTML ? '' : 'none';
+        this.metadataToggleButton.setAttribute('aria-pressed', this.showMetadata ? 'true' : 'false');
+    }
+
+    toggleMetadataVisibility(showMetadata) {
+        this.showMetadata = showMetadata;
+        this.updateMetadataVisibility();
+        if (this.hasSelection()) {
+            this.applyView();
+        }
+    }
+
     showComparison(left, right) {
         this.left = left;
         this.right = right;
@@ -1796,8 +1854,11 @@ class ImageCompareHelper {
         this.left = null;
         this.right = null;
         this.mode = 'side';
+        this.showMetadata = false;
         this.resetViewportState();
         this.setStageContent('side', '');
+        this.metadataDiv.innerHTML = '';
+        this.updateMetadataVisibility();
         this.updateModeControls();
     }
 
@@ -1860,6 +1921,8 @@ class ImageCompareHelper {
         this.updateModeControls();
         if (!this.hasSelection()) {
             this.setStageContent('side', '');
+            this.metadataDiv.innerHTML = '';
+            this.updateMetadataVisibility();
             this.updateModeControls();
             return;
         }
@@ -1875,6 +1938,9 @@ class ImageCompareHelper {
                 <div class="image_compare_slot">${this.renderMedia(this.right)}</div>`
             );
         }
+        let metadataHtml = this.renderMetadataTable();
+        this.metadataDiv.innerHTML = metadataHtml;
+        this.updateMetadataVisibility();
         this.applyView();
     }
 

src/wwwroot/js/genpage/gentab/outputhistory.js

@@ -188,7 +188,7 @@ function buttonsForImage(fullsrc, src, metadata, isCurrentImage = false) {
             title: 'Compare 2 images or 2 videos',
             onclick: (e) => {
                 // TODO: Give browsers.js a real "run once with the full selection" bulk handler
-                let items = imageHistoryBrowser.getMultiSelectedFiles().map(f => ({ src: f.data.src, mediaType: getMediaType(f.data.src) }));
+                let items = imageHistoryBrowser.getMultiSelectedFiles().map(f => ({ src: f.data.src, mediaType: getMediaType(f.data.src), metadata: f.data.metadata }));
                 let valid = imageCompareHelper.evaluateSelection(items);
                 if (valid.state != 'ready') {
                     showError(valid.reason || 'Cannot compare current selection.');