fix(charts): adopt @signozhq/ui 0.2.0 in the geo map

Zoom buttons use icon mode with a wrapping tooltip and say why they are
disabled. GeoJSON types are imported, no longer read off a global.

.github/workflows/e2eci.yaml

@@ -3,16 +3,44 @@ name: e2eci
 on:
   pull_request:
     types:
+      - opened
+      - synchronize
+      - reopened
       - labeled
   pull_request_target:
     types:
       - labeled
+  merge_group:
+    types:
+      - checks_requested
+
+concurrency:
+  group: e2eci-${{ github.event_name }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 
 jobs:
+  changes:
+    if: github.event_name != 'merge_group'
+    runs-on: ubuntu-latest
+    outputs:
+      e2e: ${{ steps.changes.outputs.e2e }}
+    steps:
+      - name: changes
+        id: changes
+        env:
+          GH_TOKEN: ${{ github.token }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          LABELED: ${{ contains(github.event.pull_request.labels.*.name, 'safe-to-e2e') }}
+        run: |
+          files=$(gh api "repos/$GITHUB_REPOSITORY/pulls/$PR_NUMBER/files" --paginate --jq '.[].filename')
+          if [ "$LABELED" = true ] || grep -qE '^(frontend|tests/e2e)/' <<< "$files"; then
+            echo "e2e=true" >> "$GITHUB_OUTPUT"
+          fi
   fmtlint:
+    needs: changes
     if: |
       ((github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-e2e')
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && needs.changes.outputs.e2e == 'true'
     runs-on: ubuntu-latest
     steps:
       - name: checkout
@@ -41,9 +69,10 @@ jobs:
         project:
           - chromium
         shard: [1, 2, 3, 4]
+    needs: changes
     if: |
       ((github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-e2e')
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && needs.changes.outputs.e2e == 'true'
     runs-on: ubuntu-latest
     timeout-minutes: 30
     steps:
@@ -152,3 +181,17 @@ jobs:
           name: playwright-artifacts-${{ matrix.project }}-${{ matrix.shard }}
           path: tests/e2e/artifacts/
           retention-days: 5
+  # Required status check. Fails when e2e was needed but did not pass,
+  # including fork and dependabot PRs still waiting on safe-to-test.
+  e2e:
+    if: always()
+    needs: [changes, fmtlint, test]
+    runs-on: ubuntu-latest
+    steps:
+      - name: verdict
+        if: |
+          github.event_name != 'merge_group' && (needs.changes.result != 'success' ||
+          (needs.changes.outputs.e2e == 'true' && (needs.fmtlint.result != 'success' || needs.test.result != 'success')))
+        run: |
+          echo "::error::e2e did not pass. Fork and dependabot PRs need the safe-to-test label."
+          exit 1

docs/api/openapi.yml

@@ -3702,6 +3702,13 @@ components:
           nullable: true
           type: number
       type: object
+    DashboardtypesAxisScale:
+      enum:
+      - auto
+      - linear
+      - log
+      - symlog
+      type: string
     DashboardtypesBarChartPanelSpec:
       properties:
         axes:
@@ -3732,6 +3739,11 @@ components:
         timePreference:
           $ref: '#/components/schemas/DashboardtypesTimePreference'
       type: object
+    DashboardtypesBubbleRadius:
+      maximum: 64
+      minimum: 1
+      nullable: true
+      type: integer
     DashboardtypesBuilderQuerySpec:
       discriminator:
         mapping:
@@ -3904,6 +3916,149 @@ components:
       minimum: 0
       nullable: true
       type: number
+    DashboardtypesGeoMapBubbles:
+      properties:
+        maxRadius:
+          $ref: '#/components/schemas/DashboardtypesBubbleRadius'
+        minRadius:
+          $ref: '#/components/schemas/DashboardtypesBubbleRadius'
+      type: object
+    DashboardtypesGeoMapChartAppearance:
+      properties:
+        bubbles:
+          $ref: '#/components/schemas/DashboardtypesGeoMapBubbles'
+        colors:
+          $ref: '#/components/schemas/DashboardtypesGeoMapColors'
+        labels:
+          description: Shows country and state names once each fits inside its shape.
+          nullable: true
+          type: boolean
+      type: object
+    DashboardtypesGeoMapColors:
+      properties:
+        fill:
+          type: string
+        max:
+          nullable: true
+          type: number
+        min:
+          nullable: true
+          type: number
+        mode:
+          $ref: '#/components/schemas/DashboardtypesHeatmapColorMode'
+        palette:
+          $ref: '#/components/schemas/DashboardtypesHeatmapPalette'
+        scale:
+          $ref: '#/components/schemas/DashboardtypesHeatmapColorScale'
+        steps:
+          type: integer
+      type: object
+    DashboardtypesGeoMapCountryFormat:
+      enum:
+      - auto
+      - alpha2
+      - alpha3
+      - name
+      type: string
+    DashboardtypesGeoMapLayer:
+      enum:
+      - regions
+      - bubbles
+      - points
+      type: string
+    DashboardtypesGeoMapLocation:
+      properties:
+        country:
+          description: Group-by key holding the country, for the country and subdivision
+            modes.
+          type: string
+        countryFormat:
+          $ref: '#/components/schemas/DashboardtypesGeoMapCountryFormat'
+        lat:
+          description: Group-by key holding the latitude, for the coordinates mode.
+          type: string
+        lon:
+          description: Group-by key holding the longitude, for the coordinates mode.
+          type: string
+        mode:
+          $ref: '#/components/schemas/DashboardtypesGeoMapLocationMode'
+        region:
+          description: Group-by key holding the ISO 3166-2 region code (e.g. geo.region.iso_code),
+            for the subdivision mode.
+          type: string
+      type: object
+    DashboardtypesGeoMapLocationMode:
+      enum:
+      - auto
+      - country
+      - subdivision
+      - coordinates
+      type: string
+    DashboardtypesGeoMapPanelSpec:
+      properties:
+        chartAppearance:
+          $ref: '#/components/schemas/DashboardtypesGeoMapChartAppearance'
+        formatting:
+          $ref: '#/components/schemas/DashboardtypesTableFormatting'
+        legend:
+          $ref: '#/components/schemas/DashboardtypesLegend'
+        location:
+          $ref: '#/components/schemas/DashboardtypesGeoMapLocation'
+        map:
+          $ref: '#/components/schemas/DashboardtypesGeoMapSettings'
+        thresholds:
+          items:
+            $ref: '#/components/schemas/DashboardtypesGeoMapThreshold'
+          nullable: true
+          type: array
+        visualization:
+          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
+      type: object
+    DashboardtypesGeoMapSettings:
+      properties:
+        colorBy:
+          description: Value column key that sets the colour. Empty uses the first
+            value column.
+          type: string
+        layer:
+          $ref: '#/components/schemas/DashboardtypesGeoMapLayer'
+        sizeBy:
+          description: Value column key that sets the bubble or point size. Empty
+            uses colorBy.
+          type: string
+        view:
+          $ref: '#/components/schemas/DashboardtypesGeoMapView'
+        viewCountry:
+          description: ISO 3166-1 alpha-2 code of the country the country view shows.
+          type: string
+      type: object
+    DashboardtypesGeoMapThreshold:
+      properties:
+        color:
+          type: string
+        operator:
+          $ref: '#/components/schemas/DashboardtypesComparisonOperator'
+        unit:
+          type: string
+        value:
+          format: double
+          type: number
+      required:
+      - value
+      - color
+      type: object
+    DashboardtypesGeoMapView:
+      enum:
+      - world
+      - fit
+      - africa
+      - asia
+      - europe
+      - north_america
+      - south_america
+      - oceania
+      - country
+      type: string
     DashboardtypesGettableDashboardV2:
       properties:
         createdAt:
@@ -4439,14 +4594,17 @@ components:
         mapping:
           signoz/AreaChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
           signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
+          signoz/GeoMapPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesGeoMapPanelSpec'
           signoz/HeatmapPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
           signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
           signoz/PieChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
+          signoz/ScatterPlotPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
           signoz/TablePanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
           signoz/TextPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
           signoz/TimeSeriesPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
+          signoz/TopListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTopListPanelSpec'
         propertyName: kind
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
@@ -4459,6 +4617,9 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTopListPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesGeoMapPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -4472,6 +4633,9 @@ components:
       - signoz/ListPanel
       - signoz/TextPanel
       - signoz/HeatmapPanel
+      - signoz/ScatterPlotPanel
+      - signoz/TopListPanel
+      - signoz/GeoMapPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
       properties:
@@ -4497,6 +4661,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesGeoMapPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/GeoMapPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesGeoMapPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec:
       properties:
         kind:
@@ -4557,6 +4733,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/ScatterPlotPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec:
       properties:
         kind:
@@ -4593,6 +4781,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTopListPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/TopListPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesTopListPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelSpec:
       properties:
         display:
@@ -4636,6 +4836,16 @@ components:
         visualization:
           $ref: '#/components/schemas/DashboardtypesBasicVisualization'
       type: object
+    DashboardtypesPointDiameter:
+      maximum: 40
+      minimum: 2
+      nullable: true
+      type: integer
+    DashboardtypesPointOpacity:
+      maximum: 1
+      minimum: 0.1
+      nullable: true
+      type: number
     DashboardtypesPostableDashboardV2:
       properties:
         generateName:
@@ -4824,6 +5034,104 @@ components:
       required:
       - queryValue
       type: object
+    DashboardtypesScatterPlotAxes:
+      properties:
+        x:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+        "y":
+          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+      type: object
+    DashboardtypesScatterPlotAxis:
+      properties:
+        label:
+          description: Axis title. Empty draws none.
+          type: string
+        scale:
+          $ref: '#/components/schemas/DashboardtypesAxisScale'
+        softMax:
+          nullable: true
+          type: number
+        softMin:
+          nullable: true
+          type: number
+      type: object
+    DashboardtypesScatterPlotChartAppearance:
+      properties:
+        points:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotPoints'
+      type: object
+    DashboardtypesScatterPlotDimensions:
+      properties:
+        colorBy:
+          description: Group-by label names (e.g. k8s.namespace.name) whose combined
+            values colour dots and drive the legend. Empty colours by every group-by
+            label.
+          items:
+            type: string
+          nullable: true
+          type: array
+        sizeBy:
+          description: Value column key that scales dot size. Empty draws every dot
+            at the default size.
+          type: string
+        x:
+          description: Value column key (queryName, or queryName.expression for a
+            multi-aggregation query) plotted on the x axis. Empty uses the first value
+            column.
+          type: string
+        "y":
+          description: Value column key plotted on the y axis. Empty uses the second
+            value column.
+          type: string
+      type: object
+    DashboardtypesScatterPlotPanelSpec:
+      properties:
+        axes:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotAxes'
+        chartAppearance:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotChartAppearance'
+        dimensions:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotDimensions'
+        formatting:
+          $ref: '#/components/schemas/DashboardtypesTableFormatting'
+        legend:
+          $ref: '#/components/schemas/DashboardtypesLegend'
+        thresholds:
+          items:
+            $ref: '#/components/schemas/DashboardtypesScatterPlotThreshold'
+          nullable: true
+          type: array
+        visualization:
+          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
+      type: object
+    DashboardtypesScatterPlotPoints:
+      properties:
+        maxSize:
+          $ref: '#/components/schemas/DashboardtypesPointDiameter'
+        minSize:
+          $ref: '#/components/schemas/DashboardtypesPointDiameter'
+        opacity:
+          $ref: '#/components/schemas/DashboardtypesPointOpacity'
+        size:
+          $ref: '#/components/schemas/DashboardtypesPointDiameter'
+      type: object
+    DashboardtypesScatterPlotThreshold:
+      properties:
+        axis:
+          $ref: '#/components/schemas/DashboardtypesThresholdAxis'
+        color:
+          type: string
+        label:
+          type: string
+        unit:
+          type: string
+        value:
+          format: double
+          type: number
+      required:
+      - value
+      - color
+      type: object
     DashboardtypesSource:
       enum:
       - user
@@ -4937,6 +5245,11 @@ components:
       - value
       - name
       type: object
+    DashboardtypesThresholdAxis:
+      enum:
+      - x
+      - "y"
+      type: string
     DashboardtypesThresholdFormat:
       enum:
       - text
@@ -5008,6 +5321,35 @@ components:
         timePreference:
           $ref: '#/components/schemas/DashboardtypesTimePreference'
       type: object
+    DashboardtypesTopListAppearance:
+      properties:
+        barColor:
+          description: Hex color of every bar; a matching background threshold overrides
+            it.
+          type: string
+        showRank:
+          description: Numbers each row by its position in the list.
+          type: boolean
+        showShare:
+          description: Shows each row's share of the listed rows' total.
+          type: boolean
+      required:
+      - barColor
+      type: object
+    DashboardtypesTopListPanelSpec:
+      properties:
+        appearance:
+          $ref: '#/components/schemas/DashboardtypesTopListAppearance'
+        formatting:
+          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
+        thresholds:
+          items:
+            $ref: '#/components/schemas/DashboardtypesComparisonThreshold'
+          nullable: true
+          type: array
+        visualization:
+          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
+      type: object
     DashboardtypesUpdatableDashboardV2:
       properties:
         image:

frontend/__mocks__/uplotMock.ts

@@ -57,6 +57,7 @@ const mockPaths = {
 const mockTzDate = jest.fn(
 	(date: Date, _timezone: string) => new Date(date.getTime()),
 );
+const mockOrient = jest.fn();
 
 // Mock uPlot constructor - this needs to be a proper constructor function
 function MockUPlot(
@@ -70,6 +71,7 @@ function MockUPlot(
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
+MockUPlot.orient = mockOrient;
 // Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
 MockUPlot.pxRatio = 1;
 

frontend/jest.config.ts

@@ -56,10 +56,10 @@ const config: Config.InitialOptions = {
 	transformIgnorePatterns: [
 		// @chenglou/pretext is ESM-only; @signozhq/ui pulls it in via text-ellipsis.
 		// Pattern 1: allow .pnpm virtual store through (handled by pattern 2), plus root-level ESM packages.
-		'node_modules/(?!(\\.pnpm|react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|remark-gfm|mdast-util-gfm|mdast-util-gfm-autolink-literal|mdast-util-gfm-footnote|mdast-util-gfm-strikethrough|mdast-util-gfm-table|mdast-util-gfm-task-list-item|mdast-util-find-and-replace|mdast-util-phrasing|mdast-util-to-markdown|markdown-table|longest-streak|ccount|escape-string-regexp|mdast-util-from-markdown|mdast-util-to-string|micromark|micromark-core-commonmark|micromark-extension-gfm|micromark-extension-gfm-autolink-literal|micromark-extension-gfm-footnote|micromark-extension-gfm-strikethrough|micromark-extension-gfm-table|micromark-extension-gfm-tagfilter|micromark-extension-gfm-task-list-item|micromark-factory-destination|micromark-factory-label|micromark-factory-space|micromark-factory-title|micromark-factory-whitespace|micromark-util-character|micromark-util-chunked|micromark-util-classify-character|micromark-util-combine-extensions|micromark-util-decode-numeric-character-reference|micromark-util-decode-string|micromark-util-encode|micromark-util-html-tag-name|micromark-util-normalize-identifier|micromark-util-resolve-all|micromark-util-sanitize-uri|micromark-util-subtokenize|micromark-util-symbol|micromark-util-types|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)/)',
+		'node_modules/(?!(\\.pnpm|react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|ol|rbush|quickselect|earcut|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|remark-gfm|mdast-util-gfm|mdast-util-gfm-autolink-literal|mdast-util-gfm-footnote|mdast-util-gfm-strikethrough|mdast-util-gfm-table|mdast-util-gfm-task-list-item|mdast-util-find-and-replace|mdast-util-phrasing|mdast-util-to-markdown|markdown-table|longest-streak|ccount|escape-string-regexp|mdast-util-from-markdown|mdast-util-to-string|micromark|micromark-core-commonmark|micromark-extension-gfm|micromark-extension-gfm-autolink-literal|micromark-extension-gfm-footnote|micromark-extension-gfm-strikethrough|micromark-extension-gfm-table|micromark-extension-gfm-tagfilter|micromark-extension-gfm-task-list-item|micromark-factory-destination|micromark-factory-label|micromark-factory-space|micromark-factory-title|micromark-factory-whitespace|micromark-util-character|micromark-util-chunked|micromark-util-classify-character|micromark-util-combine-extensions|micromark-util-decode-numeric-character-reference|micromark-util-decode-string|micromark-util-encode|micromark-util-html-tag-name|micromark-util-normalize-identifier|micromark-util-resolve-all|micromark-util-sanitize-uri|micromark-util-subtokenize|micromark-util-symbol|micromark-util-types|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)/)',
 		// Pattern 2: pnpm virtual store — ignore everything except ESM-only packages.
 		// pnpm encodes scoped packages as @scope+name@version, so match on scope prefix.
-		'node_modules/\\.pnpm/(?!(react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|remark-gfm|mdast-util-gfm|mdast-util-gfm-autolink-literal|mdast-util-gfm-footnote|mdast-util-gfm-strikethrough|mdast-util-gfm-table|mdast-util-gfm-task-list-item|mdast-util-find-and-replace|mdast-util-phrasing|mdast-util-to-markdown|markdown-table|longest-streak|ccount|escape-string-regexp|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)[^/]*/node_modules)',
+		'node_modules/\\.pnpm/(?!(react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|ol|rbush|quickselect|earcut|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|remark-gfm|mdast-util-gfm|mdast-util-gfm-autolink-literal|mdast-util-gfm-footnote|mdast-util-gfm-strikethrough|mdast-util-gfm-table|mdast-util-gfm-task-list-item|mdast-util-find-and-replace|mdast-util-phrasing|mdast-util-to-markdown|markdown-table|longest-streak|ccount|escape-string-regexp|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)[^/]*/node_modules)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/package.json

@@ -30,7 +30,8 @@
     "test": "jest",
     "test:changedsince": "jest --changedSince=main --coverage --silent",
     "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh",
-    "generate:config:web-settings": "json2ts ./src/schemas/generated/webSettings.schema.json -o src/types/generated/webSettings.ts --style.useTabs --style.tabWidth=1 --style.singleQuote --bannerComment '/* AUTO GENERATED FILE - DO NOT EDIT - GENERATED FROM frontend/src/schemas/generated/webSettings.schema.json */'"
+    "generate:config:web-settings": "json2ts ./src/schemas/generated/webSettings.schema.json -o src/types/generated/webSettings.ts --style.useTabs --style.tabWidth=1 --style.singleQuote --bannerComment '/* AUTO GENERATED FILE - DO NOT EDIT - GENERATED FROM frontend/src/schemas/generated/webSettings.schema.json */'",
+    "build:geo-outlines": "node scripts/geo-outlines/build.mjs"
   },
   "engines": {
     "node": ">=22.0.0",
@@ -96,6 +97,7 @@
     "monaco-editor": "0.55.1",
     "motion": "12.4.13",
     "nuqs": "2.8.8",
+    "ol": "10.11.0",
     "overlayscrollbars": "^2.16.0",
     "overlayscrollbars-react": "^0.5.6",
     "papaparse": "5.4.1",
@@ -132,6 +134,7 @@
     "rrule": "2.8.1",
     "styled-components": "^5.3.11",
     "timestamp-nano": "^1.0.0",
+    "topojson-client": "3.1.0",
     "translation-resilience": "^0.2.0",
     "typescript": "5.9.3",
     "uplot": "1.6.31",
@@ -175,6 +178,7 @@
     "@types/crypto-js": "4.2.2",
     "@types/d3-hierarchy": "1.1.11",
     "@types/event-source-polyfill": "^1.0.0",
+    "@types/geojson": "7946.0.16",
     "@types/history": "4.7.11",
     "@types/jest": "30.0.0",
     "@types/lodash-es": "^4.17.4",
@@ -192,8 +196,11 @@
     "@types/redux-mock-store": "1.0.4",
     "@types/styled-components": "^5.1.4",
     "@types/testing-library__jest-dom": "^5.14.5",
+    "@types/topojson-client": "3.1.5",
+    "@types/topojson-specification": "1.0.5",
     "@types/uuid": "^8.3.1",
     "@typescript/native-preview": "7.0.0-dev.20260430.1",
+    "d3-geo": "3.1.1",
     "eslint-plugin-sonarjs": "4.0.2",
     "glob": "^13.0.6",
     "husky": "^7.0.4",
@@ -216,6 +223,8 @@
     "storybook": "10.5.9",
     "stylelint": "17.15.0",
     "svgo": "4.1.0",
+    "topojson-server": "3.0.1",
+    "topojson-simplify": "3.0.3",
     "ts-jest": "29.4.9",
     "typescript-plugin-css-modules": "5.2.0",
     "use-sync-external-store": "1.6.0",

frontend/pnpm-lock.yaml

@@ -203,6 +203,9 @@ importers:
       nuqs:
         specifier: 2.8.8
         version: 2.8.8(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)
+      ol:
+        specifier: 10.11.0
+        version: 10.11.0
       overlayscrollbars:
         specifier: ^2.16.0
         version: 2.16.0
@@ -311,6 +314,9 @@ importers:
       timestamp-nano:
         specifier: ^1.0.0
         version: 1.0.1
+      topojson-client:
+        specifier: 3.1.0
+        version: 3.1.0
       translation-resilience:
         specifier: ^0.2.0
         version: 0.2.0
@@ -399,6 +405,9 @@ importers:
       '@types/event-source-polyfill':
         specifier: ^1.0.0
         version: 1.0.1
+      '@types/geojson':
+        specifier: 7946.0.16
+        version: 7946.0.16
       '@types/history':
         specifier: 4.7.11
         version: 4.7.11
@@ -450,12 +459,21 @@ importers:
       '@types/testing-library__jest-dom':
         specifier: ^5.14.5
         version: 5.14.5
+      '@types/topojson-client':
+        specifier: 3.1.5
+        version: 3.1.5
+      '@types/topojson-specification':
+        specifier: 1.0.5
+        version: 1.0.5
       '@types/uuid':
         specifier: ^8.3.1
         version: 8.3.4
       '@typescript/native-preview':
         specifier: 7.0.0-dev.20260430.1
         version: 7.0.0-dev.20260430.1
+      d3-geo:
+        specifier: 3.1.1
+        version: 3.1.1
       eslint-plugin-sonarjs:
         specifier: 4.0.2
         version: 4.0.2(eslint@10.2.1(jiti@2.6.1))
@@ -522,6 +540,12 @@ importers:
       svgo:
         specifier: 4.1.0
         version: 4.1.0
+      topojson-server:
+        specifier: 3.0.1
+        version: 3.0.1
+      topojson-simplify:
+        specifier: 3.0.3
+        version: 3.0.3
       ts-jest:
         specifier: 29.4.9
         version: 29.4.9(@babel/core@7.29.7)(@jest/transform@30.4.1)(@jest/types@30.2.0)(babel-jest@29.6.4(@babel/core@7.29.7))(esbuild@0.28.1)(jest-util@30.4.1)(jest@30.2.0(@types/node@16.18.25)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.16.2)(@types/node@16.18.25)(typescript@5.9.3)))(typescript@5.9.3)
@@ -2920,6 +2944,9 @@ packages:
   '@petamoriken/float16@3.8.0':
     resolution: {integrity: sha512-AhVAm6SQ+zgxIiOzwVdUcDmKlu/qU39FiYD2UD6kQQaVenrn0dGZewIghWAENGQsvC+1avLCuT+T2/3Gsp/W3w==}
 
+  '@petamoriken/float16@3.9.3':
+    resolution: {integrity: sha512-8awtpHXCx/bNpFt4mt2xdkgtgVvKqty8VbjHI/WWWQuEw+KLzFot3f4+LkQY9YmOtq7A5GdOnqoIC8Pdygjk2g==}
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -4040,8 +4067,8 @@ packages:
   '@types/file-saver@2.0.5':
     resolution: {integrity: sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==}
 
-  '@types/geojson@7946.0.14':
-    resolution: {integrity: sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==}
+  '@types/geojson@7946.0.16':
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
 
   '@types/graceful-fs@4.1.6':
     resolution: {integrity: sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==}
@@ -4124,6 +4151,9 @@ packages:
   '@types/prop-types@15.7.5':
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
 
+  '@types/rbush@4.0.0':
+    resolution: {integrity: sha512-+N+2H39P8X+Hy1I5mC6awlTX54k3FhiUmvt7HWzGJZvF+syUAAxP/stwppS8JE84YHqFgRMv6fCy31202CMFxQ==}
+
   '@types/react-addons-update@0.14.21':
     resolution: {integrity: sha512-HOxr0Hd8C1L4uw8DHyv2etqMVIj78oLEpe567/HgjoE+1Lc+PUsTGXTrkr1BDvFqsu5r49mSlgI5evwrk9eutA==}
 
@@ -4178,6 +4208,12 @@ packages:
   '@types/testing-library__jest-dom@5.14.5':
     resolution: {integrity: sha512-SBwbxYoyPIvxHbeHxTZX2Pe/74F/tX2/D3mMvzabdeJ25bBojfW0TyB8BHrbq/9zaaKICJZjLP+8r6AeZMFCuQ==}
 
+  '@types/topojson-client@3.1.5':
+    resolution: {integrity: sha512-C79rySTyPxnQNNguTZNI1Ct4D7IXgvyAs3p9HPecnl6mNrJ5+UhvGNYcZfpROYV2lMHI48kJPxwR+F9C6c7nmw==}
+
+  '@types/topojson-specification@1.0.5':
+    resolution: {integrity: sha512-C7KvcQh+C2nr6Y2Ub4YfgvWvWCgP2nOQMtfhlnwsRL4pYmmwzBS7HclGiS87eQfDOU/DLQpX6GEscviaz4yLIQ==}
+
   '@types/tough-cookie@4.0.5':
     resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
 
@@ -4466,6 +4502,9 @@ packages:
   '@xobotyi/scrollbar-width@1.9.5':
     resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==}
 
+  '@zarrita/storage@0.2.0':
+    resolution: {integrity: sha512-855ZXqtnds7spnT8vNvD+MXa3QExP1m2GqShe8yt7uZXHnQLgJHgkpVwFjE1B0KDDRO0ki09hmk6OboTaIfPsQ==}
+
   '@zxing/text-encoding@0.9.0':
     resolution: {integrity: sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==}
 
@@ -5299,6 +5338,10 @@ packages:
     resolution: {integrity: sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==}
     engines: {node: '>=12'}
 
+  d3-geo@3.1.1:
+    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
+    engines: {node: '>=12'}
+
   d3-hierarchy@1.1.9:
     resolution: {integrity: sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==}
 
@@ -5591,6 +5634,9 @@ packages:
   earcut@2.2.4:
     resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==}
 
+  earcut@3.2.4:
+    resolution: {integrity: sha512-FHc6yNpnTORB0tM5kmZ03iD2mDuNakDE2lvf4Hw1XkfxtEHIGVi01B/GqUSwx+NcC1WGjidAfpTXzeALtPtfpg==}
+
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -5863,6 +5909,9 @@ packages:
   fflate@0.4.9:
     resolution: {integrity: sha512-zdxgIEddhfsyCaWpJ2SdXEP8ZMrKJ6+5jl4OupODcywU0IhRk6gdXuVGcPICyfx2H97hVK7xmJtRLPjkxAX8Vw==}
 
+  fflate@0.8.3:
+    resolution: {integrity: sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==}
+
   figures@3.2.0:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
@@ -6043,6 +6092,10 @@ packages:
     resolution: {integrity: sha512-PT6uoF5a1+kbC3tHmZSUsLHBp2QJlHasxxxxPW47QIY1VBKpFB+FcDvX+MxER6UzgLQZ0xDzJ9s48B9JbOCTqA==}
     engines: {node: '>=10.19'}
 
+  geotiff@3.1.0-beta.0:
+    resolution: {integrity: sha512-wbVwOaQYuN+ywly5NoMXn37nHslwkQg5EFHqMeUTtjDACrSag0EEVlFsc+2DK3Pzmmp6XzJW2RTZOamPsBM6ng==}
+    engines: {node: '>=10.19'}
+
   get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -7646,6 +7699,9 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
+  numcodecs@0.3.2:
+    resolution: {integrity: sha512-6YSPnmZgg0P87jnNhi3s+FVLOcIn3y+1CTIgUulA3IdASzK9fJM87sUFkpyA+be9GibGRaST2wCgkD+6U+fWKw==}
+
   nuqs@2.8.8:
     resolution: {integrity: sha512-LF5sw9nWpHyPWzMMu9oho3r9C5DvkpmBIg4LQN78sexIzGaeRx8DWr0uy3YiFx5i2QGZN1Qqcb+OAtEVRa2bnA==}
     peerDependencies:
@@ -7722,6 +7778,9 @@ packages:
   ol-mapbox-style@10.7.0:
     resolution: {integrity: sha512-S/UdYBuOjrotcR95Iq9AejGYbifKeZE85D9VtH11ryJLQPTZXZSW1J5bIXcr4AlAH6tyjPPHTK34AdkwB32Myw==}
 
+  ol@10.11.0:
+    resolution: {integrity: sha512-OJ+lrx7kx/1O7Xx18Ff9QkVnwZIEL0OuhJQSy2sYgzzDvyZ2qHvuZEGAajbSstUyBwaS1OtQ4RWnY84tRMDdqg==}
+
   ol@7.4.0:
     resolution: {integrity: sha512-bgBbiah694HhC0jt8ptEFNRXwgO8d6xWH3G97PCg4bmn9Li5nLLbi59oSrvqUI6VPVwonPQF1YcqJymxxyMC6A==}
 
@@ -7952,6 +8011,10 @@ packages:
     resolution: {integrity: sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==}
     hasBin: true
 
+  pbf@5.1.2:
+    resolution: {integrity: sha512-mnvGdvOrIvJOBGUEdGkrVXjN8E/VkIJCkf2eS1DH2yv82ORUlLttmDt0rWY38yYZmVwciZwBUvHM20qxBZf40w==}
+    hasBin: true
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -8157,12 +8220,18 @@ packages:
   quickselect@2.0.0:
     resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
 
+  quickselect@3.0.0:
+    resolution: {integrity: sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==}
+
   raf-schd@4.0.3:
     resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==}
 
   rbush@3.0.1:
     resolution: {integrity: sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==}
 
+  rbush@4.0.1:
+    resolution: {integrity: sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==}
+
   rc-cascader@3.20.0:
     resolution: {integrity: sha512-lkT9EEwOcYdjZ/jvhLoXGzprK1sijT3/Tp4BLxQQcHDZkkOzzwYQC9HgmKoJz0K7CukMfgvO9KqHeBdgE+pELw==}
     peerDependencies:
@@ -8730,6 +8799,9 @@ packages:
     resolution: {integrity: sha512-J8rn6v4DBb2nnFqkqwy6/NnTYMcgLA+sLr0iIO41qpv0n+ngb7ksag2tMRl0inb1bbO/esUwzW1vbJi7K0sI0g==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
+  reference-spec-reader@0.2.0:
+    resolution: {integrity: sha512-q0mfCi5yZSSHXpCyxjgQeaORq3tvDsxDyzaadA/5+AbAUwRyRuuTh0aRQuE/vAOt/qzzxidJ5iDeu1cLHaNBlQ==}
+
   refractor@3.6.0:
     resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==}
 
@@ -9425,6 +9497,18 @@ packages:
   toggle-selection@1.0.6:
     resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
 
+  topojson-client@3.1.0:
+    resolution: {integrity: sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==}
+    hasBin: true
+
+  topojson-server@3.0.1:
+    resolution: {integrity: sha512-/VS9j/ffKr2XAOjlZ9CgyyeLmgJ9dMwq6Y0YEON8O7p/tGGk+dCWnrE03zEdu7i4L7YsFZLEPZPzCvcB7lEEXw==}
+    hasBin: true
+
+  topojson-simplify@3.0.3:
+    resolution: {integrity: sha512-V+pBjLVzSQ3+hSOxBiV01OVXgFiCmMO8ia3huxKEyIMTC1ApQHBcdXdOqcQ6U2JJJD31TZduwY6KyF15R8sUgg==}
+    hasBin: true
+
   tough-cookie@4.1.4:
     resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
     engines: {node: '>=6'}
@@ -9670,6 +9754,10 @@ packages:
   unrs-resolver@1.11.1:
     resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
 
+  unzipit@2.0.0:
+    resolution: {integrity: sha512-DVeVIWUZCAQPNzm5sB0hpsG1GygTTdBnzNtYYEpInkttx5evkyqRgZi6rTczoySqp8hO5jHVKzrH0f23X8FZLg==}
+    engines: {node: '>=18'}
+
   update-browserslist-db@1.3.3:
     resolution: {integrity: sha512-pJ2sYawQS0R/WI928Gj5GlPhTGzbMelq0+4INtSYNDV9ErKJcX6xjGWkoG/VnB3dpUm00zALaqkrUD77pO5TDQ==}
     hasBin: true
@@ -9998,6 +10086,9 @@ packages:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
 
+  xml-utils@1.10.2:
+    resolution: {integrity: sha512-RqM+2o1RYs6T8+3DzDSoTRAUfrvaejbVHcp3+thnAtDKo8LskR+HomLajEy5UjTz24rpka7AxVBRR3g2wTUkJA==}
+
   xml-utils@1.7.0:
     resolution: {integrity: sha512-bWB489+RQQclC7A9OW8e5BzbT8Tu//jtAOvkYwewFr+Q9T9KDGvfzC1lp0pYPEQPEoPQLDkmxkepSC/2gIAZGw==}
 
@@ -10080,12 +10171,18 @@ packages:
     resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
     engines: {node: '>=18'}
 
+  zarrita@0.7.5:
+    resolution: {integrity: sha512-ZriOSEne+Wf2iuM0yjDZvUKpHNlug3dO7qJ6mAxXoOgsYV18DPOkAkwB9e0rf21bHcKcOffFuwoZwn5g6pvUeA==}
+
   zod@4.3.6:
     resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
 
   zstddec@0.1.0:
     resolution: {integrity: sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg==}
 
+  zstddec@0.2.0:
+    resolution: {integrity: sha512-oyPnDa1X5c13+Y7mA/FDMNJrn4S8UNBe0KCqtDmor40Re7ALrPN6npFwyYVRRh+PqozZQdeg23QtbcamZnG5rA==}
+
   zustand@5.0.11:
     resolution: {integrity: sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg==}
     engines: {node: '>=12.20.0'}
@@ -12664,6 +12761,8 @@ snapshots:
 
   '@petamoriken/float16@3.8.0': {}
 
+  '@petamoriken/float16@3.9.3': {}
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -13775,7 +13874,7 @@ snapshots:
 
   '@types/d3-geo@3.1.0':
     dependencies:
-      '@types/geojson': 7946.0.14
+      '@types/geojson': 7946.0.16
 
   '@types/d3-hierarchy@1.1.11': {}
 
@@ -13815,7 +13914,7 @@ snapshots:
 
   '@types/file-saver@2.0.5': {}
 
-  '@types/geojson@7946.0.14': {}
+  '@types/geojson@7946.0.16': {}
 
   '@types/graceful-fs@4.1.6':
     dependencies:
@@ -13904,6 +14003,8 @@ snapshots:
 
   '@types/prop-types@15.7.5': {}
 
+  '@types/rbush@4.0.0': {}
+
   '@types/react-addons-update@0.14.21':
     dependencies:
       '@types/react': 18.0.26
@@ -13978,6 +14079,15 @@ snapshots:
     dependencies:
       '@types/jest': 30.0.0
 
+  '@types/topojson-client@3.1.5':
+    dependencies:
+      '@types/geojson': 7946.0.16
+      '@types/topojson-specification': 1.0.5
+
+  '@types/topojson-specification@1.0.5':
+    dependencies:
+      '@types/geojson': 7946.0.16
+
   '@types/tough-cookie@4.0.5': {}
 
   '@types/trusted-types@2.0.7':
@@ -14275,6 +14385,11 @@ snapshots:
 
   '@xobotyi/scrollbar-width@1.9.5': {}
 
+  '@zarrita/storage@0.2.0':
+    dependencies:
+      reference-spec-reader: 0.2.0
+      unzipit: 2.0.0
+
   '@zxing/text-encoding@0.9.0':
     optional: true
 
@@ -15196,6 +15311,10 @@ snapshots:
     dependencies:
       d3-array: 3.2.4
 
+  d3-geo@3.1.1:
+    dependencies:
+      d3-array: 3.2.4
+
   d3-hierarchy@1.1.9: {}
 
   d3-hierarchy@3.1.2: {}
@@ -15485,6 +15604,8 @@ snapshots:
 
   earcut@2.2.4: {}
 
+  earcut@3.2.4: {}
+
   eastasianwidth@0.2.0: {}
 
   ejs@3.1.10:
@@ -15805,6 +15926,8 @@ snapshots:
 
   fflate@0.4.9: {}
 
+  fflate@0.8.3: {}
+
   figures@3.2.0:
     dependencies:
       escape-string-regexp: 1.0.5
@@ -15997,6 +16120,17 @@ snapshots:
       xml-utils: 1.7.0
       zstddec: 0.1.0
 
+  geotiff@3.1.0-beta.0:
+    dependencies:
+      '@petamoriken/float16': 3.9.3
+      lerc: 3.0.0
+      pako: 2.1.0
+      parse-headers: 2.0.5
+      quick-lru: 6.1.1
+      web-worker: 1.5.0
+      xml-utils: 1.10.2
+      zstddec: 0.2.0
+
   get-caller-file@2.0.5: {}
 
   get-east-asian-width@1.5.0: {}
@@ -18092,6 +18226,10 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
+  numcodecs@0.3.2:
+    dependencies:
+      fflate: 0.8.3
+
   nuqs@2.8.8(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0):
     dependencies:
       '@standard-schema/spec': 1.0.0
@@ -18170,6 +18308,15 @@ snapshots:
       mapbox-to-css-font: 2.4.5
       ol: 7.4.0
 
+  ol@10.11.0:
+    dependencies:
+      '@types/rbush': 4.0.0
+      earcut: 3.2.4
+      geotiff: 3.1.0-beta.0
+      pbf: 5.1.2
+      rbush: 4.0.1
+      zarrita: 0.7.5
+
   ol@7.4.0:
     dependencies:
       earcut: 2.2.4
@@ -18508,6 +18655,10 @@ snapshots:
       ieee754: 1.2.1
       resolve-protobuf-schema: 2.1.0
 
+  pbf@5.1.2:
+    dependencies:
+      resolve-protobuf-schema: 2.1.0
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.2: {}
@@ -18691,12 +18842,18 @@ snapshots:
 
   quickselect@2.0.0: {}
 
+  quickselect@3.0.0: {}
+
   raf-schd@4.0.3: {}
 
   rbush@3.0.1:
     dependencies:
       quickselect: 2.0.0
 
+  rbush@4.0.1:
+    dependencies:
+      quickselect: 3.0.0
+
   rc-cascader@3.20.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@babel/runtime': 7.28.2
@@ -19444,6 +19601,8 @@ snapshots:
     dependencies:
       '@eslint-community/regexpp': 4.12.2
 
+  reference-spec-reader@0.2.0: {}
+
   refractor@3.6.0:
     dependencies:
       hastscript: 6.0.0
@@ -20222,6 +20381,19 @@ snapshots:
 
   toggle-selection@1.0.6: {}
 
+  topojson-client@3.1.0:
+    dependencies:
+      commander: 2.20.3
+
+  topojson-server@3.0.1:
+    dependencies:
+      commander: 2.20.3
+
+  topojson-simplify@3.0.3:
+    dependencies:
+      commander: 2.20.3
+      topojson-client: 3.1.0
+
   tough-cookie@4.1.4:
     dependencies:
       psl: 1.15.0
@@ -20488,6 +20660,8 @@ snapshots:
       '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
       '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
 
+  unzipit@2.0.0: {}
+
   update-browserslist-db@1.3.3(browserslist@4.28.9):
     dependencies:
       browserslist: 4.28.9
@@ -20829,6 +21003,8 @@ snapshots:
 
   xml-name-validator@4.0.0: {}
 
+  xml-utils@1.10.2: {}
+
   xml-utils@1.7.0: {}
 
   xml@1.0.1: {}
@@ -20905,10 +21081,17 @@ snapshots:
 
   yoctocolors@2.1.2: {}
 
+  zarrita@0.7.5:
+    dependencies:
+      '@zarrita/storage': 0.2.0
+      numcodecs: 0.3.2
+
   zod@4.3.6: {}
 
   zstddec@0.1.0: {}
 
+  zstddec@0.2.0: {}
+
   zustand@5.0.11(@types/react@18.0.26)(immer@11.1.3)(react@18.2.0)(use-sync-external-store@1.6.0(react@18.2.0)):
     optionalDependencies:
       '@types/react': 18.0.26

frontend/scripts/geo-outlines/build.mjs

@@ -0,0 +1,208 @@
+// Builds the Geo Map outlines assets: Natural Earth 50m admin-0 countries, and
+// 10m admin-1 states/provinces for every country with at least two of them.
+// Run by hand when bumping Natural Earth or editing regions/aliases; the output is committed.
+// Usage: pnpm build:geo-outlines
+//
+// Nothing is written until every invariant in validate.mjs holds. The assets
+// are built in a staging folder and swapped in whole, so a failed run leaves
+// the committed ones as they were.
+import {
+	existsSync,
+	mkdirSync,
+	readdirSync,
+	renameSync,
+	rmSync,
+	writeFileSync,
+} from 'node:fs';
+import { join } from 'node:path';
+import { setTimeout as sleep } from 'node:timers/promises';
+import { gzipSync } from 'node:zlib';
+
+import {
+	ASSETS_DIR,
+	COUNTRIES_URL,
+	SUBDIVISION_LIST_FILE,
+	SUBDIVISIONS_URL,
+} from './config.mjs';
+import { buildCountries } from './countries.mjs';
+import { buildSubdivisions } from './subdivisions.mjs';
+import { validate } from './validate.mjs';
+
+const DOWNLOAD_TIMEOUT_MS = 120_000;
+const DOWNLOAD_ATTEMPTS = 3;
+
+const STAGING_DIR = `${ASSETS_DIR}.staging`;
+const PREVIOUS_DIR = `${ASSETS_DIR}.previous`;
+// Everything in the assets folder is generated; anything else would be lost
+// in the swap, so its presence stops the build.
+const GENERATED_ENTRIES = new Set([
+	'countries-50m.json',
+	'lookups.json',
+	'subdivisions',
+]);
+
+const kb = (bytes) => `${(bytes / 1024).toFixed(0)} KB`;
+const sizeOf = (json) =>
+	`${kb(Buffer.byteLength(json))} raw / ${kb(gzipSync(json).length)} gzip`;
+
+async function downloadFeatures(url) {
+	for (let attempt = 1; ; attempt += 1) {
+		try {
+			const response = await fetch(url, {
+				signal: AbortSignal.timeout(DOWNLOAD_TIMEOUT_MS),
+			});
+			if (!response.ok) {
+				throw new Error(`HTTP ${response.status}`);
+			}
+			const body = await response.json();
+			if (
+				body?.type !== 'FeatureCollection' ||
+				!Array.isArray(body.features) ||
+				body.features.length === 0
+			) {
+				throw new Error('response is not a non-empty GeoJSON FeatureCollection');
+			}
+			return body;
+		} catch (error) {
+			if (attempt === DOWNLOAD_ATTEMPTS) {
+				throw new Error(
+					`download failed after ${attempt} attempts: ${url}\n  ${error.message}`,
+				);
+			}
+			await sleep(attempt * 2_000);
+		}
+	}
+}
+
+function subdivisionListSource(countries) {
+	return `// Generated by scripts/geo-outlines/build.mjs; do not edit.
+export const SUBDIVISION_COUNTRY_CODES = [
+${countries.map((country) => `\t'${country}',`).join('\n')}
+] as const;
+`;
+}
+
+// A run that died mid-swap leaves the assets in the previous folder.
+function recoverInterruptedSwap() {
+	if (!existsSync(ASSETS_DIR) && existsSync(PREVIOUS_DIR)) {
+		renameSync(PREVIOUS_DIR, ASSETS_DIR);
+	}
+	rmSync(STAGING_DIR, { recursive: true, force: true });
+	rmSync(PREVIOUS_DIR, { recursive: true, force: true });
+}
+
+function assertOnlyGeneratedEntries() {
+	if (!existsSync(ASSETS_DIR)) {
+		return;
+	}
+	const foreign = readdirSync(ASSETS_DIR).filter(
+		(entry) => !GENERATED_ENTRIES.has(entry),
+	);
+	if (foreign.length > 0) {
+		throw new Error(
+			`${ASSETS_DIR} holds files this build doesn't generate: ${foreign.join(', ')}`,
+		);
+	}
+}
+
+/** Writes every output under the staging folder; returns the sizes report. */
+function stage(outputs) {
+	const subdivisionDir = join(STAGING_DIR, 'subdivisions');
+	mkdirSync(subdivisionDir, { recursive: true });
+	writeFileSync(join(STAGING_DIR, 'countries-50m.json'), outputs.countriesJson);
+	writeFileSync(join(STAGING_DIR, 'lookups.json'), outputs.lookupsJson);
+	const sizes = [];
+	for (const [country, file] of outputs.subdivisionFiles) {
+		const json = JSON.stringify(file);
+		writeFileSync(join(subdivisionDir, `${country}.json`), json);
+		sizes.push({
+			country,
+			shapes: file.objects.subdivisions.geometries.length,
+			gzip: gzipSync(json).length,
+		});
+	}
+	writeFileSync(`${SUBDIVISION_LIST_FILE}.staging`, outputs.subdivisionList);
+	return sizes;
+}
+
+/** Swaps the staged assets in; puts the previous ones back if that fails. */
+function commitStaged() {
+	const hadAssets = existsSync(ASSETS_DIR);
+	if (hadAssets) {
+		renameSync(ASSETS_DIR, PREVIOUS_DIR);
+	}
+	try {
+		renameSync(STAGING_DIR, ASSETS_DIR);
+	} catch (error) {
+		if (hadAssets) {
+			renameSync(PREVIOUS_DIR, ASSETS_DIR);
+		}
+		throw error;
+	}
+	renameSync(`${SUBDIVISION_LIST_FILE}.staging`, SUBDIVISION_LIST_FILE);
+	rmSync(PREVIOUS_DIR, { recursive: true, force: true });
+}
+
+function cleanUpStaging() {
+	rmSync(STAGING_DIR, { recursive: true, force: true });
+	rmSync(`${SUBDIVISION_LIST_FILE}.staging`, { force: true });
+}
+
+function report(countries, subdivisions, outputs, sizes) {
+	const totalGzip = sizes.reduce((sum, { gzip }) => sum + gzip, 0);
+	return {
+		countries: {
+			...countries.report,
+			sizes: {
+				'countries-50m.json': sizeOf(outputs.countriesJson),
+				'lookups.json': sizeOf(outputs.lookupsJson),
+			},
+		},
+		subdivisions: {
+			...subdivisions.report,
+			countries: sizes.length,
+			totalGzip: kb(totalGzip),
+			largest: [...sizes]
+				.sort((a, b) => b.gzip - a.gzip)
+				.slice(0, 10)
+				.map(
+					({ country, shapes, gzip }) =>
+						`${country}: ${shapes} shapes, ${kb(gzip)} gzip`,
+				),
+		},
+	};
+}
+
+async function main() {
+	recoverInterruptedSwap();
+	assertOnlyGeneratedEntries();
+
+	const [countrySource, subdivisionSource] = await Promise.all([
+		downloadFeatures(COUNTRIES_URL),
+		downloadFeatures(SUBDIVISIONS_URL),
+	]);
+	const countries = buildCountries(countrySource);
+	const subdivisions = buildSubdivisions(subdivisionSource);
+	validate(countries, subdivisions);
+
+	const outputs = {
+		countriesJson: JSON.stringify(countries.topology),
+		lookupsJson: JSON.stringify(countries.lookups),
+		subdivisionFiles: subdivisions.files,
+		subdivisionList: subdivisionListSource([...subdivisions.files.keys()]),
+	};
+	try {
+		const sizes = stage(outputs);
+		commitStaged();
+		process.stdout.write(
+			`${JSON.stringify(report(countries, subdivisions, outputs, sizes), null, 2)}\n`,
+		);
+	} finally {
+		cleanUpStaging();
+	}
+}
+
+main().catch((error) => {
+	process.stderr.write(`Geo outlines build failed: ${error.message}\n`);
+	process.exitCode = 1;
+});

frontend/scripts/geo-outlines/config.mjs

@@ -0,0 +1,176 @@
+// Inputs and tuning for the Geo Map outlines build. Tables only; no logic.
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const NATURAL_EARTH_BASE =
+	'https://raw.githubusercontent.com/nvkelso/natural-earth-vector/v5.1.2/geojson';
+export const COUNTRIES_URL = `${NATURAL_EARTH_BASE}/ne_50m_admin_0_countries.geojson`;
+export const SUBDIVISIONS_URL = `${NATURAL_EARTH_BASE}/ne_10m_admin_1_states_provinces.geojson`;
+
+const GEO_MAP_DIR = join(
+	dirname(fileURLToPath(import.meta.url)),
+	'../../src/lib/visualization/charts/GeoMap',
+);
+export const ASSETS_DIR = join(GEO_MAP_DIR, 'assets');
+export const SUBDIVISION_LIST_FILE = join(
+	GEO_MAP_DIR,
+	'geo/subdivisionCountries.ts',
+);
+
+export const COUNTRY_QUANTIZATION = 1e5;
+// Simplification drops every point whose triangle with its neighbours is
+// smaller than this, in square degrees. A fixed size, unlike a share of all
+// points, still leaves a small island a few points of its own.
+export const COUNTRY_MIN_WEIGHT = 3e-3;
+// 10m is street-level detail; a country view needs far less.
+export const SUBDIVISION_QUANTIZATION = 1e4;
+export const SUBDIVISION_MIN_WEIGHT = 1e-3;
+// A shape this many times the minimum weight or smaller could lose every polygon.
+export const PROTECTED_SHAPE_FACTOR = 10;
+
+// A country view needs at least this many coded states to be worth drawing.
+export const MIN_SUBDIVISIONS = 2;
+
+// ISO 3166-2 codes that changed after Natural Earth v5.1.2, or older spellings
+// still in GeoIP data, mapped to the code the shape carries.
+export const SUBDIVISION_ALIASES = {
+	IN: {
+		'IN-CG': 'IN-CT',
+		'IN-UK': 'IN-UT',
+		'IN-TS': 'IN-TG',
+		'IN-OD': 'IN-OR',
+		'IN-DD': 'IN-DH',
+		'IN-DN': 'IN-DH',
+	},
+	// Natural Earth carries Metro Manila under its retired code.
+	PH: { 'PH-00': 'PH-MNL' },
+};
+
+// Shapes Natural Earth still splits along retired lines, merged into the codes
+// GeoIP reports now; the retired codes become aliases. Northern Ireland's 26
+// districts became 11 councils in 2015, each a union of old districts.
+// Current code → [current name, retired codes].
+export const SUBDIVISION_MERGES = {
+	GB: {
+		'GB-ANN': ['Antrim and Newtownabbey', ['GB-ANT', 'GB-NTA']],
+		'GB-AND': ['Ards and North Down', ['GB-ARD', 'GB-NDN']],
+		'GB-ABC': [
+			'Armagh City, Banbridge and Craigavon',
+			['GB-ARM', 'GB-BNB', 'GB-CGV'],
+		],
+		'GB-BFS': ['Belfast', ['GB-BFS']],
+		'GB-CCG': [
+			'Causeway Coast and Glens',
+			['GB-BLY', 'GB-CLR', 'GB-LMV', 'GB-MYL'],
+		],
+		'GB-DRS': ['Derry City and Strabane', ['GB-DRY', 'GB-STB']],
+		'GB-FMO': ['Fermanagh and Omagh', ['GB-FER', 'GB-OMH']],
+		'GB-LBC': ['Lisburn and Castlereagh', ['GB-LSB', 'GB-CSR']],
+		'GB-MEA': ['Mid and East Antrim', ['GB-BLA', 'GB-CKF', 'GB-LRN']],
+		'GB-MUL': ['Mid Ulster', ['GB-CKT', 'GB-DGN', 'GB-MFT']],
+		'GB-NMD': ['Newry, Mourne and Down', ['GB-NYM', 'GB-DOW']],
+	},
+};
+
+// Natural Earth puts these islands in "Seven seas (open ocean)".
+export const OPEN_OCEAN_REGION = {
+	Africa: 'africa',
+	Asia: 'asia',
+	Americas: 'south_america',
+};
+export const CONTINENT_REGION = {
+	Africa: 'africa',
+	Asia: 'asia',
+	Europe: 'europe',
+	'North America': 'north_america',
+	'South America': 'south_america',
+	Oceania: 'oceania',
+};
+// Transcontinental countries belong to every region they span.
+export const EXTRA_REGIONS = {
+	RU: ['asia'],
+	TR: ['europe'],
+	KZ: ['europe'],
+	GE: ['europe'],
+	AM: ['europe'],
+	AZ: ['europe'],
+	CY: ['europe'],
+	EG: ['asia'],
+};
+
+// ISO codes GeoIP emits for places Natural Earth draws inside another country.
+export const COUNTRY_ALIASES = {
+	GF: 'FR',
+	GP: 'FR',
+	MQ: 'FR',
+	RE: 'FR',
+	YT: 'FR',
+	BQ: 'NL',
+	SJ: 'NO',
+	BV: 'NO',
+	CX: 'AU',
+	CC: 'AU',
+	HM: 'AU',
+	UM: 'US',
+	TK: 'NZ',
+	AC: 'SH',
+	TA: 'SH',
+	DG: 'IO',
+	CP: 'FR',
+	FX: 'FR',
+	EA: 'ES',
+	IC: 'ES',
+	CQ: 'GB',
+	GI: 'GB',
+	// Retired or reserved codes still seen in older data.
+	UK: 'GB',
+	SU: 'RU',
+	YU: 'RS',
+	CS: 'RS',
+	TP: 'TL',
+	BU: 'MM',
+	ZR: 'CD',
+	DD: 'DE',
+	VD: 'VN',
+	YD: 'YE',
+	RH: 'ZW',
+	NH: 'VU',
+	HV: 'BF',
+	DY: 'BJ',
+	AN: 'CW',
+};
+export const COUNTRY_NAME_ALIASES = {
+	usa: 'US',
+	'united states of america': 'US',
+	america: 'US',
+	uk: 'GB',
+	'great britain': 'GB',
+	britain: 'GB',
+	england: 'GB',
+	russia: 'RU',
+	'south korea': 'KR',
+	'north korea': 'KP',
+	czechia: 'CZ',
+	'czech republic': 'CZ',
+	'ivory coast': 'CI',
+	turkiye: 'TR',
+	türkiye: 'TR',
+	burma: 'MM',
+	'cape verde': 'CV',
+	swaziland: 'SZ',
+	macedonia: 'MK',
+	'east timor': 'TL',
+	vatican: 'VA',
+};
+
+// Alpha-2 codes Intl names that aren't countries, so none needs a shape.
+export const NON_COUNTRY_CODES = new Set([
+	'EU',
+	'EZ',
+	'UN',
+	'ZZ',
+	'QO',
+	'XA',
+	'XB',
+	'AQ',
+]);

frontend/scripts/geo-outlines/countries.mjs

@@ -0,0 +1,185 @@
+// Natural Earth admin-0 → the countries topology and the lookup tables.
+import { geoArea, geoBounds } from 'd3-geo';
+import { feature } from 'topojson-client';
+
+import {
+	CONTINENT_REGION,
+	COUNTRY_ALIASES,
+	COUNTRY_MIN_WEIGHT,
+	COUNTRY_NAME_ALIASES,
+	COUNTRY_QUANTIZATION,
+	EXTRA_REGIONS,
+	NON_COUNTRY_CODES,
+	OPEN_OCEAN_REGION,
+} from './config.mjs';
+import {
+	polygonsOf,
+	round,
+	roundBounds,
+	simplifyAndQuantize,
+} from './geometry.mjs';
+
+export const isCountryCode = (value) => /^[A-Z]{2}$/.test(value ?? '');
+
+function regionsOf(props, iso2) {
+	const base = props.CONTINENT.startsWith('Seven seas')
+		? OPEN_OCEAN_REGION[props.REGION_UN]
+		: CONTINENT_REGION[props.CONTINENT];
+	return [...new Set([base, ...(EXTRA_REGIONS[iso2] ?? [])].filter(Boolean))];
+}
+
+// Group features by code so a country's overseas parts (Australia's Indian
+// Ocean territories) become one shape that one data row colours.
+function groupByCode(sourceFeatures, report) {
+	const groups = new Map();
+	for (const f of sourceFeatures) {
+		const p = f.properties;
+		if (p.CONTINENT === 'Antarctica') {
+			report.dropped.push(p.NAME);
+			continue;
+		}
+		const iso2 = isCountryCode(p.ISO_A2_EH) ? p.ISO_A2_EH : null;
+		const key = iso2 ?? `uncoded:${p.NAME}`;
+		if (!iso2) {
+			report.uncoded.push(p.NAME);
+		}
+		if (!groups.has(key)) {
+			groups.set(key, []);
+		}
+		groups.get(key).push(f);
+	}
+	return groups;
+}
+
+function toCountryFeature(key, members, report) {
+	// The sovereign part carries the name, label point and region.
+	const primary =
+		members.find((f) => f.properties.ISO_A2 === f.properties.ISO_A2_EH) ??
+		members.reduce((a, b) => (geoArea(a) >= geoArea(b) ? a : b));
+	const p = primary.properties;
+	const iso2 = key.startsWith('uncoded:') ? null : key;
+	if (members.length > 1) {
+		report.merged.push(
+			`${iso2}: ${members.map((f) => f.properties.NAME).join(' + ')}`,
+		);
+	}
+
+	const polygons = members.flatMap((f) => polygonsOf(f.geometry));
+	const geometry = { type: 'MultiPolygon', coordinates: polygons };
+	const mainland = polygons
+		.map((coordinates) => ({ type: 'Polygon', coordinates }))
+		.reduce((a, b) => (geoArea(a) >= geoArea(b) ? a : b));
+
+	return {
+		type: 'Feature',
+		id: iso2 ?? p.NAME,
+		properties: {
+			code: iso2,
+			iso3: /^[A-Z]{3}$/.test(p.ISO_A3_EH) ? p.ISO_A3_EH : null,
+			name: p.NAME,
+			label: [round(p.LABEL_X), round(p.LABEL_Y)],
+			mainland: roundBounds(geoBounds(mainland)),
+			bounds: roundBounds(geoBounds(geometry)),
+			regions: regionsOf(p, iso2 ?? ''),
+		},
+		geometry,
+	};
+}
+
+/** Alpha-3 codes and English names → alpha-2, for normalising data. */
+function buildLookups(sourceFeatures) {
+	const alpha3 = {};
+	const names = { ...COUNTRY_NAME_ALIASES };
+	for (const { properties: p } of sourceFeatures) {
+		if (!isCountryCode(p.ISO_A2_EH) || p.CONTINENT === 'Antarctica') {
+			continue;
+		}
+		if (/^[A-Z]{3}$/.test(p.ISO_A3_EH)) {
+			alpha3[p.ISO_A3_EH] = p.ISO_A2_EH;
+		}
+		for (const name of [
+			p.NAME,
+			p.NAME_LONG,
+			p.ADMIN,
+			p.NAME_EN,
+			p.BRK_NAME,
+			p.NAME_SORT,
+			p.NAME_CIAWF,
+		]) {
+			if (name) {
+				names[name.toLowerCase()] ??= p.ISO_A2_EH;
+			}
+		}
+	}
+	return { alpha3, names, aliases: COUNTRY_ALIASES };
+}
+
+/** ISO alpha-2 codes Intl knows that neither a shape nor an alias covers. */
+function findUncoveredCodes(drawn) {
+	const display = new Intl.DisplayNames(['en'], {
+		type: 'region',
+		fallback: 'none',
+	});
+	const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+	const uncovered = [];
+	for (const a of letters) {
+		for (const b of letters) {
+			const code = a + b;
+			const name = display.of(code);
+			if (
+				name &&
+				!NON_COUNTRY_CODES.has(code) &&
+				!drawn.has(code) &&
+				!COUNTRY_ALIASES[code]
+			) {
+				uncovered.push(`${code} ${name}`);
+			}
+		}
+	}
+	return uncovered;
+}
+
+/** Natural Earth admin-0 GeoJSON → `{ topology, lookups, report }`. */
+export function buildCountries(source) {
+	const report = { dropped: [], uncoded: [], merged: [] };
+	const features = [...groupByCode(source.features, report)]
+		.map(([key, members]) => toCountryFeature(key, members, report))
+		.sort((a, b) => String(a.id).localeCompare(String(b.id)));
+
+	const { topo, flipped, collapsed, emptied } = simplifyAndQuantize(
+		'countries',
+		features,
+		COUNTRY_MIN_WEIGHT,
+		COUNTRY_QUANTIZATION,
+	);
+	const drawn = new Set(features.map((f) => f.properties.code).filter(Boolean));
+	// Lets data be checked against the drawn codes without decoding the outlines.
+	const lookups = { codes: [...drawn].sort(), ...buildLookups(source.features) };
+
+	const regionCounts = {};
+	for (const f of features) {
+		for (const region of f.properties.regions) {
+			regionCounts[region] = (regionCounts[region] ?? 0) + 1;
+		}
+	}
+
+	return {
+		topology: topo,
+		lookups,
+		report: {
+			features: features.length,
+			decodedFeatures: feature(topo, topo.objects.countries).features.length,
+			droppedFlippedIslands: flipped,
+			droppedCollapsedPolygons: collapsed,
+			emptied: emptied.join(' '),
+			regionCounts,
+			...report,
+			lookupCounts: {
+				alpha3: Object.keys(lookups.alpha3).length,
+				names: Object.keys(lookups.names).length,
+				aliases: Object.keys(lookups.aliases).length,
+			},
+			uncoveredIsoCodes: findUncoveredCodes(drawn),
+		},
+	};
+}

frontend/scripts/geo-outlines/geometry.mjs

@@ -0,0 +1,114 @@
+// Geometry helpers and the simplification shared by countries and states.
+import { geoArea } from 'd3-geo';
+import { topology } from 'topojson-server';
+import { presimplify, simplify } from 'topojson-simplify';
+import { feature, quantize } from 'topojson-client';
+
+import { PROTECTED_SHAPE_FACTOR } from './config.mjs';
+
+export const round = (n) => Math.round(n * 1e3) / 1e3;
+export const roundBounds = (bounds) =>
+	bounds.map(([x, y]) => [round(x), round(y)]);
+
+export function polygonsOf(geometry) {
+	if (geometry.type === 'Polygon') {
+		return [geometry.coordinates];
+	}
+	if (geometry.type === 'MultiPolygon') {
+		return geometry.coordinates;
+	}
+	return [];
+}
+
+/** Area of a lon/lat ring in square degrees, the unit of the simplify weights. */
+function planarRingArea(ring) {
+	let twice = 0;
+	ring.forEach(([x, y], i) => {
+		const [nx, ny] = ring[(i + 1) % ring.length];
+		twice += x * ny - nx * y;
+	});
+	return Math.abs(twice) / 2;
+}
+
+// Weights every point of a small shape's largest outline as Infinity, which
+// simplify never removes, so a city-state or city-sized province (Monaco, a
+// London borough) still has an outline to colour. Neighbours share those arcs,
+// so their common border stays in step.
+function protectSmallShapes(topo, objectName, features, minWeight) {
+	topo.objects[objectName].geometries.forEach((geometry, i) => {
+		const polygons = polygonsOf(features[i].geometry);
+		const areas = polygons.map(([outer]) => planarRingArea(outer));
+		const total = areas.reduce((sum, area) => sum + area, 0);
+		if (polygons.length === 0 || total > minWeight * PROTECTED_SHAPE_FACTOR) {
+			return;
+		}
+		const largest = areas.indexOf(Math.max(...areas));
+		const rings =
+			geometry.type === 'Polygon' ? geometry.arcs : geometry.arcs[largest];
+		rings[0].forEach((index) => {
+			topo.arcs[index < 0 ? ~index : index].forEach((point) => {
+				point[2] = Infinity;
+			});
+		});
+	});
+}
+
+const isCollapsed = ([outer]) =>
+	new Set(outer.map((point) => point.join())).size < 3;
+
+// Simplifying can collapse a tiny island until its ring runs the other way; d3
+// then reads it as "the whole globe except this island" and floods the map.
+const isInverted = (coordinates) =>
+	geoArea({ type: 'Polygon', coordinates }) > 2 * Math.PI;
+
+/**
+ * One feature collection to a simplified, quantized topology under
+ * `objectName`. Polygons that collapse to a sliver or flip inside out are
+ * dropped and the topology rebuilt without them.
+ */
+export function simplifyAndQuantize(
+	objectName,
+	features,
+	minWeight,
+	quantization,
+) {
+	let topo = presimplify(
+		topology({ [objectName]: { type: 'FeatureCollection', features } }),
+	);
+	protectSmallShapes(topo, objectName, features, minWeight);
+	topo = simplify(topo, minWeight);
+	// presimplify stores each point's weight as a third coordinate and simplify
+	// keeps it, so it is dropped before quantizing (which would carry it through).
+	topo = { ...topo, arcs: topo.arcs.map((arc) => arc.map(([x, y]) => [x, y])) };
+	topo = quantize(topo, quantization);
+
+	let flipped = 0;
+	let collapsed = 0;
+	const cleaned = feature(topo, topo.objects[objectName]).features.map((f) => {
+		const kept = polygonsOf(f.geometry).filter((coordinates) => {
+			if (isCollapsed(coordinates)) {
+				collapsed += 1;
+				return false;
+			}
+			if (isInverted(coordinates)) {
+				flipped += 1;
+				return false;
+			}
+			return true;
+		});
+		return { ...f, geometry: { type: 'MultiPolygon', coordinates: kept } };
+	});
+	const emptied = cleaned
+		.filter((f) => f.geometry.coordinates.length === 0)
+		.map((f) => f.properties.code ?? f.properties.name);
+
+	if (flipped > 0 || collapsed > 0) {
+		topo = quantize(
+			topology({
+				[objectName]: { type: 'FeatureCollection', features: cleaned },
+			}),
+			quantization,
+		);
+	}
+	return { topo, flipped, collapsed, emptied };
+}

frontend/scripts/geo-outlines/subdivisions.mjs

@@ -0,0 +1,188 @@
+// Natural Earth admin-1 → one states/provinces topology per country.
+import { geoArea } from 'd3-geo';
+import { topology } from 'topojson-server';
+import { merge } from 'topojson-client';
+
+import {
+	MIN_SUBDIVISIONS,
+	SUBDIVISION_ALIASES,
+	SUBDIVISION_MERGES,
+	SUBDIVISION_MIN_WEIGHT,
+	SUBDIVISION_QUANTIZATION,
+} from './config.mjs';
+import { isCountryCode } from './countries.mjs';
+import { round, simplifyAndQuantize } from './geometry.mjs';
+
+const SUBDIVISION_CODE = /^[A-Z]{2}-[A-Z0-9]{1,3}$/;
+
+/** Retired code → `[current code, current name]`, from `SUBDIVISION_MERGES`. */
+const RECODES = new Map(
+	Object.values(SUBDIVISION_MERGES).flatMap((merges) =>
+		Object.entries(merges).flatMap(([code, [name, retired]]) =>
+			retired.map((old) => [old, [code, name]]),
+		),
+	),
+);
+
+/** A country's aliases: the hand-written ones, then each merge's retired codes. */
+function aliasesOf(country) {
+	const aliases = { ...SUBDIVISION_ALIASES[country] };
+	for (const [code, [, retired]] of Object.entries(
+		SUBDIVISION_MERGES[country] ?? {},
+	)) {
+		for (const old of retired) {
+			if (old !== code) {
+				aliases[old] = code;
+			}
+		}
+	}
+	return aliases;
+}
+
+// Shapes without an ISO 3166-2 code can't be matched to data, and a code under
+// another country's prefix (Puerto Rico's `US-PR`) belongs to that country's
+// file. Retired codes are rewritten to the current ones here, so the merge
+// below dissolves them.
+function groupByCountry(sourceFeatures) {
+	const byCountry = new Map();
+	const uncoded = {};
+	const recoded = new Set();
+	for (const f of sourceFeatures) {
+		const country = f.properties.iso_a2;
+		if (!isCountryCode(country)) {
+			continue;
+		}
+		const code = f.properties.iso_3166_2;
+		if (!SUBDIVISION_CODE.test(code ?? '') || !code.startsWith(`${country}-`)) {
+			uncoded[country] = (uncoded[country] ?? 0) + 1;
+			continue;
+		}
+		if (!byCountry.has(country)) {
+			byCountry.set(country, []);
+		}
+		const recode = RECODES.get(code);
+		if (recode) {
+			recoded.add(code);
+		}
+		byCountry.get(country).push(
+			recode
+				? {
+						...f,
+						properties: {
+							...f.properties,
+							iso_3166_2: recode[0],
+							name: recode[1],
+						},
+					}
+				: f,
+		);
+	}
+	return { byCountry, uncoded, recoded };
+}
+
+// Natural Earth splits some codes across shapes (Dublin's four councils are all
+// `IE-D`). Merging them through a topology drops the borders between the parts,
+// so one code is one shape with one outline.
+function mergeByCode(features) {
+	const byCode = new Map();
+	for (const f of features) {
+		const code = f.properties.iso_3166_2;
+		if (!byCode.has(code)) {
+			byCode.set(code, []);
+		}
+		byCode.get(code).push(f);
+	}
+	const topo = topology({ parts: { type: 'FeatureCollection', features } });
+	const { geometries } = topo.objects.parts;
+	let merged = 0;
+	const shapes = [...byCode].map(([code, members]) => {
+		// The largest part carries the name and label point.
+		const primary = members.reduce((a, b) => (geoArea(a) >= geoArea(b) ? a : b));
+		let geometry = primary.geometry;
+		if (members.length > 1) {
+			merged += members.length - 1;
+			geometry = merge(
+				topo,
+				geometries.filter((_, i) => features[i].properties.iso_3166_2 === code),
+			);
+		}
+		return {
+			type: 'Feature',
+			id: code,
+			properties: {
+				code,
+				name: primary.properties.name,
+				label: [
+					round(primary.properties.longitude),
+					round(primary.properties.latitude),
+				],
+			},
+			geometry,
+		};
+	});
+	return { shapes: shapes.sort((a, b) => a.id.localeCompare(b.id)), merged };
+}
+
+/** Lower-cased English names → code, for data that names a state. */
+function namesOf(members) {
+	const names = {};
+	for (const { properties: p } of members) {
+		for (const name of [p.name, p.name_en, p.gn_name, p.woe_name]) {
+			if (name) {
+				names[name.toLowerCase()] ??= p.iso_3166_2;
+			}
+		}
+	}
+	return names;
+}
+
+/**
+ * Natural Earth admin-1 GeoJSON → `{ files, report }`, where `files` maps each
+ * country with enough coded states to its outlines file, in code order.
+ */
+export function buildSubdivisions(source) {
+	const { byCountry, uncoded, recoded } = groupByCountry(source.features);
+	const files = new Map();
+	const report = {
+		skippedUnderMinimum: [],
+		mergedParts: {},
+		uncodedShapes: uncoded,
+		droppedFlippedIslands: {},
+		droppedCollapsedPolygons: 0,
+		emptiedShapes: [],
+		// Merge entries whose retired code Natural Earth no longer has.
+		unmatchedRetiredCodes: [...RECODES.keys()].filter(
+			(code) => !recoded.has(code),
+		),
+	};
+
+	const countries = [...byCountry.keys()].sort((a, b) => a.localeCompare(b));
+	for (const country of countries) {
+		const members = byCountry.get(country);
+		const { shapes, merged } = mergeByCode(members);
+		if (shapes.length < MIN_SUBDIVISIONS) {
+			report.skippedUnderMinimum.push(country);
+			continue;
+		}
+		if (merged) {
+			report.mergedParts[country] = merged;
+		}
+		const { topo, flipped, collapsed, emptied } = simplifyAndQuantize(
+			'subdivisions',
+			shapes,
+			SUBDIVISION_MIN_WEIGHT,
+			SUBDIVISION_QUANTIZATION,
+		);
+		if (flipped) {
+			report.droppedFlippedIslands[country] = flipped;
+		}
+		report.droppedCollapsedPolygons += collapsed;
+		report.emptiedShapes.push(...emptied);
+		files.set(country, {
+			...topo,
+			aliases: aliasesOf(country),
+			names: namesOf(members),
+		});
+	}
+	return { files, report };
+}

frontend/scripts/geo-outlines/validate.mjs

@@ -0,0 +1,110 @@
+// Invariants the chart relies on, checked before anything is written. A
+// failure names every problem; the committed assets are left untouched.
+import { feature } from 'topojson-client';
+
+import { MIN_SUBDIVISIONS } from './config.mjs';
+
+// Natural Earth v5.1.2 yields 239 countries and 198 countries with states. A
+// drop below these means a changed or truncated download, not real geography.
+const MIN_COUNTRIES = 230;
+const MIN_SUBDIVISION_COUNTRIES = 190;
+
+function duplicatesOf(values) {
+	const seen = new Set();
+	return values.filter((value) => seen.has(value) || !seen.add(value));
+}
+
+function checkCountries({ topology, lookups, report }, problems) {
+	const shapes = feature(topology, topology.objects.countries).features;
+	const codes = shapes.map((shape) => shape.properties.code).filter(Boolean);
+	const drawn = new Set(codes);
+
+	if (shapes.length < MIN_COUNTRIES) {
+		problems.push(
+			`only ${shapes.length} countries (expected ≥ ${MIN_COUNTRIES})`,
+		);
+	}
+	if (report.emptied) {
+		problems.push(`countries left with no outline: ${report.emptied}`);
+	}
+	for (const code of duplicatesOf(codes)) {
+		problems.push(`country code ${code} is drawn twice`);
+	}
+	if (lookups.codes.join() !== [...drawn].sort().join()) {
+		problems.push('lookups.codes differs from the drawn country codes');
+	}
+	for (const [alias, target] of Object.entries(lookups.aliases)) {
+		if (!drawn.has(target)) {
+			problems.push(`country alias ${alias} → ${target}, which has no shape`);
+		}
+	}
+	for (const [alpha3, target] of Object.entries(lookups.alpha3)) {
+		if (!drawn.has(target)) {
+			problems.push(`alpha-3 ${alpha3} → ${target}, which has no shape`);
+		}
+	}
+}
+
+function checkSubdivisionFile(country, file, problems) {
+	const codes = file.objects.subdivisions.geometries.map(
+		(geometry) => geometry.properties.code,
+	);
+	const known = new Set(codes);
+
+	if (codes.length < MIN_SUBDIVISIONS) {
+		problems.push(
+			`${country}: ${codes.length} states (expected ≥ ${MIN_SUBDIVISIONS})`,
+		);
+	}
+	for (const code of duplicatesOf(codes)) {
+		problems.push(`${country}: state code ${code} is drawn twice`);
+	}
+	for (const code of codes) {
+		if (!code?.startsWith(`${country}-`)) {
+			problems.push(`${country}: state code ${code} is outside the country`);
+		}
+	}
+	for (const [alias, target] of Object.entries(file.aliases)) {
+		if (!known.has(target)) {
+			problems.push(`${country}: alias ${alias} → ${target}, which has no shape`);
+		}
+	}
+	for (const [name, code] of Object.entries(file.names)) {
+		if (!known.has(code)) {
+			problems.push(`${country}: name "${name}" → ${code}, which has no shape`);
+		}
+	}
+}
+
+function checkSubdivisions({ files, report }, problems) {
+	if (files.size < MIN_SUBDIVISION_COUNTRIES) {
+		problems.push(
+			`only ${files.size} countries with states (expected ≥ ${MIN_SUBDIVISION_COUNTRIES})`,
+		);
+	}
+	if (report.emptiedShapes.length > 0) {
+		problems.push(
+			`states left with no outline: ${report.emptiedShapes.join(' ')}`,
+		);
+	}
+	if (report.unmatchedRetiredCodes.length > 0) {
+		problems.push(
+			`merge codes not found in Natural Earth: ${report.unmatchedRetiredCodes.join(' ')}`,
+		);
+	}
+	for (const [country, file] of files) {
+		checkSubdivisionFile(country, file, problems);
+	}
+}
+
+/** Throws one error listing every broken invariant. */
+export function validate(countries, subdivisions) {
+	const problems = [];
+	checkCountries(countries, problems);
+	checkSubdivisions(subdivisions, problems);
+	if (problems.length > 0) {
+		throw new Error(
+			`${problems.length} problem(s) in the generated outlines:\n- ${problems.join('\n- ')}`,
+		);
+	}
+}

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -4938,6 +4938,12 @@ export interface DashboardtypesAreaChartPanelSpecDTO {
 	visualization?: DashboardtypesAreaChartVisualizationDTO;
 }
 
+export enum DashboardtypesAxisScaleDTO {
+	auto = 'auto',
+	linear = 'linear',
+	log = 'log',
+	symlog = 'symlog',
+}
 export interface DashboardtypesBarChartVisualizationDTO {
 	/**
 	 * @type boolean
@@ -5695,6 +5701,166 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesHeatmapPanelSpecDTO;
 }
 
+export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTOKind {
+	'signoz/ScatterPlotPanel' = 'signoz/ScatterPlotPanel',
+}
+export interface DashboardtypesScatterPlotAxisDTO {
+	/**
+	 * @type string
+	 * @description Axis title. Empty draws none.
+	 */
+	label?: string;
+	scale?: DashboardtypesAxisScaleDTO;
+	/**
+	 * @type number,null
+	 */
+	softMax?: number | null;
+	/**
+	 * @type number,null
+	 */
+	softMin?: number | null;
+}
+
+export interface DashboardtypesScatterPlotAxesDTO {
+	x?: DashboardtypesScatterPlotAxisDTO;
+	y?: DashboardtypesScatterPlotAxisDTO;
+}
+
+/**
+ * @minimum 2
+ * @maximum 40
+ * @nullable
+ */
+export type DashboardtypesPointDiameterDTO = number | null;
+
+/**
+ * @minimum 0.1
+ * @maximum 1
+ * @nullable
+ */
+export type DashboardtypesPointOpacityDTO = number | null;
+
+export interface DashboardtypesScatterPlotPointsDTO {
+	maxSize?: DashboardtypesPointDiameterDTO | null;
+	minSize?: DashboardtypesPointDiameterDTO | null;
+	opacity?: DashboardtypesPointOpacityDTO | null;
+	size?: DashboardtypesPointDiameterDTO | null;
+}
+
+export interface DashboardtypesScatterPlotChartAppearanceDTO {
+	points?: DashboardtypesScatterPlotPointsDTO;
+}
+
+export interface DashboardtypesScatterPlotDimensionsDTO {
+	/**
+	 * @type array,null
+	 * @description Group-by label names (e.g. k8s.namespace.name) whose combined values colour dots and drive the legend. Empty colours by every group-by label.
+	 */
+	colorBy?: string[] | null;
+	/**
+	 * @type string
+	 * @description Value column key that scales dot size. Empty draws every dot at the default size.
+	 */
+	sizeBy?: string;
+	/**
+	 * @type string
+	 * @description Value column key (queryName, or queryName.expression for a multi-aggregation query) plotted on the x axis. Empty uses the first value column.
+	 */
+	x?: string;
+	/**
+	 * @type string
+	 * @description Value column key plotted on the y axis. Empty uses the second value column.
+	 */
+	y?: string;
+}
+
+export enum DashboardtypesThresholdAxisDTO {
+	x = 'x',
+	y = 'y',
+}
+export interface DashboardtypesScatterPlotThresholdDTO {
+	axis?: DashboardtypesThresholdAxisDTO;
+	/**
+	 * @type string
+	 */
+	color: string;
+	/**
+	 * @type string
+	 */
+	label?: string;
+	/**
+	 * @type string
+	 */
+	unit?: string;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	value: number;
+}
+
+export interface DashboardtypesScatterPlotPanelSpecDTO {
+	axes?: DashboardtypesScatterPlotAxesDTO;
+	chartAppearance?: DashboardtypesScatterPlotChartAppearanceDTO;
+	dimensions?: DashboardtypesScatterPlotDimensionsDTO;
+	formatting?: DashboardtypesTableFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesScatterPlotThresholdDTO[] | null;
+	visualization?: DashboardtypesBasicVisualizationDTO;
+}
+
+export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO {
+	/**
+	 * @enum signoz/ScatterPlotPanel
+	 * @type string
+	 */
+	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTOKind;
+	spec: DashboardtypesScatterPlotPanelSpecDTO;
+}
+
+export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTopListPanelSpecDTOKind {
+	'signoz/TopListPanel' = 'signoz/TopListPanel',
+}
+export interface DashboardtypesTopListAppearanceDTO {
+	/**
+	 * @type string
+	 * @description Hex color of every bar; a matching background threshold overrides it.
+	 */
+	barColor: string;
+	/**
+	 * @type boolean
+	 * @description Numbers each row by its position in the list.
+	 */
+	showRank?: boolean;
+	/**
+	 * @type boolean
+	 * @description Shows each row's share of the listed rows' total.
+	 */
+	showShare?: boolean;
+}
+
+export interface DashboardtypesTopListPanelSpecDTO {
+	appearance?: DashboardtypesTopListAppearanceDTO;
+	formatting?: DashboardtypesPanelFormattingDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesComparisonThresholdDTO[] | null;
+	visualization?: DashboardtypesBasicVisualizationDTO;
+}
+
+export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTopListPanelSpecDTO {
+	/**
+	 * @enum signoz/TopListPanel
+	 * @type string
+	 */
+	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTopListPanelSpecDTOKind;
+	spec: DashboardtypesTopListPanelSpecDTO;
+}
+
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -5705,7 +5871,9 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTopListPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -6645,6 +6813,8 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/ListPanel' = 'signoz/ListPanel',
 	'signoz/TextPanel' = 'signoz/TextPanel',
 	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
+	'signoz/ScatterPlotPanel' = 'signoz/ScatterPlotPanel',
+	'signoz/TopListPanel' = 'signoz/TopListPanel',
 }
 /**
  * @nullable

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts

@@ -21,6 +21,7 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
 import {
 	convertBuilderQueriesToV5,
+	mapPanelTypeToRequestType,
 	prepareQueryRangePayloadV5,
 } from './prepareQueryRangePayloadV5';
 
@@ -904,6 +905,12 @@ describe('prepareQueryRangePayloadV5', () => {
 	});
 });
 
+describe('mapPanelTypeToRequestType', () => {
+	it('sends a scatter plot as scalar, like a table', () => {
+		expect(mapPanelTypeToRequestType(PANEL_TYPES.SCATTER)).toBe('scalar');
+	});
+});
+
 describe('convertBuilderQueriesToV5 having normalization', () => {
 	const buildSpec = (having: unknown): MetricBuilderQuery => {
 		const [envelope] = convertBuilderQueriesToV5(

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -51,8 +51,10 @@ export function mapPanelTypeToRequestType(panelType: PANEL_TYPES): RequestType {
 		case PANEL_TYPES.BAR:
 			return 'time_series';
 		case PANEL_TYPES.TABLE:
+		case PANEL_TYPES.SCATTER:
 		case PANEL_TYPES.PIE:
 		case PANEL_TYPES.VALUE:
+		case PANEL_TYPES.TOP_LIST:
 			return 'scalar';
 		case PANEL_TYPES.TRACE:
 			return 'trace';
@@ -278,8 +280,10 @@ export function createAggregation(
 		queryData.dataSource === DataSource.METRICS &&
 		panelType &&
 		(panelType === PANEL_TYPES.TABLE ||
+			panelType === PANEL_TYPES.SCATTER ||
 			panelType === PANEL_TYPES.PIE ||
-			panelType === PANEL_TYPES.VALUE);
+			panelType === PANEL_TYPES.VALUE ||
+			panelType === PANEL_TYPES.TOP_LIST);
 
 	if (queryData.dataSource === DataSource.METRICS) {
 		return [

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -146,10 +146,21 @@ function QueryAddOns({
 		[resolvedFields],
 	);
 
+	// A panel's default limit applies only to a lone query: per-query limits can keep
+	// different groups and break a formula's join.
+	const isLoneQuery =
+		(currentQuery.builder?.queryData?.length ?? 1) +
+			(currentQuery.builder?.queryFormulas?.length ?? 0) +
+			(currentQuery.builder?.queryTraceOperator?.length ?? 0) <=
+		1;
+
 	const placeholderOf = useCallback(
 		(key: InputAddOnField): string =>
-			resolvedFields.get(key)?.placeholder ?? ADD_ON_DEFINITIONS[key].placeholder,
-		[resolvedFields],
+			(key === QueryBuilderField.Limit && !isLoneQuery
+				? undefined
+				: resolvedFields.get(key)?.placeholder) ??
+			ADD_ON_DEFINITIONS[key].placeholder,
+		[resolvedFields, isLoneQuery],
 	);
 
 	const isDisabled = useCallback(

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx

@@ -47,7 +47,10 @@ function QueryAggregationOptions({
 
 		if (
 			isNonMetricSource &&
-			(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE)
+			(panelType === PANEL_TYPES.TABLE ||
+				panelType === PANEL_TYPES.SCATTER ||
+				panelType === PANEL_TYPES.PIE ||
+				panelType === PANEL_TYPES.TOP_LIST)
 		) {
 			return { hidden: true, disabled: false, pinned: false };
 		}
@@ -69,7 +72,9 @@ function QueryAggregationOptions({
 					onChange={onChange}
 					queryData={queryData}
 					maxAggregations={
-						panelType === PANEL_TYPES.VALUE || panelType === PANEL_TYPES.PIE
+						panelType === PANEL_TYPES.VALUE ||
+						panelType === PANEL_TYPES.PIE ||
+						panelType === PANEL_TYPES.TOP_LIST
 							? 1
 							: undefined
 					}

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -115,8 +115,10 @@ export const QueryV2 = forwardRef(function QueryV2(
 		() =>
 			dataSource === DataSource.METRICS &&
 			(panelType === PANEL_TYPES.TABLE ||
+				panelType === PANEL_TYPES.SCATTER ||
 				panelType === PANEL_TYPES.PIE ||
-				panelType === PANEL_TYPES.VALUE),
+				panelType === PANEL_TYPES.VALUE ||
+				panelType === PANEL_TYPES.TOP_LIST),
 		[dataSource, panelType],
 	);
 

frontend/src/components/QueryBuilderV2/__tests__/QueryAddOns.test.tsx

@@ -15,6 +15,9 @@ import QueryAddOns from '../QueryV2/QueryAddOns/QueryAddOns';
 // Mocks: only what is required for this component to render and for us to assert handler calls
 const mockHandleChangeQueryData = jest.fn();
 const mockHandleSetQueryData = jest.fn();
+let mockCurrentQuery: { unit: string | undefined; builder?: unknown } = {
+	unit: undefined,
+};
 
 jest.mock('hooks/queryBuilder/useQueryBuilderOperations', () => ({
 	useQueryOperations: (): {
@@ -27,10 +30,10 @@ jest.mock('hooks/queryBuilder/useQueryBuilderOperations', () => ({
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: (): {
 		handleSetQueryData: typeof mockHandleSetQueryData;
-		currentQuery: { unit: string | undefined };
+		currentQuery: typeof mockCurrentQuery;
 	} => ({
 		handleSetQueryData: mockHandleSetQueryData,
-		currentQuery: { unit: undefined },
+		currentQuery: mockCurrentQuery,
 	}),
 }));
 
@@ -222,6 +225,59 @@ describe('QueryAddOns', () => {
 		);
 	});
 
+	describe('a pinned limit with a default', () => {
+		const renderPinnedLimit = (): void => {
+			render(
+				<QueryAddOns
+					query={baseQuery()}
+					version="v5"
+					isRawQuery={false}
+					showReduceTo={false}
+					panelType={PANEL_TYPES.TOP_LIST}
+					index={0}
+					fieldsConfig={{
+						[QueryBuilderField.Limit]: {
+							state: 'pinned',
+							placeholder: 'Default 10',
+						},
+					}}
+					isForTraceOperator={false}
+				/>,
+			);
+		};
+
+		afterEach(() => {
+			mockCurrentQuery = { unit: undefined };
+		});
+
+		it('is open with its default as the placeholder', () => {
+			renderPinnedLimit();
+
+			expect(screen.getByTestId('input-Limit')).toHaveAttribute(
+				'placeholder',
+				'Default 10',
+			);
+		});
+
+		it('drops the default once a formula joins the query', () => {
+			mockCurrentQuery = {
+				unit: undefined,
+				builder: {
+					queryData: [baseQuery()],
+					queryFormulas: [{ expression: 'A * 2' }],
+					queryTraceOperator: [],
+				},
+			};
+
+			renderPinnedLimit();
+
+			expect(screen.getByTestId('input-Limit')).toHaveAttribute(
+				'placeholder',
+				'Enter limit',
+			);
+		});
+	});
+
 	it('auto-opens Order By and Limit when present in query', () => {
 		const query = baseQuery({
 			orderBy: [{ columnName: 'duration', order: 'desc' }],

frontend/src/components/QueryBuilderV2/__tests__/QueryAggregation.test.tsx

@@ -14,6 +14,17 @@ jest.mock('../QueryV2/QueryAggregation/QueryAggregationSelect', () => ({
 const queryData = initialQueriesMap.traces.builder
 	.queryData[0] as IBuilderQuery;
 
+function renderFor(panelType: PANEL_TYPES, dataSource: DataSource): void {
+	render(
+		<QueryAggregationOptions
+			dataSource={dataSource}
+			panelType={panelType}
+			onAggregationIntervalChange={jest.fn()}
+			queryData={queryData}
+		/>,
+	);
+}
+
 describe('QueryAggregationOptions step interval placeholder', () => {
 	it('shows the configured placeholder', () => {
 		render(
@@ -34,14 +45,27 @@ describe('QueryAggregationOptions step interval placeholder', () => {
 	});
 
 	it('falls back to Auto', () => {
-		render(
-			<QueryAggregationOptions
-				dataSource={DataSource.TRACES}
-				panelType={PANEL_TYPES.TIME_SERIES}
-				onAggregationIntervalChange={jest.fn()}
-				queryData={queryData}
-			/>,
-		);
+		renderFor(PANEL_TYPES.TIME_SERIES, DataSource.TRACES);
 		expect(screen.getByPlaceholderText('Auto')).toBeInTheDocument();
 	});
 });
+
+describe('QueryAggregationOptions step interval', () => {
+	it.each([PANEL_TYPES.TABLE, PANEL_TYPES.SCATTER, PANEL_TYPES.PIE])(
+		'is hidden for a %s panel over traces, which reduces the whole window',
+		(panelType) => {
+			renderFor(panelType, DataSource.TRACES);
+			expect(screen.queryByText('every')).not.toBeInTheDocument();
+		},
+	);
+
+	it('stays for a scatter plot over metrics, where it sets the series step', () => {
+		renderFor(PANEL_TYPES.SCATTER, DataSource.METRICS);
+		expect(screen.getByText('every')).toBeInTheDocument();
+	});
+
+	it('stays for a time series over traces', () => {
+		renderFor(PANEL_TYPES.TIME_SERIES, DataSource.TRACES);
+		expect(screen.getByText('every')).toBeInTheDocument();
+	});
+});

frontend/src/constants/panelTypes.ts

@@ -34,8 +34,10 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.HISTOGRAM]: Uplot,
 		// V2-only kind; it renders through the V2 panel registry.
 		[PANEL_TYPES.HEATMAP]: null,
+		[PANEL_TYPES.TOP_LIST]: null,
 		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.
 		[PANEL_TYPES.TEXT]: null,
+		[PANEL_TYPES.SCATTER]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,
 	};
 

frontend/src/constants/queryBuilder.ts

@@ -337,9 +337,11 @@ export enum PANEL_TYPES {
 	TRACE = 'trace',
 	BAR = 'bar',
 	AREA = 'area',
+	SCATTER = 'scatter',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
 	HEATMAP = 'heatmap',
+	TOP_LIST = 'top_list',
 	TEXT = 'text',
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }

frontend/src/container/WidgetCard/Card/FullView/contants.ts

@@ -28,9 +28,11 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 		TRACE: false,
 		BAR: true,
 		AREA: true,
+		SCATTER: false,
 		PIE: false,
 		HISTOGRAM: false,
 		HEATMAP: false,
+		TOP_LIST: false,
 		TEXT: false,
 		EMPTY_WIDGET: false,
 	};

frontend/src/container/WidgetCard/Panels/constants.ts

@@ -16,6 +16,7 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.TRACE]: null,
 	// Dashboards v2 renders this kind; the V1 wrapper map is never asked for it.
 	[PANEL_TYPES.TEXT]: null,
+	[PANEL_TYPES.SCATTER]: null,
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
 	[PANEL_TYPES.BAR]: BarPanel,
@@ -23,4 +24,5 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.HISTOGRAM]: HistogramPanel,
 	// V2-only kind; it renders through the V2 panel registry.
 	[PANEL_TYPES.HEATMAP]: null,
+	[PANEL_TYPES.TOP_LIST]: null,
 };

frontend/src/lib/query/panelTypeDataSourceFormValuesMap.ts

@@ -14,8 +14,10 @@ export type PartialPanelTypes = {
 	[PANEL_TYPES.AREA]: 'area';
 	[PANEL_TYPES.VALUE]: 'value';
 	[PANEL_TYPES.PIE]: 'pie';
+	[PANEL_TYPES.SCATTER]: 'scatter';
 	[PANEL_TYPES.HISTOGRAM]: 'histogram';
 	[PANEL_TYPES.HEATMAP]: 'heatmap';
+	[PANEL_TYPES.TOP_LIST]: 'top_list';
 };
 
 export type BuilderField = keyof IBuilderQuery;
@@ -150,6 +152,8 @@ export const panelTypeDataSourceFormValuesMap: Record<
 	[PANEL_TYPES.HEATMAP]: bySource(HEATMAP, HEATMAP_METRICS),
 	[PANEL_TYPES.TABLE]: bySource(SERIES, SCALAR_METRICS),
 	[PANEL_TYPES.PIE]: bySource(SERIES, SCALAR_METRICS),
+	[PANEL_TYPES.SCATTER]: bySource(SERIES, SCALAR_METRICS),
+	[PANEL_TYPES.TOP_LIST]: bySource(SERIES, SCALAR_METRICS),
 	[PANEL_TYPES.VALUE]: bySource(SINGLE_VALUE, SINGLE_VALUE_METRICS),
 	[PANEL_TYPES.LIST]: bySource(RAW_ROWS, RAW_ROWS_METRICS),
 };

frontend/src/lib/uPlotV2/components/ColorBar/ColorBar.module.scss

@@ -72,3 +72,32 @@
 		var(--muted-foreground) 2px 3px
 	);
 }
+
+.vertical {
+	display: flex;
+	gap: 10px;
+	height: 100%;
+	min-height: 0;
+
+	.track {
+		flex: 0 0 8px;
+		width: 8px;
+		height: auto;
+	}
+
+	.marker {
+		top: auto;
+		right: -3px;
+		left: -3px;
+		width: auto;
+		height: 2px;
+		transform: translateY(1px);
+	}
+}
+
+.scale {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	min-width: 0;
+}

frontend/src/lib/uPlotV2/components/ColorBar/ColorBar.tsx

@@ -14,6 +14,8 @@ export interface ColorBarProps {
 	label?: string;
 	/** Keys the one state a ramp cannot express: a hatched data gap. */
 	showNoDataKey?: boolean;
+	/** Vertical runs low to high from the bottom, with labels to the right. */
+	orientation?: 'horizontal' | 'vertical';
 	'data-testid'?: string;
 }
 
@@ -25,8 +27,10 @@ export default function ColorBar({
 	markerPosition = null,
 	label,
 	showNoDataKey = false,
+	orientation = 'horizontal',
 	'data-testid': testId = 'color-bar',
 }: ColorBarProps): JSX.Element | null {
+	const isVertical = orientation === 'vertical';
 	const gradient = useMemo(() => {
 		if (ramp.length === 0) {
 			return undefined;
@@ -39,8 +43,8 @@ export default function ColorBar({
 			const to = ((index + 1) / ramp.length) * 100;
 			return [`${color} ${from}%`, `${color} ${to}%`];
 		});
-		return `linear-gradient(to right, ${stops.join(', ')})`;
-	}, [ramp]);
+		return `linear-gradient(to ${isVertical ? 'top' : 'right'}, ${stops.join(', ')})`;
+	}, [ramp, isVertical]);
 
 	if (gradient === undefined) {
 		return null;
@@ -49,6 +53,26 @@ export default function ColorBar({
 	const clampedMarker =
 		markerPosition === null ? null : Math.min(Math.max(markerPosition, 0), 1);
 
+	if (isVertical) {
+		return (
+			<div className={Styles.vertical} data-testid={testId}>
+				<div className={Styles.track} style={{ background: gradient }}>
+					{clampedMarker !== null && (
+						<span
+							className={Styles.marker}
+							style={{ bottom: `${clampedMarker * 100}%` }}
+							data-testid={`${testId}-marker`}
+						/>
+					)}
+				</div>
+				<div className={Styles.scale}>
+					<span className={Styles.label}>{maxLabel}</span>
+					<span className={Styles.label}>{minLabel}</span>
+				</div>
+			</div>
+		);
+	}
+
 	return (
 		<div className={Styles.container} data-testid={testId}>
 			{label && <span className={Styles.caption}>{label}</span>}

frontend/src/lib/uPlotV2/components/ColorBar/__tests__/ColorBar.test.tsx

@@ -82,4 +82,20 @@ describe('ColorBar', () => {
 				'linear-gradient(to right, #111111 0%, #111111 50%, #dddddd 50%, #dddddd 100%)',
 		});
 	});
+
+	it('runs low to high from the bottom when vertical', () => {
+		render(
+			<ColorBar
+				ramp={['#000', '#fff']}
+				minLabel="0.18%"
+				maxLabel="14.2%"
+				markerPosition={0.25}
+				orientation="vertical"
+			/>,
+		);
+
+		const labels = screen.getAllByText(/%$/).map((label) => label.textContent);
+		expect(labels).toStrictEqual(['14.2%', '0.18%']);
+		expect(screen.getByTestId('color-bar-marker')).toHaveStyle({ bottom: '25%' });
+	});
 });

frontend/src/lib/uPlotV2/components/Tooltip/ScatterTooltip.tsx

@@ -0,0 +1,56 @@
+import { useMemo } from 'react';
+
+import { ScatterTooltipProps } from '../types';
+import TooltipCard from './components/TooltipCard/TooltipCard';
+import { buildChannelRows, resolveHoveredPoint } from './scatterTooltipContent';
+
+/** Own component: the shared Tooltip lists one row per series at a shared x. */
+export default function ScatterTooltip({
+	uPlotInstance,
+	dataIndexes,
+	seriesIndex,
+	channels,
+	resolvePointLabels,
+	decimalPrecision,
+	isPinned,
+	dismiss,
+	renderTooltipFooter,
+}: ScatterTooltipProps): JSX.Element | null {
+	const point = useMemo(
+		() => resolveHoveredPoint(uPlotInstance, seriesIndex, dataIndexes),
+		[uPlotInstance, seriesIndex, dataIndexes],
+	);
+
+	const rows = useMemo(
+		() => (point ? buildChannelRows(point, channels, decimalPrecision) : []),
+		[point, channels, decimalPrecision],
+	);
+
+	const labels = useMemo(
+		() =>
+			point
+				? (resolvePointLabels?.(point.seriesIndex, point.dataIndex) ?? [])
+				: [],
+		[point, resolvePointLabels],
+	);
+
+	if (!point) {
+		return null;
+	}
+
+	return (
+		<TooltipCard
+			title={point.label}
+			color={point.color}
+			rows={rows.map((row) => ({ key: row.label, ...row }))}
+			mutedRows={labels.map((label) => ({
+				key: label.key,
+				label: label.key,
+				value: label.value,
+			}))}
+			isPinned={isPinned}
+			footer={renderTooltipFooter?.({ isPinned, dismiss })}
+			testId="scatter-tooltip"
+		/>
+	);
+}

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/scatterTooltipContent.test.ts

@@ -0,0 +1,107 @@
+import type uPlot from 'uplot';
+
+import {
+	buildChannelRows,
+	resolveHoveredPoint,
+	ScatterHoveredPoint,
+} from '../scatterTooltipContent';
+
+jest.mock('components/Graph/yAxisConfig', () => ({
+	getToolTipValue: jest.fn((value: number | string, unit?: string) =>
+		`${value} ${unit ?? ''}`.trim(),
+	),
+}));
+
+const plot = {
+	data: [
+		null,
+		[
+			[10, 20],
+			[100, 200],
+			[5, null],
+		],
+		[[30], [300]],
+	],
+	series: [
+		{},
+		{ label: 'cart', stroke: '#ff0000' },
+		{ label: 'checkout', stroke: (): string => '#00ff00' },
+	],
+} as unknown as uPlot;
+
+describe('resolveHoveredPoint', () => {
+	it('reads the focused series at its own data index', () => {
+		expect(resolveHoveredPoint(plot, 1, [null, 1, null])).toStrictEqual({
+			seriesIndex: 1,
+			dataIndex: 1,
+			label: 'cart',
+			color: '#ff0000',
+			x: 20,
+			y: 200,
+			size: null,
+		});
+	});
+
+	it('carries the size column when present and resolves function strokes', () => {
+		expect(resolveHoveredPoint(plot, 1, [null, 0, null])?.size).toBe(5);
+		expect(resolveHoveredPoint(plot, 2, [null, null, 0])).toMatchObject({
+			label: 'checkout',
+			color: '#00ff00',
+			size: null,
+		});
+	});
+
+	it('is null without a focused series or an index for it', () => {
+		expect(resolveHoveredPoint(plot, null, [null, 0, null])).toBeNull();
+		expect(resolveHoveredPoint(plot, 0, [0, 0, null])).toBeNull();
+		expect(resolveHoveredPoint(plot, 1, [null, null, null])).toBeNull();
+	});
+});
+
+describe('buildChannelRows', () => {
+	const point: ScatterHoveredPoint = {
+		seriesIndex: 1,
+		dataIndex: 0,
+		label: 'cart',
+		color: '#f00',
+		x: 12,
+		y: 340,
+		size: 7,
+	};
+
+	it('formats x and y with their own units', () => {
+		const rows = buildChannelRows(point, {
+			x: { label: 'Throughput', unit: 'reqps' },
+			y: { label: 'p99', unit: 'ms' },
+		});
+
+		expect(rows).toStrictEqual([
+			{ label: 'Throughput', value: '12 reqps' },
+			{ label: 'p99', value: '340 ms' },
+		]);
+	});
+
+	it('adds the size row only when the channel is mapped and the point has one', () => {
+		const channels = {
+			x: { label: 'x' },
+			y: { label: 'y' },
+			size: { label: 'Errors' },
+		};
+
+		expect(buildChannelRows(point, channels)).toHaveLength(3);
+		expect(buildChannelRows({ ...point, size: null }, channels)).toHaveLength(2);
+	});
+
+	it('leaves out a size row that repeats the x row', () => {
+		const rows = buildChannelRows(
+			{ ...point, size: point.x },
+			{
+				x: { label: 'A.count()' },
+				y: { label: 'p99' },
+				size: { label: 'A.count()' },
+			},
+		);
+
+		expect(rows.map((row) => row.label)).toStrictEqual(['A.count()', 'p99']);
+	});
+});

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipCard/TooltipCard.module.scss

@@ -0,0 +1,103 @@
+// Sections own the padding so the footer spans edge to edge.
+.container {
+	// Same inset as the heatmap tooltip.
+	--gutter: 14px;
+
+	font-family: 'Inter';
+	font-size: 12px;
+	background: var(--l2-background);
+	-webkit-font-smoothing: antialiased;
+	color: var(--l2-foreground);
+	border-radius: 6px;
+	border: 1px solid var(--l2-border);
+	display: flex;
+	flex-direction: column;
+	min-width: 220px;
+
+	&.pinned {
+		border-color: var(--ring);
+	}
+}
+
+.divider {
+	display: block;
+	width: 100%;
+	height: 1px;
+	background-color: var(--l2-border);
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	padding: var(--spacing-6) var(--gutter);
+}
+
+// Matches the legend row's marker.
+.marker {
+	box-sizing: border-box;
+	width: 12px;
+	height: 12px;
+	border: 1.5px solid;
+	border-radius: var(--radius);
+	flex-shrink: 0;
+}
+
+.title {
+	flex: 1;
+	min-width: 0;
+	font-family: var(--font-mono);
+	font-size: var(--font-size-xs);
+	font-weight: 600;
+	color: var(--l1-foreground);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.status {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-1);
+	font-size: 11px;
+	color: var(--l3-foreground);
+	flex-shrink: 0;
+}
+
+.rows {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	padding: var(--spacing-5) var(--gutter);
+}
+
+.row {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: var(--spacing-4);
+	font-family: var(--font-mono);
+	font-size: var(--font-size-xs);
+	font-variant-numeric: tabular-nums;
+	color: var(--l1-foreground);
+}
+
+.rowMuted {
+	color: var(--l3-foreground);
+}
+
+.rowLabel {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.rowValue {
+	flex: 0 0 auto;
+	max-width: 60%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipCard/TooltipCard.tsx

@@ -0,0 +1,99 @@
+import type { ReactNode } from 'react';
+import cx from 'classnames';
+import { Pin } from '@signozhq/icons';
+
+import Styles from './TooltipCard.module.scss';
+
+export interface TooltipCardRow {
+	key: string;
+	label: string;
+	value: string;
+}
+
+interface TooltipCardProps {
+	title: string;
+	/** The marker beside the title, matching the item's mark on the chart. */
+	color: string;
+	/** What the item says. */
+	rows: TooltipCardRow[];
+	/** What names the item, below the rows and muted. */
+	mutedRows?: TooltipCardRow[];
+	isPinned?: boolean;
+	footer?: ReactNode;
+	/** Prefixes the test ids of the title, status, rows and muted rows. */
+	testId: string;
+}
+
+/** One item's tooltip: a marked title, then label/value rows, on the shared tooltip surface. */
+export default function TooltipCard({
+	title,
+	color,
+	rows,
+	mutedRows = [],
+	isPinned = false,
+	footer,
+	testId,
+}: TooltipCardProps): JSX.Element {
+	return (
+		<div
+			className={cx(Styles.container, { [Styles.pinned]: isPinned })}
+			data-pinned={isPinned}
+			data-testid={testId}
+		>
+			<div className={Styles.header}>
+				<span
+					className={Styles.marker}
+					style={{ backgroundColor: color, borderColor: color }}
+				/>
+				<span
+					className={Styles.title}
+					title={title}
+					data-testid={`${testId}-title`}
+				>
+					{title}
+				</span>
+				{isPinned && (
+					<span className={Styles.status} data-testid={`${testId}-status`}>
+						<Pin size={12} />
+						<span>Pinned</span>
+					</span>
+				)}
+			</div>
+
+			<span className={Styles.divider} />
+
+			<div className={Styles.rows}>
+				{rows.map((row) => (
+					<div key={row.key} className={Styles.row} data-testid={`${testId}-row`}>
+						<span className={Styles.rowLabel}>{row.label}</span>
+						<span className={Styles.rowValue}>{row.value}</span>
+					</div>
+				))}
+			</div>
+
+			{mutedRows.length > 0 && (
+				<>
+					<span className={Styles.divider} />
+					<div className={Styles.rows}>
+						{mutedRows.map((row) => (
+							<div
+								key={row.key}
+								className={cx(Styles.row, Styles.rowMuted)}
+								data-testid={`${testId}-label`}
+							>
+								<span className={Styles.rowLabel} title={row.label}>
+									{row.label}
+								</span>
+								<span className={Styles.rowValue} title={row.value}>
+									{row.value}
+								</span>
+							</div>
+						))}
+					</div>
+				</>
+			)}
+
+			{footer}
+		</div>
+	);
+}

frontend/src/lib/uPlotV2/components/Tooltip/scatterTooltipContent.ts

@@ -0,0 +1,97 @@
+import { PrecisionOption } from 'components/Graph/types';
+import { getToolTipValue } from 'components/Graph/yAxisConfig';
+import type uPlot from 'uplot';
+
+import type {
+	ScatterChannel,
+	ScatterChannels,
+	ScatterSeriesData,
+} from '../../plugins/ScatterPlugin/types';
+import { resolveSeriesColor } from './utils';
+
+export interface ScatterHoveredPoint {
+	seriesIndex: number;
+	dataIndex: number;
+	label: string;
+	color: string;
+	x: number;
+	y: number;
+	size: number | null;
+}
+
+export interface ScatterTooltipRow {
+	label: string;
+	value: string;
+}
+
+export function resolveHoveredPoint(
+	u: uPlot,
+	seriesIndex: number | null,
+	dataIndexes: Array<number | null>,
+): ScatterHoveredPoint | null {
+	if (seriesIndex == null || seriesIndex < 1) {
+		return null;
+	}
+	const dataIndex = dataIndexes[seriesIndex];
+	const series = u.series[seriesIndex];
+	const columns = u.data[seriesIndex] as unknown as
+		| ScatterSeriesData
+		| undefined;
+	if (dataIndex == null || !series || !columns) {
+		return null;
+	}
+	const x = columns[0][dataIndex];
+	const y = columns[1][dataIndex];
+	if (x == null || y == null) {
+		return null;
+	}
+	return {
+		seriesIndex,
+		dataIndex,
+		label: String(series.label ?? ''),
+		color: resolveSeriesColor(series.stroke, u, seriesIndex),
+		x,
+		y,
+		size: columns[2]?.[dataIndex] ?? null,
+	};
+}
+
+function formatChannel(
+	value: number,
+	channel: ScatterChannel,
+	decimalPrecision?: PrecisionOption,
+): string {
+	return getToolTipValue(value, channel.unit, decimalPrecision);
+}
+
+export function buildChannelRows(
+	point: ScatterHoveredPoint,
+	channels: ScatterChannels,
+	decimalPrecision?: PrecisionOption,
+): ScatterTooltipRow[] {
+	const rows: ScatterTooltipRow[] = [
+		{
+			label: channels.x.label,
+			value: formatChannel(point.x, channels.x, decimalPrecision),
+		},
+		{
+			label: channels.y.label,
+			value: formatChannel(point.y, channels.y, decimalPrecision),
+		},
+	];
+	if (channels.size && point.size != null) {
+		const sizeRow = {
+			label: channels.size.label,
+			value: formatChannel(point.size, channels.size, decimalPrecision),
+		};
+		// Size bound to the X or Y column would only repeat that row.
+		if (
+			!rows.some(
+				(row) => row.label === sizeRow.label && row.value === sizeRow.value,
+			)
+		) {
+			rows.push(sizeRow);
+		}
+	}
+	return rows;
+}

frontend/src/lib/uPlotV2/components/types.ts

@@ -6,6 +6,10 @@ import uPlot from 'uplot';
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { LegendItem } from '../config/types';
 import { HeatmapSeries, HeatmapYAxis } from '../plugins/HeatmapPlugin/types';
+import type {
+	ScatterChannels,
+	ScatterPointLabel,
+} from '../plugins/ScatterPlugin/types';
 import { SyncTooltipFilterMode } from '../plugins/TooltipPlugin/types';
 
 /**
@@ -119,6 +123,16 @@ export interface HeatmapTooltipProps
 	groupColor: string;
 }
 
+export interface ScatterTooltipProps
+	extends BaseTooltipProps, TooltipRenderArgs {
+	channels: ScatterChannels;
+	/** The group values behind a point, e.g. `service.name` → `cart`. */
+	resolvePointLabels?: (
+		seriesIndex: number,
+		dataIndex: number,
+	) => ScatterPointLabel[];
+}
+
 export type TooltipProps =
 	| TimeSeriesTooltipProps
 	| BarTooltipProps

frontend/src/lib/uPlotV2/config/UPlotAxisBuilder.ts

@@ -39,6 +39,16 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		};
 	}
 
+	/** Styled like the grid. */
+	private buildBorderConfig(
+		grid: uPlot.Axis.Grid | undefined,
+	): uPlot.Axis.Border | undefined {
+		if (this.props.showBorder === false || !grid || grid.show === false) {
+			return undefined;
+		}
+		return { show: true, stroke: grid.stroke, width: grid.width };
+	}
+
 	/**
 	 * Build ticks configuration
 	 */
@@ -57,33 +67,43 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		};
 	}
 
-	/**
-	 * Build values formatter for X-axis (time)
-	 */
+	/** Time ticks, or unit-formatted values when a unit/precision is set. */
 	private buildXAxisValuesFormatter(): uPlot.Axis.Values | undefined {
-		const { isTimeAxis } = this.props;
+		const { isTimeAxis, yAxisUnit, decimalPrecision } = this.props;
 
 		if (isTimeAxis) {
 			return uPlotXAxisValuesFormat as uPlot.Axis.Values;
 		}
 
+		if (yAxisUnit !== undefined || decimalPrecision !== undefined) {
+			return this.buildValueAxisFormatter();
+		}
+
 		return undefined;
 	}
 
-	/**
-	 * Build values formatter for Y-axis (values with units)
-	 */
-	private buildYAxisValuesFormatter(): uPlot.Axis.Values {
-		const { yAxisUnit, decimalPrecision } = this.props;
+	/** Blanks splits outside the scale; uPlot's asinh splits always include ±threshold. */
+	private buildValueAxisFormatter(): uPlot.Axis.Values {
+		const { yAxisUnit, decimalPrecision, scaleKey } = this.props;
 
-		return (_, t): string[] =>
-			t.map((v) => {
-				if (v === null || v === undefined || Number.isNaN(v)) {
+		return (u, t): string[] => {
+			const scale = u?.scales?.[scaleKey];
+			const min = scale?.min ?? -Infinity;
+			const max = scale?.max ?? Infinity;
+			return t.map((v) => {
+				if (
+					v === null ||
+					v === undefined ||
+					Number.isNaN(v) ||
+					v < min ||
+					v > max
+				) {
 					return '';
 				}
 				const value = getToolTipValue(v.toString(), yAxisUnit, decimalPrecision);
 				return `${value}`;
 			});
+		};
 	}
 
 	/**
@@ -101,7 +121,7 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		return scaleKey === 'x'
 			? this.buildXAxisValuesFormatter()
 			: scaleKey === 'y'
-				? this.buildYAxisValuesFormatter()
+				? this.buildValueAxisFormatter()
 				: undefined;
 	}
 
@@ -149,10 +169,12 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 			side = 2, // bottom by default
 			space,
 			splits,
+			filter,
 			gap = 5, // default gap is 5
 		} = this.props;
 
 		const grid = this.buildGridConfig();
+		const border = this.buildBorderConfig(grid);
 		const ticks = this.buildTicksConfig();
 		const values = this.buildValuesFormatter();
 		const size = this.buildSizeCalculator();
@@ -177,6 +199,9 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		if (ticks) {
 			axisConfig.ticks = ticks;
 		}
+		if (border) {
+			axisConfig.border = border;
+		}
 		if (values) {
 			axisConfig.values = values;
 		}
@@ -189,6 +214,9 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		if (space !== undefined) {
 			axisConfig.space = space;
 		}
+		if (filter) {
+			axisConfig.filter = filter;
+		}
 		if (size) {
 			axisConfig.size = size;
 		}

frontend/src/lib/uPlotV2/config/UPlotConfigBuilder.ts

@@ -19,6 +19,7 @@ import {
 	ConfigBuilder,
 	ConfigBuilderProps,
 	LegendItem,
+	PlotMode,
 	SelectionPreferencesSource,
 	StackMode,
 } from './types';
@@ -65,6 +66,8 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 
 	private stackMode: StackMode = StackMode.None;
 
+	private mode: PlotMode = PlotMode.Aligned;
+
 	private cursor: Cursor | undefined;
 
 	private hooks: Hooks.Arrays = {};
@@ -160,6 +163,10 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		return this.stackMode;
 	}
 
+	setMode(mode: PlotMode): void {
+		this.mode = mode;
+	}
+
 	/**
 	 * Add or merge a scale configuration
 	 */
@@ -512,6 +519,10 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			{} as Record<string, uPlot.Scale>,
 		);
 
+		if (this.mode === PlotMode.Faceted) {
+			config.mode = this.mode as number as uPlot.Mode;
+		}
+
 		config.hooks = this.hooks;
 		config.select = this.select;
 

frontend/src/lib/uPlotV2/config/UPlotScaleBuilder.ts

@@ -40,6 +40,7 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 			range,
 			thresholds,
 			logBase = 10,
+			asinhThreshold,
 			padMinBy = 0,
 			padMaxBy = 0.05,
 		} = this.props;
@@ -99,6 +100,7 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 			time,
 			distr,
 			logBase,
+			asinhThreshold,
 		});
 
 		const { rangeConfig, hardMinOnly, hardMaxOnly, hasFixedRange } =

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -87,6 +87,8 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			lineConfig.fill = finalFillColor;
 		} else if (this.props.drawStyle === DrawStyle.Histogram) {
 			lineConfig.fill = `${finalFillColor}40`;
+		} else if (this.props.drawStyle === DrawStyle.Scatter) {
+			lineConfig.fill = `${finalFillColor}${toAlphaHex(resolveFillOpacity(fillOpacity))}`;
 		} else if (fillMode && fillMode !== FillMode.None) {
 			const resolvedOpacity = resolveFillOpacity(fillOpacity);
 			if (fillMode === FillMode.Solid) {
@@ -122,7 +124,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			return { paths: pathBuilder };
 		}
 
-		if (drawStyle === DrawStyle.Points) {
+		if (drawStyle === DrawStyle.Points || drawStyle === DrawStyle.Scatter) {
 			return { paths: (): null => null };
 		}
 
@@ -194,6 +196,10 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 		if (drawStyle === DrawStyle.Points) {
 			return true;
 		}
+		// The discs are the series path; uPlot's own points would double-draw them.
+		if (drawStyle === DrawStyle.Scatter) {
+			return false;
+		}
 		return !!showPoints;
 	}
 
@@ -218,7 +224,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 	}
 
 	getConfig(): ExtendedSeries {
-		const { scaleKey, label, spanGaps, show = true, metric } = this.props;
+		const { scaleKey, label, spanGaps, show = true, metric, facets } = this.props;
 
 		const resolvedLineColor = this.getLineColor();
 
@@ -246,6 +252,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			...pathConfig,
 			points: Object.keys(pointsConfig).length > 0 ? pointsConfig : undefined,
 			metric,
+			...(facets && { facets }),
 		};
 	}
 }

