maplibre-preview 1.7.2 → 1.9.0

data/lib/maplibre-preview/views/maplibre_map.slim

@@ -35,6 +35,7 @@ ruby:
                   span.setting-value id="terrain-exaggeration-value" 1.0x
                 input.setting-range id="terrain-exaggeration-slider" type="range" min="0" max="3" step="0.1" value="1" oninput="setTerrainExaggeration(this.value)"
               button.control-button onclick="toggleAntialias()" id="antialias-btn" Antialias
+              button.control-button onclick="resetOverlayLayout()" id="overlay-layout-reset-btn" Reset window layout
 
             #settings-debug-panel.control-panel.settings-panel
               button.control-button onclick="toggleMapCache()" id="map-cache-btn" Cache
@@ -78,12 +79,13 @@ ruby:
   #map.map-layer data-style-url="#{style_url}"
 
   #style-parameters-panel.style-parameters-overlay.collapsed style="display: none;"
-    button.style-parameters-header type="button" onclick="toggleStyleParametersPanel()" id="style-parameters-toggle" aria-expanded="false"
+    .style-parameters-header
       span.style-parameters-title Style parameters
       span.style-parameters-summary
         span#style-parameters-count 0
         span params
-      span.style-parameters-toggle-icon ▲
+      button.style-parameters-toggle type="button" onclick="toggleStyleParametersPanel()" id="style-parameters-toggle" aria-expanded="false" title="Collapse/Expand Style parameters"
+        span.style-parameters-toggle-icon ▲
     .style-parameters-body
       #style-parameter-fields.style-parameter-fields
       .style-parameter-actions
@@ -150,10 +152,11 @@ javascript:
     let currentProfile = null;
     let contourManager = null;
     let tileGridManager = null;
+    let overlayLayoutManager = null;
     let originalStyle = null;
     let styleParameterDefinitions = new Map();
     let styleParameterValues = {};
-    let parameterizedUrlPrefixes = new Set();
+    let parameterizedUrlRules = [];
 
     const toDomId = (prefix, id) => `${prefix}-${String(id).replace(/[^a-zA-Z0-9_-]/g, '_')}`;
     const noCacheRequestOptions = () => mapCacheDisabled ? {cache: 'no-store'} : undefined;
@@ -166,7 +169,8 @@ javascript:
         return [];
     };
 
-    const inferParameterInputType = (name) => /(^|_|-)(time|date|datetime)($|_|-)/i.test(name) ? 'datetime-local' : 'text';
+    const isTemporalParameter = (name) => /(^|_|-)(time|date|datetime)($|_|-)/i.test(name);
+    const inferParameterInputType = (name) => isTemporalParameter(name) ? 'datetime-local' : 'text';
 
     const parameterInputToQueryValue = (name, value) => {
         if (!value) return '';
@@ -208,9 +212,24 @@ javascript:
         return prefix ? new URL(prefix, window.location.href).toString() : null;
     };
 
