Add grid row visibility summary component

Author: eviltester

apps/web/src/stories/data-grid-editor.stories.js

@@ -42,7 +42,7 @@ const meta = {
     docs: {
       description: {
         component:
-          'DataGridComponent is the Phase 7 app-side component boundary that composes the extracted GridToolbar with the shared late-mount-safe TabulatorGridAdapter. It preserves the current app DOM contract while moving the main grid onto the component model, including the live total-row status underneath the grid.',
+          'DataGridComponent is the Phase 7 app-side component boundary that composes the extracted GridToolbar, the dedicated GridRowVisibilitySummary MVC control, and the shared late-mount-safe TabulatorGridAdapter. It preserves the current app DOM contract while moving the main grid and its live row-summary status onto the component model.',
       },
     },
   },
@@ -59,7 +59,7 @@ export const EmptyGrid = {
     docs: {
       description: {
         story:
-          'Shows the componentized app-side grid editor with the real Tabulator renderer but without seeded rows. Try using Add Row to confirm the toolbar is mounted through the new component boundary and the real grid host is present.',
+          'Shows the componentized app-side grid editor with the real Tabulator renderer but without seeded rows. Try using Add Row to confirm the toolbar, extracted row-summary status, and real grid host are mounted through the new component boundary.',
       },
     },
   },
@@ -82,7 +82,7 @@ export const WithSampleData = {
     docs: {
       description: {
         story:
-          'Shows the same component after seeding real grid data through the shared grid extension API. This is the high-fidelity story for reviewing the real Tabulator-backed app grid surface.',
+          'Shows the same component after seeding real grid data through the shared grid extension API. This is the high-fidelity story for reviewing the real Tabulator-backed app grid surface together with its extracted row-summary control.',
       },
     },
   },

apps/web/src/stories/grid-row-visibility-summary.stories.js

@@ -0,0 +1,126 @@
+import { expect, userEvent, within } from 'storybook/test';
+import { createGridRowVisibilitySummaryComponent } from '../../../../packages/core-ui/js/gui_components/data-grid-editor/grid-row-visibility-summary/index.js';
+
+function renderGridRowVisibilitySummaryStory(args) {
+  const root = document.createElement('section');
+  root.style.display = 'flex';
+  root.style.flexDirection = 'column';
+  root.style.gap = '0.75rem';
+  root.style.padding = '0.75rem';
+  root.style.background = 'var(--panel-bg)';
+  root.style.color = 'var(--page-text)';
+  const statusRoot = document.createElement('div');
+  const controlsRoot = document.createElement('div');
+  controlsRoot.style.display = 'flex';
+  controlsRoot.style.flexWrap = 'wrap';
+  controlsRoot.style.gap = '0.5rem';
+  controlsRoot.innerHTML = `
+    <button type="button" data-action="show-filtered">Show Filtered Summary</button>
+    <button type="button" data-action="clear-filtered">Clear Filtered Summary</button>
+  `;
+
+  root.appendChild(statusRoot);
+  root.appendChild(controlsRoot);
+
+  const component = createGridRowVisibilitySummaryComponent({
+    root: statusRoot,
+    documentObj: document,
+    props: {
+      totalRowCount: args.totalRowCount,
+      visibleRowCount: args.visibleRowCount,
+      hasActiveFilters: args.hasActiveFilters,
+    },
+  });
+
+  controlsRoot.querySelector('[data-action="show-filtered"]')?.addEventListener('click', () => {
+    component.update({
+      totalRowCount: 8,
+      visibleRowCount: 3,
+      hasActiveFilters: true,
+    });
+  });
+  controlsRoot.querySelector('[data-action="clear-filtered"]')?.addEventListener('click', () => {
+    component.update({
+      totalRowCount: args.totalRowCount,
+      visibleRowCount: args.totalRowCount,
+      hasActiveFilters: false,
+    });
+  });
+
+  root.__storybookCleanup = () => component.destroy();
+  return root;
+}
+
+const meta = {
+  title: 'Data Grid Editor/Grid Row Visibility Summary',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'GridRowVisibilitySummary is the extracted MVC status control for the Data Grid Editor row totals. It shows the always-visible total row count and conditionally adds the filtered visible count when the grid is actively filtered.',
+      },
+    },
+  },
+  args: {
+    totalRowCount: 8,
+    visibleRowCount: 8,
+    hasActiveFilters: false,
+  },
+  render: renderGridRowVisibilitySummaryStory,
+};
+
+export default meta;
+
+export const TotalOnly = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows the default summary state with only the total row count visible. Reviewers should see the same status text that appears beneath the full data-grid component when no filters are active.',
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole('status')).toHaveTextContent('Total rows: 8');
+  },
+};
+
+export const FilteredVisible = {
+  args: {
+    totalRowCount: 8,
+    visibleRowCount: 3,
+    hasActiveFilters: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows the filtered state. Reviewers should see both the total row count and the filtered visible count, matching the app behavior after a global or column filter is applied.',
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole('status')).toHaveTextContent('Total rows: 8 | Filtered Visible: 3');
+  },
+};
+
+export const InteractiveStateChange = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates the component state transition. Try the buttons to switch between the filtered and unfiltered summaries and confirm the status text updates without the full grid story around it.',
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button', { name: 'Show Filtered Summary' }));
+    await expect(canvas.getByRole('status')).toHaveTextContent('Total rows: 8 | Filtered Visible: 3');
+    await userEvent.click(canvas.getByRole('button', { name: 'Clear Filtered Summary' }));
+    await expect(canvas.getByRole('status')).toHaveTextContent('Total rows: 8');
+  },
+};