frontend/src/lib/uPlotV2/config/__tests__/UPlotAxisBuilder.test.ts

@@ -120,6 +120,41 @@ describe('UPlotAxisBuilder', () => {
 		});
 	});
 
+	it('draws the axis line by default, styled like the grid', () => {
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ isDarkMode: true, grid: { width: 0.5 } }),
+		).getConfig();
+
+		expect(config.border).toStrictEqual({
+			show: true,
+			stroke: config.grid?.stroke,
+			width: 0.5,
+		});
+	});
+
+	it('leaves the axis line off when showBorder is false', () => {
+		expect(
+			new UPlotAxisBuilder(createAxisProps({ showBorder: false })).getConfig(),
+		).not.toHaveProperty('border');
+	});
+
+	it('leaves the axis line off when the grid is hidden', () => {
+		expect(
+			new UPlotAxisBuilder(createAxisProps({ grid: { show: false } })).getConfig(),
+		).not.toHaveProperty('border');
+	});
+
+	it('passes explicit splits and a label filter through to uPlot', () => {
+		const splits = jest.fn();
+		const filter = jest.fn();
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ splits, filter }),
+		).getConfig();
+
+		expect(config.splits).toBe(splits);
+		expect(config.filter).toBe(filter);
+	});
+
 	it('uses provided ticks config when present and falls back to defaults otherwise', () => {
 		const customTicks = { width: 1, show: false };
 		const withTicks = new UPlotAxisBuilder(
@@ -376,3 +411,51 @@ describe('UPlotAxisBuilder', () => {
 		expect(config.values).toBeDefined();
 	});
 });
+
+describe('UPlotAxisBuilder value x axis', () => {
+	it('formats a non-time x axis with its unit', () => {
+		(getToolTipValue as jest.Mock).mockReturnValue('1.2K req/s');
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ scaleKey: 'x', isTimeAxis: false, yAxisUnit: 'reqps' }),
+		).getConfig();
+
+		const values = (config.values as uPlot.Axis.DynamicValues)(
+			{} as uPlot,
+			[1200],
+			0,
+			0,
+			0,
+		);
+
+		expect(values).toStrictEqual(['1.2K req/s']);
+		expect(getToolTipValue).toHaveBeenCalledWith('1200', 'reqps', undefined);
+	});
+
+	it('leaves a non-time x axis to uPlot when nothing says how to format it', () => {
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ scaleKey: 'x', isTimeAxis: false }),
+		).getConfig();
+
+		expect(config.values).toBeUndefined();
+	});
+});
+
+describe('UPlotAxisBuilder out-of-range splits', () => {
+	it('leaves a split the scale cannot place unlabelled', () => {
+		(getToolTipValue as jest.Mock).mockImplementation((v: string) => `${v} ms`);
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ scaleKey: 'y', yAxisUnit: 'ms' }),
+		).getConfig();
+		const u = { scales: { y: { min: 0, max: 1000 } } } as unknown as uPlot;
+
+		const values = (config.values as uPlot.Axis.DynamicValues)(
+			u,
+			[-10, 0, 500, 5000],
+			0,
+			0,
+			0,
+		);
+
+		expect(values).toStrictEqual(['', '0 ms', '500 ms', '']);
+	});
+});