-    const rememberParameterizedUrl = (template) => {
+    const rememberParameterizedUrl = (template, parameterNames) => {
+        const names = normalizeQueryParams(parameterNames);
+        if (!names.length) return;
+
         const prefix = urlPrefixFromTemplate(template);
-        prefix && parameterizedUrlPrefixes.add(prefix);
+        if (!prefix) return;
+
+        const existing = parameterizedUrlRules.find(rule => rule.prefix === prefix);
+        if (existing) {
+            names.forEach(name => existing.parameterNames.add(name));
+        } else {
+            parameterizedUrlRules.push({prefix, parameterNames: new Set(names)});
+        }
+    };
+
+    const rememberParameterizedSourceUrls = (sourceDef, parameterNames) => {
+        [sourceDef?.url, sourceDef?.meta_url, sourceDef?.data].forEach(url => rememberParameterizedUrl(url, parameterNames));
+        (sourceDef?.tiles || []).forEach(tileUrl => rememberParameterizedUrl(tileUrl, parameterNames));
     };
 
     const appendStyleParametersToUrl = (resourceUrl, values = styleParameterValues, parameterNames = Object.keys(values)) => {
@@ -239,16 +258,13 @@ javascript:
             const params = sourceDeclaredParameters(sourceDef);
             params.forEach(name => mergeStyleParameterDefinition(name, sourceName));
 
-            if (params.length) {
-                [sourceDef.url, sourceDef.meta_url, sourceDef.data].forEach(rememberParameterizedUrl);
-                (sourceDef.tiles || []).forEach(rememberParameterizedUrl);
-            }
+            rememberParameterizedSourceUrls(sourceDef, params);
         });
     };
 
     const fetchSourceMetadata = async (url) => {
         try {
-            const response = await fetch(appendStyleParametersToUrl(url), noCacheRequestOptions());
+            const response = await fetch(url, noCacheRequestOptions());
             return response.ok ? response.json() : null;
         } catch (e) {
             console.warn('Could not inspect source metadata:', url, e);
@@ -269,7 +285,9 @@ javascript:
 
                 const params = normalizeQueryParams(metadata.query_params || metadata.queryParams);
                 params.forEach(name => mergeStyleParameterDefinition(name, sourceName));
-                (metadata.tiles || []).forEach(rememberParameterizedUrl);
+                const parameterNames = getSourceParameterNames(sourceName, sourceDef);
+                rememberParameterizedSourceUrls(sourceDef, parameterNames);
+                (metadata.tiles || []).forEach(tileUrl => rememberParameterizedUrl(tileUrl, parameterNames));
             }
         }));
     };
@@ -294,6 +312,53 @@ javascript:
         return values;
     };
 
