Refactor: Overpass nur via VLM, Panel ersetzt rechte Sidebar

- Overpass-Toggle aus Layer-Panel entfernt (kein Standalone-Modus) - Overpass-Panel und UI-Script entfernt - VLM-Panel nach rechts verschoben, ersetzt Sidebar wenn aktiv - Sidebar wird automatisch ein-/ausgeblendet bei VLM Toggle - VLM ruft Overpass API direkt auf (kein Umweg ueber OverpassUI) - Ergebnis-Zaehler im VLM-Panel statt separatem Overpass-Panel Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-26 00:24:51 +01:00
Commit 03b9abc991
--- a/static/css/globe.css
+++ b/static/css/globe.css
@@ -694,11 +694,11 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 /* === VLM Bildanalyse === */
 .dot-vlm { background: #e040fb; }

-.vlm-panel {
+.vlm-panel-right {
    position: fixed;
    top: 56px;
-    left: 268px;
-    width: 360px;
+    right: 12px;
+    width: 320px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: var(--bg-panel);
@@ -783,6 +783,6 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
    flex-shrink: 0;
 }

-.vlm-panel::-webkit-scrollbar { width: 4px; }
-.vlm-panel::-webkit-scrollbar-track { background: transparent; }
-.vlm-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+.vlm-panel-right::-webkit-scrollbar { width: 4px; }
+.vlm-panel-right::-webkit-scrollbar-track { background: transparent; }
+.vlm-panel-right::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
--- a/static/index.html
+++ b/static/index.html
@@ -108,13 +108,6 @@
                <span class="layer-count" id="count-infra">-</span>
            </label>
            <div class="layer-status" id="status-infra"></div>
-<label class="layer-toggle">
-                <input type="checkbox" id="layer-overpass" title="Overpass Turbo: Beliebige OSM-Daten abfragen">
-                <span class="layer-dot dot-overpass"></span>
-                <span class="layer-name" title="OverpassQL-Abfragen gegen OpenStreetMap">Overpass</span>
-                <span class="layer-count" id="count-overpass">-</span>
-            </label>
-            <div class="layer-status" id="status-overpass"></div>
            <label class="layer-toggle">
                <input type="checkbox" id="layer-vlm" title="VLM-Bildanalyse: Bild hochladen, Claude analysiert, Overpass sucht passende Orte">
                <span class="layer-dot dot-vlm"></span>
@@ -208,11 +201,9 @@
    <div id="city-links" class="city-links"></div>

    <!-- Rechte Sidebar: Datenpunkt-Uebersicht -->
-    <!-- Overpass Panel -->
-    <div id="overpass-panel" class="overpass-panel" style="display:none"></div>

    <!-- VLM Bildanalyse Panel -->
-    <div id="vlm-panel" class="vlm-panel" style="display:none"></div>
+    <div id="vlm-panel" class="vlm-panel-right" style="display:none"></div>
    <aside id="sidebar-right" class="sidebar-right">
        <button id="sidebar-toggle" class="sidebar-toggle" title="Seitenleiste ein-/ausblenden">
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
@@ -259,7 +250,6 @@
    <script src="/static/js/layers/cables.js"></script>
    <script src="/static/js/layers/infra.js"></script>
 <script src="/static/js/layers/overpass.js"></script>
-    <script src="/static/js/ui/overpass.js"></script>
    <script src="/static/js/ui/vlm.js"></script>
    <script src="/static/js/layers/iss.js"></script>
    <script src="/static/js/layers/terminator.js"></script>
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -159,13 +159,17 @@ const Globe = {
            'layer-satellites': function(on) { on ? SatellitesLayer.start(Globe.viewer) : SatellitesLayer.stop(); },
            'layer-cables': function(on) { on ? CablesLayer.start(Globe.viewer) : CablesLayer.stop(); },
            'layer-infra': function(on) { on ? InfraLayer.start(Globe.viewer) : InfraLayer.stop(); },
-            'layer-overpass': function(on) {
-                if (on) { OverpassLayer.start(Globe.viewer); OverpassUI.show(); }
-                else { OverpassLayer.stop(); OverpassUI.hide(); }
-            },
            'layer-vlm': function(on) {
-                if (on) { VlmUI.show(); }
-                else { VlmUI.hide(); }
+                var sidebar = document.getElementById('sidebar-right');
+                if (on) {
+                    if (sidebar) sidebar.style.display = 'none';
+                    OverpassLayer.start(Globe.viewer);
+                    VlmUI.show();
+                } else {
+                    VlmUI.hide();
+                    OverpassLayer.stop();
+                    if (sidebar) sidebar.style.display = '';
+                }
            },
            'layer-iss': function(on) { on ? ISSLayer.start(Globe.viewer) : ISSLayer.stop(); },
            'layer-disasters': function(on) { on ? DisastersLayer.start(Globe.viewer) : DisastersLayer.stop(); },
--- a/static/js/ui/vlm.js
+++ b/static/js/ui/vlm.js
@@ -267,7 +267,8 @@ const VlmUI = {
        var searchResult = document.getElementById('vlm-search-result');
        if (searchResult) { searchResult.style.display = 'block'; searchResult.textContent = 'Generiere Overpass-Queries...'; searchResult.style.color = 'var(--text-dim)'; }

-        // Queries generieren
+        // 1. Queries generieren
+        var startTime = Date.now();
        fetch('/api/vlm/generate-queries', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
@@ -280,23 +281,35 @@ const VlmUI = {
        .then(function(data) {
            if (searchResult) searchResult.textContent = 'Query generiert (' + data.tag_count + ' Tags). Suche OSM-Daten...';

-            // Overpass-Layer aktivieren und Query ausfuehren
-            var overpassCb = document.getElementById('layer-overpass');
-            if (overpassCb && !overpassCb.checked) {
-                overpassCb.checked = true;
-                overpassCb.dispatchEvent(new Event('change'));
-            }
-
-            // Query an Overpass senden
+            // 2. Overpass-Query direkt ausfuehren
            OverpassLayer.setColor('#e040fb');
-            if (typeof OverpassUI !== 'undefined') {
-                OverpassUI.executeQueryDirect(data.query, bbox, '#e040fb');
+            return fetch('/api/overpass/query', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ query: data.query, bbox: bbox }),
+            });
+        })
+        .then(function(r) {
+            if (r.status === 429) {
+                return r.json().then(function(d) { throw new Error(d.detail || 'Rate-Limit'); });
            }
-
+            if (!r.ok) {
+                return r.json().then(function(d) { throw new Error(d.detail || 'Overpass-Fehler'); });
+            }
+            return r.json();
+        })
+        .then(function(data) {
+            var elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
+            OverpassLayer.render(data);
            if (searchResult) {
-                searchResult.textContent = 'Overpass-Suche gestartet';
+                var text = data.total + ' Orte gefunden (' + elapsed + 's)';
+                if (data.cached) text += ' [Cache]';
+                if (data.truncated) text += ' [Limit erreicht]';
+                searchResult.textContent = text;
                searchResult.style.color = 'var(--accent)';
            }
+            var countEl = document.getElementById('count-vlm');
+            if (countEl) countEl.textContent = data.total;
        })
        .catch(function(e) {
            if (searchResult) {
@@ -329,5 +342,8 @@ const VlmUI = {

        var countEl = document.getElementById('count-vlm');
        if (countEl) countEl.textContent = '-';
+
+        // Overpass-Ergebnisse loeschen
+        if (typeof OverpassLayer !== 'undefined') OverpassLayer.clear();
    },
 };