Avoid duplicate renders; set project-id on load (#468)

* Avoid duplicate renders; set project-id on load

Track the current manifest ID in ProjectDetails and skip render() when the manifest hasn't changed to prevent duplicate/expensive re-renders (components/project-details/index.js). Also add a render() helper and set the tpen-project-id attribute on tpen-project-details when the tpen-project-loaded event fires so the component receives the project ID and performs a controlled render (interfaces/project/index.html).

* Use manifest JSON key to avoid redundant renders

Change render guard to use a JSON string key of project.manifest to detect content changes and prevent duplicate renders. Rename _currentManifestId to _currentManifestKey and update the comparison to use JSON.stringify(project?.manifest ?? []) in components/project-details/index.js. In interfaces/project/index.html, rename render() to setProjectId() and call it on tpen-project-loaded to clarify intent. Includes minor whitespace cleanup.

* Reset manifest key; rename render function

Clear _currentManifestKey during component cleanup to avoid retaining stale manifest state. Also rename the top-level render() function in manage-project to applyProjectContext() and update its invocation to better reflect that it applies project context with permission checks.

* this is the actual fix for the PR

* Is this key tidier?

* testing canvas-panel

* Revert "testing canvas-panel"

This reverts commit 39591e1.

Author: cubap

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 {
@@ -125,10 +127,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
 
@@ -150,7 +168,7 @@ class ProjectDetails extends HTMLElement {
             <p>
                 ${collaboratorCount < 3 ? "Collaborators: "+Object.entries(project.collaborators).map(([userID, u]) => u.profile.displayName).join(', ') : `${collaboratorCount} collaborator${collaboratorCount===1? '' : 's'}`}
             </p>
-            <sequence-panel manifest-id="${project.manifest}"></sequence-panel>
+            ${manifestId ? `<sequence-panel manifest-id="${manifestId}"></sequence-panel>` : ''}
         `
         // Clear previous render-specific listeners before adding new ones
         this.renderCleanup.run()

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.")