frontend/src/lib/uPlotV2/config/__tests__/UPlotConfigBuilder.test.ts

@@ -5,7 +5,12 @@ import {
 	STEP_INTERVAL_MULTIPLIER,
 } from '../../constants';
 import type { SeriesProps } from '../types';
-import { DrawStyle, SelectionPreferencesSource, StackMode } from '../types';
+import {
+	DrawStyle,
+	PlotMode,
+	SelectionPreferencesSource,
+	StackMode,
+} from '../types';
 import { UPlotConfigBuilder } from '../UPlotConfigBuilder';
 
 // Mock only the real boundary that hits localStorage
@@ -651,3 +656,14 @@ describe('UPlotConfigBuilder stacking', () => {
 		expect(builder.getConfig().bands).toStrictEqual([{ series: [1, 3] }]);
 	});
 });
+
+describe('UPlotConfigBuilder plot mode', () => {
+	it('leaves mode unset for aligned data and emits 2 when faceted', () => {
+		const aligned = new UPlotConfigBuilder({ id: 'aligned' });
+		expect(aligned.getConfig().mode).toBeUndefined();
+
+		const faceted = new UPlotConfigBuilder({ id: 'faceted' });
+		faceted.setMode(PlotMode.Faceted);
+		expect(faceted.getConfig().mode).toBe(2);
+	});
+});