+    const normalizeLocalizedLabel = (value) => {
+        if (!value) return null;
+        if (typeof value === 'string') return value;
+        if (typeof value === 'object') return value.title || value.name || value.label || null;
+        return String(value);
+    };
+
+    const getLocalizedMetadataLabel = (id, style = originalStyle) => {
+        const locale = style?.metadata?.locale;
+        if (!locale || !id) return id;
+
+        for (const lang of ['en-US', 'en', 'ru']) {
+            const label = normalizeLocalizedLabel(locale[lang]?.[id]);
+            if (label) return label;
+        }
+
+        for (const lang in locale) {
+            const label = normalizeLocalizedLabel(locale[lang]?.[id]);
+            if (label) return label;
+        }
+
+        return id;
+    };
+
+    const compactList = (items, limit = 3) => {
+        const unique = [...new Set(items.filter(Boolean))];
+        return unique.length > limit
+            ? `${unique.slice(0, limit).join(', ')} +${unique.length - limit}`
+            : unique.join(', ');
+    };
+
+    const getStyleParameterContext = (definition) => {
+        const style = originalStyle || currentStyle;
+        const sources = [...definition.sources].sort();
+        const layers = (style?.layers || []).filter(layer => sources.includes(layer.source));
+        const filterIds = [...new Set(layers.map(layer => layer.metadata?.filter_id).filter(Boolean))].sort();
+        const filterLabels = filterIds.map(id => getLocalizedMetadataLabel(id, style));
+
+        return {
+            sources,
+            layers: layers.map(layer => layer.id).sort(),
+            filterLabels: filterLabels.length ? filterLabels : sources,
+            sourceSummary: compactList(sources),
+            filterSummary: compactList(filterLabels.length ? filterLabels : sources)
+        };
+    };
+
     const renderStyleParameterControls = () => {
         const panel = document.getElementById('style-parameters-panel');
         const fields = document.getElementById('style-parameter-fields');
@@ -306,28 +371,84 @@ javascript:
         fields.innerHTML = '';
 
         definitions.forEach(definition => {
-            const row = document.createElement('label');
+            const row = document.createElement('div');
             row.className = 'style-parameter-row';
-            row.htmlFor = `style-param-${definition.name}`;
+            const context = getStyleParameterContext(definition);
 
-            const label = document.createElement('span');
+            const header = document.createElement('div');
+            header.className = 'style-parameter-header';
+            const label = document.createElement('label');
             label.className = 'style-parameter-label';
+            label.htmlFor = `style-param-${definition.name}`;
             label.textContent = definition.name;
+            const counts = document.createElement('span');
+            counts.className = 'style-parameter-counts';
+            counts.textContent = `${context.sources.length} src / ${context.layers.length} lyr`;
+            counts.title = `${context.sources.length} sources, ${context.layers.length} layers`;
+            header.appendChild(label);
+            header.appendChild(counts);
 
             const input = document.createElement('input');
             input.className = 'style-parameter-input';
             input.id = `style-param-${definition.name}`;
-            input.type = inferParameterInputType(definition.name);
+            input.type = isTemporalParameter(definition.name) ? 'text' : inferParameterInputType(definition.name);
             input.value = queryValueToParameterInput(definition.name, styleParameterValues[definition.name]);
             input.dataset.parameterName = definition.name;
-            input.title = [...definition.sources].join(', ');
+            input.title = [
+                `Sources: ${context.sources.join(', ')}`,
+                `Layers: ${context.layers.join(', ')}`
+            ].join('\n');
+            if (isTemporalParameter(definition.name)) {
+                input.classList.add('temporal');
+                input.readOnly = true;
+                input.placeholder = 'Select date and time';
+                input.setAttribute('aria-haspopup', 'dialog');
+                input.addEventListener('click', () => window.TemporalPicker.open(input));
+                input.addEventListener('focus', () => window.TemporalPicker.open(input));
+                input.addEventListener('keydown', event => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        window.TemporalPicker.open(input);
+                    }
+                });
+            }
 
-            row.appendChild(label);
-            row.appendChild(input);
+            const parameterControl = document.createElement('div');
+            parameterControl.className = isTemporalParameter(definition.name)
+                ? 'style-parameter-input-group temporal'
+                : 'style-parameter-input-group';
+            parameterControl.appendChild(input);
+
+            const contextBlock = document.createElement('div');
+            contextBlock.className = 'style-parameter-context';
+            contextBlock.title = input.title;
+
+            const usedBy = document.createElement('span');
+            usedBy.className = 'style-parameter-context-row';
+            const usedByKey = document.createElement('span');
+            usedByKey.className = 'style-parameter-context-key';
+            usedByKey.textContent = 'Used by';
+            usedBy.appendChild(usedByKey);
+            usedBy.appendChild(document.createTextNode(` ${context.filterSummary || 'No linked layers'}`));
+            contextBlock.appendChild(usedBy);
+
+            const sourceInfo = document.createElement('span');
+            sourceInfo.className = 'style-parameter-context-row';
+            const sourceKey = document.createElement('span');
+            sourceKey.className = 'style-parameter-context-key';
+            sourceKey.textContent = 'Sources';
+            sourceInfo.appendChild(sourceKey);
+            sourceInfo.appendChild(document.createTextNode(` ${context.sourceSummary || 'None'}`));
+            contextBlock.appendChild(sourceInfo);
+
+            row.appendChild(header);
+            row.appendChild(parameterControl);
+            row.appendChild(contextBlock);
             fields.appendChild(row);
         });
 
         layoutBottomOverlays();
