gloomberb 0.11.3 → 0.12.0

package/src/plugins/builtin/shared/series-cache.ts

@@ -0,0 +1,93 @@
+import type { PluginPersistence } from "../../../types/plugin";
+
+export interface DatedObservation {
+  date: string;
+  value: number | null;
+}
+
+export interface SeriesCacheEntry {
+  observations: DatedObservation[];
+  fetchedAt: number;
+  stale: boolean;
+}
+
+export interface SeriesCache {
+  attach(persistence: PluginPersistence): void;
+  reset(): void;
+  /** Preloads server-fetched legs for renderers that cannot reach the cloud API. */
+  hydrate(entries: readonly (readonly [string, DatedObservation[]])[]): void;
+  get(key: string, options?: { allowExpired?: boolean }): SeriesCacheEntry | null;
+  load(key: string, loader: () => Promise<DatedObservation[]>): Promise<DatedObservation[]>;
+}
+
+const CACHE_SOURCE = "gloomberb-cloud";
+const CACHE_SCHEMA_VERSION = 1;
+
+/**
+ * Disk-backed cache for dated series, one instance per pane so their keys cannot
+ * collide. Serves a fresh entry without a request, refreshes a stale one, and falls
+ * back to expired data when the network fails, so an outage degrades to old numbers
+ * rather than an empty pane.
+ */
+export function createSeriesCache(kind: string, staleMs: number): SeriesCache {
+  const policy = { staleMs, expireMs: 30 * 24 * 60 * 60 * 1000 } as const;
+  let persistence: PluginPersistence | null = null;
+  const inflight = new Map<string, Promise<DatedObservation[]>>();
+  const hydrated = new Map<string, DatedObservation[]>();
+
+  const get: SeriesCache["get"] = (key, options) => {
+    const record = persistence?.getResource<DatedObservation[]>(kind, key, {
+      sourceKey: CACHE_SOURCE,
+      schemaVersion: CACHE_SCHEMA_VERSION,
+      allowExpired: options?.allowExpired,
+    });
+    if (!record) return null;
+    return { observations: record.value, fetchedAt: record.fetchedAt, stale: !!record.stale };
+  };
+
+  return {
+    attach(next) {
+      persistence = next;
+    },
+    reset() {
+      persistence = null;
+      inflight.clear();
+      hydrated.clear();
+    },
+    hydrate(entries) {
+      hydrated.clear();
+      for (const [key, observations] of entries) hydrated.set(key, observations);
+    },
+    get,
+    load(key, loader) {
+      const preloaded = hydrated.get(key);
+      if (preloaded) return Promise.resolve(preloaded);
+
+      const cached = get(key);
+      if (cached && !cached.stale) return Promise.resolve(cached.observations);
+
+      const active = inflight.get(key);
+      if (active) return active;
+
+      const request = (async () => {
+        try {
+          const observations = await loader();
+          persistence?.setResource(kind, key, observations, {
+            sourceKey: CACHE_SOURCE,
+            schemaVersion: CACHE_SCHEMA_VERSION,
+            cachePolicy: policy,
+          });
+          return observations;
+        } catch (error) {
+          const stale = cached ?? get(key, { allowExpired: true });
+          if (stale) return stale.observations;
+          throw error;
+        } finally {
+          inflight.delete(key);
+        }
+      })();
+      inflight.set(key, request);
+      return request;
+    },
+  };
+}

package/src/plugins/builtin/short-interest/index.tsx

@@ -45,6 +45,7 @@ export const shortInterestModule: PluginModule = {
       defaultPosition: "right",
       defaultMode: "floating",
       defaultFloatingSize: { width: 90, height: 25 },
+      tableExport: true,
     },
   ],
 

package/src/plugins/builtin/short-interest/pane.tsx

@@ -11,7 +11,7 @@ import {
   type DataTableCell,
   type DataTableKeyEvent,
 } from "../../../components";
-import { resolveChartPalette } from "../../../components/chart/core/renderer";
+import { resolveChartPalette } from "../../../components/chart/core/palette";
 import type { ProjectedChartPoint } from "../../../components/chart/core/data";
 import { colors, blendHex } from "../../../theme/colors";
 import { useShortcut } from "../../../react/input";

package/src/plugins/builtin/thirteenf/index.tsx

@@ -38,6 +38,7 @@ export const thirteenFModule: PluginModule = {
       defaultPosition: "right",
       defaultMode: "floating",
       defaultFloatingSize: { width: 112, height: 36 },
+      tableExport: true,
     },
   ],
 

