@eventcatalog/core 5.9.1 → 5.10.0

package/dist/analytics/analytics.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(analytics_exports);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "5.9.1";
+var version = "5.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,8 +1,8 @@
 import {
   raiseEvent
-} from "../chunk-YBM7MCOY.js";
+} from "../chunk-EXBUNFIM.js";
 import "../chunk-CPW6G62V.js";
-import "../chunk-KGFAIGOT.js";
+import "../chunk-EETSYUKN.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -169,7 +169,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "5.9.1";
+var version = "5.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,12 +1,12 @@
 import {
   log_build_default
-} from "../chunk-3PWCUWQC.js";
+} from "../chunk-5QOG7UYZ.js";
 import "../chunk-AD7CL772.js";
-import "../chunk-YBM7MCOY.js";
+import "../chunk-EXBUNFIM.js";
 import "../chunk-YRZK7HKX.js";
 import "../chunk-CA6WCQ2T.js";
 import "../chunk-CPW6G62V.js";
-import "../chunk-KGFAIGOT.js";
+import "../chunk-EETSYUKN.js";
 import "../chunk-4G7FSRPN.js";
 export {
   log_build_default as default

package/dist/{chunk-3PWCUWQC.js → chunk-5QOG7UYZ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-AD7CL772.js";
 import {
   raiseEvent
-} from "./chunk-YBM7MCOY.js";
+} from "./chunk-EXBUNFIM.js";
 import {
   countResources,
   hashCatalogContent,

package/dist/{chunk-KGFAIGOT.js → chunk-EETSYUKN.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "5.9.1";
+var version = "5.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-A3256YCN.js → chunk-EGOTM5ZG.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-JDSFD7IC.js";
+} from "./chunk-ZE2RPUNY.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-YBM7MCOY.js → chunk-EXBUNFIM.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-CPW6G62V.js";
 import {
   VERSION
-} from "./chunk-KGFAIGOT.js";
+} from "./chunk-EETSYUKN.js";
 
 // src/analytics/analytics.js
 import os from "os";

package/dist/{chunk-JDSFD7IC.js → chunk-ZE2RPUNY.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-KGFAIGOT.js";
+} from "./chunk-EETSYUKN.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "5.9.1";
+var version = "5.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-KGFAIGOT.js";
+} from "./chunk-EETSYUKN.js";
 export {
   VERSION
 };

package/dist/docs/development/guides/resources/entities/05-entity-maps.md

@@ -44,7 +44,12 @@ You can also embed an entity map on a page using the `<EntityMap />` component.
 
 Use embedded entity maps when you want the model to appear directly in domain, service, or custom documentation.
 
+## See every entity at once
+
+Entity maps show the entities of one domain or service. To see every entity in your catalog, and how entities relate across domains, open the [Global Entity Map](/docs/development/guides/resources/entities/global-entity-map).
+
 ## Next steps
 
 - [Model entity relationships](/docs/development/guides/resources/entities/model-entity-relationships)
+- [Global entity map](/docs/development/guides/resources/entities/global-entity-map)
 - [EntityMap component reference](/docs/development/components/components/entitymap)

package/dist/docs/development/guides/resources/entities/06-global-entity-map.md