frontend/src/lib/uPlotV2/config/__tests__/UPlotSeriesBuilder.test.ts

@@ -399,3 +399,39 @@ describe('UPlotSeriesBuilder', () => {
 		expect(builder.getConfig().fill).toBeUndefined();
 	});
 });
+
+describe('UPlotSeriesBuilder scatter', () => {
+	it('draws through the given path builder and hides uPlot points', () => {
+		const pathBuilder = jest.fn();
+		const config = new UPlotSeriesBuilder(
+			createBaseProps({
+				drawStyle: DrawStyle.Scatter,
+				pathBuilder,
+				facets: [{ scale: 'x' }, { scale: 'y' }],
+				lineColor: '#ff0000',
+				fillOpacity: 0.5,
+				lineWidth: 1,
+				pointSize: 8,
+			}),
+		).getConfig();
+
+		expect(config.paths).toBe(pathBuilder);
+		expect(config.facets).toStrictEqual([{ scale: 'x' }, { scale: 'y' }]);
+		expect(config.points?.show).toBe(false);
+		expect(config.points?.size).toBe(8);
+		expect(config.stroke).toBe('#ff0000');
+		expect(config.width).toBe(1);
+		expect(config.fill).toBe('#ff000080');
+	});
+
+	it('draws nothing without a path builder', () => {
+		const config = new UPlotSeriesBuilder(
+			createBaseProps({ drawStyle: DrawStyle.Scatter }),
+		).getConfig();
+
+		expect(
+			(config.paths as uPlot.Series.PathBuilder)({} as uPlot, 1, 0, 0),
+		).toBeNull();
+		expect(config.facets).toBeUndefined();
+	});
+});

