Spaces:
Running
Running
| """Researcher Identity setup and the compact submission workflow.""" | |
| from html import escape | |
| def render_identity_summary(username: str | None, identity: dict) -> str: | |
| heading = '<h3>Researcher Identity</h3>' | |
| if not username: | |
| return heading + '<p>Sign in with Hugging Face to create or load your Researcher Identity.</p>' | |
| if not identity: | |
| return heading + '<p>Create your identity once to submit evaluations and manage your results.</p>' | |
| affiliation = identity.get("affiliation") or "" | |
| description = str(identity["role"]) + (f" · {affiliation}" if affiliation else "") | |
| return ( | |
| heading + f'<strong class="identity-account">{escape(username or identity["hf_username"])}</strong>' | |
| f'<p>ORCID {escape(identity["orcid_id"])} ✓</p><p>{escape(description)}</p>' | |
| ) | |
| def render_setup_checklist(signed_in: bool, verified: bool, profile_valid: bool, rules_accepted: bool, | |
| verification_id: str = "") -> str: | |
| items = (("Hugging Face", signed_in), ("ORCID", verified), | |
| ("Profile", profile_valid), ("Leaderboard Rules", rules_accepted)) | |
| checks = ''.join( | |
| f'<span class="setup-check {"complete" if complete else "pending"}">' | |
| f'<span aria-hidden="true">{"✓" if complete else "○"}</span> {label}</span>' | |
| for label, complete in items | |
| ) | |
| note = (f'<p>ORCID {escape(verification_id)} verified for this setup. Complete identity creation within 15 minutes.</p>' | |
| if verified else '') | |
| return f'<div class="identity-checks">{checks}</div>{note}' | |
| def render_submission_workflow(signed_in: bool, identity_ready: bool) -> str: | |
| steps = (("guide", "Read Guide"), ("identity", "Create Researcher Identity"), | |
| ("submit", "Submit Evaluation"), ("queue", "Active Queue"), | |
| ("history", "History & Publish")) | |
| current = "submit" if identity_ready else "identity" if signed_in else "guide" | |
| buttons = ''.join( | |
| f'<button type="button" data-workflow-step="{step}" ' | |
| f'class="workflow-step{" is-current" if step == current else ""}">' | |
| f'<span class="workflow-status">{"✓" if step == "identity" and identity_ready else index}</span>' | |
| f'<span>{label}</span></button>' | |
| for index, (step, label) in enumerate(steps, start=1) | |
| ) | |
| return ( | |
| f'<nav class="submission-workflow" aria-label="Submission workflow" ' | |
| f'data-identity-ready="{str(identity_ready).lower()}" ' | |
| f'data-hf-ready="{str(signed_in).lower()}">{buttons}</nav>' | |
| ) | |
| identity_workflow_js = r"""() => { | |
| if (window.physIdentityWorkflowInstalled) return; | |
| window.physIdentityWorkflowInstalled = true; | |
| const sync = () => { | |
| document.querySelectorAll('.submission-workflow').forEach(workflow => { | |
| const panel = workflow.closest('.submission-panel'); | |
| if (!panel) return; | |
| const ready = workflow.dataset.identityReady === 'true'; | |
| let guideRead = false; | |
| const key = `physinone-guide-read-${panel.id}`; | |
| try { guideRead = sessionStorage.getItem(key) === '1'; } catch (_) {} | |
| if (panel.querySelector('.submission-guide > button.label-wrap.open')) { | |
| guideRead = true; | |
| try { sessionStorage.setItem(key, '1'); } catch (_) {} | |
| } | |
| const selectedTab = panel.querySelector('.utility-tabs > .tab-wrapper [role="tab"][aria-selected="true"]'); | |
| const selectedStep = selectedTab?.id.match(/-utility-(submit|queue|history)-button$/)?.[1] || 'submit'; | |
| const current = selectedTab ? selectedStep : | |
| (workflow.dataset.hfReady === 'true' || guideRead ? 'identity' : 'guide'); | |
| const done = {guide: guideRead, identity: ready}; | |
| workflow.querySelectorAll('[data-workflow-step]').forEach((button, index) => { | |
| const step = button.dataset.workflowStep; | |
| button.classList.toggle('is-complete', Boolean(done[step])); | |
| button.classList.toggle('is-current', step === current); | |
| if (step === current) button.setAttribute('aria-current', 'step'); | |
| else button.removeAttribute('aria-current'); | |
| const marker = button.querySelector('.workflow-status'); | |
| const text = done[step] ? '✓' : String(index + 1); | |
| if (marker.textContent !== text) marker.textContent = text; | |
| }); | |
| }); | |
| }; | |
| document.addEventListener('click', event => { | |
| const button = event.target.closest('.submission-workflow [data-workflow-step]'); | |
| if (!button) return; | |
| const panel = button.closest('.submission-panel'); | |
| const workflow = button.closest('.submission-workflow'); | |
| const step = button.dataset.workflowStep; | |
| const group = panel.id.slice('submit-'.length); | |
| let target; | |
| if (step === 'guide') { | |
| target = panel.querySelector('.submission-guide'); | |
| } else if (step === 'identity' || (step === 'submit' && workflow.dataset.identityReady !== 'true')) { | |
| target = panel.querySelector('.researcher-identity'); | |
| const manage = target.querySelector('.profile-manage-button'); | |
| if (manage?.getClientRects().length) manage.click(); | |
| else { | |
| const profileToggle = target.querySelector('.profile-settings > button.label-wrap'); | |
| if (profileToggle && !profileToggle.classList.contains('open')) profileToggle.click(); | |
| } | |
| } else { | |
| document.getElementById(`${group}-utility-${step}-button`)?.click(); | |
| target = panel.querySelector('.utility-tabs'); | |
| } | |
| const toggle = target?.querySelector(':scope > button.label-wrap'); | |
| if (toggle && !toggle.classList.contains('open')) toggle.click(); | |
| target?.scrollIntoView({behavior: 'smooth', block: 'start'}); | |
| setTimeout(sync, 80); | |
| }); | |
| new MutationObserver(sync).observe(document.body, {subtree: true, childList: true, characterData: true, | |
| attributes: true, attributeFilter: ['aria-selected']}); | |
| sync(); | |
| }""" | |
| identity_setup_css = """ | |
| #main-tabs .submission-panel { | |
| --submission-gutter: 20px; | |
| --submission-section-gap: 20px; | |
| --submission-control-gap: 14px; | |
| } | |
| #main-tabs .submission-panel > div:not(.wrap) { padding: var(--submission-gutter) !important; } | |
| #main-tabs .submission-panel > div:not(.wrap) > .column { gap: var(--submission-section-gap) !important; } | |
| #main-tabs .submission-workflow-container, #main-tabs .submission-guide, #main-tabs .researcher-identity, #main-tabs .utility-tabs { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box; } | |
| #main-tabs .submission-workflow-container, #main-tabs .submission-workflow-container .html-container { padding: 0 !important; border: 0 !important; } | |
| #main-tabs .submission-workflow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px; border: 1px solid #e7e3f3; border-radius: 12px; background: #faf9ff; } | |
| #main-tabs .workflow-step { display: flex; flex: 1 1 150px; align-items: center; gap: 8px; min-height: 36px; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #706b83; font-size: 12px; text-align: left; cursor: pointer; } | |
| #main-tabs .workflow-step.is-current { border-color: #c6bef0; background: #f0ecff; color: #5145a0; font-weight: 600; } | |
| #main-tabs .workflow-step.is-complete { color: #615397; } | |
| #main-tabs .workflow-step:hover { background: #f1edff; } | |
| .workflow-status { display: inline-flex; flex: 0 0 20px; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; background: #eae5f9; font-size: 12px; } | |
| #main-tabs .submission-guide > button.label-wrap { padding: 10px 20px !important; } | |
| #main-tabs .submission-card { margin: 0 !important; padding: var(--submission-gutter) !important; border: 1px solid #e7e3f1 !important; border-radius: 14px !important; background: #fff !important; box-sizing: border-box; } | |
| #main-tabs .submission-card > .styler { display: flex; flex-direction: column; gap: var(--submission-section-gap) !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } | |
| #main-tabs .submission-card *, #main-tabs .submission-disclosure { box-sizing: border-box; } | |
| #main-tabs .submission-card .row, #main-tabs .submission-card .column, #main-tabs .selected-content, #main-tabs .selected-content > .styler { min-width: 0 !important; max-width: 100% !important; } | |
| #main-tabs .researcher-identity .identity-status, #main-tabs .researcher-identity .identity-checklist { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } | |
| #main-tabs .researcher-identity .html-container { padding: 0 !important; } | |
| #main-tabs .researcher-identity h3 { margin: 0 0 8px; color: #30304b; font-size: 17px; font-weight: 600; } | |
| #main-tabs .researcher-identity .identity-status p { margin: 4px 0 0 !important; color: #6d6780 !important; font-size: 13px !important; } | |
| .identity-account { color: #353251; font-size: 16px; font-weight: 600; } | |
| .identity-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #746e84; font-size: 13px; } | |
| .setup-check { display: inline-flex; align-items: center; gap: 5px; } | |
| .setup-check.complete { color: #615397; } | |
| .identity-checklist p { margin: 8px 0 0; color: #746e84; font-size: 12px; } | |
| #main-tabs .identity-actions { align-items: center !important; justify-content: flex-start !important; gap: var(--submission-control-gap) !important; margin: 0 !important; } | |
| #main-tabs .identity-actions .submission-access, #main-tabs .identity-actions .submission-access > .styler, #main-tabs .identity-actions .form { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; min-width: 0 !important; } | |
| #main-tabs .identity-actions .submission-access { flex: 0 1 auto !important; width: auto !important; align-items: flex-start !important; } | |
| #main-tabs .identity-actions .block { padding: 0 !important; } | |
| #main-tabs .researcher-identity .auth-signed-in, #main-tabs .researcher-identity .submission-access .block:has(.auth-signed-in), #main-tabs .researcher-identity .submission-access.is-signed-in .block:has(.auth-intro) { display: none !important; } | |
| #main-tabs .researcher-identity .auth-intro { margin: 0; align-items: flex-start; } | |
| #main-tabs .researcher-identity > .styler, #main-tabs .identity-actions .submission-access > .styler { gap: var(--submission-control-gap) !important; } | |
| #main-tabs .profile-manage-button { flex: 0 0 auto !important; align-self: center !important; min-width: max-content !important; width: auto !important; min-height: 34px !important; margin: 0 !important; padding: 7px 12px !important; border: 1px solid #ded9f0 !important; border-radius: 8px !important; background: #f8f6ff !important; color: #5149a0 !important; font-size: 12px !important; white-space: nowrap; box-shadow: none !important; } | |
| #main-tabs .profile-settings { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } | |
| #main-tabs .submission-disclosure { --disclosure-inset: var(--submission-control-gap); } | |
| #main-tabs .submission-disclosure > button.label-wrap { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; min-height: 42px !important; padding: 10px var(--disclosure-inset) !important; } | |
| #main-tabs .profile-settings > button.label-wrap { border: 1px solid #e7e3f1 !important; border-radius: 8px !important; background: #faf9ff !important; color: #48425e !important; } | |
| #main-tabs .profile-settings > button.label-wrap > span { position: static !important; height: auto !important; margin: 0 !important; font-size: 13px !important; line-height: 20px !important; } | |
| #main-tabs .profile-settings button.label-wrap > .icon { flex: 0 0 auto; transform: rotate(0deg) !important; font-size: 11px !important; } | |
| #main-tabs .profile-settings button.label-wrap.open > .icon { transform: rotate(180deg) !important; } | |
| #main-tabs .profile-settings > button.label-wrap::before { display: none !important; } | |
| #main-tabs .submission-disclosure > div:not(.wrap) { padding: var(--submission-control-gap) var(--disclosure-inset) !important; } | |
| #main-tabs .profile-settings > div > .column { gap: var(--submission-section-gap) !important; } | |
| #main-tabs .profile-card, #main-tabs .profile-rules, #main-tabs .profile-card > .styler, #main-tabs .profile-rules > .styler { padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } | |
| #main-tabs .profile-card > .styler, #main-tabs .profile-rules > .styler { display: flex; flex-direction: column; gap: var(--submission-control-gap) !important; } | |
| #main-tabs .profile-rules { padding-top: var(--submission-section-gap) !important; border-top: 1px solid #eeecf6 !important; } | |
| #main-tabs .profile-settings .form, #main-tabs .profile-settings .row, #main-tabs .profile-settings .column { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; gap: var(--submission-control-gap) !important; } | |
| #main-tabs .profile-settings .block:not(.profile-rules-content) { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } | |
| #main-tabs .profile-card h4, #main-tabs .profile-rules h4 { margin: 0 !important; color: #30304b; font-size: 15px !important; } | |
| #main-tabs .profile-settings p { margin: 0 !important; color: #655f78; font-size: 13px; line-height: 1.6; } | |
| #main-tabs .profile-settings [data-testid="block-label"], #main-tabs .profile-settings [data-testid="block-info"], #main-tabs .profile-settings label > span { display: block !important; width: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #605b70 !important; font-size: 13px !important; font-weight: 500 !important; } | |
| #main-tabs .profile-settings [data-testid="block-info"] { margin: 0 0 8px !important; } | |
| #main-tabs .profile-settings .wrap:not(.default), #main-tabs .profile-settings .secondary-wrap { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } | |
| #main-tabs .profile-settings textarea, #main-tabs .profile-settings input:not([type="checkbox"]):not([role="combobox"]), #main-tabs .profile-settings .wrap-inner { border: 1px solid #dcd8ea !important; border-radius: 10px !important; background: #fff !important; color: #374151 !important; min-height: 44px; box-shadow: none !important; } | |
| #main-tabs .profile-settings textarea { padding: 10px 12px !important; font-family: inherit !important; font-size: 14px !important; } | |
| #main-tabs .profile-settings .wrap-inner { height: 44px !important; padding: 0 12px !important; box-sizing: border-box; } | |
| #main-tabs .profile-settings .wrap-inner input[role] { min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } | |
| #main-tabs .profile-settings textarea:focus, #main-tabs .profile-settings .wrap-inner:focus-within { border-color: #9a8ce3 !important; box-shadow: 0 0 0 3px rgba(99,102,241,.08) !important; } | |
| #main-tabs .profile-rules-content { --disclosure-inset: 0px; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; } | |
| #main-tabs .rules-acceptance label { display: flex !important; align-items: center !important; gap: 9px !important; cursor: pointer; } | |
| #main-tabs .rules-acceptance input[type="checkbox"] { appearance: auto !important; flex: 0 0 18px; width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: #7164d9; cursor: pointer; } | |
| #main-tabs .rules-acceptance label > span { line-height: 1.5 !important; } | |
| #main-tabs .identity-save-button { align-self: flex-start !important; width: auto !important; min-width: 0 !important; min-height: 34px !important; padding: 7px 13px !important; border: 1px solid #8075df !important; border-radius: 8px !important; background: #7164d9 !important; color: #fff !important; box-shadow: none !important; } | |
| #main-tabs .identity-save-button:disabled { opacity: .45; cursor: not-allowed; } | |
| #main-tabs .identity-refresh, #global-identity-refresh { display: none !important; } | |
| #main-tabs .orcid-connect-link { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 13px; border: 1px solid #ded9f0; border-radius: 8px; background: #f8f6ff; color: #5149a0; font-size: 13px; text-decoration: none; } | |
| #main-tabs .profile-settings button:focus-visible, #main-tabs .rules-acceptance input:focus-visible { outline: 2px solid #9a8ce3; outline-offset: 2px; } | |
| #main-tabs .private-submission-content, #main-tabs .private-submission-content > .styler { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } | |
| #main-tabs .utility-tabs { gap: 0 !important; } | |
| #main-tabs .utility-tabs > .tab-wrapper { margin: 0 !important; padding: 0 !important; } | |
| #main-tabs .utility-tabs > .tabitem { margin: 0 !important; padding: var(--submission-section-gap) 0 0 !important; border: 0 !important; } | |
| #main-tabs .history-track-tabs, #main-tabs .history-track-tabs > .tabitem { margin: 0 !important; padding: 0 !important; border: 0 !important; } | |
| #main-tabs .submission-history-body .submission-table-frame { margin: 0 !important; } | |
| #main-tabs .submission-history-body .submission-table-frame > .styler { padding: var(--submission-control-gap) !important; display: flex; flex-direction: column; gap: var(--submission-section-gap) !important; } | |
| #main-tabs .submission-history-body .property-table-title, #main-tabs .submission-history-body .property-table-title h4 { margin: 0 !important; padding: 0 !important; } | |
| #main-tabs .history-result-section, #main-tabs .history-result-section > .styler { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } | |
| #main-tabs .history-result-section > .styler { display: flex; flex-direction: column; gap: var(--submission-control-gap) !important; } | |
| #main-tabs .property-material-tabs > .tabitem { padding: var(--submission-control-gap) 0 0 !important; border: 0 !important; } | |
| #main-tabs .history-table { margin: 0 !important; min-height: 0 !important; padding: 0 !important; border: 1px solid #e0ddf0 !important; border-radius: 10px !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.4 !important; } | |
| #main-tabs .history-table .table-container, #main-tabs .history-table .table-wrap { height: auto !important; min-height: 0 !important; max-width: 100% !important; align-items: stretch !important; justify-content: flex-start !important; } | |
| #main-tabs .history-table .table-wrap { width: 100% !important; min-width: 0 !important; max-height: 320px !important; overflow-x: auto !important; overflow-y: auto !important; } | |
| #main-tabs .history-table > .table-container > .table-wrap { max-height: none !important; overflow: visible !important; } | |
| #main-tabs .history-table table:not([aria-hidden="true"]) { width: var(--table-content-width, 100%) !important; min-width: 100% !important; max-width: none !important; max-height: none !important; overflow: visible !important; } | |
| #main-tabs .history-table button.disable_click { display: flex !important; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; padding: 0 !important; font: inherit !important; } | |
| #main-tabs .history-table th, #main-tabs .history-table td, #main-tabs .history-table .cell-wrap, #main-tabs .history-table .header-button, #main-tabs .history-table .text { font-family: inherit !important; font-size: 14px !important; line-height: 1.4 !important; } | |
| #main-tabs .history-table th { height: 50px !important; padding: 0 12px !important; font-weight: 600 !important; background: #f6f4fc !important; } | |
| #main-tabs .history-table th .text { font-weight: 600 !important; } | |
| #main-tabs .history-table th .cell-wrap, #main-tabs .history-table .header-button { padding: 0 !important; min-height: 0 !important; } | |
| #main-tabs .history-table td { height: 52px !important; padding: 0 12px !important; font-weight: 400 !important; } | |
| #main-tabs .history-table.is-empty::after { content: "No completed submissions yet."; display: block; padding: var(--submission-control-gap); color: #777283; font-size: 13px; } | |
| #main-tabs .selected-content, #main-tabs .selected-content > .styler { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } | |
| #main-tabs .submission-stack > .styler { display: flex; flex-direction: column; gap: var(--submission-section-gap) !important; } | |
| #main-tabs .selected-content > .styler > .block { padding: 0 !important; } | |
| #main-tabs .selected-summary, #main-tabs .selected-summary .html-container { padding: 0 !important; } | |
| #main-tabs .selected-summary-card > * { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } | |
| #main-tabs .selected-actions { margin: 0 !important; } | |
| #main-tabs .selected-content .publication-editor { margin: 0 !important; padding: var(--submission-control-gap) !important; } | |
| #main-tabs .selected-content .publication-editor > .styler { padding: 0 !important; gap: var(--submission-control-gap) !important; } | |
| #main-tabs .selected-content .publication-editor .block, #main-tabs .selected-report-panel .block { padding: 0 !important; } | |
| #main-tabs .selected-report-panel { margin: 0 !important; padding: 0 !important; } | |
| #main-tabs .property-results .method-cell { white-space: nowrap; } | |
| #main-tabs .submission-panel .queue-head-row { flex-wrap: nowrap !important; align-items: center !important; gap: var(--submission-control-gap) !important; } | |
| #main-tabs .submission-panel .queue-head-row > .submission-section-title { flex: 1 1 0 !important; min-width: 0 !important; padding: 0 !important; } | |
| #main-tabs .submission-panel button.history-refresh-button, #main-tabs .submission-panel button.queue-refresh-button { flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; white-space: nowrap !important; overflow: visible !important; } | |
| """ | |