@@ -0,0 +1,101 @@
+---
+keywords:
+- EventCatalog entities
+- Global entity map
+- Entity relationship diagram
+- Data model
+sidebar_position: 6
+sidebar_label: Global entity map
+title: Global entity map
+description: See every entity in your catalog, and how they relate across domains, on one diagram.
+---
+
+import AddedIn from '@site/src/components/MDX/AddedIn';
+
+<AddedIn version="5.10.0" />
+
+The Global Entity Map shows every entity in your catalog on one diagram, with the references between them. Where an [entity map](/docs/development/guides/resources/entities/entity-maps) shows the entities of one domain or service, the Global Entity Map shows the data model of the whole organization.
+
+Use it to answer questions like:
+
+- Which entities does each domain own?
+- Which entities are referenced from other domains?
+- Which entities are shared by more than one domain?
+- Which entities don't belong to anything yet?
+
+![Global Entity Map showing every entity grouped into its domain](./img/global-entity-map.png)
+
+## Open the Global Entity Map
+
+When your catalog has entities, a **Global Entity Map** link appears in the **Top level diagrams** section of the visualizer sidebar. You can also open it at:
+
+```txt
+/visualiser/entity-map
+```
+
+The map shows the latest version of every entity.
+
+If you've [customized your sidebar](/docs/development/customization/documentation-sidebar#custom-groups-and-links), you can add a custom link to this URL.
+
+## How entities are placed in domains
+
+[Entities can be added to domains, systems, and services](/docs/development/guides/resources/entities/add-entities-to-resources). The Global Entity Map works out which domain each entity belongs to from any of them:
+
+| Entity listed by | Belongs to |
+|------------------|------------|
+| A domain | That domain. |
+| A system | The system, and the domain the system is in. |
+| A service | The service's system (if it's in one), and its domain. |
+| More than one domain | **Shared across domains**, a group of its own. |
+| Nothing | No domain. It's shown outside every group. |
+
+A resource that pins an older version of an entity doesn't own the latest version. For example, if a domain lists `customer` at version `1.0.0` and the latest is `2.0.0`, that domain doesn't own the `customer` shown on the map.
+
+An entity's team is its own owner, or else the owner of the domain, system, or service that lists it.
+
+## Group entities
+
+The map opens with entities grouped by their domain. Use **Group by** at the top right of the diagram (or press <kbd>G</kbd>) to group them another way:
+
+| Group by | What it shows |
+|----------|---------------|
+| **Domain** | A box for each domain, and one for entities shared across domains. |
+| **System** | A box for each system. Only entities listed by a system, or by a service in one, are grouped. |
+| **Team** | A box for each owning team. |
+| **Domain, then system** | Systems nested in their domain. |
+| **Nothing** | No groups. |
+
+Groups can be shown as **Boxes** placed around their entities, or as **Lanes** stacked from top to bottom.
+
+![The Group by menu, with entities grouped by domain](./img/global-entity-map-group-by.png)
+
+## Filter what's shown
+
+The panel on the left of the diagram lists each domain, with how many entities it has and how many references cross into other domains.
+
+- Click a domain to show or hide its entities.
+- Hover over a domain and click the button that appears beside it (**Only show**) to show just that domain. Click it again to show everything.
+- Use **Show all** and **Hide all** to change every domain at once, and **Filter domains** to find a domain in a long list.
+- Turn on **Only references across domains** to show only the entities that reference, or are referenced by, an entity in another domain. This is a quick way to see the dependencies between domains.
+
+![The Global Entity Map with two domains hidden and only references across domains shown](./img/global-entity-map-filters.png)
+
+To give the diagram more room, collapse the panel with the button at its top right (or press <kbd>[</kbd>). The collapsed panel shows how many filters are on, so hidden domains aren't forgotten. The map remembers whether the panel is open in your browser.
+
+## Share a view
+
+The domains you've hidden, the **Only references across domains** filter, and the grouping are all kept in the URL. Copy the URL to share exactly what you're looking at. For example:
+
+```txt
+/visualiser/entity-map?hide=reviews,shopping&crossDomain=true&group=team
+```
+
+## Find an entity
+
+Use **Search nodes** at the top of the diagram to find an entity. Picking one moves the diagram to it and selects it.
+
+## Next steps
+
+- [Add entities to resources](/docs/development/guides/resources/entities/add-entities-to-resources)
+- [Model entity relationships](/docs/development/guides/resources/entities/model-entity-relationships)
+- [Entity maps](/docs/development/guides/resources/entities/entity-maps)

package/dist/docs/development/guides/resources/entities/{06-reference.md → 07-reference.md}

@@ -2,7 +2,7 @@
 keywords:
 - EventCatalog entities
 - Entity frontmatter
-sidebar_position: 6
+sidebar_position: 7
 sidebar_label: Reference
 title: Entities reference
 description: Frontmatter fields, paths, and routes for entities in EventCatalog.
@@ -43,6 +43,7 @@ Nested entities use the same `versioned/{version}/index.mdx` pattern inside thei
 | `/visualiser/entities/{entity-id}/{version}` | Entity resource diagram. |
 | `/visualiser/domains/{domain-id}/{version}/entity-map` | Entity Diagram for entities assigned to a domain. |
 | `/visualiser/services/{service-id}/{version}/entity-map` | Entity Diagram for entities assigned to a service. |
+| `/visualiser/entity-map` | [Global Entity Map](/docs/development/guides/resources/entities/global-entity-map): every entity in the catalog, grouped by domain. |
 
 ## Frontmatter example
 

package/dist/eventcatalog.cjs

@@ -175,7 +175,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.9.1";
+var version = "5.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -1,18 +1,18 @@
+import {
+  stopChildWithParent
+} from "./chunk-S5GWAUG5.js";
 import {
   runMigrations
 } from "./chunk-XUAF2H54.js";
 import "./chunk-CA4U2JP7.js";
-import {
-  stopChildWithParent
-} from "./chunk-S5GWAUG5.js";
 import {
   log_build_default
-} from "./chunk-3PWCUWQC.js";
+} from "./chunk-5QOG7UYZ.js";
 import {
   getLicenseStatus,
   printLicenseStatus
 } from "./chunk-AD7CL772.js";
