gloomberb 0.16.2 → 0.16.3

package/src/plugins/builtin/world-venue-map/index.ts

@@ -49,7 +49,7 @@ export const worldVenueMapModule: PluginModule = {
   panes: [
     {
       id: WORLD_VENUE_MAP_PANE_ID,
-      name: "World Venue Map",
+      name: "World Map",
       icon: "M",
       component: WorldVenueMapPane,
       defaultPosition: "right",
@@ -63,9 +63,9 @@ export const worldVenueMapModule: PluginModule = {
     {
       id: "world-venue-map-pane",
       paneId: WORLD_VENUE_MAP_PANE_ID,
-      label: "World Venue Map",
-      description: "Trading venues with live status and local time; ships, ports, energy and airports as layers on the same map.",
-      keywords: ["world", "map", "venue", "venues", "exchange", "mic", "market hours", "open markets", "ships", "vessels", "ports", "chokepoints", "pipelines", "airports", "energy", "layers"],
+      label: "World Map",
+      description: "A world map with trading venues and their hours; ships, ports, energy and airports as layers.",
+      keywords: ["world", "map", "globe", "countries", "venue", "venues", "exchange", "mic", "market hours", "open markets", "ships", "vessels", "ports", "chokepoints", "pipelines", "airports", "energy", "layers"],
       shortcut: {
         prefix: "MAP",
         argPlaceholder: "layers",
@@ -78,7 +78,7 @@ export const worldVenueMapModule: PluginModule = {
         const preset = parseMapPreset(options?.arg ?? options?.values?.layers);
         if (!preset) return { placement: "floating" };
         return {
-          title: `Map · ${preset.layers.map(groupTitle).join(", ")}`,
+          title: preset.layers.length ? `Map · ${preset.layers.map(groupTitle).join(", ")}` : "Map · Venues",
           placement: "floating",
           settings: { layers: preset.layers, venues: preset.venues },
         };

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

@@ -49,10 +49,13 @@ import type { GeoLayerState } from "./feed";
 import { geoLayerColor, type GeoMapLayer, type GeoMapOverlay, type GeoMapSelection } from "./geo-draw";
 import { WORLD_VENUE_MAP_PANE_ID } from "./ids";
 import {
+  entityOpenZoom,
+  entityTableBbox,
   featureAnchor,
   formatGeoValue,
   formatTickerLinks,
   isChangeColumn,
+  LAYERS_SETTING_KEY,
   readVenuesSetting,
   sameGeoView,
   tickerLinkKey,
@@ -71,6 +74,8 @@ interface LayeredMapViewProps extends PaneProps {
   layers: GeoLayerInfo[];
   /** The layer ids or groups the pane was asked for. */
   tokens: readonly string[];
+  /** A plain MAP: venues show unless the pane turned them off. */
+  plain?: boolean;
 }
 
 interface OpenEntity {
@@ -80,15 +85,9 @@ interface OpenEntity {
 
 type SortState = { key: string | null; dir: "asc" | "desc" };
 
-/**
- * Zoom an opened entity is shown at: 16 times the world (the server's zoom 4,
- * where dense point layers stop clustering) for a ship or a port, wider for a
- * pipeline or a field.
- */
-function openZoom(layer: GeoLayerInfo): number {
-  return layer.geometry === "point" ? 16 : 4;
-}
 const NO_SORT: SortState = { key: null, dir: "asc" };
+/** How long the map rests before a table that follows it asks again. */
+const TABLE_VIEW_SETTLE_MS = 600;
 /** Layers go closer than venues: 64 times the world is the server's zoom 6, where flights and single ports show. */
 const LAYERED_MAX_ZOOM = 64;
 
@@ -165,7 +164,7 @@ const SelectedEntityHeader = memo(function SelectedEntityHeader({
   );
 });
 
-export function LayeredMapView({ focused, width, height, layers, tokens }: LayeredMapViewProps) {
+export function LayeredMapView({ focused, width, height, layers, tokens, plain = false }: LayeredMapViewProps) {
   const colors = useThemeColors();
   const dark = relativeLuminance(colors.text) > relativeLuminance(colors.bg);
   const { nativePaneChrome } = useUiCapabilities();
@@ -174,7 +173,7 @@ export function LayeredMapView({ focused, width, height, layers, tokens }: Layer
   const { hasProAccess } = usePlanAccess();
   const upgrade = useCloudUpgradeAction("map-layers");
   const [venuesSetting] = usePaneSettingValue<boolean | undefined>(VENUES_SETTING_KEY, undefined);
-  const venuesOn = readVenuesSetting({ [VENUES_SETTING_KEY]: venuesSetting }, layers.length);
+  const venuesOn = readVenuesSetting(plain ? { [VENUES_SETTING_KEY]: venuesSetting } : { [VENUES_SETTING_KEY]: venuesSetting, [LAYERS_SETTING_KEY]: tokens }, layers.length);
   const { data: venueData } = useAsyncResource(venuesOn ? loadWorldVenues : null);
   const [now, setNow] = useState(Date.now());
   useEffect(() => {
@@ -214,16 +213,28 @@ export function LayeredMapView({ focused, width, height, layers, tokens }: Layer
   const [selectedMic, setSelectedMic] = useState<string | null>(null);
   const [headerSubject, setHeaderSubject] = useState<"entity" | "venue">("entity");
   const [focus, setFocus] = useState<WorldMapFocus | null>(null);
+  // Kept per pane, so docking, undocking, popping out or reloading reopens the map where it was.
+  const [savedViewport, setSavedViewport] = usePluginPaneState<unknown>("map:viewport", null);
   const { active: searchFocused, focus: focusSearch, searchProps } = useQueryBarSearch();
   const scrollRef = useRef<ScrollBoxRenderable>(null);
   const detailScrollRef = useRef<ScrollBoxRenderable>(null);
 
   const tableLocked = !canAccess(tableLayer) || tableState?.phase === "locked";
   const tableReadable = tableLayer.status !== "unavailable" && tableState?.phase !== "unavailable" && !tableLocked;
+  // The table follows the map once the view rests, not every frame of a pan.
+  const [tableView, setTableView] = useState<GeoView>(view);
+  useEffect(() => {
+    if (sameGeoView(tableView, view)) return;
+    const timer = setTimeout(() => setTableView(view), TABLE_VIEW_SETTLE_MS);
+    return () => clearTimeout(timer);
+  }, [tableView, view]);
+  const tableBbox = entityTableBbox(tableLayer, tableView);
+  const tableBboxKey = tableBbox?.join(",") ?? "";
   const loadPage = useCallback(async ({ offset, signal }: PageRequest) => {
     const page = await loadEntityPage(tableLayer.id, {
       q: query,
       ...(sort.key ? { sort: sort.key, dir: sort.dir } : {}),
+      ...(tableBbox ? { bbox: tableBbox } : {}),
       offset,
     }, signal);
     const rows = page.rows ?? [];
@@ -234,7 +245,7 @@ export function LayeredMapView({ focused, width, height, layers, tokens }: Layer
       hasMore: rows.length >= ENTITY_PAGE_SIZE && (total === null || offset + rows.length < total),
       nextOffset: offset + rows.length,
     };
-  }, [query, sort.dir, sort.key, tableLayer.id]);
+  }, [query, sort.dir, sort.key, tableBboxKey, tableLayer.id]);
   const pages = usePagedRows(tableReadable ? loadPage : null, { getId: (row) => row.id });
   const rows = pages.rows;
   useWorldMapEvidence(tokens, states, rows.length, pages.loading);
@@ -301,7 +312,7 @@ export function LayeredMapView({ focused, width, height, layers, tokens }: Layer
     const lats = trail.map(([, lat]) => lat);
     const span = Math.max(Math.max(...lons) - Math.min(...lons), (Math.max(...lats) - Math.min(...lats)) * 2, 0.05);
     const last = trail.at(-1)!;
-    setFocus({ key: trailKey, longitude: last[0], latitude: last[1], zoom: Math.min(LAYERED_MAX_ZOOM, Math.max(openZoom(tableLayer), 360 / (span * 3))) });
+    setFocus({ key: trailKey, longitude: last[0], latitude: last[1], zoom: Math.min(LAYERED_MAX_ZOOM, Math.max(entityOpenZoom(tableLayer), 360 / (span * 3))) });
   }, [trailKey]);
   const overlay = useMemo<GeoMapOverlay>(() => ({ layers: mapLayers, selected: selection, trail }), [mapLayers, selection, trail]);
 
@@ -472,7 +483,7 @@ export function LayeredMapView({ focused, width, height, layers, tokens }: Layer
         setHeaderSubject("entity");
         selectRow(row.id);
         setOpen({ layer: tableLayer.id, id: row.id });
-        setFocus({ key: `open:${tableLayer.id}:${row.id}`, longitude: row.lon, latitude: row.lat, zoom: openZoom(tableLayer) });
+        setFocus({ key: `open:${tableLayer.id}:${row.id}`, longitude: row.lon, latitude: row.lat, zoom: entityOpenZoom(tableLayer) });
       }}
       detailOpen={detailOpen}
       onBack={() => setOpen(null)}
@@ -497,7 +508,7 @@ export function LayeredMapView({ focused, width, height, layers, tokens }: Layer
   );
 
   const map = (
-    <Box flexDirection="column" width={mapWidth} height={mapSectionHeight} overflow="hidden">
+    <Box key="map" flexDirection="column" width={mapWidth} height={mapSectionHeight} overflow="hidden">
       {headerSubject === "venue" && selectedVenue && venueData ? (
         <SelectedVenueHeader venue={selectedVenue} checkedAt={venueData.checkedAt} now={now} width={mapWidth} />
       ) : (
@@ -517,6 +528,8 @@ export function LayeredMapView({ focused, width, height, layers, tokens }: Layer
         onSelectGeo={onSelectGeo}
         onViewChange={onViewChange}
         focus={focus}
+        savedViewport={savedViewport}
+        onViewportSettled={setSavedViewport}
       />
     </Box>
   );

package/src/plugins/builtin/world-venue-map/layers.ts

@@ -75,6 +75,33 @@ function capLayerSelection(ordered: readonly GeoLayerInfo[]): GeoLayerInfo[] {
   return kept;
 }
 
+/** Layers a plain map opens with: the server's default layers that can serve, two at most. */
+const MAX_DEFAULT_LAYERS = 2;
+
+function defaultLayerIds(layers: readonly GeoLayerInfo[] | null | undefined): string[] {
+  if (!layers?.length) return [];
+  const defaults = layers.filter((layer) => layer.defaultVisible && layer.status !== "unavailable");
+  return capLayerSelection(defaults.slice(0, MAX_DEFAULT_LAYERS)).map((layer) => layer.id);
+}
+
+/**
+ * A pane that never chose its layers or venues: a plain `MAP`, or a map
+ * saved before layers existed. It shows venues and the server's default
+ * layers. A preset or an edit in the layer picker writes both settings, and
+ * from then on the pane keeps exactly what was chosen.
+ */
+export function isPlainMap(settings: Record<string, unknown> | undefined): boolean {
+  return settings?.[LAYERS_SETTING_KEY] == null && typeof settings?.[VENUES_SETTING_KEY] !== "boolean";
+}
+
+/** The layer ids or groups a pane shows: what it chose, or the defaults on a plain map. */
+export function activeLayerTokens(
+  settings: Record<string, unknown> | undefined,
+  layers: readonly GeoLayerInfo[] | null | undefined,
+): string[] {
+  return isPlainMap(settings) ? defaultLayerIds(layers) : parseLayerTokens(settings?.[LAYERS_SETTING_KEY]);
+}
+
 /** Expands groups to their layers, drops what the server does not list, and applies the caps. */
 export function resolveActiveLayers(tokens: readonly string[], layers: readonly GeoLayerInfo[] | null | undefined): GeoLayerInfo[] {
   if (!layers?.length || !tokens.length) return [];
@@ -98,18 +125,23 @@ export interface MapPreset {
   venues: boolean;
 }
 
-/** `MAP ships` and friends: the typed words become layer tokens, resolved once the catalog is known. */
+/**
+ * `MAP ships` and friends: the typed words become layer tokens, resolved once
+ * the catalog is known. `MAP venues` alone is the venue map without layers.
+ */
 export function parseMapPreset(arg: string | null | undefined): MapPreset | null {
   const tokens = parseLayerTokens(arg ?? "");
-  if (!tokens.length) return null;
-  return { layers: tokens, venues: /\bvenues\b/i.test(arg ?? "") };
+  const venues = /\bvenues\b/i.test(arg ?? "");
+  if (!tokens.length) return venues ? { layers: [], venues: true } : null;
+  return { layers: tokens, venues };
 }
 
 export const MAP_PRESET_OPTIONS = [
+  { value: "venues", label: "Trading venues only" },
   { value: "ships", label: "Ships and chokepoints" },
   { value: "ports", label: "Ports" },
   { value: "energy", label: "Pipelines, fields and terminals" },
-  { value: "air", label: "Airports" },
+  { value: "air", label: "Airports and flights" },
 ] as const;
 
 function shortDate(iso: string): string | null {
@@ -152,8 +184,8 @@ function groupsOf(layers: readonly GeoLayerInfo[]): string[] {
 export function readVenuesSetting(settings: Record<string, unknown> | undefined, activeLayers: number): boolean {
   const value = settings?.[VENUES_SETTING_KEY];
   if (typeof value === "boolean") return value;
-  // A preset opens on its layers; a plain MAP stays the venue map.
-  return activeLayers === 0;
+  // A plain MAP shows venues under its default layers; a preset opens on its layers alone.
+  return settings?.[LAYERS_SETTING_KEY] == null || activeLayers === 0;
 }
 
 /**
@@ -166,7 +198,7 @@ export function buildMapSettingsDef(
   layers: readonly GeoLayerInfo[] | null | undefined,
 ): PaneSettingsDef | undefined {
   if (!layers?.length) return undefined;
-  const active = resolveActiveLayers(parseLayerTokens(settings[LAYERS_SETTING_KEY]), layers);
+  const active = resolveActiveLayers(activeLayerTokens(settings, layers), layers);
   const values: Record<string, unknown> = { [VENUES_SETTING_KEY]: readVenuesSetting(settings, active.length) };
   const fields: PaneSettingField[] = [{
     key: VENUES_SETTING_KEY,
@@ -199,12 +231,16 @@ export function applyMapSetting(
   value: unknown,
   layers: readonly GeoLayerInfo[],
 ): Record<string, unknown> {
-  if (key === VENUES_SETTING_KEY) return { ...settings, [VENUES_SETTING_KEY]: value === true };
-  if (!key.startsWith(GROUP_PREFIX)) return { ...settings, [key]: value };
+  const before = resolveActiveLayers(activeLayerTokens(settings, layers), layers);
+  // The first edit of a plain map writes down what it showed, so only the edited part changes.
+  const chosen = isPlainMap(settings)
+    ? { ...settings, [LAYERS_SETTING_KEY]: before.map((layer) => layer.id), [VENUES_SETTING_KEY]: readVenuesSetting(settings, before.length) }
+    : settings;
+  if (key === VENUES_SETTING_KEY) return { ...chosen, [VENUES_SETTING_KEY]: value === true };
+  if (!key.startsWith(GROUP_PREFIX)) return { ...chosen, [key]: value };
   const group = key.slice(GROUP_PREFIX.length);
   const members = new Set(layers.filter((layer) => String(layer.group || "other") === group).map((layer) => layer.id));
   const picked = Array.isArray(value) ? value.filter((entry): entry is string => typeof entry === "string" && members.has(entry)) : [];
-  const before = resolveActiveLayers(parseLayerTokens(settings[LAYERS_SETTING_KEY]), layers);
   // Other groups keep their order; this group's picks follow, newest last, so the caps drop the oldest.
   const kept = before.filter((layer) => !members.has(layer.id) || picked.includes(layer.id));
   const added = picked.filter((id) => !kept.some((layer) => layer.id === id))
@@ -253,6 +289,28 @@ export function geoViewForViewport(
   };
 }
 
+/**
+ * Zoom an opened entity is shown at: 16 times the world (the server's zoom 4,
+ * where dense point layers stop clustering) for a ship or a port, wider for a
+ * pipeline or a field, and never short of the zoom its layer draws from
+ * (flights from the server's zoom 5, 32 times the world).
+ */
+export function entityOpenZoom(layer: Pick<GeoLayerInfo, "geometry" | "minZoom">): number {
+  const base = layer.geometry === "point" ? 16 : 4;
+  return layer.minZoom === undefined ? base : Math.max(base, 2 ** layer.minZoom);
+}
+
+/**
+ * The area a layer's table reads. A layer drawn only from a zoom (live
+ * flights) lists what the map shows once it is that close; further out, and
+ * for every other layer, the table asks without one and the server answers
+ * for the whole layer or, for flights, one busy area.
+ */
+export function entityTableBbox(layer: Pick<GeoLayerInfo, "minZoom">, view: GeoView): GeoBbox | undefined {
+  if (layer.minZoom === undefined || view.zoom < layer.minZoom) return undefined;
+  return view.bbox;
+}
+
 export function geoViewKey(view: GeoView): string {
   return `${view.bbox.join(",")}@${Math.floor(view.zoom)}`;
 }

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

@@ -16,6 +16,7 @@ import {
   MAX_WORLD_MAP_ZOOM,
   panWorldMapViewport,
   projectWorldPoint,
+  savedWorldMapViewport,
   unprojectWorldPoint,
   zoomWorldMapViewport,
   type WorldMapPoint,
@@ -26,7 +27,8 @@ import { WORLD_OUTLINES } from "./world-outlines";
 import { drawGeoBitmap, hitTestGeo, rasterGeoCells, type GeoHit, type GeoMapOverlay } from "./geo-draw";
 import { GeoSvgLayers, MapIconSwatch, toneColor, type MapMatrix, type SymbolTones } from "./geo-svg";
 import { BasemapLayer, type BasemapPalette } from "./basemap-layer";
-import type { GeoBox } from "./basemap";
+import { loadCountryLabels, type CountryLabel, type GeoBox } from "./basemap";
+import { COUNTRY_LABEL_FONT_PX, layoutCountryLabels, type LabelObstacle, type PlacedCountryLabel } from "./country-labels";
 import { layerSymbol, shipClass, usesClassTones, type MapSymbolId, type SymbolTone } from "./map-symbols";
 import { geoViewForViewport, sameGeoView, WORLD_GEO_VIEW, type GeoView } from "./layers";
 
@@ -52,6 +54,13 @@ interface WorldVenueMapProps {
   focus?: WorldMapFocus | null;
   /** How far the map may zoom; geo layers go closer than venues. */
   maxZoom?: number;
+  /**
+   * Where the map was when this pane last drew it (saved pane state). A pane
+   * docked, undocked, popped out or reloaded mounts a new map; it opens here.
+   */
+  savedViewport?: unknown;
+  /** The view once it has rested for a moment, for the pane to keep. */
+  onViewportSettled?: (viewport: WorldMapViewport) => void;
 }
 
 function clusterVenue(cluster: WorldVenueCluster, selectedMic: string | null): CloudWorldVenuePayload {
@@ -306,6 +315,75 @@ const MAP_CLICK_HIT_PX = 14;
 const MAP_DOUBLE_CLICK_ZOOM = 1.8;
 /** Share of the plot a selected venue may sit inside before the map pans to it. */
 const MAP_FOLLOW_MARGIN = 0.06;
+/** How long the view rests before the pane keeps it. */
+const VIEWPORT_SETTLE_MS = 400;
+
+/**
+ * Whether a map of this many cells can be drawn. A pane mid-layout (a new
+ * window, a dock move) can hand the map a width of one cell for a frame; a
+ * projection from that has no scale, and a focus applied to it loses its
+ * centre.
+ */
+function mapHasArea(width: number, height: number): boolean {
+  return width > 2 && height > 1;
+}
+
+/** A venue dot's radius in view units, larger for a cluster of venues. */
+function venueDotRadius(count: number): number {
+  return Math.max(0.55, Math.min(1.5, 0.45 + Math.sqrt(count) * 0.22));
+}
+
+/** Country names are laid out again once the view has rested this long, not on every drag frame. */
+const LABEL_SETTLE_MS = 150;
+/** Room a selected or hovered marker keeps clear of country names, in pixels. */
+const LABEL_MARKER_CLEARANCE_PX = 14;
+
+/** The country names, from their lazy chunk; none until it arrives, none in a build without map data. */
+function useCountryLabels(): readonly CountryLabel[] | null {
+  const [labels, setLabels] = useState<readonly CountryLabel[] | null>(null);
+  useEffect(() => {
+    let current = true;
+    loadCountryLabels().then((loaded) => {
+      if (current) setLabels(loaded);
+    }, () => {});
+    return () => {
+      current = false;
+    };
+  }, []);
+  return labels;
+}
+
+/** Country names under the markers: small, quiet, never in the way of a click. */
+function CountryNames({ labels, project, unitPx, color, halo }: {
+  labels: readonly PlacedCountryLabel[];
+  project: (longitude: number, latitude: number) => WorldMapPoint;
+  unitPx: number;
+  color: string;
+  halo: string;
+}) {
+  if (!labels.length) return null;
+  const fontSize = COUNTRY_LABEL_FONT_PX / unitPx;
+  return createElement(
+    "g",
+    {
+      "data-gloom-role": "country-labels",
+      fill: color,
+      stroke: halo,
+      strokeWidth: 3 / unitPx,
+      strokeOpacity: 0.8,
+      strokeLinejoin: "round",
+      paintOrder: "stroke",
+      fontSize,
+      fontFamily: "inherit",
+      textAnchor: "middle",
+      pointerEvents: "none",
+    },
+    ...labels.map((label) => {
+      const at = project(label.longitude, label.latitude);
+      return createElement("text", { key: label.name, x: at.x, y: at.y, dy: "0.35em" }, label.name);
+    }),
+  );
+}
 
 function wheelZoomFactor(event: WheelEvent): number {
   const delta = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY;
@@ -386,7 +464,10 @@ function DesktopWorldVenueMap(props: WorldVenueMapProps) {
   const maxZoom = props.maxZoom ?? MAX_WORLD_MAP_ZOOM;
   const surfaceRef = useRef<HTMLDivElement | null>(null);
   const surfaceSize = useElementSize(surfaceRef);
-  const [viewport, setViewport] = useState<WorldMapViewport>(DEFAULT_WORLD_MAP_VIEWPORT);
+  const [viewport, setViewport] = useState<WorldMapViewport>(
+    () => savedWorldMapViewport(props.savedViewport, maxZoom) ?? DEFAULT_WORLD_MAP_VIEWPORT,
+  );
+  const sized = mapHasArea(props.width, props.height);
   const viewportRef = useRef(viewport);
   viewportRef.current = viewport;
   const [dragging, setDragging] = useState(false);
@@ -431,6 +512,7 @@ function DesktopWorldVenueMap(props: WorldVenueMapProps) {
     land: blendHex(colors.bg, colors.text, dark ? 0.1 : 0.07),
     coast: blendHex(colors.bg, colors.textDim, dark ? 0.85 : 0.75),
     border: blendHex(colors.bg, colors.textDim, dark ? 0.42 : 0.35),
+    label: blendHex(colors.bg, colors.textDim, dark ? 0.7 : 0.8),
   }), [colors.bg, colors.text, colors.textDim, dark]);
   // Five colours in all: the layer's own for cargo, amber tankers, bright
   // passenger ships, green fishing boats, and one quiet grey for the rest.
@@ -439,6 +521,42 @@ function DesktopWorldVenueMap(props: WorldVenueMapProps) {
     return { tanker: colors.warning, passenger: colors.textBright, fishing: colors.positive, service: quiet, other: quiet };
   }, [colors.positive, colors.text, colors.textBright, colors.textDim, colors.warning]);
 
+  // Names are placed for the view once it rests; a drag moves the ones already placed.
+  const countryLabels = useCountryLabels();
+  const [labelViewport, setLabelViewport] = useState(viewport);
+  useEffect(() => {
+    if (labelViewport === viewport) return;
+    const timer = setTimeout(() => setLabelViewport(viewport), LABEL_SETTLE_MS);
+    return () => clearTimeout(timer);
+  }, [labelViewport, viewport]);
+  const selectedPoint = props.overlay?.selected ?? null;
+  const selectedVenuePoint = props.venues.find((venue) => venue.mic === props.selectedMic) ?? null;
+  const hoverAnchor = hover?.hit.kind === "feature" && hover.hit.feature.geometry.type === "Point" ? hover.hit.feature.geometry.coordinates : null;
+  const placedLabels = useMemo(() => {
+    if (!countryLabels?.length) return [];
+    const at = (longitude: number, latitude: number) => {
+      const point = projectWorldPoint(longitude, latitude, props.width, plotHeight, 1, labelViewport);
+      return { x: point.x * unitPx, y: point.y * unitPx };
+    };
+    const markers = [
+      selectedPoint ? [selectedPoint.longitude, selectedPoint.latitude] : null,
+      selectedVenuePoint ? [selectedVenuePoint.longitude, selectedVenuePoint.latitude] : null,
+      hoverAnchor,
+    ].filter((point): point is [number, number] => point !== null);
+    const obstacles: LabelObstacle[] = markers.map(([longitude, latitude]) => ({ ...at(longitude, latitude), radius: LABEL_MARKER_CLEARANCE_PX }));
+    // Venue dots are few and sit on land, where the names are: a name never runs under one.
+    for (const cluster of clusterWorldVenues(props.venues, props.width, plotHeight, 1, labelViewport)) {
+      obstacles.push({ x: cluster.x * unitPx, y: cluster.y * unitPx, radius: (venueDotRadius(cluster.venues.length) + 0.2) * unitPx });
+    }
+    return layoutCountryLabels(countryLabels, {
+      pxPerDegree: (at(1, 0).x - at(0, 0).x),
+      toPixels: at,
+      widthPx: props.width * unitPx,
+      heightPx: plotHeight * unitPx,
+      obstacles,
+    });
+  }, [countryLabels, hoverAnchor?.[0], hoverAnchor?.[1], labelViewport, plotHeight, props.venues, props.width, selectedPoint?.latitude, selectedPoint?.longitude, selectedVenuePoint, unitPx]);
+
   const hitRadius = useCallback((element: HTMLElement) => {
     const rect = element.getBoundingClientRect();
     return rect.height <= 0 ? 2.4 : (MAP_CLICK_HIT_PX / rect.height) * plotHeight;
@@ -464,24 +582,39 @@ function DesktopWorldVenueMap(props: WorldVenueMapProps) {
   const onViewChange = props.onViewChange;
   const reportedViewRef = useRef<GeoView | null>(null);
   useEffect(() => {
-    if (!onViewChange) return;
+    if (!onViewChange || !sized) return;
     const next = geoViewForViewport(viewport, props.width, plotHeight);
     if (reportedViewRef.current && sameGeoView(reportedViewRef.current, next)) return;
     reportedViewRef.current = next;
     onViewChange(next);
-  }, [onViewChange, plotHeight, props.width, viewport]);
+  }, [onViewChange, plotHeight, props.width, sized, viewport]);
 
-  // A new focus (an entity picked in the table) centres the map on it.
+  // The pane keeps the view once it rests, so a remount opens where this left off.
+  const onViewportSettled = props.onViewportSettled;
+  const settledViewportRef = useRef(viewport);
+  useEffect(() => {
+    if (!onViewportSettled || settledViewportRef.current === viewport) return;
+    const timer = setTimeout(() => {
+      settledViewportRef.current = viewport;
+      onViewportSettled(viewport);
+    }, VIEWPORT_SETTLE_MS);
+    return () => clearTimeout(timer);
+  }, [onViewportSettled, viewport]);
+
+  // A new focus (an entity picked in the table) centres the map on it, once
+  // the map has an area to centre it in.
   const focusKey = props.focus?.key ?? null;
+  const appliedFocusRef = useRef<string | null>(null);
   useEffect(() => {
     const focus = props.focus;
-    if (!focus) return;
+    if (!focus || !sized || appliedFocusRef.current === focus.key) return;
+    appliedFocusRef.current = focus.key;
     setViewport((current) => {
       const zoom = Math.max(current.zoom, focus.zoom ?? 1);
       if (zoom <= 1) return current;
       return clampWorldMapViewport({ zoom, centerLongitude: focus.longitude, centerLatitude: focus.latitude }, props.width, plotHeight, 1, maxZoom);
     });
-  }, [focusKey]);
+  }, [focusKey, sized]);
 
   const selectedVenue = props.venues.find((venue) => venue.mic === props.selectedMic) ?? null;
   const selectedVenueRef = useRef(selectedVenue);
@@ -637,60 +770,63 @@ function DesktopWorldVenueMap(props: WorldVenueMapProps) {
           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" }}
-        >
-          <BasemapLayer matrix={matrix} view={view} pxPerDegree={pxPerDegree} palette={palette} />
-          {props.overlay ? (
-            <GeoSvgLayers
-              overlay={props.overlay}
-              matrix={matrix}
-              project={project}
-              view={view}
-              unitPx={unitPx}
-              mapWidthPx={surfaceSize?.width ?? props.width * 8}
-              background={colors.bg}
-              selectedColor={colors.selectedText}
-              textColor={colors.textBright}
-              tones={tones}
-              hovered={hovered?.hit ?? null}
-            />
-          ) : null}
-          {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}>
-                <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>
+        {sized ? (
+          <svg
+            viewBox={`0 0 ${props.width} ${plotHeight}`}
+            width="100%"
+            height="100%"
+            aria-hidden="true"
+            style={{ display: "block", background: colors.bg, pointerEvents: "none" }}
+          >
+            <BasemapLayer matrix={matrix} view={view} pxPerDegree={pxPerDegree} palette={palette} />
+            <CountryNames labels={placedLabels} project={project} unitPx={unitPx} color={palette.label} halo={colors.bg} />
+            {props.overlay ? (
+              <GeoSvgLayers
+                overlay={props.overlay}
+                matrix={matrix}
+                project={project}
+                view={view}
+                unitPx={unitPx}
+                mapWidthPx={surfaceSize?.width ?? props.width * 8}
+                background={colors.bg}
+                selectedColor={colors.selectedText}
+                textColor={colors.textBright}
+                tones={tones}
+                hovered={hovered?.hit ?? null}
+              />
+            ) : null}
+            {clusters.map((cluster) => {
+              const selected = isSelectedCluster(cluster, props.selectedMic);
+              const venue = clusterVenue(cluster, props.selectedMic);
+              const radius = venueDotRadius(cluster.venues.length);
+              return (
+                <g key={cluster.id}>
+                  <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>
+        ) : null}
         {tooltip && hovered ? (
           <MapTooltip
             title={tooltip.title}
@@ -700,7 +836,7 @@ function DesktopWorldVenueMap(props: WorldVenueMapProps) {
             width={surfaceSize?.width ?? 0}
           />
         ) : null}
-        {props.overlay ? <GeoLegend overlay={props.overlay} venues={props.venues.length > 0} tones={tones} /> : null}
+        {props.overlay && sized ? <GeoLegend overlay={props.overlay} venues={props.venues.length > 0} tones={tones} /> : null}
       </div>
     </Box>
   );