diff --git a/app/gui2/src/components/visualizations/GeoMapVisualization.vue b/app/gui2/src/components/visualizations/GeoMapVisualization.vue index 876c45eace..26a6f81bf7 100644 --- a/app/gui2/src/components/visualizations/GeoMapVisualization.vue +++ b/app/gui2/src/components/visualizations/GeoMapVisualization.vue @@ -119,6 +119,7 @@ const LABEL_COLOR = `rgba(0, 0, 0, 0.8)` const DEFAULT_MAP_STYLE = 'mapbox://styles/mapbox/light-v9' const DEFAULT_MAP_ZOOM = 11 +const DEFAULT_MAX_MAP_ZOOM = 18 const ACCENT_COLOR: Color = [78, 165, 253] const dataPoints = ref([]) @@ -166,9 +167,24 @@ function updateState(data: Data) { } const center = centerPoint() + const viewPort = new deck.WebMercatorViewport({ + width: mapNode.value?.clientWidth ?? 600, + height: mapNode.value?.clientHeight ?? 400, + longitude: center.longitude, + latitude: center.latitude, + zoom: DEFAULT_MAP_ZOOM, + pitch: 0, + }).fitBounds( + [ + [center.minX, center.minY], + [center.maxX, center.maxY], + ], + { padding: 10, maxZoom: DEFAULT_MAX_MAP_ZOOM }, + ) + latitude.value = center.latitude longitude.value = center.longitude - zoom.value = DEFAULT_MAP_ZOOM + zoom.value = viewPort.zoom mapStyle.value = DEFAULT_MAP_STYLE pitch.value = 0 controller.value = true @@ -303,16 +319,16 @@ function centerPoint() { { const xs = dataPoints.value.map((p) => p.position[0]) minX = Math.min(...xs) - maxX = Math.min(...xs) + maxX = Math.max(...xs) } { const ys = dataPoints.value.map((p) => p.position[1]) minY = Math.min(...ys) - maxY = Math.min(...ys) + maxY = Math.max(...ys) } let longitude = (minX + maxX) / 2 let latitude = (minY + maxY) / 2 - return { latitude, longitude } + return { latitude, longitude, minX, maxX, minY, maxY } } /** diff --git a/app/gui2/src/components/visualizations/TableVisualization.vue b/app/gui2/src/components/visualizations/TableVisualization.vue index 3f4fd86fc9..c16a3c1299 100644 --- a/app/gui2/src/components/visualizations/TableVisualization.vue +++ b/app/gui2/src/components/visualizations/TableVisualization.vue @@ -210,25 +210,35 @@ function formatNumber(params: ICellRendererParams) { } function formatText(params: ICellRendererParams) { + const htmlEscaped = params.value + .replaceAll('&', '&') + .replaceAll('<', '<') + .replaceAll('>', '>') + .replace( + /https?:\/\/([-()_.!~*';/?:@&=+$,A-Za-z0-9])+/g, + (url: string) => `${url}`, + ) + if (textFormatterSelected.value === TextFormatOptions.Off) { - return params.value + return htmlEscaped.replace(/^\s+|\s+$/g, ' ') } + const partialMappings = { '\r': '
', '\n': '
', - '\t': ' ', + '\t': '→ |', } const fullMappings = { '\r': '
', '\n': '
', - '\t': '', + '\t': '→ |', } const replaceSpaces = textFormatterSelected.value === TextFormatOptions.On ? - params.value.replaceAll(' ', '·') - : params.value.replace(/ {2,}/g, function (match: string) { - return `${'·'.repeat(match.length)}` + htmlEscaped.replaceAll(' ', '·') + : htmlEscaped.replace(/ \s+|^ +| +$/g, function (match: string) { + return `${match.replaceAll(' ', '·')}` }) const replaceReturns = replaceSpaces.replace(