public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

backport: Geomap: Fix marker layer for line string features (#103937) to 12.0.1 (#105774)

Browse Source 
Geomap: Fix marker layer for line string features (#103937)

* Geomap: Fix marker layer for line string features

* Update layer stack to handle line strings

(cherry picked from commit feb1ac5ba7)

Co-authored-by: Drew Slobodnjak <60050885+drew08t@users.noreply.github.com>
This commit is contained in:
Paul Marbach
2025-05-21 16:22:06 -04:00
committed by GitHub
co-authored by Drew Slobodnjak
parent b352b8b4fb
commit ddc0c74989
1 changed files with 49 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/plugins/panel/geomap/layers/data/markersLayer.tsx
+49 -15
View File
@@ -81,10 +81,13 @@ export const markersLayer: MapLayerRegistryItem<MarkersConfig> = {
const location = await getLocationMatchers(options.location); const location = await getLocationMatchers(options.location);
const source = new FrameVectorSource<Point>(location); const source = new FrameVectorSource<Point>(location);
const symbolLayer = new WebGLPointsLayer({ source, style: webGLStyle }); const symbolLayer = new WebGLPointsLayer({ source, style: webGLStyle });
const textLayer = new VectorImage({ source, declutter: true }); const vectorLayer = new VectorImage({ source, declutter: true });
// Initialize hasVector with just text check, will be updated when features are available
let hasVector = hasText;
const layers = new LayerGroup({ const layers = new LayerGroup({
// If text and no symbol, only show text - fall back on default symbol // If text and no symbol, only show text - fall back on default symbol
layers: hasText && symbol ? [symbolLayer, textLayer] : hasText && !symbol ? [textLayer] : [symbolLayer], layers: hasVector && symbol ? [symbolLayer, vectorLayer] : hasVector && !symbol ? [vectorLayer] : [symbolLayer],
}); });
const legendProps = new ReplaySubject<MarkersLegendProps>(1); const legendProps = new ReplaySubject<MarkersLegendProps>(1);
@@ -116,7 +119,15 @@ export const markersLayer: MapLayerRegistryItem<MarkersConfig> = {
} }
source.update(frame); source.update(frame);
// Track if we find any line strings during feature processing
let hasLineString = false;
source.forEachFeature((feature) => { source.forEachFeature((feature) => {
const isLineString = feature.getGeometry()?.getType() === 'LineString';
if (isLineString) {
hasLineString = true;
}
const idx: number = feature.get('rowIndex'); const idx: number = feature.get('rowIndex');
const dims = style.dims; const dims = style.dims;
const values = { ...style.base }; const values = { ...style.base };
@@ -133,28 +144,51 @@ export const markersLayer: MapLayerRegistryItem<MarkersConfig> = {
if (dims?.rotation) { if (dims?.rotation) {
values.rotation = dims.rotation.get(idx); values.rotation = dims.rotation.get(idx);
} }
const colorString = tinycolor(theme.visualization.getColorByName(values.color)).toString(); if (!isLineString) {
const colorValues = getRGBValues(colorString); const colorString = tinycolor(theme.visualization.getColorByName(values.color)).toString();
const colorValues = getRGBValues(colorString);
const radius = values.size ?? DEFAULT_SIZE; const radius = values.size ?? DEFAULT_SIZE;
const displacement = getDisplacement(values.symbolAlign ?? defaultStyleConfig.symbolAlign, radius); const displacement = getDisplacement(values.symbolAlign ?? defaultStyleConfig.symbolAlign, radius);
// WebGLPointsLayer uses style expressions instead of style functions // WebGLPointsLayer uses style expressions instead of style functions
feature.setProperties({ red: colorValues?.r ?? 255 }); feature.setProperties({ red: colorValues?.r ?? 255 });
feature.setProperties({ green: colorValues?.g ?? 255 }); feature.setProperties({ green: colorValues?.g ?? 255 });
feature.setProperties({ blue: colorValues?.b ?? 255 }); feature.setProperties({ blue: colorValues?.b ?? 255 });
feature.setProperties({ size: (values.size ?? 1) * 2 }); // TODO unify sizing across all source types feature.setProperties({ size: (values.size ?? 1) * 2 }); // TODO unify sizing across all source types
feature.setProperties({ rotation: ((values.rotation ?? 0) * Math.PI) / 180 }); feature.setProperties({ rotation: ((values.rotation ?? 0) * Math.PI) / 180 });
feature.setProperties({ opacity: (values.opacity ?? 1) * (colorValues?.a ?? 1) }); feature.setProperties({ opacity: (values.opacity ?? 1) * (colorValues?.a ?? 1) });
feature.setProperties({ offsetX: displacement[0] }); feature.setProperties({ offsetX: displacement[0] });
feature.setProperties({ offsetY: displacement[1] }); feature.setProperties({ offsetY: displacement[1] });
}
// Set style to be used by VectorLayer (text only) // Set style to be used by VectorLayer (text only)
if (hasText) { if (hasText) {
const textStyle = textMarker(values); const textStyle = textMarker(values);
feature.setStyle(textStyle); feature.setStyle(textStyle);
} }
// Set style to be used by LineString
if (isLineString) {
const lineStringStyle = style.maker(values);
feature.setStyle(lineStringStyle);
}
}); });
// Update hasVector state after processing all features
hasVector = hasText || hasLineString;
// Update layer visibility based on current hasVector state
const layersArray = layers.getLayers();
layersArray.clear();
if (hasVector && symbol) {
layersArray.extend([symbolLayer, vectorLayer]);
} else if (hasVector && !symbol) {
layersArray.extend([vectorLayer]);
} else {
layersArray.extend([symbolLayer]);
}
break; // Only the first frame for now! break; // Only the first frame for now!
} }
}, },