fix: Preserve 3D plot camera position and fix CSS loading

Two fixes for the vector visualization page: 1. **CSS Loading Fix**: Moved CSS <link> from vector_viz.html fragment to user_info.html <head> block. HTMX fragments don't process <link> tags in <head>, causing unstyled page. Now CSS loads correctly. 2. **Camera Preservation**: Modified renderPlot() to preserve camera position when toggling query point visibility. Previously, toggling the "Show Query Point" checkbox would reset zoom/rotation to default. Now reads existing camera settings from plot before updating. Related: nextcloud_mcp_server/auth/static/vector-viz.js:123-130 Related: nextcloud_mcp_server/auth/templates/user_info.html:12 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-19 13:51:08 +01:00
parent 53689d076b
commit 9bd02d7ef7
4 changed files with 17 additions and 7 deletions
@@ -6,4 +6,4 @@

 !nextcloud_mcp_server/**/*.py
 !nextcloud_mcp_server/**/*.html
-!nextcloud_mcp_server/auth/static/*.png
+!nextcloud_mcp_server/auth/static/*
@@ -120,15 +120,22 @@ function vizApp() {
                }
            };

+            // Preserve camera position if plot already exists
+            const plotDiv = document.getElementById('viz-plot');
+            let cameraSettings = { eye: { x: 1.5, y: 1.5, z: 1.5 } }; // Default camera position
+
+            if (plotDiv && plotDiv.layout && plotDiv.layout.scene && plotDiv.layout.scene.camera) {
+                // Plot exists and has been interacted with - preserve current camera
+                cameraSettings = plotDiv.layout.scene.camera;
+            }
+
            const layout = {
                title: `Vector Space (PCA 3D) - ${results.length} results`,
                scene: {
                    xaxis: { title: 'PC1' },
                    yaxis: { title: 'PC2' },
                    zaxis: { title: 'PC3' },
-                    camera: {
-                        eye: { x: 1.5, y: 1.5, z: 1.5 }
-                    }
+                    camera: cameraSettings
                },
                hovermode: 'closest',
                autosize: true,  // Enable auto-sizing to fit container
@@ -145,7 +152,9 @@ function vizApp() {
                displayModeBar: true
            };

-            Plotly.newPlot('viz-plot', traces, layout, config);
+            // Use Plotly.react() instead of newPlot() to preserve camera position
+            // when toggling query point visibility
+            Plotly.react('viz-plot', traces, layout, config);
        },

        getNextcloudUrl(result) {
@@ -11,6 +11,9 @@

    <!-- Plotly.js for vector visualization -->
    <script src="https://cdn.plot.ly/plotly-3.3.0.min.js"></script>
+
+    <!-- Vector Viz static assets -->
+    <link rel="stylesheet" href="/app/static/vector-viz.css">
 {% endblock %}

 {% block extra_styles %}
@@ -1,5 +1,3 @@
-<link rel="stylesheet" href="/app/static/vector-viz.css">
-
 <div x-data="vizApp()">
    <div class="viz-layout">
        <!-- Top: Search Controls -->