+        overlayLayoutManager?.refreshPanel('style-parameters');
     };
 
     const toggleStyleParametersPanel = () => {
@@ -338,12 +459,13 @@ javascript:
         const isCollapsed = panel.classList.toggle('collapsed');
         toggle?.setAttribute('aria-expanded', String(!isCollapsed));
         layoutBottomOverlays();
+        overlayLayoutManager?.refreshPanel('style-parameters');
     };
 
     const initializeStyleParameters = async (style) => {
         styleParameterDefinitions = new Map();
         styleParameterValues = {};
-        parameterizedUrlPrefixes = new Set();
+        parameterizedUrlRules = [];
 
         collectStyleSourceParameters(style);
         styleParameterDefinitions.forEach((definition, name) => {
@@ -384,15 +506,27 @@ javascript:
         return modifiedStyle;
     };
 
-    const shouldPatchRequestUrl = (resourceUrl) => {
-        if (!Object.values(styleParameterValues).some(value => value !== undefined && value !== null && value !== '')) return false;
+    const parameterizedUrlRuleFor = (resourceUrl) => {
         const absolute = new URL(resourceUrl, window.location.href).toString();
-        return absolute.includes('/rb_tiles/') || [...parameterizedUrlPrefixes].some(prefix => absolute.startsWith(prefix));
+        return parameterizedUrlRules
+            .filter(rule => absolute.startsWith(rule.prefix))
+            .sort((a, b) => b.prefix.length - a.prefix.length)[0] || null;
     };
 
-    const patchRequestUrl = (resourceUrl) => shouldPatchRequestUrl(resourceUrl) ? appendStyleParametersToUrl(resourceUrl) : resourceUrl;
+    const patchRequestUrl = (resourceUrl) => {
+        const rule = parameterizedUrlRuleFor(resourceUrl);
+        if (!rule) return resourceUrl;
+
+        const parameterNames = [...rule.parameterNames];
+        if (!parameterNames.some(name => {
+            const value = styleParameterValues[name];
+            return value !== undefined && value !== null && value !== '';
+        })) return resourceUrl;
+
+        return appendStyleParametersToUrl(resourceUrl, styleParameterValues, parameterNames);
+    };
 
-    const BOTTOM_OVERLAY_IDS = ['style-parameters-panel', 'loading-indicator', 'profile-overlay'];
+    const BOTTOM_OVERLAY_IDS = ['loading-indicator'];
     const BOTTOM_OVERLAY_BASE_OFFSET = 20;
     const BOTTOM_OVERLAY_GAP = 12;
 
@@ -419,6 +553,69 @@ javascript:
                 element.style.bottom = `${bottomOffset}px`;
                 bottomOffset += element.offsetHeight + BOTTOM_OVERLAY_GAP;
             });
+            overlayLayoutManager?.refreshBounds();
+        });
+    };
+
+    const getSystemReservedBottom = () => {
+        const loading = document.getElementById('loading-indicator');
+        return isVisibleBottomOverlay(loading) ? loading.offsetHeight + BOTTOM_OVERLAY_BASE_OFFSET + BOTTOM_OVERLAY_GAP : 0;
+    };
+
+    const leftControlStackOffset = (sectionName) => {
+        const mapSettings = document.getElementById('map-settings-wrapper');
+        const styleControls = document.getElementById('style-controls-wrapper');
+        const gap = 12;
+        const mapHeight = mapSettings?.getBoundingClientRect().height || mapSettings?.offsetHeight || 0;
+        const styleHeight = styleControls?.getBoundingClientRect().height || styleControls?.offsetHeight || 0;
+
+        return {
+            x: 0,
+            y: sectionName === 'map-settings' ? -((styleHeight + gap) / 2) : ((mapHeight + gap) / 2)
+        };
+    };
+
+    const initializeOverlayLayout = () => {
+        if (!window.OverlayLayoutManager) return;
+
+        overlayLayoutManager?.destroy();
+        overlayLayoutManager = new OverlayLayoutManager({
+            storageKey: 'maplibre-preview:overlay-layout:v3',
+            snapThreshold: 32,
+            mobileBreakpoint: 768,
+            edgeGap: 10,
+            getReservedBounds: () => ({bottom: getSystemReservedBottom()})
+        });
+        window.overlayLayoutManager = overlayLayoutManager;
+        window.resetOverlayLayout = () => overlayLayoutManager.resetLayout();
+
+        overlayLayoutManager.registerPanel({
+            id: 'map-settings',
+            element: '#map-settings-wrapper',
+            handleSelector: '.control-section-title',
+            defaultAnchor: 'top-left',
+            defaultOffset: {x: 0, y: 0}
+        });
+        overlayLayoutManager.registerPanel({
+            id: 'style-controls',
+            element: '#style-controls-wrapper',
+            handleSelector: '.control-section-title',
+            defaultAnchor: 'left',
+            defaultOffset: () => leftControlStackOffset('style-controls')
+        });
+        overlayLayoutManager.registerPanel({
+            id: 'style-parameters',
+            element: '#style-parameters-panel',
+            handleSelector: '.style-parameters-title',
+            defaultAnchor: 'bottom',
+            defaultOffset: {x: 0, y: 0}
+        });
+        overlayLayoutManager.registerPanel({
+            id: 'performance',
+            element: '#performance-panel',
+            handleSelector: '.performance-content',
+            defaultAnchor: 'top',
+            defaultOffset: {x: 0, y: -10}
         });
     };
 
