@opensip-cli/dashboard 0.1.0

package/dist/__tests__/dashboard-view-distribution.test.js

@@ -0,0 +1,272 @@
+/// <reference lib="dom" />
+/**
+ * @vitest-environment jsdom
+ *
+ * Functions (distribution) view — the ranked-distribution affordance that
+ * also hosts the in-table name filter folded in from the former standalone
+ * Search subtab. Verifies the search input renders above the table and
+ * re-filters the rows in place by function simple-name.
+ */
+import { describe, expect, it, beforeEach } from 'vitest';
+import { dashboardEditorLinkJs } from '../code-paths/editor-link.js';
+import { dashboardFiltersJs } from '../code-paths/filters.js';
+import { dashboardFunctionCardJs } from '../code-paths/function-card.js';
+import { dashboardFunctionRowJs } from '../code-paths/function-row.js';
+import { dashboardHelpDrawerJs } from '../code-paths/help-drawer.js';
+import { dashboardIndexesJs } from '../code-paths/indexes.js';
+import { dashboardPathUtilsJs } from '../code-paths/path-utils.js';
+import { dashboardTraceJs } from '../code-paths/trace.js';
+import { dashboardViewDistributionJs } from '../code-paths/view-distribution.js';
+import { dashboardViewsRegistryJs } from '../code-paths/views-registry.js';
+function loadEnv(catalog) {
+    const elSrc = `
+function el(tag, attrs, children) {
+  const e = document.createElement(tag);
+  if (attrs) Object.entries(attrs).forEach(([k,v]) => {
+    if (k === 'text') e.textContent = v;
+    else if (k === 'class') e.className = v;
+    else if (k.startsWith('on')) e.addEventListener(k.slice(2), v);
+    else e.setAttribute(k, v);
+  });
+  if (children) children.forEach(c => { if (typeof c === 'string') e.appendChild(document.createTextNode(c)); else if (c) e.appendChild(c); });
+  return e;
+}
+var EDITOR_PROTOCOL = null;
+`;
+    const tail = `
+var graphCatalog = ${JSON.stringify(catalog)};
+var graphIndexes = buildIndexes(graphCatalog);
+return { views, graphCatalog, graphIndexes, filterState };
+`;
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval, sonarjs/code-eval -- Trusted source.
+    const factory = new Function(elSrc +
+        dashboardPathUtilsJs() +
+        dashboardIndexesJs() +
+        dashboardViewsRegistryJs() +
+        dashboardFiltersJs() +
+        dashboardFunctionRowJs() +
+        dashboardHelpDrawerJs() +
+        dashboardEditorLinkJs() +
+        dashboardTraceJs() +
+        dashboardFunctionCardJs() +
+        dashboardViewDistributionJs() +
+        tail);
+    return factory();
+}
+function makeOcc(over) {
+    return {
+        qualifiedName: over.simpleName,
+        line: 1,
+        column: 0,
+        endLine: 5,
+        kind: 'function-declaration',
+        params: [],
+        returnType: null,
+        enclosingClass: null,
+        decorators: [],
+        visibility: 'exported',
+        inTestFile: false,
+        definedInGenerated: false,
+        calls: [],
+        ...over,
+    };
+}
+const catalog = {
+    version: '2.0',
+    tool: 'graph',
+    language: 'typescript',
+    builtAt: 'now',
+    functions: {
+        a: [makeOcc({ bodyHash: 'a', simpleName: 'validateInput', filePath: 'packages/cli/src/a.ts' })],
+        b: [makeOcc({ bodyHash: 'b', simpleName: 'renderTable', filePath: 'packages/cli/src/b.ts' })],
+        c: [makeOcc({ bodyHash: 'c', simpleName: 'parseConfig', filePath: 'packages/cli/src/c.ts' })],
+    },
+};
+function renderDistribution() {
+    const env = loadEnv(catalog);
+    const view = document.createElement('div');
+    env.views
+        .find((v) => v.id === 'distribution')
+        .render(view, env.graphCatalog, env.graphIndexes, env.filterState);
+    return { view };
+}
+beforeEach(() => {
+    document.body.innerHTML = '';
+});
+describe('Functions (distribution) view', () => {
+    it('renders a name-filter search input above the table', () => {
+        const { view } = renderDistribution();
+        const input = view.querySelector('#code-paths-search-distribution');
+        expect(input).not.toBeNull();
+        // The input must precede the rendered table in document order.
+        const firstRow = view.querySelector('[data-body-hash]');
+        expect(firstRow).not.toBeNull();
+        expect(input.compareDocumentPosition(firstRow) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    });
+    it('shows every function before any filtering', () => {
+        const { view } = renderDistribution();
+        expect(view.querySelectorAll('[data-body-hash]').length).toBe(3);
+    });
+    it('re-filters rows in place by simple-name substring', () => {
+        const { view } = renderDistribution();
+        const input = view.querySelector('#code-paths-search-distribution');
+        input.value = 'parse';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        const rows = view.querySelectorAll('[data-body-hash]');
+        expect(rows.length).toBe(1);
+        expect(view.textContent).toContain('parseConfig');
+        expect(view.textContent).not.toContain('validateInput');
+    });
+    it('collapses to the empty state when nothing matches, and restores on clear', () => {
+        const { view } = renderDistribution();
+        const input = view.querySelector('#code-paths-search-distribution');
+        input.value = 'zzz-no-such-name';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        expect(view.querySelectorAll('[data-body-hash]').length).toBe(0);
+        expect(view.querySelector('.empty')).not.toBeNull();
+        input.value = '';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        expect(view.querySelectorAll('[data-body-hash]').length).toBe(3);
+    });
+    it('renders the "Functions (N)" heading with ⓘ ABOVE the controls (like Coupling/Visualization)', () => {
+        const { view } = renderDistribution();
+        const heading = view.querySelector('h3');
+        const info = view.querySelector('.section-info');
+        const controls = view.querySelector('.code-paths-ranked-controls');
+        expect(heading).not.toBeNull();
+        expect(heading.textContent).toContain('Functions (3)'); // 3 functions in the sample
+        expect(info).not.toBeNull();
+        expect(controls).not.toBeNull();
+        // The heading must precede the controls row in document order.
+        expect(heading.compareDocumentPosition(controls) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    });
+    it('updates the heading count as the filter narrows the rows', () => {
+        const { view } = renderDistribution();
+        const input = view.querySelector('#code-paths-search-distribution');
+        input.value = 'parse';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        expect(view.querySelector('h3').textContent).toContain('Functions (1)');
+    });
+    it('renders Kind and Package single-select dropdowns before the search box', () => {
+        const { view } = renderDistribution();
+        const kind = view.querySelector('select[data-control="fn-kind"]');
+        const pkg = view.querySelector('select[data-control="fn-package"]');
+        const search = view.querySelector('#code-paths-search-distribution');
+        expect(kind).not.toBeNull();
+        expect(pkg).not.toBeNull();
+        // Defaults select "all".
+        expect(kind.value).toBe('');
+        expect(pkg.value).toBe('');
+        expect(kind.options[0].textContent).toBe('All kinds');
+        expect(pkg.options[0].textContent).toBe('All packages');
+        // Order in the controls row: Kind, Package, then the search box.
+        expect(kind.compareDocumentPosition(pkg) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+        expect(pkg.compareDocumentPosition(search) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    });
+    it('filters the table by the selected Package', () => {
+        const env = loadEnv({
+            version: '2.0',
+            tool: 'graph',
+            language: 'typescript',
+            builtAt: 'now',
+            functions: {
+                a: [
+                    makeOcc({
+                        bodyHash: 'a',
+                        simpleName: 'validateInput',
+                        filePath: 'packages/cli/src/a.ts',
+                    }),
+                ],
+                z: [
+                    makeOcc({
+                        bodyHash: 'z',
+                        simpleName: 'ztarget',
+                        filePath: 'packages/contracts/src/z.ts',
+                    }),
+                ],
+            },
+        });
+        const view = document.createElement('div');
+        env.views
+            .find((v) => v.id === 'distribution')
+            .render(view, env.graphCatalog, env.graphIndexes, env.filterState);
+        expect(view.querySelectorAll('[data-body-hash]').length).toBe(2);
+        const pkg = view.querySelector('select[data-control="fn-package"]');
+        pkg.value = 'contracts';
+        pkg.dispatchEvent(new Event('change', { bubbles: true }));
+        const rows = view.querySelectorAll('[data-body-hash]');
+        expect(rows.length).toBe(1);
+        expect(view.textContent).toContain('ztarget');
+        expect(view.textContent).not.toContain('validateInput');
+    });
+    it('no longer renders a "Test-only" column', () => {
+        const { view } = renderDistribution();
+        const headers = [...view.querySelectorAll('th')].map((th) => th.textContent);
+        expect(headers).not.toContain('Test-only');
+    });
+    it('the "Test-only" toggle narrows the table to test-only functions', () => {
+        const edge = {
+            line: 1,
+            column: 0,
+            resolution: 'static',
+            confidence: 'high',
+            text: 'x()',
+        };
+        const env = loadEnv({
+            version: '2.0',
+            tool: 'graph',
+            language: 'typescript',
+            builtAt: 'now',
+            functions: {
+                // Production fn reached ONLY from a test file → test-only.
+                prod: [
+                    makeOcc({ bodyHash: 'prod', simpleName: 'prodFn', filePath: 'packages/cli/src/prod.ts' }),
+                ],
+                // Production fn reached from production code → not test-only.
+                normal: [
+                    makeOcc({
+                        bodyHash: 'normal',
+                        simpleName: 'normalFn',
+                        filePath: 'packages/cli/src/normal.ts',
+                    }),
+                ],
+                normalCaller: [
+                    makeOcc({
+                        bodyHash: 'normalCaller',
+                        simpleName: 'callerFn',
+                        filePath: 'packages/cli/src/nc.ts',
+                        calls: [{ to: ['normal'], ...edge }],
+                    }),
+                ],
+                // A test-file fn that calls prod (excluded from the table by production-only default).
+                testFn: [
+                    makeOcc({
+                        bodyHash: 'testFn',
+                        simpleName: 'testFn',
+                        filePath: 'packages/cli/src/__tests__/t.test.ts',
+                        inTestFile: true,
+                        calls: [{ to: ['prod'], ...edge }],
+                    }),
+                ],
+            },
+        });
+        const view = document.createElement('div');
+        env.views
+            .find((v) => v.id === 'distribution')
+            .render(view, env.graphCatalog, env.graphIndexes, env.filterState);
+        // Production-only by default (testFn lives in a test file) → 3 rows.
+        expect(view.querySelectorAll('[data-body-hash]').length).toBe(3);
+        const toggle = view.querySelector('input[data-control="fn-toggle"]');
+        expect(toggle).not.toBeNull();
+        // The toggle renders after the search box.
+        const search = view.querySelector('#code-paths-search-distribution');
+        expect(search.compareDocumentPosition(toggle) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+        toggle.checked = true;
+        toggle.dispatchEvent(new Event('change', { bubbles: true }));
+        // Only the test-only production function remains.
+        expect(view.querySelectorAll('[data-body-hash]').length).toBe(1);
+        expect(view.textContent).toContain('prodFn');
+        expect(view.textContent).not.toContain('normalFn');
+    });
+});
+//# sourceMappingURL=dashboard-view-distribution.test.js.map

package/dist/__tests__/dashboard-view-distribution.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-view-distribution.test.js","sourceRoot":"","sources":["../../src/__tests__/dashboard-view-distribution.test.ts"],"names":[],"mappings":"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"}

package/dist/__tests__/dashboard-view-graph.test.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * View 8 (Visualization) — Cytoscape PACKAGE node-link view (item 10/11).
+ *
+ * The emitter is snapshotted (matches the other view-*.test.ts pattern) and
+ * exercised structurally: the view registers with id 'graph' and label
+ * 'Visualization', renders the layout selector + canvas from an embedded
+ * package-level view-model blob, falls back to an empty state when the blob is
+ * missing, and bans any @opensip-cli/graph import.
+ */
+export {};
+//# sourceMappingURL=dashboard-view-graph.test.d.ts.map

package/dist/__tests__/dashboard-view-graph.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-view-graph.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/dashboard-view-graph.test.ts"],"names":[],"mappings":"AACA;;;;;;;;;;GAUG"}

package/dist/__tests__/dashboard-view-graph.test.js

@@ -0,0 +1,332 @@
+/// <reference lib="dom" />
+/**
+ * @vitest-environment jsdom
+ *
+ * View 8 (Visualization) — Cytoscape PACKAGE node-link view (item 10/11).
+ *
+ * The emitter is snapshotted (matches the other view-*.test.ts pattern) and
+ * exercised structurally: the view registers with id 'graph' and label
+ * 'Visualization', renders the layout selector + canvas from an embedded
+ * package-level view-model blob, falls back to an empty state when the blob is
+ * missing, and bans any @opensip-cli/graph import.
+ */
+import { describe, expect, it, beforeEach } from 'vitest';
+import { dashboardCytoscapeVendorJs } from '../code-paths/cytoscape-vendor.js';
+import { dashboardFiltersJs } from '../code-paths/filters.js';
+import { dashboardFunctionRowJs } from '../code-paths/function-row.js';
+import { dashboardHelpDrawerJs } from '../code-paths/help-drawer.js';
+import { dashboardIndexesJs } from '../code-paths/indexes.js';
+import { dashboardPathUtilsJs } from '../code-paths/path-utils.js';
+import { dashboardSearchJs } from '../code-paths/search.js';
+import { dashboardViewGraphJs } from '../code-paths/view-graph.js';
+import { dashboardViewsRegistryJs } from '../code-paths/views-registry.js';
+function loadEnv(withVendor) {
+    const elSrc = `
+function el(tag, attrs, children) {
+  const e = document.createElement(tag);
+  if (attrs) Object.entries(attrs).forEach(([k,v]) => {
+    if (k === 'text') e.textContent = v;
+    else if (k === 'class') e.className = v;
+    else if (k.startsWith('on')) e.addEventListener(k.slice(2), v);
+    else e.setAttribute(k, v);
+  });
+  if (children) children.forEach(c => { if (typeof c === 'string') e.appendChild(document.createTextNode(c)); else if (c) e.appendChild(c); });
+  return e;
+}
+var graphCatalog = null;
+var graphIndexes = { byBodyHash: new Map(), bySimpleName: new Map(), callees: new Map(), callers: new Map() };
+`;
+    const tail = `
+return { views };
+`;
+    const parts = [elSrc];
+    if (withVendor)
+        parts.push(dashboardCytoscapeVendorJs());
+    parts.push(dashboardPathUtilsJs(), dashboardIndexesJs(), dashboardViewsRegistryJs(), dashboardFiltersJs(), dashboardSearchJs(), dashboardFunctionRowJs(), // declares makeSectionHeading (the ⓘ heading helper)
+    dashboardHelpDrawerJs(), // declares openHelpDrawer (so the ⓘ button renders)
+    dashboardViewGraphJs(), tail);
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval, sonarjs/code-eval -- Trusted source.
+    const factory = new Function(parts.join('\n'));
+    return factory();
+}
+function embedViewModel(vm) {
+    const blob = document.createElement('script');
+    blob.type = 'application/json';
+    blob.id = 'graph-view-model';
+    blob.textContent = JSON.stringify(vm);
+    document.body.append(blob);
+}
+// Package-level sample: two packages, one directed edge pkg-a → pkg-b.
+const SAMPLE_VM = {
+    language: 'typescript',
+    nodes: [
+        { id: 'pkg-a', label: 'pkg-a', totalCoupling: 3, sccId: null },
+        { id: 'pkg-b', label: 'pkg-b', totalCoupling: 3, sccId: null },
+    ],
+    edges: [{ source: 'pkg-a', target: 'pkg-b', weight: 3, isCycleEdge: false }],
+};
+beforeEach(() => {
+    document.body.innerHTML = '';
+});
+describe('dashboardViewGraphJs (emitter)', () => {
+    it('matches the snapshot', () => {
+        expect(dashboardViewGraphJs()).toMatchSnapshot();
+    });
+    it('imports nothing from @opensip-cli/graph', () => {
+        expect(dashboardViewGraphJs()).not.toContain('@opensip-cli/graph');
+    });
+});
+describe('View 8 — Visualization', () => {
+    it('registers a view with id "graph" and label "Visualization"', () => {
+        const env = loadEnv(false);
+        const view = env.views.find((v) => v.id === 'graph');
+        expect(view).toBeDefined();
+        expect(view.label).toBe('Visualization');
+        expect(typeof view.render).toBe('function');
+        expect(typeof view.onActivate).toBe('function');
+    });
+    it('keeps the view id stable as "graph" for deep-link hashes', () => {
+        // The label changed (item 11) but the id must NOT churn.
+        expect(dashboardViewGraphJs()).toContain("id: 'graph'");
+        expect(dashboardViewGraphJs()).toContain("label: 'Visualization'");
+    });
+    it('renders the empty state when no view-model blob is present', () => {
+        const env = loadEnv(false);
+        const c = document.createElement('div');
+        env.views.find((v) => v.id === 'graph').render(c, null, null, null);
+        expect(c.querySelector('.empty')).not.toBeNull();
+        expect(c.querySelector('.empty').textContent).toContain('No graph to display');
+    });
+    it('renders the renderer-unavailable state when cytoscape is missing', () => {
+        const env = loadEnv(false); // no vendor → no cytoscape global
+        embedViewModel(SAMPLE_VM);
+        const c = document.createElement('div');
+        document.body.append(c);
+        env.views.find((v) => v.id === 'graph').render(c, null, null, null);
+        expect(c.querySelector('.empty').textContent).toContain('Graph renderer unavailable');
+        expect(c.querySelector('#code-paths-graph-canvas')).toBeNull();
+    });
+    it('renders the layout selector as a dropdown with dagre/cose/breadthfirst', () => {
+        const env = loadEnv(true);
+        embedViewModel(SAMPLE_VM);
+        const c = document.createElement('div');
+        document.body.append(c);
+        env.views.find((v) => v.id === 'graph').render(c, null, null, null);
+        const layout = c.querySelector('select[data-control="layout"]');
+        expect(layout).not.toBeNull();
+        expect([...layout.options].map((o) => o.value)).toEqual(['dagre', 'cose', 'breadthfirst']);
+        expect(layout.value).toBe('dagre'); // default
+    });
+    it('renders a section heading with an ⓘ help button (consistent with Coupling/Functions)', () => {
+        const env = loadEnv(true);
+        embedViewModel(SAMPLE_VM);
+        const c = document.createElement('div');
+        document.body.append(c);
+        env.views.find((v) => v.id === 'graph').render(c, null, null, null);
+        const heading = c.querySelector('h3');
+        expect(heading).not.toBeNull();
+        expect(heading.textContent).toContain('Visualization');
+        const info = c.querySelector('.section-info');
+        expect(info).not.toBeNull();
+    });
+    it('renders the "Highlight cycles" toggle as a checkbox in the control toolbar', () => {
+        const env = loadEnv(true);
+        embedViewModel(SAMPLE_VM);
+        const c = document.createElement('div');
+        document.body.append(c);
+        env.views.find((v) => v.id === 'graph').render(c, null, null, null);
+        const sccCb = c.querySelector('input[type="checkbox"][data-scc-toggle]');
+        expect(sccCb).not.toBeNull();
+        const lbl = c.querySelector('.code-paths-graph-checkbox');
+        expect(lbl).not.toBeNull();
+        expect(lbl.textContent).toContain('Highlight cycles');
+    });
+    it('mounts a cytoscape canvas when the renderer is present', () => {
+        const env = loadEnv(true);
+        embedViewModel(SAMPLE_VM);
+        const c = document.createElement('div');
+        document.body.append(c);
+        env.views.find((v) => v.id === 'graph').render(c, null, null, null);
+        expect(c.querySelector('#code-paths-graph-canvas')).not.toBeNull();
+    });
+    it('renders the package-name search box above the canvas', () => {
+        const env = loadEnv(true);
+        embedViewModel(SAMPLE_VM);
+        const c = document.createElement('div');
+        document.body.append(c);
+        env.views.find((v) => v.id === 'graph').render(c, null, null, null);
+        const input = c.querySelector('#code-paths-graph-search-input');
+        expect(input).not.toBeNull();
+        expect(input.getAttribute('placeholder')).toContain('package');
+    });
+    it('reuses the shared fuzzyMatch index for search (no separate index)', () => {
+        expect(dashboardViewGraphJs()).toContain('fuzzyMatch');
+    });
+    it('sizes nodes by totalCoupling and edges by weight (package encoding)', () => {
+        const js = dashboardViewGraphJs();
+        expect(js).toContain("ele.data('totalCoupling')");
+        expect(js).toContain("ele.data('weight')");
+    });
+    it('drives impact highlight off live package adjacency and clears on Esc', () => {
+        const js = dashboardViewGraphJs();
+        // Package-level impact uses the live cytoscape neighborhood, not the
+        // function-level graphIndexes adjacency.
+        expect(js).toContain("incomers('node')");
+        expect(js).toContain("outgoers('node')");
+        expect(js).toContain("e.key === 'Escape'");
+    });
+    it('does not consult the shared Explore filterState (the view owns its controls)', () => {
+        const js = dashboardViewGraphJs();
+        // The view never calls the shared passesFilter; package level is whole-graph
+        // and function level applies its OWN Scope/Kind filter inside the projector.
+        expect(js).not.toContain('passesFilter');
+        expect(js).not.toContain('No nodes match the active filters');
+    });
+    it('renders Level/Scope/Package/Kind/Edges, with Package, Kind & Edges disabled (not hidden) at package level', () => {
+        const env = loadEnv(true);
+        embedViewModel(SAMPLE_VM);
+        const c = document.createElement('div');
+        document.body.append(c);
+        env.views.find((v) => v.id === 'graph').render(c, null, null, null);
+        const level = c.querySelector('select[data-control="level"]');
+        const scope = c.querySelector('select[data-control="scope"]');
+        const pkg = c.querySelector('select[data-control="package"]');
+        // Kind is a custom multi-select dropdown (trigger button + checkbox panel),
+        // not a native <select multiple>.
+        const kind = c.querySelector('button[data-control="kind"]');
+        const edges = c.querySelector('select[data-control="granularity"]');
+        expect(level).not.toBeNull();
+        expect(scope).not.toBeNull();
+        expect(level.value).toBe('package'); // default
+        expect(kind).not.toBeNull();
+        expect(kind.classList.contains('code-paths-graph-ms-trigger')).toBe(true);
+        // Edges is now ALWAYS rendered (was hidden until function level).
+        expect(edges).not.toBeNull();
+        // Package, Kind & Edges only apply at function level → disabled (greyed),
+        // not hidden, at package level — consistent across the three.
+        expect(pkg.disabled).toBe(true);
+        expect(kind.disabled).toBe(true);
+        expect(edges.disabled).toBe(true);
+    });
+    it('Kind multi-select enables at function level and updates the graph on close', () => {
+        const occA = {
+            bodyHash: 'A',
+            simpleName: 'a',
+            filePath: 'packages/pkg-a/src/a.ts',
+            kind: 'function-declaration',
+            inTestFile: false,
+            qualifiedName: 'a',
+        };
+        const occB = {
+            bodyHash: 'B',
+            simpleName: 'b',
+            filePath: 'packages/pkg-a/src/b.ts',
+            kind: 'method',
+            inTestFile: false,
+            qualifiedName: 'b',
+        };
+        const indexes = {
+            byBodyHash: new Map([
+                ['A', occA],
+                ['B', occB],
+            ]),
+            occurrencesByHash: new Map([
+                ['A', [occA]],
+                ['B', [occB]],
+            ]),
+            bySimpleName: new Map(),
+            callees: new Map([['A', ['B']]]),
+            callers: new Map([['B', ['A']]]),
+        };
+        const catalog = {
+            version: '2.0',
+            tool: 'graph',
+            language: 'typescript',
+            builtAt: 'now',
+            functions: { a: [occA], b: [occB] },
+        };
+        const env = loadEnv(true);
+        const c = document.createElement('div');
+        document.body.append(c);
+        env.views.find((v) => v.id === 'graph').render(c, catalog, indexes, null);
+        // Switch to function level + pick pkg-a so Kind becomes enabled.
+        const level = c.querySelector('select[data-control="level"]');
+        level.value = 'function';
+        level.dispatchEvent(new Event('change'));
+        const pkg = c.querySelector('select[data-control="package"]');
+        pkg.value = 'pkg-a';
+        pkg.dispatchEvent(new Event('change'));
+        const kindTrigger = c.querySelector('button[data-control="kind"]');
+        expect(kindTrigger.disabled).toBe(false);
+        expect(kindTrigger.textContent).toContain('All kinds');
+        // Open the popover, check one kind, close → graph re-renders, canvas present.
+        kindTrigger.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        const boxes = c.querySelectorAll('.code-paths-graph-ms-panel input[type="checkbox"]');
+        expect(boxes.length).toBeGreaterThan(0);
+        boxes[0].checked = true;
+        boxes[0].dispatchEvent(new Event('change'));
+        // Closing (re-click) applies the selection and re-renders.
+        c.querySelector('button[data-control="kind"]').dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        expect(c.querySelector('#code-paths-graph-canvas')).not.toBeNull();
+    });
+    it("projects a single package's function graph at function level (intra-package)", () => {
+        // Two functions in pkg-a, a → b. Switching to function level + selecting
+        // pkg-a should project them into a Cytoscape canvas (intra-package default).
+        const occA = {
+            bodyHash: 'A',
+            simpleName: 'a',
+            filePath: 'packages/pkg-a/src/a.ts',
+            kind: 'function-declaration',
+            inTestFile: false,
+            qualifiedName: 'a',
+        };
+        const occB = {
+            bodyHash: 'B',
+            simpleName: 'b',
+            filePath: 'packages/pkg-a/src/b.ts',
+            kind: 'function-declaration',
+            inTestFile: false,
+            qualifiedName: 'b',
+        };
+        const indexes = {
+            byBodyHash: new Map([
+                ['A', occA],
+                ['B', occB],
+            ]),
+            occurrencesByHash: new Map([
+                ['A', [occA]],
+                ['B', [occB]],
+            ]),
+            bySimpleName: new Map(),
+            callees: new Map([['A', ['B']]]),
+            callers: new Map([['B', ['A']]]),
+        };
+        const catalog = {
+            version: '2.0',
+            tool: 'graph',
+            language: 'typescript',
+            builtAt: 'now',
+            functions: { a: [occA], b: [occB] },
+        };
+        const env = loadEnv(true);
+        const c = document.createElement('div');
+        document.body.append(c);
+        env.views.find((v) => v.id === 'graph').render(c, catalog, indexes, null);
+        // Switch Level → function (re-renders in place via the change handler).
+        const level = c.querySelector('[data-control="level"]');
+        level.value = 'function';
+        level.dispatchEvent(new Event('change'));
+        // Before a package is chosen, the view prompts for one (no canvas yet).
+        expect(c.querySelector('#code-paths-graph-canvas')).toBeNull();
+        expect(c.querySelector('.empty').textContent).toContain('Select a package');
+        // Choose pkg-a → the function graph projects and the canvas mounts.
+        const pkg = c.querySelector('[data-control="package"]');
+        expect([...pkg.options].map((o) => o.value)).toContain('pkg-a');
+        pkg.value = 'pkg-a';
+        pkg.dispatchEvent(new Event('change'));
+        expect(c.querySelector('#code-paths-graph-canvas')).not.toBeNull();
+        // The Edges (intra vs cross-package) toggle appears only at function level.
+        expect(c.querySelector('[data-control="granularity"]')).not.toBeNull();
+    });
+});
+//# sourceMappingURL=dashboard-view-graph.test.js.map