apps/web/styles.css

@@ -80,6 +80,13 @@ body.theme-dark a:hover {
   gap: 1rem;
 }
 
+.data-grid-total-rows {
+  color: var(--page-text);
+  background: transparent;
+  font-size: 1.05rem;
+  line-height: 1.4;
+}
+
 /* was #3D5249 - then docusaurus uses #2e8555*/
 .header {
   background-color: var(--header-bg);

docs/frontend-component-migration-plan.md

@@ -565,6 +565,7 @@ Current status:
 - The post-`SchemaPanel` re-audit found no urgent missing primary stories for schema, page shells, instructions, app data population, generator controls, generator preview, data grid editor, import/export toolbar, text preview editor, format selector, or format options. The next useful Storybook-driven splits are smaller visible sub-surfaces: the import/export options-preview split layout and the generator output-format selector.
 - The import/export options-preview shell is now a focused app-side component with its own Storybook docs and direct tests. `ImportExportWorkspaceView` no longer owns the splitter drag/keyboard/clamping behavior itself; it now composes the dedicated split-layout boundary through `TextPreviewEditor`.
 - `GeneratorControls` now composes a dedicated `GeneratorOutputFormatSelector` component, and Storybook documents that selector directly through `generator-output-format-selector.stories.js` instead of only through the larger controls surface.
+- `DataGridComponent` now composes a dedicated `GridRowVisibilitySummary` MVC control, and Storybook documents that status surface directly through `grid-row-visibility-summary.stories.js` instead of only through the full data-grid story.
 - The `TextPreviewEditor` re-audit showed that its Preview/Edit controls were still a meaningful visible sub-surface. That cluster is now a dedicated `TextPreviewToolbar` component with its own Storybook docs and focused tests, while `TextPreviewEditor` keeps the textarea and split-layout shell composition.
 - `ImportExportWorkspace` now shows a dedicated grid/preview sync row above a closed-by-default native `Import / Export` details section, leaving Auto Sync, Preview/Edit, row count, format tabs, and text preview outside the collapsible import/export toolbar area.
 - App download controls and generator controls now also expose reviewer-facing file export encoding settings through a small settings disclosure, with Storybook examples covering default OS-derived line endings and explicit Windows CR/LF plus BOM output.

packages/core-ui/js/gui_components/data-grid-editor/data-grid-component-view.js

@@ -1,6 +1,7 @@
 import { createTextInputDialogService } from '../shared/dialog-services/text-input-dialog-service.js';
 import { escapeHtml } from '../shared/html-escape.js';
 import { createGridToolbarComponent } from './grid-toolbar/index.js';
+import { createGridRowVisibilitySummaryComponent } from './grid-row-visibility-summary/index.js';
 import { showGridError } from './grid-error-surface.js';
 import { GuardedColumnEdits } from './shared/guarded-column-edits.js';
 import { renderColumnHeaderActionButtonsHtml } from './shared/column-header-action-buttons.js';
@@ -142,6 +143,7 @@ class DataGridComponentView {
     this.gridReadyPromise = Promise.resolve(null);
     this.textInputDialogService = null;
     this.unsubscribeGridChanged = null;
+    this.gridRowVisibilitySummary = null;
     this.totalRowsFrame = null;
     this.contextMenuState = { open: false, x: 0, y: 0 };
     this.handleGridContextMenu = (event) => this.onGridContextMenu(event);
@@ -173,12 +175,7 @@ class DataGridComponentView {
           role="status"
         ></div>
         <div id="myGrid" style="height: 500px; width:100%;" class="ag-theme-alpine" data-role="data-grid-root"></div>
-        <div
-          data-role="grid-total-rows"
-          class="data-grid-total-rows"
-          aria-live="polite"
-          role="status"
-        >Total rows: 0</div>
+        <div data-role="grid-row-visibility-summary-root"></div>
         <div
           class="data-grid-context-menu"
           data-role="data-grid-context-menu"
@@ -222,6 +219,16 @@ class DataGridComponentView {
         onUniqueColumnNamesChange: (uniqueColumnNames) => this.controller.setUniqueColumnNames(uniqueColumnNames),
       },
     });
+    const gridRowVisibilitySummaryRoot = this.root.querySelector('[data-role="grid-row-visibility-summary-root"]');
+    this.gridRowVisibilitySummary = createGridRowVisibilitySummaryComponent({
+      root: gridRowVisibilitySummaryRoot,
+      documentObj: this.documentObj,
+      props: {
+        totalRowCount: 0,
+        visibleRowCount: 0,
+        hasActiveFilters: false,
+      },
+    });
 
     this.gridAdapter = createTabulatorGridAdapter({
       rootElement: gridRoot,
@@ -275,8 +282,7 @@ class DataGridComponentView {
   }
 
   syncTotalRows() {
-    const totalRowsElement = this.root?.querySelector?.('[data-role="grid-total-rows"]');
-    if (!totalRowsElement) {
+    if (!this.gridRowVisibilitySummary) {
       return;
     }
 
@@ -287,9 +293,11 @@ class DataGridComponentView {
     const normalizedTotalRows = Number.isFinite(totalRows) ? totalRows : 0;
     const normalizedVisibleRowCount = Number.isFinite(visibleRowCount) ? visibleRowCount : 0;
 
-    totalRowsElement.textContent = hasActiveFilters
-      ? `Total rows: ${normalizedTotalRows} | Filtered Visible: ${normalizedVisibleRowCount}`
-      : `Total rows: ${normalizedTotalRows}`;
+    this.gridRowVisibilitySummary.update({
+      totalRowCount: normalizedTotalRows,
+      visibleRowCount: normalizedVisibleRowCount,
+      hasActiveFilters,
+    });
   }
 
   getGridAdapter() {
@@ -469,6 +477,8 @@ class DataGridComponentView {
     }
     this.unsubscribeGridChanged?.();
     this.unsubscribeGridChanged = null;
+    this.gridRowVisibilitySummary?.destroy?.();
+    this.gridRowVisibilitySummary = null;
     this.toolbar?.destroy?.();
     this.toolbar = null;
     this.gridAdapter?.destroy?.();

packages/core-ui/js/gui_components/data-grid-editor/grid-row-visibility-summary/grid-row-visibility-summary-controller.js

@@ -0,0 +1,44 @@
+function normalizeCount(value) {
+  const parsed = Number.parseInt(value, 10);
+  if (!Number.isFinite(parsed)) {
+    return 0;
+  }
+  return Math.max(0, parsed);
+}
+
+function normalizeProps(props = {}) {
+  return {
+    totalRowCount: normalizeCount(props.totalRowCount),
+    visibleRowCount: normalizeCount(props.visibleRowCount),
+    hasActiveFilters: props.hasActiveFilters === true,
+    className: props.className || 'data-grid-total-rows',
+    totalLabel: props.totalLabel || 'Total rows',
+    filteredLabel: props.filteredLabel || 'Filtered Visible',
+    roleName: props.roleName || 'grid-total-rows',
+  };
+}
+
+class GridRowVisibilitySummaryController {
+  constructor({ props = {} } = {}) {
+    this.state = normalizeProps(props);
+  }
+
+  updateProps(nextProps = {}) {
+    this.state = normalizeProps({ ...this.state, ...nextProps });
+  }
+
+  getState() {
+    return { ...this.state };
+  }
+
+  getDisplayText() {
+    const state = this.getState();
+    const totalText = `${state.totalLabel}: ${state.totalRowCount}`;
+    if (!state.hasActiveFilters) {
+      return totalText;
+    }
+    return `${totalText} | ${state.filteredLabel}: ${state.visibleRowCount}`;
+  }
+}
+
+export { GridRowVisibilitySummaryController };

packages/core-ui/js/gui_components/data-grid-editor/grid-row-visibility-summary/grid-row-visibility-summary-view.js

@@ -0,0 +1,37 @@
+function getDefaultDocumentObj() {
+  return typeof document !== 'undefined' ? document : null;
+}
+
+class GridRowVisibilitySummaryView {
+  constructor({ root, controller, documentObj = getDefaultDocumentObj() } = {}) {
+    this.root = root;
+    this.controller = controller;
+    this.documentObj = documentObj;
+  }
+
+  mount() {
+    if (!this.root) {
+      throw new Error('GridRowVisibilitySummaryView requires a root element');
+    }
+    this.render();
+  }
+
+  render() {
+    const state = this.controller.getState();
+    this.root.className = state.className;
+    this.root.setAttribute('data-role', state.roleName);
+    this.root.setAttribute('aria-live', 'polite');
+    this.root.setAttribute('role', 'status');
+    this.root.textContent = this.controller.getDisplayText();
+  }
+
+  destroy() {
+    this.root.className = '';
+    this.root.removeAttribute('aria-live');
+    this.root.removeAttribute('role');
+    this.root.removeAttribute('data-role');
+    this.root.textContent = '';
+  }
+}
+
+export { GridRowVisibilitySummaryView };

packages/core-ui/js/gui_components/data-grid-editor/grid-row-visibility-summary/index.js

@@ -0,0 +1,26 @@
+import { GridRowVisibilitySummaryController } from './grid-row-visibility-summary-controller.js';
+import { GridRowVisibilitySummaryView } from './grid-row-visibility-summary-view.js';
+
+function createGridRowVisibilitySummaryComponent({ root, props = {}, documentObj } = {}) {
+  const controller = new GridRowVisibilitySummaryController({ props });
+  const view = new GridRowVisibilitySummaryView({ root, controller, documentObj });
+  view.mount();
+
+  return {
+    update(nextProps) {
+      controller.updateProps(nextProps);
+      view.render();
+    },
+    destroy() {
+      view.destroy();
+    },
+    getState() {
+      return controller.getState();
+    },
+    getDisplayText() {
+      return controller.getDisplayText();
+    },
+  };
+}
+
+export { createGridRowVisibilitySummaryComponent };

packages/core-ui/js/gui_components/data-grid-editor/tabulator/tabulator-helpers.js

@@ -47,17 +47,17 @@ class TabulatorHelper {
 
   addRowToBottom(rowToAdd) {
     // add row to bottom of table - false for bottom, true for top
-    this.addRow(rowToAdd, false);
+    return this.addRow(rowToAdd, false);
   }
 
   addRowToTop(rowToAdd) {
     // add row to top of table - false for bottom, true for top
-    this.addRow(rowToAdd, true);
+    return this.addRow(rowToAdd, true);
   }
 
   addRow(rowToAdd, addToTop) {
     // add row to bottom of table - false for bottom, true for top
-    this.tabulator.addData([rowToAdd], addToTop);
+    return this.tabulator.addData([rowToAdd], addToTop);
   }
 }