frontend/src/lib/uPlotV2/config/types.ts

@@ -78,8 +78,12 @@ export interface AxisProps {
 	};
 	/** Explicit tick formatter, replacing the scale's default (time / unit-formatted). */
 	values?: uPlot.Axis.Values;
-	/** Explicit axis splits, overriding the default tick calculation. */
+	/** Explicit tick positions, replacing uPlot's per-distribution default. */
 	splits?: uPlot.Axis.Splits;
+	/** Which splits get a label, replacing uPlot's per-distribution default. */
+	filter?: uPlot.Axis.Filter;
+	/** Draw the axis line along the plot edge, styled like the grid. Default true. */
+	showBorder?: boolean;
 	/** Pixels between the ticks and their labels; also feeds the y axis width calculation. */
 	gap?: number;
 	/** Explicit axis thickness. Left unset, the y axis sizes itself to its widest label. */
@@ -90,7 +94,7 @@ export interface AxisProps {
 	isDarkMode?: boolean;
 	/** Axis is on a log scale — thins the grid lines to keep dense decades readable. */
 	isLogScale?: boolean;
-	/** Unit the y axis ticks are formatted in (`spec.formatting.unit`). */
+	/** Unit the value ticks are formatted in (`spec.formatting.unit`); a non-time x axis reads it too. */
 	yAxisUnit?: string;
 	/**
 	 * X axis carries timestamps, so its ticks format as dates/times. Declared by the caller
@@ -109,6 +113,14 @@ export interface AxisProps {
 export enum DistributionType {
 	Linear = 'linear',
 	Logarithmic = 'logarithmic',
+	/** arcsinh: linear within ±`asinhThreshold`, log beyond; places zero and negatives. */
+	SymmetricLog = 'symlog',
+}
+
+/** uPlot's data layout: one shared x per chart, or per-series x/y columns. */
+export enum PlotMode {
+	Aligned = 1,
+	Faceted = 2,
 }
 
 export interface ScaleProps {
@@ -125,6 +137,8 @@ export interface ScaleProps {
 	auto?: boolean;
 	logBase?: uPlot.Scale.LogBase;
 	distribution?: DistributionType;
+	/** Half-width of a `SymmetricLog` scale's linear band around zero. Default 1. */
+	asinhThreshold?: number;
 }
 
 export enum DisconnectedValuesMode {
@@ -146,6 +160,8 @@ export enum DrawStyle {
 	Points = 'points',
 	Bar = 'bar',
 	Histogram = 'histogram',
+	/** Mode 2; drawn by the caller's `pathBuilder`. */
+	Scatter = 'scatter',
 }
 
 export enum LineInterpolation {
@@ -229,6 +245,8 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	isDarkMode?: boolean;
 	stepInterval?: number;
 	metric?: { [key: string]: string };
+	/** Mode 2 only: the scales the series' own x and y columns are read against. */
+	facets?: Series.Facet[];
 }
 
 export interface LegendItem {

frontend/src/lib/uPlotV2/hooks/__tests__/useThresholdsDrawHook.test.ts

@@ -0,0 +1,56 @@
+import type uPlot from 'uplot';
+
+import { thresholdsDrawHook } from '../useThresholdsDrawHook';
+
+function mockPlot(ori: 0 | 1): { plot: uPlot; ctx: Record<string, jest.Mock> } {
+	const ctx = {
+		save: jest.fn(),
+		restore: jest.fn(),
+		setLineDash: jest.fn(),
+		beginPath: jest.fn(),
+		moveTo: jest.fn(),
+		lineTo: jest.fn(),
+		stroke: jest.fn(),
+		fillText: jest.fn(),
+		measureText: jest.fn(() => ({ width: 40 })),
+	};
+	const plot = {
+		ctx: { ...ctx, canvas: { height: 300 } },
+		bbox: { left: 10, top: 20, width: 400, height: 200 },
+		scales: { s: { ori } },
+		valToPos: (): number => 100,
+	} as unknown as uPlot;
+	return { plot, ctx };
+}
+
+const draw = (plot: uPlot): void =>
+	(
+		thresholdsDrawHook({
+			scaleKey: 's',
+			thresholds: [{ thresholdValue: 5, thresholdLabel: 'SLO' }],
+		}) as (u: uPlot) => void
+	)(plot);
+
+describe('thresholdsDrawHook', () => {
+	it('draws a horizontal line across a vertical scale', () => {
+		const { plot, ctx } = mockPlot(1);
+		draw(plot);
+
+		expect(ctx.moveTo).toHaveBeenCalledWith(10, 100);
+		expect(ctx.lineTo).toHaveBeenCalledWith(410, 100);
+		expect(ctx.fillText).toHaveBeenCalledWith('SLO', 350, 85);
+	});
+
+	it('draws a vertical line across a horizontal scale', () => {
+		const { plot, ctx } = mockPlot(0);
+		draw(plot);
+
+		expect(ctx.moveTo).toHaveBeenCalledWith(100, 20);
+		expect(ctx.lineTo).toHaveBeenCalledWith(100, 220);
+		expect(ctx.fillText).toHaveBeenCalledWith(
+			'SLO',
+			expect.any(Number),
+			expect.any(Number),
+		);
+	});
+});

frontend/src/lib/uPlotV2/hooks/useThresholdsDrawHook.ts

@@ -29,13 +29,42 @@ export function thresholdsDrawHook(
 
 			const scaleVal = u.valToPos(Number(yValue), scaleKey, true);
 
+			ctx.strokeStyle = color;
+
+			// A horizontal scale (e.g. a scatter plot's x) takes a vertical line.
+			if (u.scales[scaleKey]?.ori === 0) {
+				const x = Math.round(scaleVal);
+				const top = Math.round(u.bbox.top);
+
+				ctx.beginPath();
+				ctx.moveTo(x, top);
+				ctx.lineTo(x, Math.round(u.bbox.top + u.bbox.height));
+				ctx.stroke();
+
+				if (threshold.thresholdLabel) {
+					const gap = 6 * uPlot.pxRatio;
+					const textWidth = ctx.measureText(threshold.thresholdLabel).width;
+					const fitsRight = x + gap + textWidth <= u.bbox.left + u.bbox.width;
+					// uPlot leaves the last axis's text alignment on the context.
+					ctx.save();
+					ctx.fillStyle = color;
+					ctx.textAlign = 'left';
+					ctx.textBaseline = 'top';
+					ctx.fillText(
+						threshold.thresholdLabel,
+						fitsRight ? x + gap : x - gap - textWidth,
+						top + gap,
+					);
+					ctx.restore();
+				}
+				continue;
+			}
+
 			const x0 = Math.round(u.bbox.left);
 			const y0 = Math.round(scaleVal);
 			const x1 = Math.round(u.bbox.left + u.bbox.width);
 			const y1 = Math.round(scaleVal);
 
-			ctx.strokeStyle = color;
-
 			ctx.beginPath();
 			ctx.moveTo(x0, y0);
 			ctx.lineTo(x1, y1);

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/__tests__/heatmapPlugin.test.ts

@@ -1,6 +1,6 @@
 import type uPlot from 'uplot';
 
-import { DEFAULT_HEATMAP_COLORS } from '../colorScale';
+import { DEFAULT_COLOR_RAMP_OPTIONS } from 'lib/visualization/colorRamp/colorScale';
 import { resolveHeatmapYAxis } from '../geometry';
 import { createHeatmapHooks } from '../heatmapPlugin';
 import { HeatmapAxisScale, HeatmapCell } from '../types';
@@ -103,7 +103,7 @@ function createHooks(
 	return createHeatmapHooks({
 		yAxis: Y_AXIS,
 		step: STEP,
-		colors: DEFAULT_HEATMAP_COLORS,
+		colors: DEFAULT_COLOR_RAMP_OPTIONS,
 		isDarkMode: true,
 		seriesColor: '#4e74f8',
 		dimOnHover,

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/colorScale.ts

@@ -1,257 +0,0 @@
-import { Color as DesignToken } from '@signozhq/design-tokens';
-import Color from 'color';
-
-import { DEFAULT_HEATMAP_PALETTE, getPaletteStops } from './palettes';
-import {
-	HeatmapColorMode,
-	HeatmapColorOptions,
-	HeatmapColorScale,
-} from './types';
-
-export const MIN_COLOR_STEPS = 2;
-export const MAX_COLOR_STEPS = 128;
-export const DEFAULT_COLOR_STEPS = 64;
-
-/** Without a floor, the lowest counts read as "no data". */
-export const MIN_OPACITY_ALPHA = 0.1;
-
-/** Log's bottom when the grid holds no positive count to take it from. */
-const DEFAULT_LOG_FLOOR = 1;
-
-/** Widest span a single ramp is stretched over on a log scale. */
-const MAX_LOG_DECADES = 6;
-
-/** Used when neither an explicit fill nor a series colour is available. */
-export const DEFAULT_OPACITY_FILL = DesignToken.BG_ROBIN_500;
-
-/** Zero takes the panel surface so an empty stretch recedes, leaving the ramp's
- *  bottom to the smallest count that did occur — on a log scale the two collapse. */
-const ZERO_FILL: Record<'dark' | 'light', string> = {
-	dark: DesignToken.BG_INK_500,
-	light: DesignToken.BG_VANILLA_100,
-};
-
-export const DEFAULT_HEATMAP_COLORS: HeatmapColorOptions = {
-	mode: HeatmapColorMode.Palette,
-	scale: HeatmapColorScale.Log,
-	minCount: null,
-	maxCount: null,
-	palette: DEFAULT_HEATMAP_PALETTE,
-	steps: DEFAULT_COLOR_STEPS,
-	fill: '',
-};
-
-export interface CountDomain {
-	min: number;
-	max: number;
-	/** Bottom decade of the log scale: the smallest count it separates from zero.
-	 *  Always positive, since log has no bottom otherwise. */
-	logFloor: number;
-}
-
-/** Highest count, ignoring `null`. 0 for an empty grid. */
-export function getMaxCount(counts: Array<Array<number | null>>): number {
-	let max = 0;
-	for (const row of counts) {
-		for (const count of row) {
-			if (count !== null && Number.isFinite(count) && count > max) {
-				max = count;
-			}
-		}
-	}
-	return max;
-}
-
-/** Smallest count above zero, ignoring `null`. `null` for a grid without one. */
-export function getSmallestPositiveCount(
-	counts: Array<Array<number | null>>,
-): number | null {
-	let smallest: number | null = null;
-	for (const row of counts) {
-		for (const count of row) {
-			if (
-				count !== null &&
-				Number.isFinite(count) &&
-				count > 0 &&
-				(smallest === null || count < smallest)
-			) {
-				smallest = count;
-			}
-		}
-	}
-	return smallest;
-}
-
-/**
- * The grid's own resolution: whole counts floor at 1, while a heatmap of rates or
- * ratios can live entirely below it, where a fixed floor of 1 would flatten every
- * cell onto the bottom colour. Capped at `MAX_LOG_DECADES` so one stray tiny cell
- * cannot stretch the ramp over a range nothing else occupies.
- */
-function resolveLogFloor(
-	counts: Array<Array<number | null>>,
-	max: number,
-): number {
-	const smallest = getSmallestPositiveCount(counts) ?? DEFAULT_LOG_FLOOR;
-	return Math.max(smallest, max / 10 ** MAX_LOG_DECADES);
-}
-
-/** Explicit clamps win; otherwise 0 to the grid's highest count. */
-export function resolveCountDomain(
-	options: Pick<HeatmapColorOptions, 'minCount' | 'maxCount'>,
-	counts: Array<Array<number | null>>,
-): CountDomain {
-	const min = options.minCount ?? 0;
-	const max = options.maxCount ?? getMaxCount(counts);
-	const logFloor = resolveLogFloor(counts, max);
-	return max > min ? { min, max, logFloor } : { min, max: min, logFloor };
-}
-
-/** Position on the colour scale, 0..1. A degenerate domain collapses to 0 so an
- *  all-zero grid renders at the bottom rather than disappearing. */
-export function normalizeCount({
-	count,
-	domain,
-	scale,
-}: {
-	count: number;
-	domain: CountDomain;
-	scale: HeatmapColorScale;
-}): number {
-	const { min, max } = domain;
-	if (!(max > min)) {
-		return 0;
-	}
-
-	const clamped = Math.min(Math.max(count, min), max);
-
-	if (scale === HeatmapColorScale.Log) {
-		// Anything at or below the floor sits at the bottom; log cannot place it.
-		const bottom = Math.max(min, domain.logFloor);
-		const logMin = Math.log10(bottom);
-		const logMax = Math.log10(max);
-		if (logMax > logMin) {
-			return (Math.log10(Math.max(clamped, bottom)) - logMin) / (logMax - logMin);
-		}
-		// The floor already reaches the top of the domain, so there is no span to
-		// spread logarithmically. Fall through rather than flatten the whole grid.
-	}
-
-	const linear = (clamped - min) / (max - min);
-	return scale === HeatmapColorScale.Sqrt ? Math.sqrt(linear) : linear;
-}
-
-export function clampColorSteps(steps: number): number {
-	if (!Number.isFinite(steps)) {
-		return DEFAULT_COLOR_STEPS;
-	}
-	return Math.min(Math.max(Math.round(steps), MIN_COLOR_STEPS), MAX_COLOR_STEPS);
-}
-
-/** Colour at `t` (0..1) along a multi-stop ramp. */
-function sampleStops(stops: string[], t: number): string {
-	if (stops.length === 0) {
-		return 'transparent';
-	}
-	if (stops.length === 1) {
-		return stops[0];
-	}
-	const scaled = Math.min(Math.max(t, 0), 1) * (stops.length - 1);
-	const lower = Math.min(Math.floor(scaled), stops.length - 2);
-	return Color(stops[lower])
-		.mix(Color(stops[lower + 1]), scaled - lower)
-		.hex();
-}
-
-/**
- * Colour the densest cells are drawn with — the palette's extreme, or the opacity
- * fill at full strength. Depends only on the options, not on the data, so callers
- * can read it before a grid exists.
- */
-export function resolveExtremeColor({
-	options,
-	isDarkMode,
-	seriesColor,
-}: {
-	options: HeatmapColorOptions;
-	isDarkMode: boolean;
-	seriesColor: string;
-}): string {
-	if (options.mode === HeatmapColorMode.Opacity) {
-		return options.fill || seriesColor || DEFAULT_OPACITY_FILL;
-	}
-	const stops = getPaletteStops(options.palette, isDarkMode);
-	return stops[stops.length - 1] ?? DEFAULT_OPACITY_FILL;
-}
-
-export interface HeatmapColorResolver {
-	/** `null` for a `null` count, which must be hatched. */
-	colorFor: (count: number | null) => string | null;
-	/** 0..1, or `null` for a `null` count. */
-	positionOf: (count: number | null) => number | null;
-	/** Low to high. The colour bar renders exactly these. */
-	ramp: string[];
-	domain: CountDomain;
-}
-
-/** Palette mode walks a sequential ramp; opacity mode varies the alpha of one
- *  fill, so the grid matches its group's legend swatch. */
-export function createHeatmapColorResolver({
-	options,
-	domain,
-	isDarkMode,
-	seriesColor,
-}: {
-	options: HeatmapColorOptions;
-	domain: CountDomain;
-	isDarkMode: boolean;
-	/** Opacity-mode fill when `options.fill` is empty. */
-	seriesColor: string;
-}): HeatmapColorResolver {
-	const steps = clampColorSteps(options.steps);
-	const positions = Array.from({ length: steps }, (_, index) =>
-		steps === 1 ? 0 : index / (steps - 1),
-	);
-
-	let ramp: string[];
-	if (options.mode === HeatmapColorMode.Opacity) {
-		const base = Color(options.fill || seriesColor || DEFAULT_OPACITY_FILL);
-		ramp = positions.map((t) =>
-			base
-				.alpha(MIN_OPACITY_ALPHA + t * (1 - MIN_OPACITY_ALPHA))
-				.rgb()
-				.string(),
-		);
-	} else {
-		const stops = getPaletteStops(options.palette, isDarkMode);
-		ramp = positions.map((t) => sampleStops(stops, t));
-	}
-
-	const positionOf = (count: number | null): number | null => {
-		if (count === null || !Number.isFinite(count)) {
-			return null;
-		}
-		return normalizeCount({ count, domain, scale: options.scale });
-	};
-
-	// An explicit `minCount` above zero makes it a clamped value like any other.
-	const zeroFill =
-		domain.min <= 0 ? ZERO_FILL[isDarkMode ? 'dark' : 'light'] : null;
-
-	return {
-		positionOf,
-		colorFor: (count): string | null => {
-			if (count === 0 && zeroFill !== null) {
-				return zeroFill;
-			}
-			const t = positionOf(count);
-			if (t === null) {
-				return null;
-			}
-			const index = Math.min(Math.floor(t * steps), steps - 1);
-			return ramp[index];
-		},
-		ramp,
-		domain,
-	};
-}

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/heatmapPlugin.ts

@@ -1,10 +1,10 @@
 import uPlot from 'uplot';
 
 import {
-	createHeatmapColorResolver,
-	HeatmapColorResolver,
-	resolveCountDomain,
-} from './colorScale';
+	createColorRampResolver,
+	ColorRampResolver,
+	resolveColorDomain,
+} from 'lib/visualization/colorRamp/colorScale';
 import { resolveColumnIndex, resolveRowIndex } from './geometry';
 import {
 	createHoverOverlay,
@@ -12,13 +12,14 @@ import {
 	showHoverOverlay,
 } from './hoverOverlay';
 import { createHatchPattern, drawCells, drawOverflowBoundary } from './paint';
-import { HeatmapCell, HeatmapColorOptions, HeatmapYAxis } from './types';
+import { HeatmapCell, HeatmapYAxis } from './types';
+import { ColorRampOptions } from 'lib/visualization/colorRamp/types';
 
 export interface HeatmapRenderOptions {
 	yAxis: HeatmapYAxis;
 	/** Column width in seconds. */
 	step: number;
-	colors: HeatmapColorOptions;
+	colors: ColorRampOptions;
 	isDarkMode: boolean;
 	/** Opacity-mode fill when `colors.fill` is empty. */
 	seriesColor: string;
@@ -58,15 +59,15 @@ export function createHeatmapHooks({
 	// config-build time. Resolving lazily keeps a refetch on uPlot's `setData` path
 	// rather than forcing a rebuild.
 	let cachedData: uPlot.AlignedData | null = null;
-	let cachedResolver: HeatmapColorResolver | null = null;
+	let cachedResolver: ColorRampResolver | null = null;
 
-	function getResolver(u: uPlot): HeatmapColorResolver {
+	function getResolver(u: uPlot): ColorRampResolver {
 		if (cachedResolver && cachedData === u.data) {
 			return cachedResolver;
 		}
-		cachedResolver = createHeatmapColorResolver({
+		cachedResolver = createColorRampResolver({
 			options: colors,
-			domain: resolveCountDomain(
+			domain: resolveColorDomain(
 				colors,
 				u.data.slice(1) as Array<Array<number | null>>,
 			),

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/paint.ts

@@ -1,7 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
 import uPlot from 'uplot';
 
-import { HeatmapColorResolver } from './colorScale';
+import { ColorRampResolver } from 'lib/visualization/colorRamp/colorScale';
 import { HeatmapYAxis } from './types';
 
 /** Cells at least this wide/tall keep a hairline separator. */
@@ -54,7 +54,7 @@ export function drawCells({
 	u: uPlot;
 	yAxis: HeatmapYAxis;
 	step: number;
-	resolver: HeatmapColorResolver;
+	resolver: ColorRampResolver;
 	hatchPattern: CanvasPattern | null;
 }): void {
 	const { ctx } = u;

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/types.ts

@@ -1,44 +1,3 @@
-export enum HeatmapColorScale {
-	Log = 'log',
-	Sqrt = 'sqrt',
-	Linear = 'linear',
-}
-
-export enum HeatmapColorMode {
-	Palette = 'palette',
-	Opacity = 'opacity',
-}
-
-/** Sequential ramps only: colour means "count", so a midpoint or hue cycle would
- *  read as a threshold that does not exist. */
-export enum HeatmapColorPalette {
-	Ice = 'ice',
-	Moss = 'moss',
-	Rust = 'rust',
-	Graphite = 'graphite',
-	Ember = 'ember',
-	Lagoon = 'lagoon',
-	Orchid = 'orchid',
-	Verdant = 'verdant',
-	Lava = 'lava',
-	Beacon = 'beacon',
-}
-
-export interface HeatmapColorOptions {
-	mode: HeatmapColorMode;
-	scale: HeatmapColorScale;
-	/** `null` derives it, which is always 0 — a count of 0 belongs at the bottom. */
-	minCount: number | null;
-	/** `null` derives it from the grid's highest count. */
-	maxCount: number | null;
-	palette: HeatmapColorPalette;
-	/** Colour steps the ramp is quantised into, 2..128. Unrelated to `step`, the
-	 *  column width in seconds. */
-	steps: number;
-	/** Opacity mode. Empty falls back to the caller's series colour. */
-	fill: string;
-}
-
 /** Row-height distribution of the bucket axis. */
 export enum HeatmapAxisScale {
 	/** Whichever of the three below the boundaries admit: log when they are all

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/__tests__/geometry.test.ts

@@ -0,0 +1,114 @@
+import type uPlot from 'uplot';
+
+import { Quadtree } from '../../../utils/quadtree';
+import {
+	resolveHit,
+	resolvePointDiameter,
+	resolveSizeDomain,
+} from '../geometry';
+import { ScatterHit, ScatterPointSize } from '../types';
+
+const POINT_SIZE: ScatterPointSize = { fixed: 6, min: 4, max: 20 };
+
+const asData = (columns: unknown[]): uPlot.AlignedData =>
+	columns as unknown as uPlot.AlignedData;
+
+describe('resolveSizeDomain', () => {
+	it('spans the size columns of every series, skipping nulls', () => {
+		const data = asData([
+			null,
+			[
+				[1, 2],
+				[1, 2],
+				[10, null],
+			],
+			[[3], [3], [40]],
+		]);
+
+		expect(resolveSizeDomain(data)).toStrictEqual({ min: 10, max: 40 });
+	});
+
+	it('is null when no series carries sizes', () => {
+		expect(resolveSizeDomain(asData([null, [[1], [1]]]))).toBeNull();
+		expect(resolveSizeDomain(asData([null, [[1], [1], [null]]]))).toBeNull();
+	});
+});
+
+describe('resolvePointDiameter', () => {
+	it('uses the fixed diameter without a size or a domain', () => {
+		expect(resolvePointDiameter(null, { min: 0, max: 10 }, POINT_SIZE)).toBe(6);
+		expect(resolvePointDiameter(5, null, POINT_SIZE)).toBe(6);
+	});
+
+	it('maps the domain ends to min and max', () => {
+		const domain = { min: 0, max: 100 };
+		expect(resolvePointDiameter(0, domain, POINT_SIZE)).toBe(4);
+		expect(resolvePointDiameter(100, domain, POINT_SIZE)).toBe(20);
+	});
+
+	it('scales by area, not diameter', () => {
+		const midArea = (4 ** 2 + 20 ** 2) / 2;
+		expect(
+			resolvePointDiameter(50, { min: 0, max: 100 }, POINT_SIZE),
+		).toBeCloseTo(Math.sqrt(midArea));
+	});
+
+	it('clamps values outside the domain', () => {
+		const domain = { min: 10, max: 20 };
+		expect(resolvePointDiameter(-5, domain, POINT_SIZE)).toBe(4);
+		expect(resolvePointDiameter(500, domain, POINT_SIZE)).toBe(20);
+	});
+
+	it('uses the midpoint when every size is the same', () => {
+		expect(resolvePointDiameter(7, { min: 7, max: 7 }, POINT_SIZE)).toBe(12);
+	});
+});
+
+describe('resolveHit', () => {
+	const hit = (
+		seriesIndex: number,
+		dataIndex: number,
+		x: number,
+		y: number,
+		d: number,
+	): ScatterHit => ({ seriesIndex, dataIndex, x, y, w: d, h: d });
+
+	it('returns the disc under the cursor', () => {
+		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
+		tree.add(hit(1, 0, 10, 10, 6));
+		tree.add(hit(2, 3, 50, 50, 6));
+
+		expect(resolveHit(tree, 13, 13, 0)).toMatchObject({
+			seriesIndex: 1,
+			dataIndex: 0,
+		});
+		expect(resolveHit(tree, 52, 52, 0)).toMatchObject({
+			seriesIndex: 2,
+			dataIndex: 3,
+		});
+	});
+
+	it('is null when the cursor is off every disc', () => {
+		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
+		tree.add(hit(1, 0, 10, 10, 6));
+
+		expect(resolveHit(tree, 30, 30, 0)).toBeNull();
+	});
+
+	it('tolerance widens each disc', () => {
+		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
+		tree.add(hit(1, 0, 10, 10, 6));
+
+		expect(resolveHit(tree, 18, 13, 0)).toBeNull();
+		expect(resolveHit(tree, 18, 13, 3)).not.toBeNull();
+	});
+
+	it('prefers the disc whose centre is nearest when they overlap', () => {
+		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
+		tree.add(hit(1, 0, 10, 10, 10));
+		tree.add(hit(1, 1, 14, 10, 10));
+
+		expect(resolveHit(tree, 13, 15, 0)?.dataIndex).toBe(0);
+		expect(resolveHit(tree, 21, 15, 0)?.dataIndex).toBe(1);
+	});
+});

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/__tests__/scatterPlugin.test.ts

@@ -0,0 +1,286 @@
+import uPlot from 'uplot';
+
+import { UPlotConfigBuilder } from '../../../config/UPlotConfigBuilder';
+import {
+	applyScatterPlugin,
+	createScatterPlugin,
+	SCATTER_FACETS,
+} from '../scatterPlugin';
+
+jest.mock('lib/visualization/panels/utils/legendVisibilityUtils', () => ({
+	getStoredSeriesVisibility: jest.fn(),
+}));
+
+/** jsdom has no Path2D; the builder only needs something that takes the calls. */
+class FakePath2D {
+	moveTo = jest.fn();
+	arc = jest.fn();
+}
+
+type OrientCallback = Parameters<typeof uPlot.orient>[2];
+
+interface FakePlotArgs {
+	series: Array<{ xs: number[]; ys: number[]; sizes?: Array<number | null> }>;
+	cursor?: { left: number; top: number };
+	scaleX?: { min: number; max: number };
+	scaleY?: { min: number; max: number };
+}
+
+/**
+ * A 100×100 plot at the canvas origin with identity scales: value 10 draws at
+ * pixel 10 on x, and at 100 − 10 on y (uPlot's y grows downward).
+ */
+function createFakePlot({
+	series,
+	cursor = { left: -1, top: -1 },
+	scaleX = { min: 0, max: 100 },
+	scaleY = { min: 0, max: 100 },
+}: FakePlotArgs): uPlot {
+	const data = [
+		null,
+		...series.map((entry) =>
+			entry.sizes ? [entry.xs, entry.ys, entry.sizes] : [entry.xs, entry.ys],
+		),
+	];
+	return {
+		data,
+		series: [{}, ...series.map((_, index) => ({ label: `s${index + 1}` }))],
+		bbox: { left: 0, top: 0, width: 100, height: 100 },
+		cursor,
+		scales: { x: scaleX, y: scaleY },
+	} as unknown as uPlot;
+}
+
+/** Stands in for `uPlot.orient`: identity x, flipped y, an `arc` that records. */
+function orientWithIdentityScales(
+	u: uPlot,
+	seriesIdx: number,
+	cb: OrientCallback,
+): void {
+	const columns = (u.data as unknown as Array<number[][] | null>)[seriesIdx];
+	if (!columns) {
+		return;
+	}
+	const scaleX = (u.scales as unknown as Record<string, uPlot.Scale>).x;
+	const scaleY = (u.scales as unknown as Record<string, uPlot.Scale>).y;
+	const valToPosX = (value: number): number => value;
+	const valToPosY = (value: number): number => 100 - value;
+	// Real uPlot's `arc` helper forwards to the path; the test counts those calls.
+	const arc = (path: FakePath2D, ...args: number[]): void => {
+		path.arc(...args);
+	};
+	cb(
+		u.series[seriesIdx],
+		columns[0],
+		columns[1],
+		scaleX,
+		scaleY,
+		valToPosX as unknown as uPlot.ValToPos,
+		valToPosY as unknown as uPlot.ValToPos,
+		0,
+		0,
+		100,
+		100,
+		jest.fn() as never,
+		jest.fn() as never,
+		jest.fn() as never,
+		arc as never,
+		jest.fn() as never,
+	);
+}
+
+describe('createScatterPlugin', () => {
+	beforeAll(() => {
+		(globalThis as { Path2D?: unknown }).Path2D = FakePath2D;
+	});
+
+	beforeEach(() => {
+		(uPlot.orient as jest.Mock).mockImplementation(orientWithIdentityScales);
+	});
+
+	afterEach(() => {
+		(uPlot.orient as jest.Mock).mockReset();
+	});
+
+	function drawAll(
+		u: uPlot,
+		plugin: ReturnType<typeof createScatterPlugin>,
+	): void {
+		plugin.hooks.drawClear(u);
+		for (let seriesIdx = 1; seriesIdx < u.series.length; seriesIdx++) {
+			const columns = (u.data as unknown as number[][][])[seriesIdx];
+			plugin.pathBuilder(u, seriesIdx, 0, columns[0].length - 1);
+		}
+	}
+
+	/** Runs the cursor scan the way uPlot does: every data series, in order. */
+	function scan(
+		u: uPlot,
+		plugin: ReturnType<typeof createScatterPlugin>,
+	): Array<number | null> {
+		const dataIdx = plugin.cursor.dataIdx as NonNullable<uPlot.Cursor['dataIdx']>;
+		const indexes: Array<number | null> = [null];
+		for (let seriesIdx = 1; seriesIdx < u.series.length; seriesIdx++) {
+			indexes.push(dataIdx(u, seriesIdx, 0, 0));
+		}
+		return indexes;
+	}
+
+	it('returns one path that strokes and fills the same discs', () => {
+		const plugin = createScatterPlugin();
+		const u = createFakePlot({ series: [{ xs: [10, 20], ys: [10, 20] }] });
+		plugin.hooks.drawClear(u);
+
+		const paths = plugin.pathBuilder(u, 1, 0, 1) as uPlot.Series.Paths;
+
+		expect(paths.stroke).toBeInstanceOf(FakePath2D);
+		expect(paths.fill).toBe(paths.stroke);
+		expect((paths.fill as unknown as FakePath2D).arc).toHaveBeenCalledTimes(2);
+	});
+
+	it('resolves the hovered point to its own series and index', () => {
+		const plugin = createScatterPlugin({
+			pointSize: { fixed: 6, min: 4, max: 20 },
+		});
+		const u = createFakePlot({
+			series: [
+				{ xs: [10, 50], ys: [10, 50] },
+				{ xs: [80], ys: [80] },
+			],
+			// Over the second series' only point: x 80, y drawn at 100 − 80.
+			cursor: { left: 80, top: 20 },
+		});
+		drawAll(u, plugin);
+
+		expect(scan(u, plugin)).toStrictEqual([null, null, 0]);
+		expect(plugin.getHit()).toMatchObject({ seriesIndex: 2, dataIndex: 0 });
+	});
+
+	it('returns null for every series when the cursor is off the plot or off any disc', () => {
+		const plugin = createScatterPlugin();
+		const u = createFakePlot({
+			series: [{ xs: [10], ys: [10] }],
+			cursor: { left: -1, top: -1 },
+		});
+		drawAll(u, plugin);
+
+		expect(scan(u, plugin)).toStrictEqual([null, null]);
+
+		(u.cursor as { left: number; top: number }).left = 50;
+		(u.cursor as { left: number; top: number }).top = 50;
+		expect(scan(u, plugin)).toStrictEqual([null, null]);
+	});
+
+	it('skips points outside the visible scale range', () => {
+		const plugin = createScatterPlugin();
+		const u = createFakePlot({
+			series: [{ xs: [10, 500], ys: [10, 10] }],
+			cursor: { left: 10, top: 90 },
+		});
+		drawAll(u, plugin);
+
+		const paths = plugin.pathBuilder(u, 1, 0, 1) as uPlot.Series.Paths;
+		expect((paths.fill as unknown as FakePath2D).arc).toHaveBeenCalledTimes(1);
+		expect(scan(u, plugin)).toStrictEqual([null, 0]);
+	});
+
+	it('rings the hit disc, in CSS pixels, with a gap around it', () => {
+		const plugin = createScatterPlugin({
+			pointSize: { fixed: 8, min: 4, max: 20 },
+		});
+		const u = createFakePlot({
+			series: [{ xs: [10], ys: [10] }],
+			cursor: { left: 10, top: 90 },
+		});
+		drawAll(u, plugin);
+		scan(u, plugin);
+
+		const bbox = plugin.cursor.points?.bbox;
+		// The 8px disc spans 6..14; the ring sits 3px out and is 2px wide.
+		expect(bbox?.(u, 1)).toStrictEqual({
+			left: 1,
+			top: 81,
+			width: 18,
+			height: 18,
+		});
+		expect(bbox?.(u, 2)).toMatchObject({ width: 0, height: 0 });
+	});
+
+	it('snaps the ring to whole pixels without moving its centre', () => {
+		const plugin = createScatterPlugin({
+			pointSize: { fixed: 7, min: 4, max: 20 },
+		});
+		const u = createFakePlot({
+			series: [{ xs: [10], ys: [10] }],
+			cursor: { left: 10, top: 90 },
+		});
+		drawAll(u, plugin);
+		scan(u, plugin);
+
+		// The 7px disc starts at 6.5, so the ring's edge would land on 1.5.
+		const ring = plugin.cursor.points?.bbox?.(u, 1);
+		expect(ring).toMatchObject({ left: 1, width: 18 });
+		expect((ring?.left ?? 0) + (ring?.width ?? 0) / 2).toBe(10);
+	});
+
+	it('draws the hover marker as an outline in the series colour', () => {
+		const plugin = createScatterPlugin();
+		const u = {
+			series: [{}, { stroke: (): string => '#E5484D' }, { stroke: '#30A46C' }],
+		} as unknown as uPlot;
+		const points = plugin.cursor.points as {
+			fill: (u: uPlot, seriesIdx: number) => string;
+			stroke: (u: uPlot, seriesIdx: number) => string;
+			width: (u: uPlot, seriesIdx: number, size: number) => number;
+		};
+
+		expect(points.fill(u, 1)).toBe('transparent');
+		expect(points.stroke(u, 1)).toBe('#E5484D');
+		expect(points.stroke(u, 2)).toBe('#30A46C');
+		expect(points.width(u, 1, 0)).toBe(2);
+	});
+
+	it('drawClear drops cached paths on data series only', () => {
+		const plugin = createScatterPlugin();
+		const u = createFakePlot({ series: [{ xs: [1], ys: [1] }] });
+		const [xSeries, dataSeries] = u.series as Array<{ _paths?: unknown }>;
+		xSeries._paths = 'x';
+		dataSeries._paths = 'cached';
+
+		plugin.hooks.drawClear(u);
+
+		expect(xSeries._paths).toBe('x');
+		expect(dataSeries._paths).toBeNull();
+	});
+
+	it('focus distance is zero, so the hit series wins focus', () => {
+		const plugin = createScatterPlugin();
+		expect(plugin.cursor.focus?.dist?.({} as uPlot, 1, 0, 0, 0)).toBe(0);
+	});
+});
+
+describe('applyScatterPlugin', () => {
+	it('switches the builder to faceted mode and disables drag selection', () => {
+		const builder = new UPlotConfigBuilder({ id: 'scatter' });
+		const plugin = createScatterPlugin();
+
+		applyScatterPlugin(builder, plugin);
+		const config = builder.getConfig();
+
+		expect(config.mode).toBe(2);
+		expect(config.cursor?.drag).toMatchObject({
+			x: false,
+			y: false,
+			setScale: false,
+		});
+		expect(config.hooks?.drawClear).toHaveLength(1);
+		expect(config.hooks?.destroy).toHaveLength(1);
+	});
+
+	it('facets read x and y against the shared scales', () => {
+		expect(SCATTER_FACETS).toStrictEqual([
+			{ scale: 'x', auto: true },
+			{ scale: 'y', auto: true },
+		]);
+	});
+});

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/geometry.ts

@@ -0,0 +1,86 @@
+import type uPlot from 'uplot';
+
+import type { Quadtree } from '../../utils/quadtree';
+import type { ScatterHit, ScatterPointSize, ScatterSeriesData } from './types';
+
+export interface SizeDomain {
+	min: number;
+	max: number;
+}
+
+/** Size extent across all series, so equal values draw equal discs. */
+export function resolveSizeDomain(data: uPlot.AlignedData): SizeDomain | null {
+	let min = Infinity;
+	let max = -Infinity;
+	for (let seriesIndex = 1; seriesIndex < data.length; seriesIndex++) {
+		const sizes = (data[seriesIndex] as unknown as ScatterSeriesData)[2];
+		if (!sizes) {
+			continue;
+		}
+		for (const size of sizes) {
+			if (size == null || !Number.isFinite(size)) {
+				continue;
+			}
+			min = Math.min(min, size);
+			max = Math.max(max, size);
+		}
+	}
+	return min <= max ? { min, max } : null;
+}
+
+/** Area, not diameter, scales with the value. */
+export function resolvePointDiameter(
+	size: number | null | undefined,
+	domain: SizeDomain | null,
+	pointSize: ScatterPointSize,
+): number {
+	if (size == null || domain == null || !Number.isFinite(size)) {
+		return pointSize.fixed;
+	}
+	if (domain.max === domain.min) {
+		return (pointSize.min + pointSize.max) / 2;
+	}
+	const t = Math.min(
+		1,
+		Math.max(0, (size - domain.min) / (domain.max - domain.min)),
+	);
+	const minArea = pointSize.min ** 2;
+	const maxArea = pointSize.max ** 2;
+	return Math.sqrt(minArea + (maxArea - minArea) * t);
+}
+
+/** Disc whose centre is closest, within `tolerance` px; `null` if none. */
+export function resolveHit(
+	tree: Quadtree<ScatterHit>,
+	cx: number,
+	cy: number,
+	tolerance: number,
+): ScatterHit | null {
+	let best: ScatterHit | null = null;
+	let bestDistance = Infinity;
+
+	tree.get(
+		cx - tolerance,
+		cy - tolerance,
+		tolerance * 2,
+		tolerance * 2,
+		(hit) => {
+			const left = hit.x - tolerance;
+			const top = hit.y - tolerance;
+			const right = hit.x + hit.w + tolerance;
+			const bottom = hit.y + hit.h + tolerance;
+			if (cx < left || cx > right || cy < top || cy > bottom) {
+				return;
+			}
+			const dx = cx - (hit.x + hit.w / 2);
+			const dy = cy - (hit.y + hit.h / 2);
+			const distance = dx * dx + dy * dy;
+			if (distance < bestDistance) {
+				best = hit;
+				bestDistance = distance;
+			}
+		},
+	);
+
+	return best;
+}

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin.ts

@@ -0,0 +1,225 @@
+import uPlot, { Series } from 'uplot';
+
+import { DEFAULT_FOCUS_PROXIMITY_VALUE } from '../../constants';
+import { PlotMode } from '../../config/types';
+import type { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
+import { Quadtree } from '../../utils/quadtree';
+import {
+	resolveHit,
+	resolvePointDiameter,
+	resolveSizeDomain,
+	SizeDomain,
+} from './geometry';
+import {
+	DEFAULT_HOVER_TOLERANCE_PX,
+	DEFAULT_SCATTER_POINT_SIZE,
+	ScatterHit,
+	ScatterPluginOptions,
+	ScatterSeriesData,
+} from './types';
+
+export const SCATTER_FACETS: Series.Facet[] = [
+	{ scale: 'x', auto: true },
+	{ scale: 'y', auto: true },
+];
+
+const HIDDEN_BBOX: uPlot.BBox = { left: -10, top: -10, width: 0, height: 0 };
+
+const TWO_PI = 2 * Math.PI;
+
+/** CSS pixels between a hovered disc and the outline ring drawn around it. */
+const HOVER_RING_GAP_PX = 3;
+const HOVER_RING_WIDTH_PX = 2;
+
+/** uPlot ceils a cursor point's left/top but not its size; snap so the ring stays centred. */
+function snapToPixel(start: number, length: number): [number, number] {
+	const snapped = Math.floor(start);
+	return [snapped, length + (start - snapped) * 2];
+}
+
+export function getSeriesStroke(u: uPlot, seriesIdx: number): string {
+	const { stroke } = u.series[seriesIdx];
+	const color = typeof stroke === 'function' ? stroke(u, seriesIdx) : stroke;
+	return typeof color === 'string' ? color : '';
+}
+
+/** uPlot caches built paths on the series; the field is internal to it. */
+type SeriesWithPaths = Series & { _paths?: Series.Paths | null };
+
+export interface ScatterPlugin {
+	pathBuilder: Series.PathBuilder;
+	/** Hover by disc rather than by nearest x: mode 2 has no shared x to scan. */
+	cursor: uPlot.Cursor;
+	hooks: {
+		drawClear: (u: uPlot) => void;
+		destroy: (u: uPlot) => void;
+	};
+	getHit: () => ScatterHit | null;
+}
+
+export function createScatterPlugin({
+	pointSize = DEFAULT_SCATTER_POINT_SIZE,
+	hoverTolerance = DEFAULT_HOVER_TOLERANCE_PX,
+}: ScatterPluginOptions = {}): ScatterPlugin {
+	let tree: Quadtree<ScatterHit> | null = null;
+	let hit: ScatterHit | null = null;
+
+	// Spans every series; cached per dataset.
+	let cachedData: uPlot.AlignedData | null = null;
+	let cachedDomain: SizeDomain | null = null;
+
+	function getSizeDomain(u: uPlot): SizeDomain | null {
+		if (cachedData !== u.data) {
+			cachedDomain = resolveSizeDomain(u.data);
+			cachedData = u.data;
+		}
+		return cachedDomain;
+	}
+
+	const pathBuilder: Series.PathBuilder = (u, seriesIdx, idx0, idx1) => {
+		const path = new Path2D();
+		const sizes = (u.data[seriesIdx] as unknown as ScatterSeriesData)[2];
+		const domain = getSizeDomain(u);
+		const { pxRatio } = uPlot;
+
+		uPlot.orient(
+			u,
+			seriesIdx,
+			(
+				_series,
+				dataX,
+				dataY,
+				scaleX,
+				scaleY,
+				valToPosX,
+				valToPosY,
+				xOff,
+				yOff,
+				xDim,
+				yDim,
+				_moveTo,
+				_lineTo,
+				_rect,
+				arc,
+			) => {
+				const xMin = scaleX.min ?? -Infinity;
+				const xMax = scaleX.max ?? Infinity;
+				const yMin = scaleY.min ?? -Infinity;
+				const yMax = scaleY.max ?? Infinity;
+
+				for (let i = idx0; i <= idx1; i++) {
+					const x = dataX[i];
+					const y = dataY[i];
+					if (
+						x == null ||
+						y == null ||
+						x < xMin ||
+						x > xMax ||
+						y < yMin ||
+						y > yMax
+					) {
+						continue;
+					}
+
+					const diameter =
+						resolvePointDiameter(sizes?.[i], domain, pointSize) * pxRatio;
+					const radius = diameter / 2;
+					const cx = valToPosX(x, scaleX, xDim, xOff);
+					const cy = valToPosY(y, scaleY, yDim, yOff);
+
+					path.moveTo(cx + radius, cy);
+					arc(path, cx, cy, radius, 0, TWO_PI);
+
+					tree?.add({
+						x: cx - radius - u.bbox.left,
+						y: cy - radius - u.bbox.top,
+						w: diameter,
+						h: diameter,
+						seriesIndex: seriesIdx,
+						dataIndex: i,
+					});
+				}
+			},
+		);
+
+		return { stroke: path, fill: path, clip: null };
+	};
+
+	const cursor: uPlot.Cursor = {
+		// Selection would set the dashboard time range; neither axis is time here.
+		drag: { x: false, y: false, setScale: false },
+		dataIdx: (u, seriesIdx): number | null => {
+			// uPlot asks series 1..n in order on every cursor move; resolve once.
+			if (seriesIdx === 1) {
+				const { left = -1, top = -1 } = u.cursor;
+				const { pxRatio } = uPlot;
+				hit =
+					tree && left >= 0 && top >= 0
+						? resolveHit(
+								tree,
+								left * pxRatio,
+								top * pxRatio,
+								hoverTolerance * pxRatio,
+							)
+						: null;
+			}
+			return hit?.seriesIndex === seriesIdx ? hit.dataIndex : null;
+		},
+		points: {
+			bbox: (_u, seriesIdx): uPlot.BBox => {
+				if (hit?.seriesIndex !== seriesIdx) {
+					return HIDDEN_BBOX;
+				}
+				const { pxRatio } = uPlot;
+				const inset = HOVER_RING_GAP_PX + HOVER_RING_WIDTH_PX;
+				const [left, width] = snapToPixel(
+					hit.x / pxRatio - inset,
+					hit.w / pxRatio + inset * 2,
+				);
+				const [top, height] = snapToPixel(
+					hit.y / pxRatio - inset,
+					hit.h / pxRatio + inset * 2,
+				);
+				return { left, top, width, height };
+			},
+			fill: (): string => 'transparent',
+			stroke: getSeriesStroke,
+			width: (): number => HOVER_RING_WIDTH_PX,
+		},
+		// uPlot only measures series that returned a data index, i.e. the hit one.
+		focus: { prox: DEFAULT_FOCUS_PROXIMITY_VALUE, dist: (): number => 0 },
+	};
+
+	return {
+		pathBuilder,
+		cursor,
+		hooks: {
+			drawClear: (u: uPlot): void => {
+				tree = new Quadtree<ScatterHit>(0, 0, u.bbox.width, u.bbox.height);
+				// The tree holds only what the path builder drew, so force a rebuild.
+				u.series.forEach((series, index) => {
+					if (index > 0) {
+						(series as SeriesWithPaths)._paths = null;
+					}
+				});
+			},
+			destroy: (): void => {
+				tree = null;
+				hit = null;
+				cachedData = null;
+				cachedDomain = null;
+			},
+		},
+		getHit: (): ScatterHit | null => hit,
+	};
+}
+
+export function applyScatterPlugin(
+	builder: UPlotConfigBuilder,
+	plugin: ScatterPlugin,
+): void {
+	builder.setMode(PlotMode.Faceted);
+	builder.setCursor(plugin.cursor);
+	builder.addHook('drawClear', plugin.hooks.drawClear);
+	builder.addHook('destroy', plugin.hooks.destroy);
+}

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/types.ts

@@ -0,0 +1,54 @@
+import type { QuadtreeRect } from '../../utils/quadtree';
+
+/** Diameters in CSS pixels. `min`/`max` bound the area scale when a size column is mapped. */
+export interface ScatterPointSize {
+	fixed: number;
+	min: number;
+	max: number;
+}
+
+export const DEFAULT_SCATTER_POINT_SIZE: ScatterPointSize = {
+	fixed: 6,
+	min: 4,
+	max: 24,
+};
+
+/** CSS pixels around a point's disc that still register as a hover. */
+export const DEFAULT_HOVER_TOLERANCE_PX = 3;
+
+export interface ScatterPluginOptions {
+	pointSize?: ScatterPointSize;
+	hoverTolerance?: number;
+}
+
+/** Parallel columns; a `null` size draws at `fixed`. */
+export type ScatterSeriesData = [
+	xs: number[],
+	ys: number[],
+	sizes?: Array<number | null>,
+];
+
+/** Mode-2 data: series 0 is uPlot's x placeholder and carries nothing. */
+export type ScatterChartData = [null, ...ScatterSeriesData[]];
+
+/** A drawn point's disc, in canvas pixels relative to the plot area. */
+export interface ScatterHit extends QuadtreeRect {
+	seriesIndex: number;
+	dataIndex: number;
+}
+
+export interface ScatterChannel {
+	label: string;
+	unit?: string;
+}
+
+export interface ScatterChannels {
+	x: ScatterChannel;
+	y: ScatterChannel;
+	size?: ScatterChannel;
+}
+
+export interface ScatterPointLabel {
+	key: string;
+	value: string;
+}

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/__tests__/buildClickData.test.ts

@@ -0,0 +1,52 @@
+import type uPlot from 'uplot';
+
+import { buildClickData } from '../utils';
+
+jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
+	getFocusedSeriesAtPosition: jest.fn(() => ({ seriesIndex: 1 })),
+}));
+
+const event = {
+	offsetX: 10,
+	offsetY: 20,
+	clientX: 110,
+	clientY: 220,
+} as MouseEvent;
+
+describe('buildClickData', () => {
+	it('skips the x-index lookups on a faceted plot, which has no shared x series', () => {
+		const posToIdx = jest.fn(() => {
+			throw new Error('faceted data[0] is null');
+		});
+		const plot = {
+			data: [null],
+			posToVal: (pos: number): number => pos * 2,
+			posToIdx,
+		} as unknown as uPlot;
+
+		expect(buildClickData(event, plot)).toStrictEqual({
+			xValue: 20,
+			yValue: 40,
+			focusedSeries: null,
+			clickedDataTimestamp: 20,
+			mouseX: 10,
+			mouseY: 20,
+			absoluteMouseX: 110,
+			absoluteMouseY: 220,
+		});
+		expect(posToIdx).not.toHaveBeenCalled();
+	});
+
+	it('resolves the focused series and clicked timestamp on an aligned plot', () => {
+		const plot = {
+			data: [[100, 200, 300]],
+			posToVal: (pos: number): number => pos,
+			posToIdx: (): number => 1,
+		} as unknown as uPlot;
+
+		expect(buildClickData(event, plot)).toMatchObject({
+			focusedSeries: { seriesIndex: 1 },
+			clickedDataTimestamp: 200,
+		});
+	});
+});

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/utils.ts

@@ -174,6 +174,24 @@ export function createLayoutObserver(
 export function buildClickData(event: MouseEvent, plot: uPlot): ChartClickData {
 	const xValue = plot.posToVal(event.offsetX, 'x');
 	const yValue = plot.posToVal(event.offsetY, 'y');
+	const pointer = {
+		mouseX: event.offsetX,
+		mouseY: event.offsetY,
+		absoluteMouseX: event.clientX,
+		absoluteMouseY: event.clientY,
+	};
+
+	// Faceted (scatter): no shared x, so `posToIdx` would throw.
+	if (plot.data[0] == null) {
+		return {
+			xValue,
+			yValue,
+			focusedSeries: null,
+			clickedDataTimestamp: xValue,
+			...pointer,
+		};
+	}
+
 	const focusedSeries = getFocusedSeriesAtPosition(event, plot);
 
 	const dataIndex = plot.posToIdx(event.offsetX);
@@ -193,9 +211,6 @@ export function buildClickData(event: MouseEvent, plot: uPlot): ChartClickData {
 		yValue,
 		focusedSeries,
 		clickedDataTimestamp,
-		mouseX: event.offsetX,
-		mouseY: event.offsetY,
-		absoluteMouseX: event.clientX,
-		absoluteMouseY: event.clientY,
+		...pointer,
 	};
 }

frontend/src/lib/uPlotV2/utils/__tests__/logGridSplits.test.ts

@@ -0,0 +1,59 @@
+import type uPlot from 'uplot';
+
+import { logScaleSplits, spacedLogLabels } from '../logGridSplits';
+
+describe('logScaleSplits', () => {
+	const splitsFor = (min: number, max: number): number[] =>
+		(
+			logScaleSplits as (
+				u: uPlot,
+				axisIdx: number,
+				min: number,
+				max: number,
+			) => number[]
+		)({} as uPlot, 0, min, max);
+
+	it('splits at 1, 2 and 5 × 10ⁿ inside an unsnapped range', () => {
+		expect(splitsFor(10.6, 990)).toStrictEqual([20, 50, 100, 200, 500]);
+	});
+
+	it('includes the ends when they fall on a split', () => {
+		expect(splitsFor(0.1, 10)).toStrictEqual([0.1, 0.2, 0.5, 1, 2, 5, 10]);
+	});
+
+	it('is empty for a range a log scale cannot hold', () => {
+		expect(splitsFor(0, 10)).toStrictEqual([]);
+		expect(splitsFor(5, 5)).toStrictEqual([]);
+	});
+});
+
+describe('spacedLogLabels', () => {
+	// 100px per decade.
+	const plot = {
+		axes: [{ scale: 'x' }],
+		valToPos: (value: number): number => Math.log10(value) * 100,
+	} as unknown as uPlot;
+	const label = (splits: number[], space: number): (number | null)[] =>
+		spacedLogLabels(plot, splits, 0, space, 0) as (number | null)[];
+
+	it('always labels the powers of ten', () => {
+		expect(label([10, 20, 50, 100], 200)).toStrictEqual([10, null, null, 100]);
+	});
+
+	it('adds a 2 or 5 that clears the labels already kept', () => {
+		// 20 is 30px from 10; 50 is 70px from 10 and 30px from 100.
+		expect(label([10, 20, 50, 100], 25)).toStrictEqual([10, 20, 50, 100]);
+		expect(label([10, 20, 50, 100], 40)).toStrictEqual([10, null, null, 100]);
+	});
+
+	it('labels both ends of a range spanning under a decade', () => {
+		// 100 sits at 200px; 20 (130px) and 500 (270px) clear it, 50 and 200 do not.
+		expect(label([20, 50, 100, 200, 500], 60)).toStrictEqual([
+			20,
+			null,
+			100,
+			null,
+			500,
+		]);
+	});
+});

frontend/src/lib/uPlotV2/utils/__tests__/quadtree.test.ts

@@ -0,0 +1,62 @@
+import { Quadtree, QuadtreeRect } from '../quadtree';
+
+interface Item extends QuadtreeRect {
+	id: number;
+}
+
+function collect(
+	tree: Quadtree<Item>,
+	x: number,
+	y: number,
+	w: number,
+	h: number,
+): Set<number> {
+	const ids = new Set<number>();
+	tree.get(x, y, w, h, (item) => ids.add(item.id));
+	return ids;
+}
+
+describe('Quadtree', () => {
+	it('returns items in the queried region and not those far from it', () => {
+		const tree = new Quadtree<Item>(0, 0, 100, 100);
+		tree.add({ id: 1, x: 10, y: 10, w: 5, h: 5 });
+		tree.add({ id: 2, x: 80, y: 80, w: 5, h: 5 });
+
+		// Below the split threshold every item is visited; callers refine the hit.
+		expect(collect(tree, 9, 9, 8, 8)).toStrictEqual(new Set([1, 2]));
+	});
+
+	it('splits past the object limit and still finds every item', () => {
+		const tree = new Quadtree<Item>(0, 0, 100, 100);
+		const total = 50;
+		for (let id = 0; id < total; id++) {
+			tree.add({ id, x: (id % 10) * 10, y: Math.floor(id / 10) * 10, w: 4, h: 4 });
+		}
+
+		expect(collect(tree, 0, 0, 100, 100).size).toBe(total);
+	});
+
+	it('after a split, a query in one quadrant skips items confined to another', () => {
+		const tree = new Quadtree<Item>(0, 0, 100, 100);
+		for (let id = 0; id < 20; id++) {
+			// All in the north-west quadrant.
+			tree.add({ id, x: 1 + id, y: 1, w: 2, h: 2 });
+		}
+		tree.add({ id: 99, x: 90, y: 90, w: 2, h: 2 });
+
+		const northWest = collect(tree, 0, 0, 10, 10);
+		expect(northWest.has(99)).toBe(false);
+		expect(collect(tree, 85, 85, 10, 10).has(99)).toBe(true);
+	});
+
+	it('reports an item straddling the midline from either side', () => {
+		const tree = new Quadtree<Item>(0, 0, 100, 100);
+		for (let id = 0; id < 20; id++) {
+			tree.add({ id, x: 1, y: 1 + id, w: 2, h: 2 });
+		}
+		tree.add({ id: 99, x: 48, y: 48, w: 4, h: 4 });
+
+		expect(collect(tree, 40, 40, 5, 5).has(99)).toBe(true);
+		expect(collect(tree, 55, 55, 5, 5).has(99)).toBe(true);
+	});
+});

frontend/src/lib/uPlotV2/utils/__tests__/scale.test.ts

@@ -195,3 +195,22 @@ describe('scale utils', () => {
 		});
 	});
 });
+
+describe('symmetric log scale', () => {
+	it('maps to uPlot arcsinh with the given linear threshold', () => {
+		expect(
+			scaleUtils.getDistributionConfig({
+				time: false,
+				distr: DistributionType.SymmetricLog,
+				asinhThreshold: 0.01,
+			}),
+		).toStrictEqual({ distr: 4, log: 10, asinh: 0.01 });
+
+		expect(
+			scaleUtils.getDistributionConfig({
+				time: false,
+				distr: DistributionType.SymmetricLog,
+			}).asinh,
+		).toBe(scaleUtils.DEFAULT_ASINH_THRESHOLD);
+	});
+});

frontend/src/lib/uPlotV2/utils/logGridSplits.ts

@@ -0,0 +1,61 @@
+import type uPlot from 'uplot';
+
+const DECADE_TOLERANCE = 1e-9;
+
+function isDecade(value: number): boolean {
+	if (value === 0) {
+		return true;
+	}
+	const exponent = Math.log10(Math.abs(value));
+	return Math.abs(exponent - Math.round(exponent)) < DECADE_TOLERANCE;
+}
+
+const LOG_SPLIT_MULTIPLES = [1, 2, 5];
+
+/** 1, 2, 5 × 10ⁿ in range; uPlot's log splits step from an unsnapped min (10.79, 21.58…). */
+export const logScaleSplits: uPlot.Axis.Splits = (_u, _axisIdx, min, max) => {
+	if (!(min > 0) || !(max > min)) {
+		return [];
+	}
+	const splits: number[] = [];
+	for (
+		let exponent = Math.floor(Math.log10(min));
+		exponent <= Math.ceil(Math.log10(max));
+		exponent++
+	) {
+		LOG_SPLIT_MULTIPLES.forEach((multiple) => {
+			// Rounded through toPrecision so 0.1 × 3 noise can't fall outside [min, max].
+			const split = Number((multiple * 10 ** exponent).toPrecision(12));
+			if (split >= min && split <= max) {
+				splits.push(split);
+			}
+		});
+	}
+	return splits;
+};
+
+/** Labels every decade, plus any 2 or 5 at least `space` px clear. */
+export const spacedLogLabels: uPlot.Axis.Filter = (
+	u,
+	splits,
+	axisIdx,
+	space,
+) => {
+	const scaleKey = u.axes[axisIdx]?.scale ?? 'x';
+	const positions = splits.map((split) =>
+		split == null ? null : u.valToPos(split, scaleKey),
+	);
+	const kept = splits.map((split) => split != null && isDecade(split));
+	const isClear = (index: number): boolean =>
+		kept.every(
+			(isKept, other) =>
+				!isKept ||
+				Math.abs((positions[other] ?? 0) - (positions[index] ?? 0)) >= space,
+		);
+	splits.forEach((split, index) => {
+		if (split != null && !kept[index] && isClear(index)) {
+			kept[index] = true;
+		}
+	});
+	return splits.map((split, index) => (kept[index] ? split : null));
+};

frontend/src/lib/uPlotV2/utils/quadtree.ts

@@ -0,0 +1,100 @@
+export interface QuadtreeRect {
+	x: number;
+	y: number;
+	w: number;
+	h: number;
+}
+
+const MAX_OBJECTS = 10;
+const MAX_LEVELS = 4;
+
+/** Rect index for cursor hit-testing; items straddling quadrants are stored in each, so `get` may repeat them. */
+export class Quadtree<T extends QuadtreeRect = QuadtreeRect> {
+	private items: T[] = [];
+	private quadrants: Quadtree<T>[] | null = null;
+
+	constructor(
+		private readonly x: number,
+		private readonly y: number,
+		private readonly w: number,
+		private readonly h: number,
+		private readonly level = 0,
+	) {}
+
+	add(item: T): void {
+		if (this.quadrants) {
+			this.forEachQuadrant(item, (quadrant) => quadrant.add(item));
+			return;
+		}
+
+		this.items.push(item);
+
+		if (this.items.length > MAX_OBJECTS && this.level < MAX_LEVELS) {
+			this.split();
+			const items = this.items;
+			this.items = [];
+			for (const existing of items) {
+				this.forEachQuadrant(existing, (quadrant) => quadrant.add(existing));
+			}
+		}
+	}
+
+	/** Visits every item whose quadrant overlaps the rectangle; callers refine the test. */
+	get(
+		x: number,
+		y: number,
+		w: number,
+		h: number,
+		visit: (item: T) => void,
+	): void {
+		for (const item of this.items) {
+			visit(item);
+		}
+		if (this.quadrants) {
+			this.forEachQuadrant({ x, y, w, h }, (quadrant) =>
+				quadrant.get(x, y, w, h, visit),
+			);
+		}
+	}
+
+	private split(): void {
+		const w = this.w / 2;
+		const h = this.h / 2;
+		const level = this.level + 1;
+		// North-east, north-west, south-west, south-east.
+		this.quadrants = [
+			new Quadtree<T>(this.x + w, this.y, w, h, level),
+			new Quadtree<T>(this.x, this.y, w, h, level),
+			new Quadtree<T>(this.x, this.y + h, w, h, level),
+			new Quadtree<T>(this.x + w, this.y + h, w, h, level),
+		];
+	}
+
+	private forEachQuadrant(
+		rect: QuadtreeRect,
+		visit: (quadrant: Quadtree<T>) => void,
+	): void {
+		if (!this.quadrants) {
+			return;
+		}
+		const midX = this.x + this.w / 2;
+		const midY = this.y + this.h / 2;
+		const startsNorth = rect.y < midY;
+		const startsWest = rect.x < midX;
+		const endsEast = rect.x + rect.w > midX;
+		const endsSouth = rect.y + rect.h > midY;
+
+		if (startsNorth && endsEast) {
+			visit(this.quadrants[0]);
+		}
+		if (startsWest && startsNorth) {
+			visit(this.quadrants[1]);
+		}
+		if (startsWest && endsSouth) {
+			visit(this.quadrants[2]);
+		}
+		if (endsEast && endsSouth) {
+			visit(this.quadrants[3]);
+		}
+	}
+}

frontend/src/lib/uPlotV2/utils/scale.ts

@@ -58,18 +58,23 @@ function normalizeLogLimit(
 	return logBase ** exp;
 }
 
+export const DEFAULT_ASINH_THRESHOLD = 1;
+
 /**
- * Returns uPlot scale distribution options for the Y axis.
- * Time (X) scale gets no distr/log; Y scale gets distr 1 (linear) or 3 (log) and log base 2 or 10.
+ * Returns uPlot scale distribution options for a value axis.
+ * Time scales get no distr/log; value scales get distr 1 (linear), 3 (log) or
+ * 4 (arcsinh, uPlot's symmetric log) and log base 2 or 10.
  */
 export function getDistributionConfig({
 	time,
 	distr,
 	logBase,
+	asinhThreshold,
 }: {
 	time: ScaleProps['time'];
 	distr?: DistributionType;
 	logBase?: number;
+	asinhThreshold?: number;
 }): Partial<Scale> {
 	if (time) {
 		return {};
@@ -77,6 +82,14 @@ export function getDistributionConfig({
 
 	const resolvedLogBase = (logBase ?? 10) === 2 ? 2 : 10;
 
+	if (distr === DistributionType.SymmetricLog) {
+		return {
+			distr: 4,
+			log: resolvedLogBase,
+			asinh: asinhThreshold ?? DEFAULT_ASINH_THRESHOLD,
+		};
+	}
+
 	return {
 		distr: distr === DistributionType.Logarithmic ? 3 : 1,
 		log: resolvedLogBase,

frontend/src/lib/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -37,6 +37,7 @@ export default function ChartWrapper({
 	syncKey,
 	syncFilterMode,
 	onDestroy = noop,
+	plotRef,
 	children,
 	layoutChildren,
 	yAxisUnit,
@@ -123,6 +124,7 @@ export default function ChartWrapper({
 						height={chartHeight}
 						plotRef={(plot): void => {
 							plotInstanceRef.current = plot;
+							plotRef?.(plot);
 						}}
 						onDestroy={(plot: uPlot): void => {
 							plotInstanceRef.current = null;

frontend/src/lib/visualization/charts/ChartWrapper/__tests__/ChartWrapper.test.tsx

@@ -0,0 +1,45 @@
+import { render } from 'tests/test-utils';
+import type uPlot from 'uplot';
+
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+
+import ChartWrapper from '../ChartWrapper';
+
+const FAKE_PLOT = { id: 'plot' } as unknown as uPlot;
+
+jest.mock('lib/uPlotV2/components/UPlotChart/UPlotChart', () => ({
+	__esModule: true,
+	default: ({ plotRef }: { plotRef?: (plot: uPlot | null) => void }): null => {
+		plotRef?.(FAKE_PLOT);
+		return null;
+	},
+}));
+
+window.ResizeObserver =
+	window.ResizeObserver ||
+	jest.fn().mockImplementation(() => ({
+		disconnect: jest.fn(),
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+	}));
+
+describe('ChartWrapper', () => {
+	it('hands the plot instance to the caller', () => {
+		const plotRef = jest.fn();
+		render(
+			<ChartWrapper
+				config={new UPlotConfigBuilder({ id: 'chart' })}
+				data={[[1], [2]]}
+				width={400}
+				height={300}
+				legendConfig={{ position: LegendPosition.BOTTOM }}
+				showLegend={false}
+				showTooltip={false}
+				plotRef={plotRef}
+			/>,
+		);
+
+		expect(plotRef).toHaveBeenCalledWith(FAKE_PLOT);
+	});
+});

frontend/src/lib/visualization/charts/GeoMap/GeoMap.module.scss

@@ -0,0 +1,35 @@
+// Same theme hooks as the SVG chart; canvas reads them through readPalette().
+.wrapper {
+	--geo-no-data: var(--l3-background);
+	--geo-context: var(--l2-background);
+	--geo-border: var(--l1-background);
+
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.wrapper[data-legend-position='right'] {
+	flex-direction: row;
+	gap: 12px;
+}
+
+.mapArea {
+	position: relative;
+	flex: 1 1 auto;
+	min-width: 0;
+	min-height: 0;
+}
+
+.canvas {
+	position: absolute;
+	inset: 0;
+}
+
+.tooltip {
+	position: absolute;
+	pointer-events: none;
+	z-index: 9999;
+}

frontend/src/lib/visualization/charts/GeoMap/GeoMap.tsx

@@ -0,0 +1,247 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+
+import CountryTooltip from './components/CountryTooltip/CountryTooltip';
+import MapLegend from './components/MapLegend/MapLegend';
+import MapStatus from './components/MapStatus/MapStatus';
+import ZoomControls from './components/ZoomControls/ZoomControls';
+import { useGeoMapScales } from './hooks/useGeoMapScales';
+import { useGeoMapShapes } from './hooks/useGeoMapShapes';
+import { formatCoordinates } from './utils/coordinates';
+import { findShapeAt } from './utils/olFeatures';
+import { pointAsDatum } from './utils/scales';
+import { GeoMapProps } from './types';
+import { useOlLayers } from './hooks/useOlLayers';
+import { useOlMap } from './hooks/useOlMap';
+import { useOlPointer } from './hooks/useOlPointer';
+import { useOlPointsLayer } from './hooks/useOlPointsLayer';
+import { useOlView } from './hooks/useOlView';
+import { OlPalette, readPalette } from './utils/olStyles';
+
+import styles from './GeoMap.module.scss';
+
+export default function GeoMap({
+	data,
+	points,
+	view,
+	country,
+	layer,
+	colors,
+	bubbleRadius,
+	formatValue,
+	valueLabel,
+	sizeMetric,
+	showLabels = true,
+	colorKeys,
+	legendPosition = LegendPosition.BOTTOM,
+	isDarkMode,
+	onSelect,
+	renderTooltipFooter,
+}: GeoMapProps): JSX.Element {
+	const wrapperRef = useRef<HTMLDivElement>(null);
+	const mapAreaRef = useRef<HTMLDivElement>(null);
+	const canvasRef = useRef<HTMLDivElement>(null);
+	const { width, height } = useResizeObserver(mapAreaRef, 100);
+	const [palette, setPalette] = useState<OlPalette | null>(null);
+
+	const {
+		tooltipOpen,
+		tooltipLeft,
+		tooltipTop,
+		tooltipData,
+		showTooltip,
+		hideTooltip,
+	} = useTooltip<string>();
+	const { containerRef, TooltipInPortal } = useTooltipInPortal({
+		scroll: true,
+		detectBounds: true,
+	});
+
+	// On the points layer the scales colour and size points, keyed by point id.
+	const scaleData = useMemo(
+		() => (layer === 'points' ? (points ?? []).map(pointAsDatum) : data),
+		[layer, points, data],
+	);
+	const { resolver, valueByCode, sizeByCode, radiusFor, fillFor } =
+		useGeoMapScales(
+			scaleData,
+			colors,
+			bubbleRadius,
+			isDarkMode,
+			Boolean(sizeMetric),
+		);
+	const maxSize = useMemo(
+		() => [...sizeByCode.values()].reduce((max, size) => Math.max(max, size), 0),
+		[sizeByCode],
+	);
+	const { shapes, status, retry } = useGeoMapShapes(view, country);
+	const handle = useOlMap(canvasRef);
+	const pointsLayer = useOlPointsLayer(handle, layer === 'points');
+
+	useEffect(() => {
+		if (wrapperRef.current) {
+			setPalette(readPalette(wrapperRef.current));
+		}
+	}, [isDarkMode]);
+
+	const handleHover = useCallback(
+		(code: string | null, clientX: number, clientY: number): void => {
+			const rect = mapAreaRef.current?.getBoundingClientRect();
+			if (!code || !rect || !valueByCode.has(code)) {
+				hideTooltip();
+				return;
+			}
+			showTooltip({
+				tooltipData: code,
+				tooltipLeft: clientX - rect.left,
+				tooltipTop: clientY - rect.top,
+			});
+		},
+		[valueByCode, showTooltip, hideTooltip],
+	);
+
+	const pointById = useMemo(
+		() =>
+			new Map(
+				(layer === 'points' ? (points ?? []) : []).map((point) => [
+					point.id,
+					point,
+				]),
+			),
+		[layer, points],
+	);
+
+	const handleSelect = useCallback(
+		(code: string, clientX: number, clientY: number): void => {
+			const datum = valueByCode.get(code);
+			if (datum && onSelect) {
+				hideTooltip();
+				onSelect({ datum, point: pointById.get(code), clientX, clientY });
+			}
+		},
+		[valueByCode, pointById, onSelect, hideTooltip],
+	);
+
+	const hovered =
+		tooltipOpen && tooltipData ? valueByCode.get(tooltipData) : undefined;
+	const hoveredPoint = hovered ? pointById.get(hovered.code) : undefined;
+	// A point without a label is named by the shape it falls in.
+	const hoveredPlace = useMemo(() => {
+		if (!hoveredPoint || hoveredPoint.label || !handle || !shapes) {
+			return undefined;
+		}
+		const code = findShapeAt(
+			[handle.layers.members.getSource(), handle.layers.context.getSource()],
+			[hoveredPoint.lon, hoveredPoint.lat],
+		);
+		return code ? shapes.nameOf(code) : undefined;
+	}, [hoveredPoint, handle, shapes]);
+
+	useOlLayers({
+		handle,
+		shapes,
+		data,
+		points,
+		pointsLayer,
+		layer,
+		palette,
+		fillFor,
+		sizeByCode,
+		radiusFor,
+		hasSizeMetric: Boolean(sizeMetric),
+		showLabels,
+		hoveredCode: hovered?.code ?? null,
+	});
+	const zoom = useOlView(
+		handle,
+		view,
+		country,
+		data,
+		width,
+		height,
+		layer === 'points' ? points : undefined,
+	);
+	useOlPointer(handle, handleHover, handleSelect, pointsLayer.layer);
+
+	return (
+		<div
+			className={styles.wrapper}
+			ref={wrapperRef}
+			data-geo-map
+			data-legend-position={legendPosition}
+			data-testid="geo-map"
+		>
+			<div
+				className={styles.mapArea}
+				ref={(node): void => {
+					(mapAreaRef as React.MutableRefObject<HTMLDivElement | null>).current =
+						node;
+					containerRef(node);
+				}}
+			>
+				<div
+					ref={canvasRef}
+					className={styles.canvas}
+					data-testid="geo-map-canvas"
+				/>
+				{status !== 'ready' && <MapStatus status={status} onRetry={retry} />}
+				{status === 'ready' && (
+					<ZoomControls
+						canZoomIn={zoom.canZoomIn}
+						canZoomOut={zoom.canZoomOut}
+						onZoomIn={zoom.zoomIn}
+						onZoomOut={zoom.zoomOut}
+						onReset={zoom.reset}
+					/>
+				)}
+				{hovered && (
+					<TooltipInPortal
+						left={tooltipLeft}
+						top={tooltipTop}
+						className={styles.tooltip}
+						unstyled
+						applyPositionStyle
+					>
+						<CountryTooltip
+							datum={hovered}
+							name={
+								hoveredPoint
+									? hoveredPoint.label ||
+										hoveredPlace ||
+										formatCoordinates(hoveredPoint.lat, hoveredPoint.lon)
+									: (shapes?.nameOf(hovered.code) ?? hovered.code)
+							}
+							place={
+								hoveredPoint && formatCoordinates(hoveredPoint.lat, hoveredPoint.lon)
+							}
+							color={fillFor(hovered.code) ?? resolver.colorFor(hovered.value)}
+							formatValue={formatValue}
+							valueLabel={valueLabel}
+							sizeMetric={sizeMetric}
+							footer={renderTooltipFooter?.()}
+						/>
+					</TooltipInPortal>
+				)}
+			</div>
+			<MapLegend
+				resolver={resolver}
+				scale={colors.scale}
+				formatValue={formatValue}
+				markerValue={hovered?.value ?? null}
+				valueLabel={valueLabel}
+				colorKeys={colorKeys}
+				position={legendPosition}
+				size={
+					sizeMetric && {
+						label: sizeMetric.label,
+						maxSize,
+						radiusFor,
+						formatValue: sizeMetric.formatValue,
+					}
+				}
+			/>
+		</div>
+	);
+}

frontend/src/lib/visualization/charts/GeoMap/assets/subdivisions/AD.json

@@ -0,0 +1 @@
+{"type":"Topology","bbox":[1.406456,42.428677,1.765091,42.649362],"transform":{"scale":[0.00003586708670867087,0.000022070707070707384],"translate":[1.406456,42.428677]},"objects":{"subdivisions":{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0,1,2]],"id":"AD-02","properties":{"code":"AD-02","name":"Canillo","label":[1.605,42.584]}},{"type":"Polygon","arcs":[[3,4,5,-2]],"id":"AD-03","properties":{"code":"AD-03","name":"Encamp","label":[1.644,42.538]}},{"type":"Polygon","arcs":[[6,-6,7,8,9]],"id":"AD-04","properties":{"code":"AD-04","name":"La Massana","label":[1.471,42.55]}},{"type":"Polygon","arcs":[[-3,-7,10]],"id":"AD-05","properties":{"code":"AD-05","name":"Ordino","label":[1.524,42.604]}},{"type":"Polygon","arcs":[[-9,11,12,13]],"id":"AD-06","properties":{"code":"AD-06","name":"Sant Julià de Lòria","label":[1.48,42.451]}},{"type":"Polygon","arcs":[[14,-12,-8]],"id":"AD-07","properties":{"code":"AD-07","name":"Andorra la Vella","label":[1.511,42.513]}},{"type":"Polygon","arcs":[[15,-13,-15,-5]],"id":"AD-08","properties":{"code":"AD-08","name":"Escaldes-Engordany","label":[1.594,42.495]}}]}},"arcs":[[[5322,8756],[306,-172],[3169,-375],[-242,-920],[450,-342],[648,-241],[235,-409],[111,-194],[-700,-79],[-510,-594],[-128,-391]],[[8661,5039],[-190,223],[-269,202],[-291,168],[-103,573],[-104,404],[-394,-202],[-539,0],[-581,-101],[-663,-168],[-539,0],[-394,0],[-436,-68]],[[4158,6070],[63,539],[186,438],[291,337],[373,135],[290,135],[0,404],[-39,698]],[[8661,5039],[-181,-551],[-100,-1130],[-266,-377],[-311,-175],[-337,-5],[-331,146],[-72,140],[-78,38]],[[6985,3125],[-90,553],[-352,371],[-332,202],[-580,67],[-436,-101],[-373,236],[-83,404],[-207,135],[-353,-34]],[[4179,4958],[0,641],[-21,471]],[[1253,7855],[231,-235],[311,0],[290,-67],[145,-236],[166,-573],[249,-303],[394,-135],[477,-135],[373,-67],[269,-34]],[[4179,4958],[-352,0],[-332,-168],[-394,-101],[-415,-337],[-435,-303]],[[2251,4049],[-394,-135],[-373,-236],[-271,-262]],[[1213,3416],[-95,717],[-490,524],[-628,-101],[92,516],[461,959],[3,175],[-233,190],[34,427],[156,458],[124,272],[616,302]],[[1253,7855],[430,1786],[882,-55],[818,376],[426,37],[1513,-1243]],[[2251,4049],[41,-405],[21,-269],[104,-438],[166,-202]],[[2583,2735],[477,-135],[373,-169],[518,101],[456,68],[291,-68],[-187,-404],[41,-472],[82,-551]],[[4634,1105],[-787,-123],[-156,-213],[-121,-260],[-176,-257],[-322,-215],[-228,-37],[-1688,270],[-320,286],[0,568],[-804,1508],[472,258],[159,50],[550,476]],[[4179,4958],[-186,-370],[-311,-371],[-146,-236],[-165,-370],[-229,-472],[-331,-236],[-228,-168]],[[6985,3125],[-84,-51],[-101,-141],[-302,-1223],[-893,-453],[-971,-152]]],"aliases":{},"names":{"ordino":"AD-05","parroquia d'ordino":"AD-05","canillo":"AD-02","encamp":"AD-03","parroquia d'encamp":"AD-03","la massana":"AD-04","parroquia de la massana":"AD-04","massana":"AD-04","sant julià de lòria":"AD-06","parroquia de sant julia de loria":"AD-06","sant juliã  de lã²ria":"AD-06","escaldes-engordany":"AD-08","parroquia d'escaldes-engordany":"AD-08","andorra la vella":"AD-07","parroquia d'andorra la vella":"AD-07"}}

frontend/src/lib/visualization/charts/GeoMap/assets/subdivisions/AE.json

@@ -0,0 +1 @@
+{"type":"Topology","bbox":[51.569347,22.620946,56.383155522852284,26.07341032343234],"transform":{"scale":[0.0004814289951847469,0.0003452809604392781],"translate":[51.569347,22.620946]},"objects":{"subdivisions":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","arcs":[[[0,1]]],"id":"AE-AJ","properties":{"code":"AE-AJ","name":"Ajman","label":[55.541,25.397]}},{"type":"MultiPolygon","arcs":[[[2,3,4]],[[5]],[[6]],[[7]],[[8]],[[9]],[[10]],[[11]],[[12]]],"id":"AE-AZ","properties":{"code":"AE-AZ","name":"Abu Dhabi","label":[54.082,23.524]}},{"type":"MultiPolygon","arcs":[[[13,14]],[[15,-4,16]]],"id":"AE-DU","properties":{"code":"AE-DU","name":"Dubay","label":[55.344,24.951]}},{"type":"MultiPolygon","arcs":[[[17,18,19,20,21,22,23]],[[24,25,26,27,28,29]],[[30,31,32]]],"id":"AE-FU","properties":{"code":"AE-FU","name":"Fujayrah","label":[56.222,25.475]}},{"type":"MultiPolygon","arcs":[[[33,-23,34,-31,35,-15,36,37,-26]],[[-28,38,39,40]]],"id":"AE-RK","properties":{"code":"AE-RK","name":"Ras Al Khaymah","label":[55.979,25.696]}},{"type":"MultiPolygon","arcs":[[[41,-30,42,-18]],[[-20,43]],[[44,-5,-16,45,-2,46,47,-39,-27,-38]],[[-22,48,-32,-35]]],"id":"AE-SH","properties":{"code":"AE-SH","name":"Sharjah","label":[55.779,25.172]}},{"type":"MultiPolygon","arcs":[[[49,-40,-48]]],"id":"AE-UQ","properties":{"code":"AE-UQ","name":"Umm Al Qaywayn","label":[55.722,25.522]}}]}},"arcs":[[[8008,8033],[140,190]],[[8148,8223],[291,-136],[-72,-155],[-175,12],[-184,89]],[[8788,6001],[38,-144],[-122,-246],[31,-384],[68,-246],[-107,-320],[190,-55],[178,27],[135,-403],[-397,-214],[-92,60],[-240,-9],[-395,-179],[153,-257],[16,-303],[-124,-272],[-69,-359],[-145,-240],[-113,-562],[-198,-446],[-71,-365],[13,-422],[-23,-423],[-169,-239],[-5240,898],[-92,68],[-1963,3255],[-42,143],[-8,372],[44,82],[-34,231],[103,-72],[22,-326],[79,148],[95,-159],[84,195],[49,-145],[-21,-185],[78,-509],[445,-37],[90,-70],[326,30],[243,97],[485,419],[13,137],[110,-28],[75,-131],[351,21],[225,-40],[109,80],[140,-127],[165,-1],[-9,129],[152,-71],[79,-124],[381,61],[171,-66],[129,-140],[252,64],[314,-25],[202,121],[357,118],[134,171],[136,50],[146,144],[124,-47],[132,179],[82,209],[0,169],[113,-41],[-85,160],[-170,137],[142,100],[57,-158],[143,-20],[113,259],[-42,68],[113,130],[-62,192],[138,208],[620,480]],[[7138,6803],[275,-965],[130,-121],[440,23],[537,307]],[[8520,6047],[268,-46]],[[4336,4453],[-61,39],[198,168],[242,100],[260,-266],[-92,-95],[-178,36],[-194,-54],[-175,72]],[[5446,4652],[-163,129],[51,160],[106,-143],[6,-146]],[[2088,4990],[76,85],[78,-185],[-118,-162],[-75,155],[39,107]],[[3642,4755],[-283,38],[363,217],[115,180],[63,-96],[-40,-148],[-200,-116],[-18,-75]],[[5844,5267],[-99,85],[127,156],[1,-114],[152,-136],[-181,9]],[[5603,4847],[-173,59],[102,124],[71,-183]],[[5726,5074],[-35,-171],[-62,146],[97,25]],[[1538,5556],[61,-110],[-116,-13],[55,123]],[[9559,6381],[-110,-258],[-87,-15],[61,262]],[[9423,6370],[136,11]],[[7801,7779],[257,0],[316,-309],[58,-104],[60,-317],[-79,-161],[86,-300],[42,-367],[-21,-174]],[[7138,6803],[159,136],[449,700],[55,140]],[[9928,7742],[71,79]],[[9999,7821],[-43,-733]],[[9956,7088],[-160,30],[42,-168],[-49,-200]],[[9789,6750],[-24,-36]],[[9765,6714],[-35,110],[-186,221]],[[9544,7045],[4,482],[85,20]],[[9633,7547],[60,-45],[225,160],[10,80]],[[9745,7849],[-57,-54]],[[9688,7795],[-147,65],[25,-142],[-137,-196],[-255,21]],[[9174,7543],[-18,164],[12,144],[38,142]],[[9206,7993],[158,-109],[116,62],[-86,153],[75,140],[-49,100],[-253,-14],[-35,235],[214,188],[174,48]],[[9520,8796],[143,-128],[120,39],[126,-66],[63,-229],[-11,-296]],[[9961,8116],[-216,-267]],[[9774,6520],[-45,66]],[[9729,6586],[47,55]],[[9776,6641],[-2,-121]],[[9688,7795],[-55,-248]],[[9544,7045],[35,-379],[150,-80]],[[9774,6520],[-215,-139]],[[9423,6370],[-167,180],[-103,260]],[[9153,6810],[-52,324],[58,177],[-53,93],[68,139]],[[9206,7993],[-152,-96]],[[9054,7897],[-99,133],[-75,231],[-88,442],[-116,106]],[[8676,8809],[274,225],[283,402],[-14,81],[145,446],[177,36],[43,-170],[-27,-399],[-54,-113],[48,-174],[-55,-130],[24,-217]],[[9928,7742],[-183,107]],[[9961,8116],[38,-295]],[[9956,7088],[43,-261],[-210,-77]],[[9153,6810],[-164,-10],[-140,-138],[-85,-191],[24,-470]],[[7801,7779],[207,254]],[[8148,8223],[48,153]],[[8196,8376],[512,-417],[94,-240],[202,26],[50,152]],[[9765,6714],[11,-73]],[[8196,8376],[231,67],[64,178],[185,188]]],"aliases":{},"names":{"fujayrah":"AE-FU","emirate of fujairah":"AE-FU","al fujayrah":"AE-FU","sharjah":"AE-SH","emirate of sharjah":"AE-SH","ash shariqah":"AE-SH","ras al khaymah":"AE-RK","emirate of ras al khaimah":"AE-RK","ra's al khaymah":"AE-RK","dubay":"AE-DU","emirate of dubai":"AE-DU","dubayy":"AE-DU","abu dhabi":"AE-AZ","emirate of abu dhabi":"AE-AZ","abu zaby":"AE-AZ","umm al qaywayn":"AE-UQ","emirate of umm al quwain":"AE-UQ","ajman":"AE-AJ","emirate of ajman":"AE-AJ","`ajman":"AE-AJ"}}

frontend/src/lib/visualization/charts/GeoMap/assets/subdivisions/AG.json

@@ -0,0 +1 @@
+{"type":"Topology","bbox":[-62.34826,16.93197,-61.667592,17.727688],"transform":{"scale":[0.0000680736073607365,0.00007957975797579766],"translate":[-62.34826,16.93197]},"objects":{"subdivisions":{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0,1,2]],"id":"AG-03","properties":{"code":"AG-03","name":"Saint George","label":[-61.78,17.108]}},{"type":"Polygon","arcs":[[3,-3,4,5,6]],"id":"AG-04","properties":{"code":"AG-04","name":"Saint John","label":[-61.824,17.11]}},{"type":"Polygon","arcs":[[7,-7,8]],"id":"AG-05","properties":{"code":"AG-05","name":"Saint Mary","label":[-61.857,17.037]}},{"type":"Polygon","arcs":[[9,-9,-6,10,11]],"id":"AG-06","properties":{"code":"AG-06","name":"Saint Paul","label":[-61.767,17.035]}},{"type":"Polygon","arcs":[[12,13,-11,-5,-2]],"id":"AG-07","properties":{"code":"AG-07","name":"Saint Peter","label":[-61.74,17.094]}},{"type":"Polygon","arcs":[[14,-12,-14]],"id":"AG-08","properties":{"code":"AG-08","name":"Saint Philip","label":[-61.702,17.06]}},{"type":"Polygon","arcs":[[15]],"id":"AG-10","properties":{"code":"AG-10","name":"Barbuda","label":[-61.792,17.616]}},{"type":"Polygon","arcs":[[16]],"id":"AG-11","properties":{"code":"AG-11","name":"Redonda","label":[-62.347,16.934]}}]}},"arcs":[[[8151,2928],[187,-224],[112,-259],[244,-156]],[[8694,2289],[-81,-75],[75,-103],[15,-128],[-165,-51],[-105,-180]],[[8433,1752],[-105,39],[-210,115],[30,141],[-45,270],[-120,89],[-15,257],[210,13],[-27,252]],[[7081,1946],[-105,34],[-305,138],[162,125],[260,92],[339,83],[-119,166],[24,149],[134,131],[212,112],[468,-48]],[[8433,1752],[0,-141]],[[8433,1611],[-150,26],[-330,-77],[-120,-102]],[[7833,1458],[-75,141],[-225,-206],[60,321],[75,141],[-15,38],[-255,52],[-134,102],[-183,-101]],[[7994,947],[-202,-30],[-306,-1],[-192,35],[-469,234],[-99,115],[100,171],[64,144],[-52,122],[5,108],[238,101]],[[7833,1458],[105,-167],[-45,-141],[101,-203]],[[9138,1338],[-115,-45],[-5,-114],[69,-309],[-110,-150],[-240,95],[-239,178],[-104,95],[-99,-21],[-301,-120]],[[8433,1611],[375,0],[224,52]],[[9032,1663],[106,-325]],[[8694,2289],[14,112],[40,74],[139,158],[83,-107],[114,-63],[144,-20],[168,18],[-71,-66],[-41,-47],[-63,-34],[-134,-25],[67,-180],[151,-84]],[[9305,2025],[-198,-119],[-75,-243]],[[9305,2025],[194,4],[199,89],[109,0],[75,-62],[51,-62],[66,-141],[-100,6],[-202,-12],[-100,6],[137,-140],[126,-67],[71,-68],[-32,-147],[-166,-217],[-166,-10],[-190,80],[-239,54]],[[7482,8311],[-501,1474],[1745,-526],[375,-802],[-616,-747],[-1003,601]],[[39,90],[15,16],[22,6],[2,-32],[-2,-41],[-20,-32],[-38,-7],[-18,21],[14,47],[25,22]]],"aliases":{},"names":{"saint paul":"AG-06","parish of saint paul":"AG-06","saint philip":"AG-08","parish of saint philip":"AG-08","saint peter":"AG-07","parish of saint peter":"AG-07","saint george":"AG-03","parish of saint george":"AG-03","saint john":"AG-04","parish of saint john":"AG-04","saint mary":"AG-05","parish of saint mary":"AG-05","barbuda":"AG-10","redonda":"AG-11"}}

frontend/src/lib/visualization/charts/GeoMap/assets/subdivisions/AM.json

@@ -0,0 +1 @@
+{"type":"Topology","bbox":[43.436294,38.863701,46.602612,41.290452],"transform":{"scale":[0.00031666346634663504,0.000242699369936994],"translate":[43.436294,38.863701]},"objects":{"subdivisions":{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0,1,2,3,4,5]],"id":"AM-AG","properties":{"code":"AM-AG","name":"Aragatsotn","label":[44.074,40.321]}},{"type":"Polygon","arcs":[[6,7,8,9,10,11]],"id":"AM-AR","properties":{"code":"AM-AR","name":"Ararat","label":[44.73,39.92]}},{"type":"Polygon","arcs":[[-6,12,-8,13]],"id":"AM-AV","properties":{"code":"AM-AV","name":"Armavir","label":[44.046,40.099]}},{"type":"Polygon","arcs":[[-9,-13,-5,14]],"id":"AM-ER","properties":{"code":"AM-ER","name":"Erevan","label":[44.533,40.147]}},{"type":"MultiPolygon","arcs":[[[15,16,-11,17,18]],[[19]]],"id":"AM-GR","properties":{"code":"AM-GR","name":"Gegharkunik","label":[45.385,40.278]}},{"type":"Polygon","arcs":[[20,-18,-10,-15,-4,21]],"id":"AM-KT","properties":{"code":"AM-KT","name":"Kotayk","label":[44.719,40.375]}},{"type":"Polygon","arcs":[[22,-22,-3,23,24]],"id":"AM-LO","properties":{"code":"AM-LO","name":"Lori","label":[44.452,40.935]}},{"type":"Polygon","arcs":[[-24,-2,25]],"id":"AM-SH","properties":{"code":"AM-SH","name":"Shirak","label":[43.818,40.819]}},{"type":"Polygon","arcs":[[26,27]],"id":"AM-SU","properties":{"code":"AM-SU","name":"Syunik","label":[46.152,39.248]}},{"type":"Polygon","arcs":[[-19,-21,-23,28],[29],[30]],"id":"AM-TV","properties":{"code":"AM-TV","name":"Tavush","label":[45.176,40.888]}},{"type":"Polygon","arcs":[[31,-28,32,-12,-17]],"id":"AM-VD","properties":{"code":"AM-VD","name":"Vayots Dzor","label":[45.442,39.718]}}]}},"arcs":[[[802,5673],[-303,432],[95,271]],[[594,6376],[257,222],[276,136],[470,-110],[198,64],[137,-161],[478,263],[-59,308],[-170,-8],[-148,231],[271,412]],[[2304,7733],[281,-88],[103,91],[354,-129],[59,-116]],[[3101,7491],[33,-282],[393,-202],[-178,-610],[24,-149],[-301,-369],[53,-370]],[[3125,5509],[-24,-47]],[[3101,5462],[-430,202],[-339,18],[-121,-237],[-375,3],[-638,406],[-396,-181]],[[5175,3651],[-131,85],[-336,-188],[-482,-91],[-291,389],[-363,313],[-143,249],[-446,314]],[[2983,4722],[-94,302],[282,290]],[[3171,5314],[123,-234],[240,-172],[291,250]],[[3825,5158],[142,-133],[287,70],[564,255],[214,5]],[[5032,5355],[-47,-346],[217,-544],[82,-336]],[[5284,4129],[-109,-478]],[[3101,5462],[70,-148]],[[2983,4722],[-397,139],[-703,-144],[-380,65],[-346,191],[-433,163],[-41,119],[217,125],[-98,293]],[[3125,5509],[461,117],[146,-140],[-88,-248],[181,-80]],[[6118,7365],[482,-866],[187,-174],[735,-416],[137,-151],[199,21],[172,-176],[-89,-438],[-244,-443],[-220,-22],[-519,87],[-196,-171]],[[6762,4616],[-100,61],[-272,-198],[-624,-43],[-482,-307]],[[5032,5355],[-262,324],[34,208],[-148,546],[-146,155],[7,182],[-184,102],[-37,488]],[[4296,7360],[375,79],[257,-130],[214,68],[106,184],[240,137],[214,-24],[416,-309]],[[6581,7403],[128,-53],[-149,-188],[-108,199],[129,42]],[[4220,7423],[76,-63]],[[3101,7491],[342,74],[500,-143],[277,1]],[[4476,9723],[216,-112],[-121,-322],[165,-227],[-204,-156],[-313,-105],[420,-373],[-195,-356],[-289,-207],[65,-442]],[[2304,7733],[-179,13],[-228,169],[-69,186],[79,215],[127,-30],[134,345],[-205,61],[61,125],[-351,350],[37,313]],[[1710,9480],[397,44],[276,226],[239,-139],[286,65],[309,-130],[195,108],[110,-122],[194,190],[196,-61],[462,-9],[102,71]],[[594,6376],[-192,221],[281,266],[242,609],[-57,431],[-163,289],[-38,255],[-135,204],[-456,245],[-63,345],[399,72],[515,-71],[421,215],[362,23]],[[7493,4069],[167,-192],[370,-149],[209,-333],[318,-203],[191,-208],[433,126],[229,-183],[200,19],[151,-167],[-92,-265],[-292,-93],[-98,-298],[381,-226],[71,-186],[268,-262],[-279,-127],[-303,113],[-70,-196],[263,-205],[57,-252],[-68,-321],[120,-385],[-385,166],[-276,-25],[-323,-189],[-210,-28],[-184,358],[-165,466],[-212,362],[88,343],[-86,155],[-427,291],[-179,47],[114,386],[-47,415],[-250,81]],[[7177,2904],[71,571],[-60,112],[305,482]],[[4476,9723],[-104,206],[424,-44],[150,114],[156,-405],[261,-18],[210,-252],[-421,-65],[-33,-132],[198,3],[321,-268],[359,-85],[265,97],[-9,-231],[384,-352],[193,-55],[-137,-354],[-496,-279],[-79,-238]],[[4988,8898],[10,213],[-184,-62],[174,-151]],[[5601,8670],[0,0]],[[6762,4616],[106,-102],[329,-34],[155,-119],[141,-292]],[[7177,2904],[-387,-95],[-407,-231],[-457,183],[-167,272],[-291,-141],[-74,100],[-10,390],[-209,269]]],"aliases":{},"names":{"tavush":"AM-TV","tavushi marz":"AM-TV","lori":"AM-LO","lorru marz":"AM-LO","shirak":"AM-SH","shiraki marz":"AM-SH","gegharkunik":"AM-GR","geghark'unik'i marz":"AM-GR","vayots dzor":"AM-VD","vayots' dzori marz":"AM-VD","syunik":"AM-SU","syunik'i marz":"AM-SU","ararat":"AM-AR","ararati marz":"AM-AR","aragatsotn":"AM-AG","aragatsotni marz":"AM-AG","armavir":"AM-AV","armaviri marz":"AM-AV","kotayk":"AM-KT","kotayk'i marz":"AM-KT","erevan":"AM-ER","yerevan":"AM-ER"}}

frontend/src/lib/visualization/charts/GeoMap/assets/subdivisions/BA.json

@@ -0,0 +1 @@
+{"type":"Topology","bbox":[15.716074,42.574393,19.057069,45.218533],"transform":{"scale":[0.0003341329132913289,0.00026444044404440445],"translate":[15.716074,42.574393]},"objects":{"subdivisions":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","arcs":[[[0,1]]],"id":"BA-BIH","properties":{"code":"BA-BIH","name":"West Bosnia","label":[16.858,43.977]}},{"type":"Polygon","arcs":[[2,-1,3,4]],"id":"BA-BRC","properties":{"code":"BA-BRC","name":"Brčko Distrikt","label":[18.854,44.831]}},{"type":"MultiPolygon","arcs":[[[-5,5]],[[6]]],"id":"BA-SRP","properties":{"code":"BA-SRP","name":"Posavina","label":[18.298,45.06]}}]}},"arcs":[[[9074,8586],[81,-373],[86,-5]],[[9241,8208],[-17,-152],[-167,-97],[-9,-206],[326,-314],[128,33],[180,314],[214,0],[17,-541],[-317,-241],[-252,-38],[-253,-222],[-4,-222],[120,-319],[-167,-357],[-231,-205],[-249,-65],[-201,-214],[-9,-514],[-72,-87],[-296,17],[-21,-184],[120,-195],[210,-11],[376,-200],[184,-16],[197,335],[557,-11],[308,-173],[86,-167],[-514,-309],[-574,-32],[-689,405],[-150,0],[-115,-408],[47,-546],[-1079,27],[51,-190],[30,-708],[-197,-195],[193,-179],[-124,-538],[77,-308],[488,-449],[428,-444],[71,-282],[-436,203],[-1094,714],[-140,352],[-330,36],[-144,-108],[-290,166],[318,117],[-103,306],[-123,134],[-434,266],[-126,240],[-214,168],[-183,352],[57,317],[-141,156],[-463,131],[-781,734],[-333,243],[-101,262],[-792,813],[-261,101],[-332,475],[-85,281],[46,293],[-129,154],[-130,457],[-330,74],[116,183],[-227,188],[-220,300],[-269,-83],[-264,340],[168,222],[-128,310],[98,183],[-23,252],[72,447],[134,191],[517,29],[210,-185],[109,-216],[326,-306],[407,-151],[-210,-70],[-17,-195],[180,-119],[676,-49],[433,-81],[372,-336],[30,-313],[120,-82],[9,-562],[-86,-206],[-295,-16],[-561,179],[-176,-6],[13,-140],[612,-449],[120,-11],[129,-211],[736,-363],[184,-140],[64,-266],[360,-59],[43,433],[-231,287],[-99,254],[-4,503],[766,-62],[283,-287],[685,32],[557,363],[-5,287],[-175,156],[-64,195],[158,306],[381,0],[103,-87],[261,-443],[741,11],[-82,270],[-788,281],[-25,222],[604,54],[179,368],[150,76],[291,-35],[0,-130],[296,16],[462,-130]],[[9356,8705],[397,-51],[-196,-298],[-316,-148]],[[9074,8586],[63,179]],[[9137,8765],[37,-192],[182,132]],[[9137,8765],[-354,232],[-368,122],[-138,307],[178,-44],[-19,133],[461,-39],[112,-205],[188,-77],[-17,-348],[176,-141]],[[7547,9768],[253,-131],[211,-16],[177,-127],[-44,-136],[-257,-99],[-60,-134],[-225,12],[-249,226],[-88,179],[282,226]]],"aliases":{},"names":{"herzegovina-neretva":"BA-BIH","herzegovina-neretva canton":"BA-BIH","hercegovacko-neretvanski kanton":"BA-BIH","una-sana":"BA-BIH","una-sana canton":"BA-BIH","unsko-sanski kanton":"BA-BIH","posavina":"BA-SRP","posavina canton":"BA-SRP","posavski kanton":"BA-SRP","brčko distrikt":"BA-BRC","brčko":"BA-BRC","brcko district of bosnia and herzegovina":"BA-BRC","west bosnia":"BA-BIH","livno":"BA-BIH","hercegovacko-bosanski kanton":"BA-BIH","livanjski kanton":"BA-BIH","west herzegovina":"BA-BIH","west herzegovina canton":"BA-BIH","zapadno-hercegovacki kanton":"BA-BIH","central bosnia":"BA-BIH","central bosnia canton":"BA-BIH","srednjobosanski kanton":"BA-BIH","srednjebosanski kanton":"BA-BIH","zenica-doboj":"BA-BIH","zenica-doboj canton":"BA-BIH","zenicko-dobojski kanton":"BA-BIH","zeničko-dobojski kanton":"BA-BIH","tuzla":"BA-BIH","tuzla canton":"BA-BIH","tuzlanski kanton":"BA-BIH","sarajevo":"BA-BIH","sarajevo canton":"BA-BIH","kanton sarajevo":"BA-BIH","sarajevski kanton":"BA-BIH","bosnian podrinje":"BA-BIH","bosnian podrinje canton":"BA-BIH","bosansko-podrinjski kanton":"BA-BIH"}}

frontend/src/lib/visualization/charts/GeoMap/assets/subdivisions/BB.json

@@ -0,0 +1 @@
+{"type":"Topology","bbox":[-59.654205,13.051174,-59.42691,13.34455],"transform":{"scale":[0.000022731773177317536,0.00002934053405340537],"translate":[-59.654205,13.051174]},"objects":{"subdivisions":{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0,1,2,3]],"id":"BB-01","properties":{"code":"BB-01","name":"Christ Church","label":[-59.538,13.087]}},{"type":"Polygon","arcs":[[4,5,6,7,8]],"id":"BB-02","properties":{"code":"BB-02","name":"Saint Andrew","label":[-59.576,13.255]}},{"type":"Polygon","arcs":[[9,10,-3,11,12,13]],"id":"BB-03","properties":{"code":"BB-03","name":"Saint George","label":[-59.548,13.149]}},{"type":"Polygon","arcs":[[14,15,-8,16,17]],"id":"BB-04","properties":{"code":"BB-04","name":"Saint James","label":[-59.626,13.192]}},{"type":"Polygon","arcs":[[18,19,-10,20]],"id":"BB-05","properties":{"code":"BB-05","name":"Saint John","label":[-59.504,13.18]}},{"type":"Polygon","arcs":[[21,-21,-14,22,-6]],"id":"BB-06","properties":{"code":"BB-06","name":"Saint Joseph","label":[-59.549,13.212]}},{"type":"Polygon","arcs":[[23,24]],"id":"BB-07","properties":{"code":"BB-07","name":"Saint Lucy","label":[-59.615,13.318]}},{"type":"Polygon","arcs":[[25,-18,26,-12,-2]],"id":"BB-08","properties":{"code":"BB-08","name":"Saint Michael","label":[-59.605,13.118]}},{"type":"Polygon","arcs":[[27,-9,-16,28,-25]],"id":"BB-09","properties":{"code":"BB-09","name":"Saint Peter","label":[-59.611,13.268]}},{"type":"Polygon","arcs":[[29,-4,-11,-20]],"id":"BB-10","properties":{"code":"BB-10","name":"Saint Philip","label":[-59.47,13.137]}},{"type":"Polygon","arcs":[[-23,-13,-27,-17,-7]],"id":"BB-11","properties":{"code":"BB-11","name":"Saint Thomas","label":[-59.59,13.188]}}]}},"arcs":[[[7849,1204],[-517,-271],[-938,-724],[-346,-31],[-281,2],[-272,-36],[-300,-144],[-434,563],[-812,352],[-988,176],[-588,32]],[[2373,1123],[1363,547],[19,2],[-5,46],[-66,225]],[[3684,1943],[2523,724]],[[6207,2667],[412,-97],[64,-49],[75,-92],[72,-371],[13,-27],[258,-334],[55,-95],[-1,-14],[42,-25],[74,-18],[251,-74],[113,-42],[214,-225]],[[3750,8129],[843,-1381],[175,-182]],[[4768,6566],[-103,-19],[-556,-199],[-133,-26],[-55,19],[-12,9],[-15,18],[-11,7],[-12,5],[-16,2],[-18,-2],[-25,-5],[-137,-168],[-454,-799]],[[3221,5408],[-201,201],[-157,44],[-524,-23]],[[2339,5630],[-220,877]],[[2119,6507],[26,1150],[58,88],[42,148],[26,7],[15,7],[12,3],[12,-3],[13,-4],[14,-10],[27,-11],[31,-8],[36,-9],[22,0],[22,5],[19,4],[20,1],[34,-3],[13,0],[15,2],[11,1],[16,-3],[25,-14],[66,5],[104,32],[188,137],[100,44],[64,14],[21,-9],[23,-5],[16,-2],[15,-9],[20,-1],[26,1],[73,50],[9,0],[5,-4],[61,-10],[256,7],[75,21]],[[5015,4476],[923,-645],[87,-74],[375,-533]],[[6400,3224],[-193,-557]],[[3684,1943],[-732,1811]],[[2952,3754],[1038,310],[88,40],[317,289]],[[4395,4393],[590,81],[30,2]],[[598,3083],[-240,639],[-208,2674]],[[150,6396],[277,-55],[738,263],[954,-97]],[[2339,5630],[-237,-242],[-65,-47],[-7,3],[-9,2],[-5,-2],[-9,-7],[-11,-7],[-7,-2],[-14,2],[-6,0],[-12,2],[-16,0],[-10,-2],[-10,-5],[-30,-14],[-7,-4],[-14,-5],[-7,-2],[-7,0],[-48,-31],[-16,-7],[-10,-4],[-8,0],[-7,-3],[-17,0],[-9,0],[-8,-2],[-20,-11],[-82,-23],[-26,-60],[-116,-384],[-62,-112],[-45,-67],[-45,-11],[-16,-9],[-12,-12],[-16,-32],[-9,-17],[-12,-7],[21,-18],[57,-25],[291,-250],[256,-838]],[[1897,3377],[-467,-275],[-39,-31],[-79,-46],[-218,-72],[-89,-41],[-3,-7],[-54,25],[-225,160],[-125,-7]],[[5989,5669],[1155,-667],[666,-291],[395,-97]],[[8205,4614],[-67,-82],[-482,-443],[-56,-43],[-297,-141],[-315,-95],[-588,-586]],[[5015,4476],[41,534],[10,47],[22,64],[38,0],[18,1],[20,4],[721,509],[104,34]],[[4768,6566],[405,-424],[816,-473]],[[4395,4393],[-374,571],[-118,107],[-61,43],[-621,294]],[[56,7590],[-56,724],[88,528],[311,447],[625,485],[795,225],[809,-333],[605,-690],[211,-346]],[[3444,8630],[-40,-19],[-2361,-581],[-814,-412],[-173,-28]],[[2373,1123],[-347,18],[-590,318],[-509,747],[-329,877]],[[1897,3377],[705,109],[62,21],[288,247]],[[3444,8630],[306,-501]],[[150,6396],[-94,1194]],[[8205,4614],[466,-115],[812,-283],[516,-494],[-138,-1174],[-1129,-882],[-883,-462]]],"aliases":{},"names":{"saint joseph":"BB-06","saint andrew":"BB-06","saint peter":"BB-09","saint lucy":"BB-07","saint james":"BB-04","saint michael":"BB-08","christ church":"BB-01","saint philip":"BB-10","saint john":"BB-05","saint george":"BB-03","saint thomas":"BB-11"}}

frontend/src/lib/visualization/charts/GeoMap/assets/subdivisions/BH.json

@@ -0,0 +1 @@
+{"type":"Topology","bbox":[50.4529852360236,25.579891,50.774310367036705,26.287439],"transform":{"scale":[0.000032135726673977823,0.00007076187618761868],"translate":[50.4529852360236,25.579891]},"objects":{"subdivisions":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","arcs":[[[0,1]]],"id":"BH-13","properties":{"code":"BH-13","name":"Al Manāmah","label":[50.578,26.22]}},{"type":"MultiPolygon","arcs":[[[2,3,4]],[[5]]],"id":"BH-14","properties":{"code":"BH-14","name":"Al Janūbīyah","label":[50.562,25.969]}},{"type":"MultiPolygon","arcs":[[[6]]],"id":"BH-15","properties":{"code":"BH-15","name":"Al Muḩarraq","label":[50.638,26.261]}},{"type":"MultiPolygon","arcs":[[[7,-5,8]]],"id":"BH-16","properties":{"code":"BH-16","name":"Al Wusţá","label":[50.574,26.137]}},{"type":"MultiPolygon","arcs":[[[9,-2,-9,-4]]],"id":"BH-17","properties":{"code":"BH-17","name":"Ash Shamālīyah","label":[50.487,26.162]}}]}},"arcs":[[[1585,9357],[388,-33],[498,-93],[406,-76],[3,1],[1281,208],[205,-55],[128,-185],[229,-128],[68,-58],[68,-58],[-175,-150],[-294,-33],[-886,50],[-436,-65]],[[3068,8682],[-514,272],[-1028,37],[59,366]],[[5082,7293],[66,-1854],[-464,-1557],[-1189,-919],[-564,896],[-2699,1870],[948,886]],[[1180,6615],[1497,117],[-452,1027]],[[2225,7759],[1398,-187],[369,93],[1090,-372]],[[9999,2003],[-551,-2003],[-356,1520],[907,483]],[[4626,9878],[969,121],[701,-152],[33,-212],[0,-212],[468,-273],[402,-76],[-168,-198],[-167,-75],[-501,121],[-134,197],[-166,197],[-435,46],[-401,30],[-266,-45],[-401,303],[66,228]],[[3068,8682],[1343,-480],[316,204],[467,152],[200,-212],[201,-334],[401,-15],[-316,-161],[-18,-264],[-628,-64],[48,-215]],[[2225,7759],[-453,691],[371,149],[925,83]],[[1180,6615],[-1180,1436],[256,1069],[1329,237]]],"aliases":{},"names":{"al manāmah":"BH-13","capital":"BH-13","capital governorate":"BH-13","ash shamālīyah":"BH-17","northern":"BH-17","northern governorate":"BH-17","al janūbīyah":"BH-14","southern":"BH-14","southern governorate":"BH-14","al wusţá":"BH-16","central":"BH-16","central governorate":"BH-16","al muḩarraq":"BH-15","muharraq":"BH-15","muharraq governorate":"BH-15"}}

frontend/src/lib/visualization/charts/GeoMap/assets/subdivisions/BM.json

@@ -0,0 +1 @@
+{"type":"Topology","bbox":[-64.885994,32.248077,-64.647631,32.388658],"transform":{"scale":[0.000023838683868386095,0.0000140595059505948],"translate":[-64.885994,32.248077]},"objects":{"subdivisions":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","arcs":[[[0,1,2,3,4]]],"id":"BM-DEV","properties":{"code":"BM-DEV","name":"Devonshire","label":[-64.757,32.303]}},{"type":"MultiPolygon","arcs":[[[5,6]]],"id":"BM-HA","properties":{"code":"BM-HA","name":"City of Hamilton","label":[-64.788,32.294]}},{"type":"MultiPolygon","arcs":[[[7,8,9,10]],[[11,12,13,14]],[[15,16]]],"id":"BM-HAM","properties":{"code":"BM-HAM","name":"Hamilton","label":[-64.72,32.345]}},{"type":"MultiPolygon","arcs":[[[17,-4,18,19]]],"id":"BM-PAG","properties":{"code":"BM-PAG","name":"Paget","label":[-64.781,32.278]}},{"type":"MultiPolygon","arcs":[[[20,-5,21,-7]]],"id":"BM-PEM","properties":{"code":"BM-PEM","name":"Pembroke","label":[-64.8,32.3]}},{"type":"MultiPolygon","arcs":[[[22,23]]],"id":"BM-SAN","properties":{"code":"BM-SAN","name":"Sandys","label":[-64.869,32.298]}},{"type":"MultiPolygon","arcs":[[[24]]],"id":"BM-SG","properties":{"code":"BM-SG","name":"City of Saint George","label":[-64.674,32.375]}},{"type":"MultiPolygon","arcs":[[[25,-13,-11]],[[26,-9],[-25]]],"id":"BM-SGE","properties":{"code":"BM-SGE","name":"Saint George's","label":[-64.7,32.365]}},{"type":"MultiPolygon","arcs":[[[27,-15,28,-2,29,-17]]],"id":"BM-SMI","properties":{"code":"BM-SMI","name":"Smith's","label":[-64.732,32.314]}},{"type":"MultiPolygon","arcs":[[[30,31,32,-24]]],"id":"BM-SOU","properties":{"code":"BM-SOU","name":"Southampton","label":[-64.838,32.252]}},{"type":"MultiPolygon","arcs":[[[33,-20,34,-32]]],"id":"BM-WAR","properties":{"code":"BM-WAR","name":"Warwick","label":[-64.804,32.266]}}]}},"arcs":[[[4440,3936],[769,535],[445,191],[128,207]],[[5782,4869],[429,-1024]],[[6211,3845],[-112,-120],[-599,-521],[-249,-494]],[[5251,2710],[-258,725],[-506,-375]],[[4487,3060],[-47,876]],[[4261,3022],[-424,-72]],[[3837,2950],[29,485],[394,69],[1,-482]],[[7576,6258],[-325,468],[-482,-274],[-347,-360],[-77,-429],[-199,71],[-91,311],[221,764],[602,619]],[[6878,7428],[585,-67]],[[7463,7361],[130,-607],[422,-221]],[[8015,6533],[-439,-275]],[[7219,5789],[357,469]],[[7576,6258],[293,-689]],[[7869,5569],[-373,-369]],[[7496,5200],[-277,589]],[[6012,5240],[480,96]],[[6492,5336],[-354,-437],[-126,341]],[[3729,2206],[679,601],[79,253]],[[5251,2710],[-130,-256],[-812,-1076],[-211,-154]],[[4098,1224],[-369,982]],[[3837,2950],[-455,275],[-361,751],[132,255],[1287,-295]],[[4487,3060],[-226,-38]],[[245,1270],[-115,412],[-130,772],[393,-261],[-57,510],[144,683],[-220,694],[309,-165],[146,413],[195,-413],[261,-386],[-374,-469],[-118,-805],[-94,-243],[212,-248],[764,-137],[0,-221],[-602,83]],[[959,1489],[-714,-219]],[[8974,9452],[150,-477],[-357,-319],[-169,446],[376,350]],[[8015,6533],[-146,-964]],[[6878,7428],[373,842],[666,652],[888,1077],[1194,-1453],[-325,-634],[-16,-634],[-196,220],[-292,386],[-562,200],[-186,-310],[-260,469],[-699,-882]],[[6492,5336],[532,40],[195,413]],[[7496,5200],[-407,-403],[-878,-952]],[[5782,4869],[230,371]],[[959,1489],[-49,-469],[277,-551],[455,0],[585,358]],[[2227,827],[513,156],[232,-542]],[[2972,441],[-793,-441],[-634,28],[-488,27],[-651,634],[-161,581]],[[2227,827],[163,496],[390,55],[699,607],[250,221]],[[4098,1224],[-879,-645],[-247,-138]]],"aliases":{},"names":{"hamilton":"BM-HAM","hamilton parish":"BM-HAM","smith's":"BM-SMI","smith's parish":"BM-SMI","devonshire":"BM-DEV","devonshire parish":"BM-DEV","pembroke":"BM-PEM","pembroke parish":"BM-PEM","city of hamilton":"BM-HA","paget":"BM-PAG","paget parish":"BM-PAG","warwick":"BM-WAR","warwick parish":"BM-WAR","southampton":"BM-SOU","southampton parish":"BM-SOU","sandys":"BM-SAN","sandys parish":"BM-SAN","saint george's":"BM-SGE","saint george":"BM-SGE","saint george's parish":"BM-SGE","city of saint george":"BM-SG","st. george":"BM-SG"}}

frontend/src/lib/visualization/charts/GeoMap/assets/subdivisions/BN.json

@@ -0,0 +1 @@
+{"type":"Topology","bbox":[113.99879,4.016681,115.360741,5.057196],"transform":{"scale":[0.00013620872087208768,0.00010406190619061908],"translate":[113.99879,4.016681]},"objects":{"subdivisions":{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0,1]],"id":"BN-BE","properties":{"code":"BN-BE","name":"Belait","label":[114.408,4.456]}},{"type":"Polygon","arcs":[[2,3]],"id":"BN-BM","properties":{"code":"BN-BM","name":"Brunei and Muara","label":[114.92,4.902]}},{"type":"Polygon","arcs":[[4]],"id":"BN-TE","properties":{"code":"BN-TE","name":"Temburong","label":[115.191,4.602]}},{"type":"Polygon","arcs":[[5,-1,6,-3]],"id":"BN-TU","properties":{"code":"BN-TU","name":"Tutong","label":[114.671,4.645]}}]}},"arcs":[[[3639,6386],[342,-763],[304,-36],[105,-728],[876,-1120],[309,-824],[264,-190]],[[5839,2725],[170,-390],[-370,-1229],[-675,-843],[-648,-217],[-127,413],[-675,774],[-422,1106],[-1008,46],[103,498],[-375,1583],[-930,771],[-882,379],[1857,-81],[550,137],[1232,714]],[[5465,6860],[125,1616]],[[5590,8476],[1235,979],[950,514],[-257,-1156],[-469,-649],[-78,-455],[-515,-58],[-991,-791]],[[8424,8570],[449,-797],[480,-1814],[-2,-1558],[648,-1394],[-267,-144],[-761,434],[-791,217],[-569,2296],[-93,1154],[186,581],[603,482],[117,543]],[[5465,6860],[251,-1114],[35,-1123],[176,-619],[307,-92],[-84,-639],[-311,-548]],[[3639,6386],[256,121],[532,828],[1163,1141]]],"aliases":{},"names":{"temburong":"BN-TE","temburong district":"BN-TE","brunei and muara":"BN-BM","brunei-muara":"BN-BM","brunei and muara district":"BN-BM","tutong":"BN-TU","tutong district":"BN-TU","belait":"BN-BE","belait district":"BN-BE"}}

frontend/src/lib/visualization/charts/GeoMap/assets/subdivisions/BZ.json

@@ -0,0 +1 @@
+{"type":"Topology","bbox":[-89.23418626022602,15.879652,-87.78307,18.48449171647165],"transform":{"scale":[0.00014512613863646662,0.0002605100226494298],"translate":[-89.23418626022602,15.879652]},"objects":{"subdivisions":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","arcs":[[[0,1,2,3,4]],[[5]],[[6]],[[7]],[[8]]],"id":"BZ-BZ","properties":{"code":"BZ-BZ","name":"Belize","label":[-88.419,17.537]}},{"type":"MultiPolygon","arcs":[[[9,10,-3,11,12]]],"id":"BZ-CY","properties":{"code":"BZ-CY","name":"Cayo","label":[-88.883,16.99]}},{"type":"MultiPolygon","arcs":[[[-5,13,14]]],"id":"BZ-CZL","properties":{"code":"BZ-CZL","name":"Corozal","label":[-88.349,18.167]}},{"type":"MultiPolygon","arcs":[[[15,-14,-4,-11]]],"id":"BZ-OW","properties":{"code":"BZ-OW","name":"Orange Walk","label":[-88.855,17.712]}},{"type":"MultiPolygon","arcs":[[[16,17,-12,-2]]],"id":"BZ-SC","properties":{"code":"BZ-SC","name":"Stann Creek","label":[-88.496,16.809]}},{"type":"MultiPolygon","arcs":[[[-13,-18,18]]],"id":"BZ-TOL","properties":{"code":"BZ-TOL","name":"Toledo","label":[-88.812,16.376]}}]}},"arcs":[[[7355,7985],[-287,-299],[-41,-418],[-475,-740],[800,-262],[-438,-59],[-383,-603],[-98,-620],[77,-162]],[[6510,4822],[-331,-103],[-1826,-18]],[[4353,4701],[372,268],[-149,230],[-60,907],[-345,-62]],[[4171,6044],[-80,624],[167,200],[328,75],[65,769],[365,111],[1528,210]],[[6544,8033],[811,-48]],[[9618,5792],[283,-213],[-188,-156],[-95,369]],[[9692,6394],[307,-128],[-432,-374],[-374,-87],[-281,-382],[216,514],[727,252],[-163,205]],[[7399,6922],[615,197],[-225,-201],[-390,4]],[[9101,8239],[-11,-166],[-350,-265],[420,919],[385,-74],[-444,-414]],[[282,1969],[304,2471],[-11,1093]],[[575,5533],[494,193],[1083,51],[305,113],[744,-12],[970,166]],[[4353,4701],[243,-227],[-661,-511],[-71,-378],[-565,-238],[-129,-271]],[[3170,3076],[-311,-259],[-826,-274],[-120,-111],[-485,-1],[-826,-216],[-320,-246]],[[6544,8033],[-946,457],[-501,363],[-824,235]],[[4273,9088],[408,403],[151,350],[301,158],[1238,-8],[158,-75],[-669,-299],[456,-39],[-298,-256],[701,204],[444,-79],[711,119],[-346,-181],[345,15],[1,-806],[-519,-609]],[[575,5533],[-73,2228],[198,264],[573,112],[1165,-425],[992,627],[274,484],[569,265]],[[6510,4822],[454,-432],[42,-260],[-454,-247],[214,-303],[-340,-156],[-32,-456],[-599,-388],[21,-207]],[[5816,2373],[-1163,81],[65,185],[-335,384],[-497,94],[-716,-41]],[[5816,2373],[-397,-395],[-193,-52],[-415,-411],[-788,43],[-75,-116],[-544,-97],[-39,-288],[-1253,-657],[95,-345],[-262,-55],[-609,84],[-945,-5],[-350,-74],[-41,284],[282,1680]]],"aliases":{},"names":{"cayo":"BZ-CY","cayo district":"BZ-CY","orange walk":"BZ-OW","orange walk district":"BZ-OW","corozal":"BZ-CZL","corozal district":"BZ-CZL","toledo":"BZ-TOL","toledo district":"BZ-TOL","stann creek":"BZ-SC","stann creek district":"BZ-SC","belize":"BZ-BZ","belize district":"BZ-BZ"}}