-import "./chunk-YBM7MCOY.js";
+import "./chunk-EXBUNFIM.js";
 import "./chunk-YRZK7HKX.js";
 import "./chunk-CA6WCQ2T.js";
 import "./chunk-CPW6G62V.js";
@@ -39,10 +39,10 @@ import {
 } from "./chunk-NKNOXQ62.js";
 import {
   generate
-} from "./chunk-A3256YCN.js";
+} from "./chunk-EGOTM5ZG.js";
 import {
   logger
-} from "./chunk-JDSFD7IC.js";
+} from "./chunk-ZE2RPUNY.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-PD7KTSYN.js";
@@ -79,7 +79,7 @@ import {
 } from "./chunk-LFQJXLHG.js";
 import {
   VERSION
-} from "./chunk-KGFAIGOT.js";
+} from "./chunk-EETSYUKN.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/generate.cjs

@@ -106,7 +106,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.9.1";
+var version = "5.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-A3256YCN.js";
-import "./chunk-JDSFD7IC.js";
-import "./chunk-KGFAIGOT.js";
+} from "./chunk-EGOTM5ZG.js";
+import "./chunk-ZE2RPUNY.js";
+import "./chunk-EETSYUKN.js";
 import "./chunk-4G7FSRPN.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.9.1";
+var version = "5.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-JDSFD7IC.js";
-import "../chunk-KGFAIGOT.js";
+} from "../chunk-ZE2RPUNY.js";
+import "../chunk-EETSYUKN.js";
 export {
   logger
 };

package/eventcatalog/src/components/MDX/EntityMap/CatalogEntityMap.tsx