@@ -648,6 +845,7 @@ javascript:
             });
             filters.init();
             createLayerButtons();
+            overlayLayoutManager?.refreshBounds();
         } catch (e) {
             console.warn('Filter initialization failed:', e);
         }
@@ -947,7 +1145,19 @@ javascript:
 
         [header, stats, chart].forEach(el => overlay.appendChild(el));
         document.getElementById('map-container').appendChild(overlay);
-        setTimeout(() => drawSimpleProfileChart(profile), 10);
+        overlayLayoutManager?.registerPanel({
+            id: 'profile',
+            element: overlay,
+            handleSelector: '.profile-title',
+            defaultAnchor: 'bottom',
+            defaultOffset: {x: 0, y: -16},
+            snap: false,
+            lockSizeOnDrag: true
+        });
+        setTimeout(() => {
+            drawSimpleProfileChart(profile);
+            overlayLayoutManager?.refreshPanel('profile');
+        }, 10);
         layoutBottomOverlays();
     };
 
@@ -1025,6 +1235,7 @@ javascript:
     };
 
     const hideProfile = () => {
+        overlayLayoutManager?.unregisterPanel('profile');
         document.getElementById('profile-overlay')?.remove();
         layoutBottomOverlays();
         map.getLayer('profile-line') && (map.removeLayer('profile-line'), map.removeSource('profile-line'));
@@ -1491,4 +1702,5 @@ javascript:
     window.tileGridManager = null;
     window.addEventListener('resize', layoutBottomOverlays);
 
+    initializeOverlayLayout();
     initializeMap();

data/spec/maplibre_preview_spec.rb

@@ -14,6 +14,7 @@ RSpec.describe MapLibrePreview do
       expect(last_response.body).to include('maplibre-gl')
       expect(last_response.body).to include('maplibre-contour')
       expect(last_response.body).to include('d3')
+      expect(last_response.body).to include('overlay_layout')
     end
 
     it 'renders map cache toggle wiring' do
@@ -38,13 +39,34 @@ RSpec.describe MapLibrePreview do
       expect(last_response.body).to include('id="style-parameter-fields"')
       expect(last_response.body).to include('id="style-parameters-apply"')
       expect(last_response.body).to include('id="style-parameters-reset"')
+      expect(last_response.body).to include('OverlayLayoutManager')
+      expect(last_response.body).to include('overlayLayoutManager')
+      expect(last_response.body).to include('resetOverlayLayout')
+      expect(last_response.body).to include('id="overlay-layout-reset-btn"')
+      expect(last_response.body).to include('Reset window layout')
+      expect(last_response.body).to include('maplibre-preview:overlay-layout:v3')
+      expect(last_response.body).not_to include('overlay-panel-dock-actions')
       expect(last_response.body).to include('mapCacheDisabled')
       expect(last_response.body).to include('basemapOpacity')
       expect(last_response.body).to include('terrainExaggeration')
       expect(last_response.body).to include('styleParameterDefinitions')
+      expect(last_response.body).to include('parameterizedUrlRules')
       expect(last_response.body).to include('sourceDeclaredParameters')
       expect(last_response.body).to include('collectSourceMetadataParameters')
       expect(last_response.body).to include('applyStyleParametersToStyle')
+      expect(last_response.body).to include('rememberParameterizedSourceUrls')
+      expect(last_response.body).to include('parameterizedUrlRuleFor')
+      expect(last_response.body).to include('getStyleParameterContext')
+      expect(last_response.body).to include('isTemporalParameter')
+      expect(last_response.body).to include('/css/temporal_picker.css')
+      expect(last_response.body).to include('/js/temporal_picker.js')
+      expect(last_response.body).to include('window.TemporalPicker.open')
+      expect(last_response.body).to include('style-parameter-input-group')
+      expect(last_response.body).to include('style-parameter-counts')
+      expect(last_response.body).to include('style-parameter-context')
+      expect(last_response.body).to include('Used by')
+      expect(last_response.body).to include('Sources:')
+      expect(last_response.body).not_to include("absolute.includes('/rb_tiles/')")
       expect(last_response.body).to include('layoutBottomOverlays')
       expect(last_response.body).to include('showCollisionBoxes')
       expect(last_response.body).to include('showOverdrawInspector')
@@ -60,7 +82,7 @@ RSpec.describe MapLibrePreview do
     end
 
     it 'serves all required JavaScript modules' do
-      %w[/js/filters.js /js/contour.js /js/tilegrid.js /vendor/maplibre-gl/maplibre-gl.js /vendor/maplibre-contour/index.min.js /vendor/d3/d3.v7.min.js].each do |js_file|
+      %w[/js/overlay_layout.js /js/filters.js /js/contour.js /js/tilegrid.js /js/temporal_picker.js /vendor/maplibre-gl/maplibre-gl.js /vendor/maplibre-contour/index.min.js /vendor/d3/d3.v7.min.js].each do |js_file|
         get js_file
         expect(last_response).to be_ok
         expect(last_response.content_type).to include('javascript')
@@ -69,11 +91,13 @@ RSpec.describe MapLibrePreview do
     end
 
     it 'serves required stylesheets' do
-      get '/vendor/maplibre-gl/maplibre-gl.css'
+      %w[/vendor/maplibre-gl/maplibre-gl.css /css/temporal_picker.css].each do |css_file|
+        get css_file
 
-      expect(last_response).to be_ok
-      expect(last_response.content_type).to include('text/css')
-      expect(last_response.body).not_to be_empty
+        expect(last_response).to be_ok
+        expect(last_response.content_type).to include('text/css')
+        expect(last_response.body).not_to be_empty
+      end
     end
   end
 
@@ -85,9 +109,12 @@ RSpec.describe MapLibrePreview do
       body = last_response.body
 
       expect(body).to include('/vendor/maplibre-gl/maplibre-gl.css')
+      expect(body).to include('/css/temporal_picker.css')
       expect(body).to include('/vendor/maplibre-gl/maplibre-gl.js')
       expect(body).to include('/vendor/maplibre-contour/index.min.js')
       expect(body).to include('/vendor/d3/d3.v7.min.js')
+      expect(body).to include('/js/overlay_layout.js')
+      expect(body).to include('/js/temporal_picker.js')
       expect(body).not_to include('unpkg.com')
       expect(body).not_to include('d3js.org')
     end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: maplibre-preview
 version: !ruby/object:Gem::Version
-  version: 1.7.2
+  version: 1.9.0
 platform: ruby
 authors:
 - Alexander Ludov
@@ -201,8 +201,11 @@ files:
 - bin/maplibre-preview
 - docs/README_RU.md
 - lib/maplibre-preview.rb
+- lib/maplibre-preview/public/css/temporal_picker.css
 - lib/maplibre-preview/public/js/contour.js
 - lib/maplibre-preview/public/js/filters.js
+- lib/maplibre-preview/public/js/overlay_layout.js
+- lib/maplibre-preview/public/js/temporal_picker.js
 - lib/maplibre-preview/public/js/tilegrid.js
 - lib/maplibre-preview/public/vendor/d3/d3.v7.min.js
 - lib/maplibre-preview/public/vendor/maplibre-contour/index.min.js