update

index.html

@@ -33,6 +33,35 @@
             align-items: center;
             gap: 10px;
         }
+        .metadata-container {
+            background: white;
+            padding: 15px;
+            margin: 20px 0;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .metadata-item {
+            margin-bottom: 10px;
+        }
+        .metadata-key {
+            font-weight: bold;
+            margin-right: 8px;
+        }
+        .metadata-value {
+            word-break: break-word;
+        }
+        .metadata-list {
+            margin: 5px 0 0 20px;
+            padding-left: 0;
+        }
+        .metadata-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+            border-bottom: 1px solid #e0e0e0;
+            padding-bottom: 8px;
+        }
         #contentWrapper {
             position: relative;
             margin-top: 20px;
@@ -152,6 +181,13 @@
             <button id="resetBtn" class="button reset-button">Reset</button>
         </div>
     </div>
+    <div id="metadataContainer" class="metadata-container">
+        <div class="metadata-header">
+            <h3 style="margin-top: 0; display: inline-block;">Metadata</h3>
+            <button id="toggleMetadata" class="button" style="float: right; padding: 4px 8px; margin: 0;">Toggle</button>
+        </div>
+        <div id="metadataContent"></div>
+    </div>
     <div id="contentWrapper">
         <div id="tabContainer" class="tab-list"></div>
         <div id="contentContainer"></div>
@@ -297,24 +333,95 @@
             activeTab = '';
             originalFileName = '';
             document.getElementById('fileInput').value = '';
+            document.getElementById('metadataContainer').innerHTML = '';
             renderInterface();
         }
 
         function getVariantIds() {
             return Object.keys(data).filter(key => 
                 !key.includes('_feedback') && 
-                !key.includes('_correct') && 
+                !key.includes('_correct') &&
+                !key.includes('_new') && 
                 key !== 'node' && 
                 key !== 'textValue' && 
-                key !== 'variantNodeId'
+                key !== 'variantNodeId' &&
+                key !== 'metadata' &&
+                key !== 'mapper'
             );
         }
 
         function renderInterface() {
+            renderMetadata();
             renderTabs();
             renderContent();
         }
 
+        function renderMetadata() {
+            const metadataContainer = document.getElementById('metadataContainer');
+            const metadataContent = document.getElementById('metadataContent');
+            metadataContent.innerHTML = '';
+            
+            if (!data.metadata) {
+                metadataContainer.style.display = 'none';
+                return;
+            }
+            
+            metadataContainer.style.display = 'block';
+            
+            Object.entries(data.metadata).forEach(([key, value]) => {
+                const item = document.createElement('div');
+                item.className = 'metadata-item';
+                
+                const keySpan = document.createElement('span');
+                keySpan.className = 'metadata-key';
+                keySpan.textContent = key + ':';
+                item.appendChild(keySpan);
+                
+                // Handle different types of values
+                if (Array.isArray(value)) {
+                    const valueSpan = document.createElement('span');
+                    valueSpan.className = 'metadata-value';
+                    item.appendChild(valueSpan);
+                    
+                    const list = document.createElement('ul');
+                    list.className = 'metadata-list';
+                    
+                    value.forEach(item => {
+                        const listItem = document.createElement('li');
+                        listItem.textContent = item;
+                        list.appendChild(listItem);
+                    });
+                    
+                    item.appendChild(list);
+                } else if (typeof value === 'object' && value !== null) {
+                    const valueSpan = document.createElement('span');
+                    valueSpan.className = 'metadata-value';
+                    valueSpan.textContent = JSON.stringify(value, null, 2);
+                    item.appendChild(valueSpan);
+                } else {
+                    const valueSpan = document.createElement('span');
+                    valueSpan.className = 'metadata-value';
+                    valueSpan.textContent = value;
+                    item.appendChild(valueSpan);
+                }
+                
+                metadataContent.appendChild(item);
+            });
+            
+            // Initialize toggle functionality
+            const toggleBtn = document.getElementById('toggleMetadata');
+            toggleBtn.onclick = toggleMetadataVisibility;
+        }
+        
+        function toggleMetadataVisibility() {
+            const content = document.getElementById('metadataContent');
+            if (content.style.display === 'none') {
+                content.style.display = 'block';
+            } else {
+                content.style.display = 'none';
+            }
+        }
+
         function renderTabs() {
             const tabContainer = document.getElementById('tabContainer');
             tabContainer.innerHTML = '';