feat(topic-modeling): add close button for topic details panel

Add X button to close the topic details bar chart panel in the
inter-topic distance view. Panel becomes visible when clicking
topics and can now be dismissed.

Author: jeremymanning

demos/topic-modeling/css/topic-modeling.css

@@ -452,9 +452,32 @@
     border-radius: 12px;
 }
 
+.topic-details-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
 .topic-details h3 {
     color: var(--primary-color);
-    margin-bottom: 15px;
+    margin-bottom: 0;
+}
+
+.close-btn {
+    background: transparent;
+    border: none;
+    font-size: 1.5rem;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: var(--topic-transition);
+}
+
+.close-btn:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover);
 }
 
 /* Statistics Panel */

demos/topic-modeling/index.html

@@ -166,7 +166,10 @@ <h2>Inter-topic Distance Map (pyLDAvis-style)</h2>
                     <p class="subtitle">Topic similarity in 2D space using PCA</p>
                     <div id="intertopic-plot" class="plot-container"></div>
                     <div id="topic-details" class="topic-details">
-                        <h3>Topic Details</h3>
+                        <div class="topic-details-header">
+                            <h3>Topic Details</h3>
+                            <button id="close-topic-details" class="close-btn" aria-label="Close topic details">&times;</button>
+                        </div>
                         <div id="topic-words-bars"></div>
                     </div>
                 </div>
@@ -250,6 +253,13 @@ <h3>Statistics</h3>
             // Export
             document.getElementById('export-topics-btn').addEventListener('click', exportTopics);
             document.getElementById('export-viz-btn').addEventListener('click', exportVisualization);
+
+            document.getElementById('close-topic-details').addEventListener('click', () => {
+                const topicDetails = document.getElementById('topic-details');
+                const barsContainer = document.getElementById('topic-words-bars');
+                barsContainer.innerHTML = '';
+                topicDetails.style.display = 'none';
+            });
         }
 
         function setupRangeSlider(sliderId, valueId) {

demos/topic-modeling/js/visualization.js

@@ -395,6 +395,11 @@ export class TopicVisualizer {
     }
 
     showTopicWordBars(topicIdx, results) {
+        const topicDetails = document.getElementById('topic-details');
+        if (topicDetails) {
+            topicDetails.style.display = 'block';
+        }
+        
         const topWordsCount = parseInt(document.getElementById('top-words')?.value || 10);
         const topic = results.topics[topicIdx].slice(0, topWordsCount);