package/src/plugins/builtin/ticker-detail/index.tsx

@@ -4,10 +4,6 @@ import { normalizeTickerInput } from "../../../tickers/search";
 import { createTickerSurfacePaneTemplate } from "../shared/ticker-surface";
 import { FinancialAnalysisPane } from "./financials/pane";
 import { HistoricalPricesPane } from "./data-panes/historical-prices";
-import {
-  createProviderSearchPaneTemplate,
-  ProviderSearchPane,
-} from "./data-panes/provider-search";
 import { TickerResearchPane } from "./pane";
 import { TICKER_RESEARCH_BUILTIN_TABS } from "./research-tabs";
 import { QuoteMonitorPane } from "./quote-monitor";
@@ -75,15 +71,6 @@ export const tickerDetailModule: PluginModule = {
       defaultFloatingSize: { width: 92, height: 26 },
       tableExport: true,
     },
-    {
-      id: "provider-search-results",
-      name: "Provider Search",
-      icon: "S",
-      component: ProviderSearchPane,
-      defaultPosition: "right",
-      defaultMode: "floating",
-      defaultFloatingSize: { width: 86, height: 24 },
-    },
   ],
   paneTemplates: [
     {
@@ -159,7 +146,6 @@ export const tickerDetailModule: PluginModule = {
       shortcut: "HP",
       publicShare: true,
     }),
-    createProviderSearchPaneTemplate(),
     createTickerSurfacePaneTemplate({
       id: "financial-analysis-pane",
       paneId: "financial-analysis",

package/src/plugins/builtin/ticker-detail/overview-tab.tsx

@@ -20,7 +20,7 @@ import {
   pricePointsToResolvedSeries,
 } from "../../../components/chart/composite";
 import { resolveExchangeTimeZone } from "../../../utils/exchanges";
-import { appendLiveQuotePoint } from "../../../components/chart/core/data";
+import { appendLiveQuotePoint } from "../../../time-series/chart-data";
 import { PriceReturnStrip } from "../../../components/price-performance";
 import {
   appendQuoteToPriceReturnHistory,

package/src/plugins/builtin/volatility/index.tsx

@@ -12,7 +12,7 @@ import {
 import { useAutoRefresh } from "../shared/auto-refresh";
 import { ListView } from "../../../components/ui/list-view";
 import type { ProjectedChartPoint } from "../../../components/chart/core/data";
-import { resolveChartPalette } from "../../../components/chart/core/renderer";
+import { resolveChartPalette } from "../../../components/chart/core/palette";
 import type { PaneProps } from "../../../types/plugin";
 import { colors } from "../../../theme/colors";
 import type { PluginModule } from "../plugin-module";

package/src/plugins/builtin/world-venue-map/map.desktop.test.tsx

@@ -0,0 +1,106 @@
+/** @jsxImportSource react */
+import { Window } from "happy-dom";
+
+const testWindow = new Window({ url: "http://localhost" });
+const domGlobals = {
+  IS_REACT_ACT_ENVIRONMENT: true,
+  window: testWindow,
+  document: testWindow.document,
+  navigator: testWindow.navigator,
+  KeyboardEvent: testWindow.KeyboardEvent,
+  MouseEvent: testWindow.MouseEvent,
+  WheelEvent: testWindow.WheelEvent,
+  HTMLElement: testWindow.HTMLElement,
+  Node: testWindow.Node,
+};
+const priorGlobals = Object.fromEntries(
+  Object.keys(domGlobals).map((key) => [key, (globalThis as Record<string, unknown>)[key]]),
+);
+Object.assign(globalThis, domGlobals);
+
+import { afterAll, afterEach, expect, test } from "bun:test";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { UiHostProvider, type RendererHost, type UiHost } from "../../../ui";
+import { WebBox } from "../../../renderers/electrobun/view/host/box";
+import { WebText } from "../../../renderers/electrobun/view/host/text";
+import { WorldVenueMap } from "./map";
+import type { CloudWorldVenuePayload } from "../../../api-client";
+
+const renderer: RendererHost = {
+  requestExit() {},
+  async openExternal() {},
+  async copyText() {},
+  async readText() { return ""; },
+  notify() {},
+};
+
+const ui = {
+  kind: "desktop-web",
+  capabilities: { cellWidthPx: 8, cellHeightPx: 18, fractionalViewport: true },
+  Box: WebBox,
+  Text: WebText,
+} as unknown as UiHost;
+
+afterAll(() => {
+  for (const [key, value] of Object.entries(priorGlobals)) {
+    if (value === undefined) delete (globalThis as Record<string, unknown>)[key];
+    else (globalThis as Record<string, unknown>)[key] = value;
+  }
+});
+
+const venue: CloudWorldVenuePayload = {
+  mic: "XNYS",
+  name: "NYSE",
+  title: "New York Stock Exchange",
+  country: "United States",
+  countryCode: "US",
+  city: "New York",
+  timezone: "America/New_York",
+  latitude: 40.7127,
+  longitude: -74.006,
+  isOpen: true,
+};
+
+let root: ReturnType<typeof createRoot> | undefined;
+let container: HTMLElement | undefined;
+
+afterEach(async () => {
+  if (root) {
+    await act(async () => root!.unmount());
+    root = undefined;
+  }
+  container?.remove();
+  container = undefined;
+});
+
+test("zooms the desktop map toward the pointer on wheel", async () => {
+  container = testWindow.document.createElement("div") as unknown as HTMLElement;
+  testWindow.document.body.appendChild(container as unknown as Node);
+  root = createRoot(container);
+  await act(async () => {
+    root!.render(
+      <UiHostProvider ui={ui} renderer={renderer}>
+        <WorldVenueMap
+          venues={[venue]}
+          selectedMic="XNYS"
+          width={80}
+          height={24}
+          onSelect={() => {}}
+        />
+      </UiHostProvider>,
+    );
+  });
+
+  const surface = container.querySelector('[data-gloom-role="world-venue-map"]') as HTMLElement;
+  expect(surface).toBeTruthy();
+  expect(surface.getAttribute("data-zoomed")).toBe("false");
+
+  const wheel = new testWindow.WheelEvent("wheel", { deltaY: -180, bubbles: true, cancelable: true });
+  await act(async () => {
+    surface.dispatchEvent(wheel as unknown as Event);
+  });
+
+  expect(wheel.defaultPrevented).toBe(true);
+  expect(surface.getAttribute("data-zoomed")).toBe("true");
+});

package/src/plugins/builtin/world-venue-map/map.tsx

@@ -1,6 +1,6 @@
-import { createElement, useMemo, useRef } from "react";
+import { createElement, useCallback, useEffect, useMemo, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
 import type { CloudWorldVenuePayload } from "../../../api-client";
-import { ChartSurface, Text, useNativeRenderer, useUiHost } from "../../../ui";
+import { Box, ChartSurface, Text, useNativeRenderer, useUiHost } from "../../../ui";
 import { useThemeColors } from "../../../theme/theme-context";
 import { resolveNativeBitmapSize, shouldRenderNativeBitmap } from "../../../components/chart/native/bitmap-support";
 import { drawCircle, drawLine, fillOpaque, parseHex } from "../../../components/chart/native/raster/primitives";
@@ -9,7 +9,12 @@ import { getLocalPlotPointer, type ChartMouseEvent } from "../../../components/c
 import {
   closestWorldVenueCluster,
   clusterWorldVenues,
+  DEFAULT_WORLD_MAP_VIEWPORT,
+  panWorldMapViewport,
   projectWorldPoint,
+  zoomWorldMapViewport,
+  type WorldMapPoint,
+  type WorldMapViewport,
   type WorldVenueCluster,
 } from "./model";
 import { WORLD_OUTLINES } from "./world-outlines";
@@ -236,17 +241,67 @@ function TerminalWorldVenueMap(props: WorldVenueMapProps) {
   );
 }
 
+const DESKTOP_MAP_ASPECT = 2.12;
+const MAP_PAN_THRESHOLD_PX = 4;
+const MAP_CLICK_HIT_PX = 14;
+const MAP_DOUBLE_CLICK_ZOOM = 1.8;
+
+function wheelZoomFactor(event: WheelEvent): number {
+  const delta = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY;
+  return Math.exp(-delta * 0.002);
+}
+
+function clientToMapPoint(
+  event: { clientX: number; clientY: number },
+  element: HTMLElement,
+  width: number,
+  height: number,
+): WorldMapPoint {
+  const rect = element.getBoundingClientRect();
+  return {
+    x: rect.width <= 0 ? 0 : ((event.clientX - rect.left) / rect.width) * width,
+    y: rect.height <= 0 ? 0 : ((event.clientY - rect.top) / rect.height) * height,
+  };
+}
+
+function clientDeltaToMapDelta(
+  deltaX: number,
+  deltaY: number,
+  element: HTMLElement,
+  width: number,
+  height: number,
+): WorldMapPoint {
+  const rect = element.getBoundingClientRect();
+  return {
+    x: rect.width <= 0 ? 0 : (deltaX / rect.width) * width,
+    y: rect.height <= 0 ? 0 : (deltaY / rect.height) * height,
+  };
+}
+
 function DesktopWorldVenueMap(props: WorldVenueMapProps) {
   const colors = useThemeColors();
+  const surfaceRef = useRef<HTMLDivElement | null>(null);
+  const [viewport, setViewport] = useState<WorldMapViewport>(DEFAULT_WORLD_MAP_VIEWPORT);
+  const viewportRef = useRef(viewport);
+  viewportRef.current = viewport;
+  const [dragging, setDragging] = useState(false);
+  const dragRef = useRef<{
+    pointerId: number;
+    lastX: number;
+    lastY: number;
+    originX: number;
+    originY: number;
+    moved: boolean;
+  } | null>(null);
   // Desktop rows are roughly twice as tall as they are wide. Matching the SVG
   // view box to those pixels lets the contained world projection keep its shape.
-  const plotHeight = props.height * 2.12;
+  const plotHeight = props.height * DESKTOP_MAP_ASPECT;
+  const zoomed = viewport.zoom > 1;
   const clusters = useMemo(
-    () => clusterWorldVenues(props.venues, props.width, plotHeight),
-    [plotHeight, props.venues, props.width],
+    () => clusterWorldVenues(props.venues, props.width, plotHeight, 1, viewport),
+    [plotHeight, props.venues, props.width, viewport],
   );
-
-  const outlinePath = (outline: (typeof WORLD_OUTLINES)[number]) => {
+  const outlinePaths = useMemo(() => WORLD_OUTLINES.map((outline) => {
     let drawing = false;
     let previousLongitude: number | null = null;
     return outline.map(([longitude, latitude]) => {
@@ -255,78 +310,167 @@ function DesktopWorldVenueMap(props: WorldVenueMapProps) {
         previousLongitude = longitude;
         return "";
       }
-      const point = projectWorldPoint(longitude, latitude, props.width, plotHeight);
+      const point = projectWorldPoint(longitude, latitude, props.width, plotHeight, 1, viewport);
       previousLongitude = longitude;
       const command = drawing ? "L" : "M";
       drawing = true;
       return `${command}${point.x.toFixed(2)} ${point.y.toFixed(2)}`;
     }).join(" ");
+  }), [plotHeight, props.width, viewport]);
+
+  const selectAt = useCallback((point: WorldMapPoint, element: HTMLElement) => {
+    const rect = element.getBoundingClientRect();
+    const hit = rect.height <= 0 ? 2.4 : (MAP_CLICK_HIT_PX / rect.height) * plotHeight;
+    const cluster = closestWorldVenueCluster(clusters, point.x, point.y, Math.max(1.6, hit));
+    if (cluster) props.onSelect(clusterVenue(cluster, props.selectedMic));
+  }, [clusters, plotHeight, props]);
+
+  useEffect(() => {
+    const element = surfaceRef.current;
+    if (!element) return;
+    const onWheel = (event: WheelEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const point = clientToMapPoint(event, element, props.width, plotHeight);
+      const factor = wheelZoomFactor(event);
+      setViewport((current) => zoomWorldMapViewport(current, props.width, plotHeight, point, factor));
+    };
+    element.addEventListener("wheel", onWheel, { passive: false });
+    return () => element.removeEventListener("wheel", onWheel);
+  }, [plotHeight, props.width]);
+
+  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    dragRef.current = null;
+    setDragging(false);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    if (!drag.moved) selectAt(clientToMapPoint(event, event.currentTarget, props.width, plotHeight), event.currentTarget);
   };
 
   return (
-    <svg
-      viewBox={`0 0 ${props.width} ${plotHeight}`}
-      width="100%"
-      height="100%"
-      role="img"
-      aria-label="World venue map"
-      style={{ display: "block", background: colors.bg }}
-    >
-      {WORLD_OUTLINES.map((outline, index) => (
-        <path
-          key={index}
-          d={outlinePath(outline)}
-          fill="none"
-          stroke={colors.textDim}
-          strokeOpacity="0.64"
-          strokeWidth="0.55"
-          vectorEffect="non-scaling-stroke"
-        />
-      ))}
-      {clusters.map((cluster) => {
-        const selected = isSelectedCluster(cluster, props.selectedMic);
-        const venue = clusterVenue(cluster, props.selectedMic);
-        const radius = Math.max(0.55, Math.min(1.5, 0.45 + Math.sqrt(cluster.venues.length) * 0.22));
-        return (
-          <g
-            key={cluster.id}
-            role="button"
-            tabIndex={0}
-            aria-label={`${cluster.venues.length} venues near ${venue.city}`}
-            style={{ cursor: "pointer" }}
-            onMouseDown={(event) => {
-              event.stopPropagation();
-              props.onSelect(venue);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === "Enter" || event.key === " ") props.onSelect(venue);
-            }}
-          >
-            <title>{`${cluster.venues.length} venue${cluster.venues.length === 1 ? "" : "s"} near ${venue.city}: ${cluster.venues.map((item) => `${item.mic} ${item.name}`).join(", ")}`}</title>
-            <circle
-              cx={cluster.x}
-              cy={cluster.y}
-              r={radius + (selected ? 0.24 : 0)}
-              fill={cluster.isOpen ? colors.positive : colors.textMuted}
-              stroke={selected ? colors.selectedText : colors.bg}
-              strokeWidth={selected ? 0.35 : 0.16}
+    <Box width={props.width} height={props.height} overflow="hidden">
+      <div
+        ref={surfaceRef}
+        data-gloom-role="world-venue-map"
+        data-zoomed={zoomed ? "true" : "false"}
+        role="application"
+        aria-label="World venue map"
+        onPointerDown={(event) => {
+          if (event.button !== 0) return;
+          event.stopPropagation();
+          dragRef.current = {
+            pointerId: event.pointerId,
+            lastX: event.clientX,
+            lastY: event.clientY,
+            originX: event.clientX,
+            originY: event.clientY,
+            moved: false,
+          };
+          event.currentTarget.setPointerCapture(event.pointerId);
+        }}
+        onPointerMove={(event) => {
+          const drag = dragRef.current;
+          if (!drag || drag.pointerId !== event.pointerId) return;
+          const travel = Math.hypot(event.clientX - drag.originX, event.clientY - drag.originY);
+          if (!drag.moved && travel < MAP_PAN_THRESHOLD_PX) return;
+          if (viewportRef.current.zoom <= 1) return;
+          drag.moved = true;
+          const delta = clientDeltaToMapDelta(
+            event.clientX - drag.lastX,
+            event.clientY - drag.lastY,
+            event.currentTarget,
+            props.width,
+            plotHeight,
+          );
+          drag.lastX = event.clientX;
+          drag.lastY = event.clientY;
+          setDragging(true);
+          setViewport((current) => panWorldMapViewport(current, props.width, plotHeight, delta.x, delta.y));
+        }}
+        onPointerUp={endDrag}
+        onPointerCancel={endDrag}
+        onDoubleClick={(event) => {
+          const point = clientToMapPoint(event, event.currentTarget, props.width, plotHeight);
+          setViewport((current) => zoomWorldMapViewport(current, props.width, plotHeight, point, MAP_DOUBLE_CLICK_ZOOM));
+        }}
+        style={{
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          flex: 1,
+          minHeight: 0,
+          overflow: "hidden",
+          touchAction: "none",
+          userSelect: "none",
+          cursor: dragging ? "grabbing" : zoomed ? "grab" : "pointer",
+          background: colors.bg,
+        }}
+      >
+        <svg
+          viewBox={`0 0 ${props.width} ${plotHeight}`}
+          width="100%"
+          height="100%"
+          aria-hidden="true"
+          style={{ display: "block", background: colors.bg, pointerEvents: "none" }}
+        >
+          {outlinePaths.map((path, index) => (
+            <path
+              key={index}
+              d={path}
+              fill="none"
+              stroke={colors.textDim}
+              strokeOpacity="0.64"
+              strokeWidth="0.55"
               vectorEffect="non-scaling-stroke"
             />
-            {cluster.venues.length > 1 ? createElement("text", {
-              x: cluster.x,
-              y: cluster.y,
-              fill: colors.bg,
-              dy: "0.34em",
-              fontSize: Math.max(0.62, Math.min(0.95, radius * 0.78)),
-              fontWeight: "700",
-              fontFamily: "inherit",
-              textAnchor: "middle",
-              pointerEvents: "none",
-            }, cluster.venues.length) : null}
-          </g>
-        );
-      })}
-    </svg>
+          ))}
+          {clusters.map((cluster) => {
+            const selected = isSelectedCluster(cluster, props.selectedMic);
+            const venue = clusterVenue(cluster, props.selectedMic);
+            const radius = Math.max(0.55, Math.min(1.5, 0.45 + Math.sqrt(cluster.venues.length) * 0.22));
+            return (
+              <g
+                key={cluster.id}
+                role="button"
+                tabIndex={0}
+                aria-label={`${cluster.venues.length} venues near ${venue.city}`}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    props.onSelect(venue);
+                  }
+                }}
+              >
+                <title>{`${cluster.venues.length} venue${cluster.venues.length === 1 ? "" : "s"} near ${venue.city}: ${cluster.venues.map((item) => `${item.mic} ${item.name}`).join(", ")}`}</title>
+                <circle
+                  cx={cluster.x}
+                  cy={cluster.y}
+                  r={radius + (selected ? 0.24 : 0)}
+                  fill={cluster.isOpen ? colors.positive : colors.textMuted}
+                  stroke={selected ? colors.selectedText : colors.bg}
+                  strokeWidth={selected ? 0.35 : 0.16}
+                  vectorEffect="non-scaling-stroke"
+                />
+                {cluster.venues.length > 1 ? createElement("text", {
+                  x: cluster.x,
+                  y: cluster.y,
+                  fill: colors.bg,
+                  dy: "0.34em",
+                  fontSize: Math.max(0.62, Math.min(0.95, radius * 0.78)),
+                  fontWeight: "700",
+                  fontFamily: "inherit",
+                  textAnchor: "middle",
+                  pointerEvents: "none",
+                }, cluster.venues.length) : null}
+              </g>
+            );
+          })}
+        </svg>
+      </div>
+    </Box>
   );
 }
 

package/src/plugins/builtin/world-venue-map/model.test.ts

@@ -2,9 +2,13 @@ import { describe, expect, test } from "bun:test";
 import type { CloudWorldVenuePayload } from "../../../api-client";
 import {
   clusterWorldVenues,
+  DEFAULT_WORLD_MAP_VIEWPORT,
   filterWorldVenues,
+  panWorldMapViewport,
   projectWorldPoint,
+  unprojectWorldPoint,
   venueRemainingSeconds,
+  zoomWorldMapViewport,
 } from "./model";
 
 function venue(overrides: Partial<CloudWorldVenuePayload>): CloudWorldVenuePayload {
@@ -50,4 +54,32 @@ describe("world venue map model", () => {
     expect(filterWorldVenues(rows, "")[0]?.mic).toBe("XASE");
     expect(venueRemainingSeconds(rows[0]!, 1_000, 61_000)).toBe(3_540);
   });
+
+  test("keeps a cursor point anchored while zooming and splits nearby clusters", () => {
+    const width = 361;
+    const height = 146;
+    const cursor = { x: 90, y: 40 };
+    const geographic = unprojectWorldPoint(cursor.x, cursor.y, width, height);
+    const zoomed = zoomWorldMapViewport(DEFAULT_WORLD_MAP_VIEWPORT, width, height, cursor, 4);
+    expect(zoomed.zoom).toBe(4);
+    const stillUnderCursor = projectWorldPoint(geographic.longitude, geographic.latitude, width, height, 1, zoomed);
+    expect(stillUnderCursor.x).toBeCloseTo(cursor.x, 6);
+    expect(stillUnderCursor.y).toBeCloseTo(cursor.y, 6);
+
+    const nearby = [
+      venue({ mic: "WEST", longitude: -20, latitude: 20 }),
+      venue({ mic: "EAST", longitude: -18, latitude: 20 }),
+    ];
+    expect(clusterWorldVenues(nearby, 80, 24)).toHaveLength(1);
+    expect(clusterWorldVenues(nearby, 80, 24, 1, {
+      zoom: 10,
+      centerLongitude: 0,
+      centerLatitude: DEFAULT_WORLD_MAP_VIEWPORT.centerLatitude,
+    })).toHaveLength(2);
+
+    const panned = panWorldMapViewport(zoomed, width, height, 40, 0);
+    expect(panned.centerLongitude).toBeLessThan(zoomed.centerLongitude);
+    expect(panWorldMapViewport(DEFAULT_WORLD_MAP_VIEWPORT, width, height, 40, 0)).toEqual(DEFAULT_WORLD_MAP_VIEWPORT);
+    expect(zoomWorldMapViewport(zoomed, width, height, cursor, 0.01)).toEqual(DEFAULT_WORLD_MAP_VIEWPORT);
+  });
 });