@@ -0,0 +1,301 @@
+/**
+ * The entity map of the whole catalog: every entity and the references between them, beside a list of
+ * the domains they belong to, to show or hide each one. Only references that cross domains can be
+ * shown too. What's hidden is kept in the URL (`?hide=`), so a view can be shared.
+ *
+ * Grouping (by domain, system or team) is the visualiser's own "Group by" picker, kept in the URL too,
+ * so it carries over when the graph is drawn again with other domains hidden, a reload or a shared link
+ * (grouping by nothing included). The page starts grouped by domain only when the URL says nothing.
+ */
+import { useEffect, useMemo, useState, type ComponentProps } from 'react';
+import { createPortal } from 'react-dom';
+import type { Edge, Node } from '@xyflow/react';
+import { Boxes, Eye, EyeOff, PanelLeftClose, PanelLeftOpen, Search, Shuffle } from 'lucide-react';
+import AstroNodeGraph from '@components/MDX/NodeGraph/AstroNodeGraph';
+import { getCrossDomainEdges, getDomainSummaries, getShownGraph } from '@utils/node-graphs/catalog-entity-map-view';
+
+type Props = ComponentProps<typeof AstroNodeGraph> & { sharedLaneId: string };
+
+const HIDE_PARAM = 'hide';
+const CROSS_DOMAIN_PARAM = 'crossDomain';
+// Whether the filters are collapsed, remembered in this browser (storage can be unavailable)
+const COLLAPSED_KEY = 'eventcatalog:entity-map:filters-collapsed';
+const PANEL_WIDTH = 288;
+const RAIL_WIDTH = 44;
+
+const readCollapsed = () => {
+  try {
+    return window.localStorage.getItem(COLLAPSED_KEY) === 'true';
+  } catch {
+    return false;
+  }
+};
+const writeCollapsed = (collapsed: boolean) => {
+  try {
+    window.localStorage.setItem(COLLAPSED_KEY, String(collapsed));
+  } catch {
+    // Not remembered, then
+  }
+};
+const isTyping = (target: EventTarget | null) =>
+  target instanceof HTMLElement && (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName));
+
+const readUrl = () => {
+  const params = new URLSearchParams(window.location.search);
+  return {
+    hidden: new Set((params.get(HIDE_PARAM) || '').split(',').filter(Boolean)),
+    crossDomainOnly: params.get(CROSS_DOMAIN_PARAM) === 'true',
+  };
+};
+
+const writeUrl = (hidden: Set<string>, crossDomainOnly: boolean) => {
+  const url = new URL(window.location.href);
+  if (hidden.size > 0) url.searchParams.set(HIDE_PARAM, [...hidden].join(','));
+  else url.searchParams.delete(HIDE_PARAM);
+  if (crossDomainOnly) url.searchParams.set(CROSS_DOMAIN_PARAM, 'true');
+  else url.searchParams.delete(CROSS_DOMAIN_PARAM);
+  window.history.replaceState(window.history.state, '', url);
+};
+
+export default function CatalogEntityMap({ nodes, edges, sharedLaneId, ...graphProps }: Props) {
+  const [{ hidden, crossDomainOnly }, setView] = useState(readUrl);
+  const [query, setQuery] = useState('');
+  const [collapsed, setCollapsed] = useState(readCollapsed);
+  // The graph laid out again for a filtered view, with the view it's for (`key`), so a layout is never
+  // shown for another view while that one's is being made
+  const [laidOut, setLaidOut] = useState<{ key: string; nodes: Node[]; edges: Edge[] } | null>(null);
+
+  const crossDomainEdges = useMemo(() => getCrossDomainEdges(nodes, edges, sharedLaneId), [nodes, edges, sharedLaneId]);
+  const domains = useMemo(
+    () => getDomainSummaries(nodes, crossDomainEdges, sharedLaneId),
+    [nodes, crossDomainEdges, sharedLaneId]
+  );
+  const shown = useMemo(
+    () => getShownGraph({ nodes, edges, crossDomainEdges, hidden, crossDomainOnly }),
+    [nodes, edges, crossDomainEdges, hidden, crossDomainOnly]
+  );
+  // A new graph each time what's shown changes: the visualiser takes its nodes when it mounts
+  const graphKey = [...hidden].sort().join(',') + (crossDomainOnly ? '|cross' : '');
+
+  // Entities hidden leave gaps in the layout the catalog gave the whole map, so what's shown is laid out
+  // again (when grouped, the visualiser lays the groups out itself anyway)
+  useEffect(() => {
+    writeUrl(hidden, crossDomainOnly);
+    if (shown.isEverything) return;
+    let cancelled = false;
+    // The same force layout the catalog gave the whole map. Should it fail, the entities keep their
+    // places in the whole map's layout rather than nothing being drawn
+    import('@utils/node-graphs/entity-layout')
+      .then(({ layoutEntityNodes }) => layoutEntityNodes(shown.nodes, shown.edges))
+      .catch(() => shown.nodes)
+      .then((laidOutNodes) => {
+        if (!cancelled) setLaidOut({ key: graphKey, nodes: laidOutNodes, edges: shown.edges });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [shown, graphKey, hidden, crossDomainOnly]);
+
+  const toggle = (id: string) =>
+    setView((view) => {
+      const next = new Set(view.hidden);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return { ...view, hidden: next };
+    });
+  // Shows only this domain (or everything, when it's the only one shown)
+  const solo = (id: string) =>
+    setView((view) => {
+      const others = domains.filter((domain) => domain.lane.id !== id).map((domain) => domain.lane.id);
+      const isSolo = !view.hidden.has(id) && others.every((other) => view.hidden.has(other));
+      return { ...view, hidden: isSolo ? new Set() : new Set(others) };
+    });
+  const setAll = (visible: boolean) =>
+    setView((view) => ({ ...view, hidden: visible ? new Set() : new Set(domains.map((domain) => domain.lane.id)) }));
+
+  const filteredDomains = domains.filter((domain) => domain.lane.name.toLowerCase().includes(query.toLowerCase()));
+  const graph = shown.isEverything ? { nodes, edges } : laidOut?.key === graphKey ? laidOut : null;
+  // Shown on the collapsed rail, so filters left on aren't forgotten
+  const activeFilters = hidden.size + (crossDomainOnly ? 1 : 0);
+
+  useEffect(() => writeCollapsed(collapsed), [collapsed]);
+  // [ collapses and opens the filters
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== '[' || event.metaKey || event.ctrlKey || event.altKey || isTyping(event.target)) return;
+      event.preventDefault();
+      setCollapsed((isCollapsed) => !isCollapsed);
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, []);
+
+  return (
+    <>
+      <aside
+        style={{ width: collapsed ? RAIL_WIDTH : PANEL_WIDTH }}
+        className="relative shrink-0 border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] rounded-md overflow-hidden transition-[width] duration-300 ease-in-out motion-reduce:transition-none"
+      >
+        {/* Collapsed: a rail to open the filters again */}
+        <div
+          aria-hidden={!collapsed}
+          className={`absolute inset-0 flex flex-col items-center gap-3 py-3 transition-[opacity,visibility] duration-200 ${
+            collapsed ? 'opacity-100 visible delay-150' : 'opacity-0 invisible'
+          }`}
+        >
+          <button
+            type="button"
+            onClick={() => setCollapsed(false)}
+            title="Show filters ([)"
+            aria-label="Show filters"
+            className="p-1.5 rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))] hover:bg-[rgb(var(--ec-accent-subtle)/0.5)]"
+          >
+            <PanelLeftOpen className="h-4 w-4" />
+          </button>
+          {activeFilters > 0 && (
+            <span
+              title={`${activeFilters} filter${activeFilters === 1 ? '' : 's'} on`}
+              className="min-w-[1.25rem] h-5 px-1 flex items-center justify-center rounded-full text-[10px] font-semibold bg-[rgb(var(--ec-accent))] text-[rgb(var(--ec-accent-text))]"
+            >
+              {activeFilters}
+            </span>
+          )}
+          <button
+            type="button"
+            onClick={() => setCollapsed(false)}
+            className="[writing-mode:vertical-rl] rotate-180 text-xs text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] whitespace-nowrap"
+          >
+            {shown.nodes.length} of {nodes.length} entities
+          </button>
+        </div>
+
+        {/* Open: the filters, at their full width so nothing reflows while the panel slides */}
+        <div
+          aria-hidden={collapsed}
+          style={{ width: PANEL_WIDTH - 2 }}
+          className={`h-full flex flex-col transition-[opacity,visibility] duration-200 ${
+            collapsed ? 'opacity-0 invisible' : 'opacity-100 visible delay-100'
+          }`}
+        >
+          <div className="px-4 pt-4 pb-3 border-b border-[rgb(var(--ec-page-border))]">
+            <div className="flex items-start justify-between gap-2">
+              <h1 className="text-sm font-semibold text-[rgb(var(--ec-page-text))]">Global Entity Map</h1>
+              <button
+                type="button"
+                onClick={() => setCollapsed(true)}
+                title="Hide filters ([)"
+                aria-label="Hide filters"
+                className="-mt-1 -mr-2 p-1.5 rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))] hover:bg-[rgb(var(--ec-accent-subtle)/0.5)]"
+              >
+                <PanelLeftClose className="h-4 w-4" />
+              </button>
+            </div>
+            <p className="mt-1 text-xs text-[rgb(var(--ec-page-text-muted))]">
+              {shown.nodes.length} of {nodes.length} entities · {crossDomainEdges.length} references across domains
+            </p>
+          </div>
+
+          <label className="flex items-center gap-2.5 px-4 py-3 border-b border-[rgb(var(--ec-page-border))] cursor-pointer text-xs text-[rgb(var(--ec-page-text))]">
+            <input
+              type="checkbox"
+              checked={crossDomainOnly}
+              onChange={(event) => setView((view) => ({ ...view, crossDomainOnly: event.target.checked }))}
+              className="accent-[rgb(var(--ec-accent))]"
+            />
+            <Shuffle className="h-3.5 w-3.5 text-[rgb(var(--ec-icon-color))]" />
+            <span className="flex-1">Only references across domains</span>
+          </label>
+
+          <div className="px-4 pt-3 pb-2 flex items-center justify-between">
+            <span className="text-[10px] font-semibold uppercase tracking-wider text-[rgb(var(--ec-page-text-muted))]">
+              Domains
+            </span>
+            <span className="flex gap-2 text-[11px]">
+              <button type="button" onClick={() => setAll(true)} className="text-[rgb(var(--ec-accent))] hover:underline">
+                Show all
+              </button>
+              <button type="button" onClick={() => setAll(false)} className="text-[rgb(var(--ec-accent))] hover:underline">
+                Hide all
+              </button>
+            </span>
+          </div>
+          <div className="px-4 pb-2">
+            <div className="flex items-center gap-2 px-2 h-8 rounded-md border border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))]">
+              <Search className="h-3.5 w-3.5 text-[rgb(var(--ec-icon-color))]" />
+              <input
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder="Filter domains"
+                className="flex-1 min-w-0 bg-transparent text-xs outline-none text-[rgb(var(--ec-input-text))]"
+              />
+            </div>
+          </div>
+
+          <ul className="flex-1 overflow-y-auto px-2 pb-3">
+            {filteredDomains.map(({ lane, count, crossDomain }) => {
+              const visible = !hidden.has(lane.id);
+              return (
+                <li
+                  key={lane.id}
+                  className="group flex items-center gap-1 rounded-md hover:bg-[rgb(var(--ec-accent-subtle)/0.5)]"
+                >
+                  <button
+                    type="button"
+                    onClick={() => toggle(lane.id)}
+                    aria-pressed={visible}
+                    className={`flex flex-1 min-w-0 items-center gap-2.5 px-2 py-1.5 text-left text-xs ${
+                      visible ? 'text-[rgb(var(--ec-page-text))]' : 'text-[rgb(var(--ec-page-text-muted))] opacity-60'
+                    }`}
+                  >
+                    {visible ? (
+                      <Eye className="h-3.5 w-3.5 shrink-0 text-[rgb(var(--ec-icon-color))]" />
+                    ) : (
+                      <EyeOff className="h-3.5 w-3.5 shrink-0" />
+                    )}
+                    <span className={`flex-1 truncate ${lane.id.startsWith('__') ? 'italic' : 'font-medium'}`}>{lane.name}</span>
+                    {crossDomain > 0 && (
+                      <span
+                        title={`${crossDomain} references across domains`}
+                        className="flex items-center gap-0.5 text-[10px] text-[rgb(var(--ec-page-text-muted))]"
+                      >
+                        <Shuffle className="h-3 w-3" />
+                        {crossDomain}
+                      </span>
+                    )}
+                    <span className="tabular-nums text-[11px] text-[rgb(var(--ec-page-text-muted))]">{count}</span>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => solo(lane.id)}
+                    title={`Only show ${lane.name}`}
+                    className="mr-1 p-1 rounded opacity-0 group-hover:opacity-100 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))]"
+                  >
+                    <Boxes className="h-3.5 w-3.5" />
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </aside>
+
+      {graph && graph.nodes.length > 0 && (
+        <AstroNodeGraph key={graphKey} {...graphProps} nodes={graph.nodes} edges={graph.edges} />
+      )}
+      {graph && graph.nodes.length === 0 && <EmptyState portalId={graphProps.portalId || `${graphProps.id}-portal`} />}
+    </>
+  );
+}
+
+const EmptyState = ({ portalId }: { portalId: string }) => {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+  useEffect(() => setContainer(document.getElementById(portalId)), [portalId]);
+  if (!container) return null;
+  // Drawn in the graph's box, where the graph would be
+  return createPortal(
+    <div className="flex h-full items-center justify-center text-sm text-[rgb(var(--ec-page-text-muted))]">
+      No entities to show. Pick a domain on the left.
+    </div>,
+    container
+  );
+};