diff --git a/components/project-details/index.js b/components/project-details/index.js index dc96e130..e9f15ad4 100644 --- a/components/project-details/index.js +++ b/components/project-details/index.js @@ -17,6 +17,8 @@ class ProjectDetails extends HTMLElement { renderCleanup = new CleanupRegistry() /** @type {Function|null} Unsubscribe function for project ready listener */ _unsubProject = null + /** @type {string|null} Track manifest key to prevent duplicate renders */ + _currentManifestKey = null style = ` sequence-panel { @@ -118,10 +120,26 @@ class ProjectDetails extends HTMLElement { try { this._unsubProject?.() } catch {} this.renderCleanup.run() this.cleanup.run() + this._currentManifestKey = null } render() { const project = this.Project ?? TPEN.activeProject + + if (!project) { + console.error('No project data available to render') + return + } + + const manifestKey = JSON.stringify(project?.manifest ?? []) + const manifestId = Array.isArray(project?.manifest) ? project.manifest[0] : project?.manifest + + // Only render if manifest has changed or first render + if (this._currentManifestKey === manifestKey) { + return + } + this._currentManifestKey = manifestKey + const projectOwner = Object.entries(project.collaborators).find(([userID, u]) => u.roles.includes('OWNER'))?.[1].profile.displayName const collaboratorCount = Object.keys(project.collaborators).length @@ -143,7 +161,7 @@ class ProjectDetails extends HTMLElement {

${collaboratorCount < 3 ? "Collaborators: "+Object.entries(project.collaborators).map(([userID, u]) => u.profile.displayName).join(', ') : `${collaboratorCount} collaborator${collaboratorCount===1? '' : 's'}`}

- + ${manifestId ? `` : ''} ` // Clear previous render-specific listeners before adding new ones this.renderCleanup.run() diff --git a/interfaces/manage-project/index.js b/interfaces/manage-project/index.js index e34d1202..a1872ef3 100644 --- a/interfaces/manage-project/index.js +++ b/interfaces/manage-project/index.js @@ -42,8 +42,8 @@ TPEN.eventDispatcher.on('tpen-project-loaded', () => { leaveProjectBtn.href = `/project/leave?projectID=${projectID}` } - // Render the page with permissions check - render() + // Apply project context with permissions check + applyProjectContext() }) document.getElementById('export-project-btn').addEventListener('click', async () => { @@ -63,7 +63,7 @@ document.getElementById('export-project-btn').addEventListener('click', async () }) }) -function render() { +function applyProjectContext() { const isManageProjectPermission = CheckPermissions.checkEditAccess('PROJECT') if(!isManageProjectPermission) { alert("You do not have permissions to use this page.")