diff --git a/web/css/resolver-main.css b/web/css/resolver-main.css index 55a364e..b1bc89a 100644 --- a/web/css/resolver-main.css +++ b/web/css/resolver-main.css @@ -6526,6 +6526,8 @@ a.mr-image-preview-resource-name:hover { #mr-options-metadata-build-progress-panel, #mr-options-metadata-build-history-panel { + grid-row: 6; + grid-column: 1; min-height: 0; padding: 10px; overflow: hidden; @@ -6544,9 +6546,25 @@ a.mr-image-preview-resource-name:hover { flex-direction: column; } -#mr-options-metadata-build-progress-panel.is-hidden, +#mr-options-metadata-build-progress-panel:not(.is-hidden), +#mr-options-metadata-build-history-panel:not(.is-hidden) { + opacity: 1; + pointer-events: auto; + z-index: 1; +} + +#mr-options-metadata-build-progress-panel.is-hidden { + display: grid; + opacity: 0; + pointer-events: none; + z-index: 0; +} + #mr-options-metadata-build-history-panel.is-hidden { - display: none; + display: flex; + opacity: 0; + pointer-events: none; + z-index: 0; } .mr-options-build-progress { @@ -6885,6 +6903,12 @@ a.mr-image-preview-resource-name:hover { background: transparent; } +.mr-options-audit-loading { + padding: 12px; + color: var(--mr-text-secondary); + font-size: 12px; +} + .mr-options-audit-results { margin-top: 12px; min-width: 0; diff --git a/web/resolver/views/options_methods.js b/web/resolver/views/options_methods.js index e986080..423afec 100644 --- a/web/resolver/views/options_methods.js +++ b/web/resolver/views/options_methods.js @@ -1325,6 +1325,18 @@ export const optionsMethods = { setStatusMode(element, mode); }; + let scheduleMetadataBuildHistoryRender = () => {}; + const setMetadataBuildPanelHidden = (panel, hidden) => { + if (!panel) return; + panel.classList.toggle('is-hidden', hidden); + panel.setAttribute('aria-hidden', hidden ? 'true' : 'false'); + try { + panel.inert = hidden; + } catch (error) { + panel.toggleAttribute('inert', hidden); + } + }; + const setMetadataBuildTab = (tabName = 'progress') => { const activeTab = tabName === 'history' ? 'history' : 'progress'; metadataBuildTabButtons.forEach((button) => { @@ -1333,9 +1345,12 @@ export const optionsMethods = { button.classList.toggle('mr-tab-active', isActive); button.setAttribute('aria-selected', isActive ? 'true' : 'false'); }); - metadataBuildProgressPanel?.classList.toggle('is-hidden', activeTab !== 'progress'); - metadataBuildHistoryPanel?.classList.toggle('is-hidden', activeTab !== 'history'); + setMetadataBuildPanelHidden(metadataBuildProgressPanel, activeTab !== 'progress'); + setMetadataBuildPanelHidden(metadataBuildHistoryPanel, activeTab !== 'history'); this.metadataBuildActiveTab = activeTab; + if (activeTab === 'history') { + scheduleMetadataBuildHistoryRender(); + } }; const getMetadataBuildHistoryKey = (item = {}) => { @@ -1697,6 +1712,12 @@ export const optionsMethods = { return; } + if (this.metadataBuildActiveTab !== 'history') { + this.metadataBuildHistoryRenderPending = true; + return; + } + this.metadataBuildHistoryRenderPending = false; + const fallbackItems = source && Array.isArray(source.history) ? source.history : (source && Array.isArray(source.updated) ? source.updated : []); @@ -1818,6 +1839,34 @@ export const optionsMethods = { metadataBuildResults.hidden = false; }; + const stopMetadataBuildHistoryRender = () => { + if (this.metadataBuildHistoryRenderFrame) { + window.cancelAnimationFrame(this.metadataBuildHistoryRenderFrame); + this.metadataBuildHistoryRenderFrame = 0; + } + if (this.metadataBuildHistoryRenderTimer) { + window.clearTimeout(this.metadataBuildHistoryRenderTimer); + this.metadataBuildHistoryRenderTimer = 0; + } + }; + + scheduleMetadataBuildHistoryRender = () => { + if (!metadataBuildResults || this.metadataBuildActiveTab !== 'history') return; + if (!this.metadataBuildHistoryRenderPending && metadataBuildResults.innerHTML) return; + stopMetadataBuildHistoryRender(); + metadataBuildResults.hidden = false; + if (!metadataBuildResults.innerHTML) { + metadataBuildResults.innerHTML = '
'; + } + this.metadataBuildHistoryRenderFrame = window.requestAnimationFrame(() => { + this.metadataBuildHistoryRenderFrame = 0; + this.metadataBuildHistoryRenderTimer = window.setTimeout(() => { + this.metadataBuildHistoryRenderTimer = 0; + renderMetadataBuildResults(undefined); + }, 0); + }); + }; + const stopMetadataBuildPolling = () => { if (this.metadataBuildPollTimer) { window.clearTimeout(this.metadataBuildPollTimer); @@ -1914,6 +1963,7 @@ export const optionsMethods = { const runMetadataBuild = async () => { stopMetadataBuildPolling(); + stopMetadataBuildHistoryRender(); this.metadataBuildProgressId = ''; this.metadataBuildFinishedProgressId = ''; this.metadataBuildHistory = [];