From 05c796648e99b065ca63f1bf5af28562cc218e14 Mon Sep 17 00:00:00 2001
From: heswell <steve@heswell.com>
Date: Wed, 27 Nov 2024 16:56:06 +0000
Subject: [PATCH] identify imported components in exhibits, remove
 displaySequence

---
 vuu-ui/showcase/package.json                  |   3 +-
 vuu-ui/showcase/scripts/build-search-tree.ts  |  14 +
 .../scripts/searchTargetsFromFileSystem.ts    | 108 ++++
 .../ClientSourcedTableColumn.examples.tsx     |  12 +-
 .../CrossTableFiltering.examples.tsx          |   4 -
 .../LayoutAndSettings.examples.tsx            |  11 +-
 .../TableEditing/InlineEditForm.tsx           |   3 -
 .../src/examples/Apps/SampleApp.examples.tsx  |   4 -
 .../src/examples/Apps/SimpleApp.examples.tsx  |   7 +-
 .../UnsavedChangesReport.examples.tsx         |   3 -
 .../DataTable/FilterTable.examples.tsx        |   8 -
 .../examples/DataTable/JsonTable.examples.tsx |   6 -
 .../DataTable/LinkedTableView.examples.tsx    |   5 -
 .../examples/DataTable/TreeTable.examples.tsx |   7 -
 .../Filters/ExpandoCombobox.examples.tsx      |   8 -
 .../Filters/ExpandoInput.examples.tsx         |   3 -
 .../Filters/FilterBar/FilterBar.examples.tsx  |  11 -
 .../Filters/FilterBar/FilterPill.examples.tsx |  14 +-
 .../FilterClause/FilterClause.examples.tsx    |  12 +-
 .../FilterEditor/FilterEditor.examples.tsx    |   9 -
 .../InlineFilter/InlineFilter.examples.tsx    |   3 -
 .../QuickFilters/QuickFilters.examples.tsx    |   8 -
 .../examples/Layout/DockLayout.examples.tsx   |  23 -
 .../src/examples/Layout/DropMenu.examples.tsx |   4 -
 .../src/examples/Layout/Flexbox.examples.tsx  |  23 -
 .../examples/Layout/FluidGrid.examples.tsx    |   6 -
 .../src/examples/Layout/Header.examples.tsx   |   5 -
 .../Layout/LayoutContainer.examples.tsx       |  20 -
 .../Layout/LayoutPatterns.examples.tsx        |   3 -
 .../Layout/LayoutProvider.examples.tsx        |  12 -
 .../Layout/MeasuredContainer.examples.tsx     |   9 +-
 .../src/examples/Layout/Palette.examples.tsx  |   4 -
 .../src/examples/Layout/Stack.examples.tsx    |  20 -
 .../src/examples/Layout/Toolbar.examples.tsx  |  20 +-
 .../src/examples/Layout/View.examples.tsx     |   3 -
 .../Performance/Performance.examples.css      |   7 -
 .../Performance/Performance.examples.tsx      | 217 --------
 .../src/examples/Performance/index.ts         |   1 -
 .../examples/Popups/ContextMenu.examples.tsx  |  22 +-
 .../Popups/DialogProvider.examples.tsx        |   5 +-
 .../Notifications/Notifications.examples.tsx  |  12 -
 .../examples/Popups/PopupMenu.examples.tsx    |  99 ++--
 .../src/examples/Popups/Tooltip.examples.tsx  |  11 +-
 .../src/examples/Shell/AppHeader.examples.tsx |   3 -
 .../Shell/ConnectionStatus.examples.tsx       |  19 -
 .../src/examples/Shell/Feature.examples.tsx   |   3 -
 .../examples/Shell/FeatureList.examples.tsx   |   6 -
 .../Shell/FeatureProvider.examples.tsx        |   8 +-
 .../examples/Shell/LayoutList.examples.tsx    |   8 +-
 .../Shell/LayoutListProvider.examples.tsx     |   3 -
 .../src/examples/Shell/LeftNav.examples.tsx   |   6 -
 .../examples/Shell/LoginPanel.examples.tsx    |   3 -
 .../src/examples/Shell/SavePanel.examples.tsx |   3 -
 .../Shell/SessionTableEditing.examples.tsx    |  15 +-
 .../examples/Shell/ShellLayout.examples.tsx   |  17 -
 .../examples/Shell/ThemeProvider.examples.tsx |   3 -
 .../examples/Shell/ThemeSwitch.examples.tsx   |   3 -
 .../examples/Shell/UserSettings.examples.tsx  |  52 +-
 .../src/examples/Shell/Workspace.examples.tsx |  21 +-
 .../src/examples/Table/BASKET.examples.tsx    |   8 -
 .../src/examples/Table/BigData.examples.tsx   |  12 +-
 .../src/examples/Table/BulkEdit.examples.tsx  |   4 -
 .../examples/Table/ColumnLayout.examples.tsx  |   5 -
 .../src/examples/Table/Paging.examples.tsx    |  14 +-
 .../src/examples/Table/RestData.examples.tsx  |   5 -
 .../src/examples/Table/SIMUL.examples.tsx     |   9 -
 .../src/examples/Table/TEST.examples.tsx      |   7 +-
 .../src/examples/Table/Table.examples.tsx     |  16 -
 .../examples/Table/TableEditing.examples.tsx  |   3 -
 .../examples/Table/TableLayout.examples.tsx   |  11 -
 .../src/examples/Table/TableList.examples.tsx |   3 -
 .../Table/TableNavigation.examples.tsx        |   4 -
 .../Table/TableSelection.examples.tsx         |  10 -
 .../TableVuuLayoutCombinations.examples.tsx   |   4 -
 .../TableExtras/CellRenderers.examples.tsx    |   8 -
 .../ColumnExpressionInput.examples.tsx        |   5 +-
 .../ColumnExpressionPanel.examples.tsx        |   3 -
 .../ColumnSettings.examples.tsx               |  23 +-
 .../CustomConfigurationEditors.examples.tsx   |   3 -
 .../TableSettings/TableSettings.examples.tsx  |   9 +-
 .../examples/UiControls/Calendar.examples.tsx |   6 -
 .../UiControls/ColumnPicker.examples.tsx      |   8 +-
 .../examples/UiControls/DragDrop.examples.tsx |  15 +-
 .../UiControls/EditableLabel.examples.tsx     |   4 -
 .../src/examples/UiControls/List.examples.tsx |  27 +-
 .../UiControls/OverflowContainer.examples.tsx |  14 -
 .../UiControls/SplitButton.examples.tsx       |  14 +-
 .../UiControls/TablePicker.examples.tsx       |   4 -
 .../UiControls/TableSearch.examples.tsx       |  10 -
 .../examples/UiControls/TabsNext.examples.tsx |  17 -
 .../examples/UiControls/Tabstrip.examples.tsx | 277 +---------
 .../examples/UiControls/VuuInput.examples.tsx |   5 -
 .../UiControls/VuuTypeaheadInput.examples.tsx |   6 -
 .../src/examples/VUU/Vuu.examples.tsx         |   4 -
 .../VuuFeatures/BasketSelector.examples.tsx   |   3 -
 .../VuuFeatures/BasketToolbar.examples.tsx    |  12 +-
 .../BasketTradingFeature.examples.tsx         |   4 -
 .../FilterTableFeature.examples.tsx           |   5 -
 .../InstrumentTilesFeature.examples.tsx       |   4 -
 .../VuuFeatures/NewBasketPanel.examples.tsx   |   3 -
 .../src/examples/html/GridLayout.examples.tsx |   5 -
 .../html/LayoutExperiments.examples.tsx       |   4 -
 .../src/examples/html/SvgFun.examples.tsx     |   4 -
 vuu-ui/showcase/src/examples/index.ts         |   1 -
 .../src/examples/salt/Accordion.examples.tsx  |   3 -
 .../src/examples/salt/Button.examples.tsx     |   5 -
 .../src/examples/salt/Checkbox.examples.tsx   |  29 +-
 .../src/examples/salt/ComboBox.examples.tsx   | 504 +-----------------
 .../src/examples/salt/DatePicker.examples.tsx |   6 -
 .../src/examples/salt/Dialog.examples.tsx     |  13 +-
 .../src/examples/salt/Dropdown.examples.tsx   |  65 +--
 .../src/examples/salt/FormField.examples.tsx  |   3 -
 .../src/examples/salt/Input.examples.tsx      |   3 -
 .../src/examples/salt/Menu.examples.tsx       |  13 +-
 .../src/examples/salt/Pagination.examples.tsx |   6 +-
 .../src/examples/salt/Progress.examples.tsx   |   4 -
 .../src/examples/salt/Switch.examples.tsx     |   7 -
 .../examples/salt/ToggleButton.examples.tsx   |  10 -
 vuu-ui/tools/vuu-showcase/src/shared-utils.ts |   1 -
 .../showcase-main/tree-nav/TreeNavPanel.tsx   |  16 +-
 .../showcase-main/tree-nav/useTreeNavPanel.ts |  34 +-
 121 files changed, 320 insertions(+), 1986 deletions(-)
 create mode 100644 vuu-ui/showcase/scripts/build-search-tree.ts
 create mode 100644 vuu-ui/showcase/scripts/searchTargetsFromFileSystem.ts
 delete mode 100644 vuu-ui/showcase/src/examples/Performance/Performance.examples.css
 delete mode 100644 vuu-ui/showcase/src/examples/Performance/Performance.examples.tsx
 delete mode 100644 vuu-ui/showcase/src/examples/Performance/index.ts

diff --git a/vuu-ui/showcase/package.json b/vuu-ui/showcase/package.json
index 40dfb711e..a39e97a67 100644
--- a/vuu-ui/showcase/package.json
+++ b/vuu-ui/showcase/package.json
@@ -8,7 +8,8 @@
     "build": "node ./scripts/build.mjs",
     "dev": "vite",
     "docs": "node ./scripts/build-docs.mjs",
-    "showcase": "tsx ./scripts/showcase.ts"
+    "showcase": "tsx ./scripts/showcase.ts",
+    "search-tree": "tsx ./scripts/build-search-tree.ts"
   },
   "keywords": [],
   "author": "heswell",
diff --git a/vuu-ui/showcase/scripts/build-search-tree.ts b/vuu-ui/showcase/scripts/build-search-tree.ts
new file mode 100644
index 000000000..8cec21cff
--- /dev/null
+++ b/vuu-ui/showcase/scripts/build-search-tree.ts
@@ -0,0 +1,14 @@
+import path from "path";
+import { searchTargetsFromFileSystem } from "./searchTargetsFromFileSystem";
+import { writeFile } from "../../scripts/utils.mjs";
+
+const outdir = "dist";
+
+const start = performance.now();
+const treeSourceJson = searchTargetsFromFileSystem("./src/examples", "");
+const end = performance.now();
+console.log(`building the search tree took ${end - start} ms`);
+await writeFile(
+  `export default ${JSON.stringify(treeSourceJson, null, 2)};`,
+  path.resolve(outdir, "searchTreeJson.js"),
+);
diff --git a/vuu-ui/showcase/scripts/searchTargetsFromFileSystem.ts b/vuu-ui/showcase/scripts/searchTargetsFromFileSystem.ts
new file mode 100644
index 000000000..1fa10bd2a
--- /dev/null
+++ b/vuu-ui/showcase/scripts/searchTargetsFromFileSystem.ts
@@ -0,0 +1,108 @@
+import fs from "fs";
+import path from "path";
+import { type TreeSourceNode } from "@finos/vuu-utils";
+
+const lastPathSegment = (path: string, separator = "/") => {
+  const root = path.endsWith(separator) ? path.slice(0, -1) : path;
+  return root.slice(root.lastIndexOf(separator) + 1);
+};
+
+export const dropLastPathSegment = (path: string, separator = "/") => {
+  return path.slice(0, path.lastIndexOf(separator));
+};
+
+const importExportPattern =
+  /(?:^(import) \{([^}]+)\} from "(.*)";)|(?:(export) const ([A-Z][a-zA-Z]+))/gm;
+const importSeparator = /\s*,\s*/;
+const componentPattern = /^[A-Z]/;
+
+export const searchTargetsFromFileSystem = (
+  exhibitsPath: string,
+  route: string,
+  icon = "folder",
+): TreeSourceNode[] => {
+  const treeSourceNodes: TreeSourceNode[] = [];
+  fs.readdirSync(exhibitsPath).forEach((fileName) => {
+    const filePath = path.join(exhibitsPath, fileName);
+    if (fs.lstatSync(filePath).isDirectory()) {
+      const childNodes = searchTargetsFromFileSystem(
+        filePath,
+        `${route}${fileName}/`,
+        "box",
+      );
+
+      const treeSourceNode: TreeSourceNode = {
+        childNodes,
+        id: `${route}${fileName}`,
+        icon,
+        label: fileName,
+      };
+      if (
+        Array.isArray(treeSourceNode.childNodes) &&
+        treeSourceNode.childNodes.length > 0
+      ) {
+        treeSourceNodes.push(treeSourceNode);
+      }
+    } else if (fileName.match(/(examples.tsx|.mdx)$/)) {
+      const name = dropLastPathSegment(dropLastPathSegment(fileName, "."), ".");
+      const id = `${route}${name}`;
+      if (name !== lastPathSegment(route)) {
+        treeSourceNodes.push({
+          id,
+          icon: "box",
+          label: name,
+          childNodes: showcaseComponentsAsTreeNodes(
+            exhibitsPath,
+            `${route}${name}/`,
+            fileName,
+          ),
+        });
+      } else {
+        treeSourceNodes.push(
+          ...showcaseComponentsAsTreeNodes(exhibitsPath, route, fileName),
+        );
+      }
+    }
+  });
+  return treeSourceNodes;
+};
+
+const showcaseComponentsAsTreeNodes = (
+  exhibitsPath: string,
+  route,
+  fileName: string,
+) => {
+  const imports: string[] = [];
+  const filePath = path.join(exhibitsPath, fileName);
+  const text = fs.readFileSync(filePath).toString();
+  let match = importExportPattern.exec(text);
+  const treeSourceNodes: TreeSourceNode[] = [];
+  while (match != null) {
+    if (match[1] === "import") {
+      // Note the importa are file level, we need to tie them to
+      // individual exhibits
+      const importTarget = match[2];
+      // const importSource = match[3];
+      const importedComponents = importTarget
+        .trim()
+        .split(importSeparator)
+        .filter((name) => componentPattern.test(name));
+      imports.push(...importedComponents);
+    } else if (match[4] === "export") {
+      const componentName = match[5];
+      treeSourceNodes.push({
+        id: `${route}${componentName}`,
+        label: componentName,
+        nodeData: {
+          componentName,
+          imports,
+          path: `${exhibitsPath}/${fileName}`,
+        },
+      });
+    }
+
+    match = importExportPattern.exec(text);
+  }
+
+  return treeSourceNodes;
+};
diff --git a/vuu-ui/showcase/src/examples/AppPatterns/ClientSourcedTableColumn/ClientSourcedTableColumn.examples.tsx b/vuu-ui/showcase/src/examples/AppPatterns/ClientSourcedTableColumn/ClientSourcedTableColumn.examples.tsx
index 02c07f1b7..f4f88af1e 100644
--- a/vuu-ui/showcase/src/examples/AppPatterns/ClientSourcedTableColumn/ClientSourcedTableColumn.examples.tsx
+++ b/vuu-ui/showcase/src/examples/AppPatterns/ClientSourcedTableColumn/ClientSourcedTableColumn.examples.tsx
@@ -1,7 +1,7 @@
 import { getSchema, LocalDataSourceProvider } from "@finos/vuu-data-test";
-import { DataSourceFilter, TableSchema } from "@finos/vuu-data-types";
-import { Table, TableProps } from "@finos/vuu-table";
-import {
+import { DataSourceFilter, type TableSchema } from "@finos/vuu-data-types";
+import { Table, type TableProps } from "@finos/vuu-table";
+import type {
   ColumnDescriptor,
   TableConfig,
   TableRowSelectHandler,
@@ -30,8 +30,6 @@ registerComponent("pin-button", PinButtonCell, "cell-renderer", {
   userCanAssign: false,
 });
 
-let displaySequence = 0;
-
 const TableTemplate = ({
   filter,
   config,
@@ -154,7 +152,6 @@ export const PinItemButton = () => {
     </LocalDataSourceProvider>
   );
 };
-PinItemButton.displaySequence = displaySequence++;
 
 export const SearchWithPin = () => {
   const schema = getSchema("instruments");
@@ -180,7 +177,6 @@ export const SearchWithPin = () => {
     </LocalDataSourceProvider>
   );
 };
-SearchWithPin.displaySequence = displaySequence++;
 
 const EmptyRecent = () => {
   return <div style={{ padding: "12px 6px" }}>No recently viewed items</div>;
@@ -324,7 +320,6 @@ export const SearchAndPinned = () => {
     </LocalDataSourceProvider>
   );
 };
-SearchAndPinned.displaySequence = displaySequence++;
 
 export const SearchAndPinnedWithAdditionalContent = () => {
   const schema = getSchema("instruments");
@@ -386,4 +381,3 @@ export const SearchAndPinnedWithAdditionalContent = () => {
     </LocalDataSourceProvider>
   );
 };
-SearchAndPinnedWithAdditionalContent.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/AppPatterns/CrossTableFiltering/CrossTableFiltering.examples.tsx b/vuu-ui/showcase/src/examples/AppPatterns/CrossTableFiltering/CrossTableFiltering.examples.tsx
index 22b20840e..3ad572942 100644
--- a/vuu-ui/showcase/src/examples/AppPatterns/CrossTableFiltering/CrossTableFiltering.examples.tsx
+++ b/vuu-ui/showcase/src/examples/AppPatterns/CrossTableFiltering/CrossTableFiltering.examples.tsx
@@ -23,8 +23,6 @@ import { LinkedDataSources, LinkedTableView } from "@finos/vuu-datatable";
 import { TableSearch } from "@finos/vuu-ui-controls";
 import { useDataSource } from "@finos/vuu-utils";
 
-let displaySequence = 1;
-
 // prettier-ignore
 const ParentTableSchema:TableSchema = {
   columns: [
@@ -283,7 +281,6 @@ export const SimpleCrossTableFiltering = () => {
     </LayoutProvider>
   );
 };
-SimpleCrossTableFiltering.displaySequence = displaySequence++;
 
 const TableSearchTemplate = ({
   schema,
@@ -401,4 +398,3 @@ export const FilteredLinkedTableView = () => {
     </LocalDataSourceProvider>
   );
 };
-FilteredLinkedTableView.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/AppPatterns/LayoutAndSettings/LayoutAndSettings.examples.tsx b/vuu-ui/showcase/src/examples/AppPatterns/LayoutAndSettings/LayoutAndSettings.examples.tsx
index f8466b268..7cccda46e 100644
--- a/vuu-ui/showcase/src/examples/AppPatterns/LayoutAndSettings/LayoutAndSettings.examples.tsx
+++ b/vuu-ui/showcase/src/examples/AppPatterns/LayoutAndSettings/LayoutAndSettings.examples.tsx
@@ -22,12 +22,10 @@ import { AppHeader } from "./app-header";
 
 registerComponent("LayoutComponentsPanel", LayoutComponentsPanel, "view");
 
-let displaySequence = 0;
-
 export const TabbedLayoutComponents = () => {
   const demoPersistenceManager = useMemo(
     () => new StaticPersistenceManager({ layoutMetadata }),
-    []
+    [],
   );
 
   return (
@@ -40,12 +38,11 @@ export const TabbedLayoutComponents = () => {
     </PersistenceProvider>
   );
 };
-TabbedLayoutComponents.displaySequence = displaySequence++;
 
 export const TabbedLayoutComponentsWithDragDrop = () => {
   const demoPersistenceManager = useMemo(
     () => new StaticPersistenceManager({ layoutMetadata }),
-    []
+    [],
   );
 
   return (
@@ -78,12 +75,11 @@ export const TabbedLayoutComponentsWithDragDrop = () => {
     </PersistenceProvider>
   );
 };
-TabbedLayoutComponentsWithDragDrop.displaySequence = displaySequence++;
 
 export const FlyoutLayoutAndSettingsWithDragDrop = () => {
   const demoPersistenceManager = useMemo(
     () => new StaticPersistenceManager({ layoutMetadata }),
-    []
+    [],
   );
 
   const applicationSettingsSchema: SettingsSchema = {
@@ -153,4 +149,3 @@ export const FlyoutLayoutAndSettingsWithDragDrop = () => {
     </PersistenceProvider>
   );
 };
-FlyoutLayoutAndSettingsWithDragDrop.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/AppPatterns/TableEditing/InlineEditForm.tsx b/vuu-ui/showcase/src/examples/AppPatterns/TableEditing/InlineEditForm.tsx
index df0e9857c..9820edabd 100644
--- a/vuu-ui/showcase/src/examples/AppPatterns/TableEditing/InlineEditForm.tsx
+++ b/vuu-ui/showcase/src/examples/AppPatterns/TableEditing/InlineEditForm.tsx
@@ -9,8 +9,6 @@ import { LocalDataSourceProvider } from "@finos/vuu-data-test";
 import { DataValueDescriptor } from "@finos/vuu-data-types";
 import { DialogProvider } from "@finos/vuu-popups";
 
-let displaySequence = 0;
-
 const instrumentsTable = { module: "SIMUL", table: "instruments" };
 
 const formFieldDescriptors: DataValueDescriptor[] = [
@@ -92,4 +90,3 @@ export const RightInlineEditForm = () => (
     <TableWithInlineEditForm />
   </LocalDataSourceProvider>
 );
-RightInlineEditForm.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Apps/SampleApp.examples.tsx b/vuu-ui/showcase/src/examples/Apps/SampleApp.examples.tsx
index 7f27bc6e0..25ea4b748 100644
--- a/vuu-ui/showcase/src/examples/Apps/SampleApp.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Apps/SampleApp.examples.tsx
@@ -28,8 +28,6 @@ registerComponent("TableSettings", TableSettingsPanel, "view");
 
 const user = { username: "why-the-lucky-stiff", token: "test-token" };
 
-let displaySequence = 1;
-
 const getFeaturePath: GetFeaturePaths = ({
   env,
   fileName,
@@ -162,5 +160,3 @@ export const SampleAppDefaultFeatures = () => {
     </LocalDataSourceProvider>
   );
 };
-
-SampleAppDefaultFeatures.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Apps/SimpleApp.examples.tsx b/vuu-ui/showcase/src/examples/Apps/SimpleApp.examples.tsx
index 272b20bf5..e1af6ecf9 100644
--- a/vuu-ui/showcase/src/examples/Apps/SimpleApp.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Apps/SimpleApp.examples.tsx
@@ -15,8 +15,6 @@ import { useCallback, useMemo } from "react";
 
 import "./SimpleApp.css";
 
-let displaySequence = 1;
-
 const classBase = "vuuSimpleApp";
 
 export const SimpleApp = () => {
@@ -33,7 +31,7 @@ export const SimpleApp = () => {
       dataSource: simulModule.createDataSource("instruments"),
       showColumnHeaderMenus: false,
     }),
-    [schema]
+    [schema],
   );
 
   const handleApplyFilter = useCallback((filter: DataSourceFilter) => {
@@ -58,7 +56,7 @@ export const SimpleApp = () => {
       dataSource: simulModule.createDataSource("instruments"),
       showColumnHeaderMenus: false,
     }),
-    [schema]
+    [schema],
   );
 
   return (
@@ -128,4 +126,3 @@ export const SimpleApp = () => {
     </LayoutProvider>
   );
 };
-SimpleApp.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/DataEditing/UnsavedChangesReport.examples.tsx b/vuu-ui/showcase/src/examples/DataEditing/UnsavedChangesReport.examples.tsx
index c30c04e34..c54c5302f 100644
--- a/vuu-ui/showcase/src/examples/DataEditing/UnsavedChangesReport.examples.tsx
+++ b/vuu-ui/showcase/src/examples/DataEditing/UnsavedChangesReport.examples.tsx
@@ -1,8 +1,6 @@
 import { UnsavedChangesReport } from "@finos/vuu-data-react";
 import { Entity } from "@finos/vuu-utils";
 
-let displaySequence = 1;
-
 export const DefaultUnsavedChangesReport = () => {
   const entity: Entity = {
     price: 200.5,
@@ -20,4 +18,3 @@ export const DefaultUnsavedChangesReport = () => {
     </div>
   );
 };
-DefaultUnsavedChangesReport.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/DataTable/FilterTable.examples.tsx b/vuu-ui/showcase/src/examples/DataTable/FilterTable.examples.tsx
index 2cacfaa4c..eed9832f8 100644
--- a/vuu-ui/showcase/src/examples/DataTable/FilterTable.examples.tsx
+++ b/vuu-ui/showcase/src/examples/DataTable/FilterTable.examples.tsx
@@ -11,8 +11,6 @@ import { useAutoLoginToVuuServer } from "../utils";
 import { VuuDataSourceProvider } from "@finos/vuu-data-react";
 import { View } from "@finos/vuu-layout";
 
-let displaySequence = 1;
-
 type FilterTableTemplateProps = {
   style?: CSSProperties;
   tableSchema?: TableSchema;
@@ -89,7 +87,6 @@ export const FilterTableVuuInstruments = () => {
     </VuuDataSourceProvider>
   );
 };
-FilterTableVuuInstruments.displaySequence = displaySequence++;
 
 export const FilterTableArrayDataInstruments = () => {
   return (
@@ -98,7 +95,6 @@ export const FilterTableArrayDataInstruments = () => {
     </LocalDataSourceProvider>
   );
 };
-FilterTableArrayDataInstruments.displaySequence = displaySequence++;
 
 export const FilterTableInstrumentsQuickFilters = () => (
   <LocalDataSourceProvider modules={["SIMUL"]}>
@@ -110,19 +106,15 @@ export const FilterTableInstrumentsQuickFilters = () => (
     />
   </LocalDataSourceProvider>
 );
-FilterTableInstrumentsQuickFilters.displaySequence = displaySequence++;
 
 export const FilterTableArrayDataInstrumentsFullFilters = () => (
   <LocalDataSourceProvider modules={["SIMUL"]}>
     <FilterTableTemplate variant="full-filters" />
   </LocalDataSourceProvider>
 );
-FilterTableArrayDataInstrumentsFullFilters.displaySequence = displaySequence++;
 
 export const FilterTableArrayDataInstrumentsFixedHeightContainer = () => (
   <LocalDataSourceProvider modules={["SIMUL"]}>
     <FilterTableTemplate style={{ height: 600, width: 900 }} />
   </LocalDataSourceProvider>
 );
-FilterTableArrayDataInstrumentsFixedHeightContainer.displaySequence =
-  displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/DataTable/JsonTable.examples.tsx b/vuu-ui/showcase/src/examples/DataTable/JsonTable.examples.tsx
index 42399ca0e..e845f7724 100644
--- a/vuu-ui/showcase/src/examples/DataTable/JsonTable.examples.tsx
+++ b/vuu-ui/showcase/src/examples/DataTable/JsonTable.examples.tsx
@@ -2,8 +2,6 @@ import { JsonTable } from "@finos/vuu-datatable";
 import { JsonData } from "@finos/vuu-utils";
 import packageJson from "../../../../package.json";
 
-let displaySequence = 1;
-
 const json: JsonData = {
   test1: "string 1",
   test2: "string 2",
@@ -65,7 +63,6 @@ export const DefaultJsonTable = () => {
     </>
   );
 };
-DefaultJsonTable.displaySequence = displaySequence++;
 
 const jsonArraySimpleData = {
   test1: "string 1",
@@ -91,7 +88,6 @@ export const JsonTableArraySimpleData = () => {
     </>
   );
 };
-JsonTableArraySimpleData.displaySequence = displaySequence++;
 
 const jsonArrayJsonData = {
   test1: "string 1",
@@ -121,7 +117,6 @@ export const JsonTableArrayJsonData = () => {
     </>
   );
 };
-JsonTableArrayJsonData.displaySequence = displaySequence++;
 
 export const PackageJsonTable = () => {
   return (
@@ -136,4 +131,3 @@ export const PackageJsonTable = () => {
     </>
   );
 };
-PackageJsonTable.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/DataTable/LinkedTableView.examples.tsx b/vuu-ui/showcase/src/examples/DataTable/LinkedTableView.examples.tsx
index f92aeadaa..01b0eac7d 100644
--- a/vuu-ui/showcase/src/examples/DataTable/LinkedTableView.examples.tsx
+++ b/vuu-ui/showcase/src/examples/DataTable/LinkedTableView.examples.tsx
@@ -2,8 +2,6 @@ import { LocalDataSourceProvider } from "@finos/vuu-data-test";
 import { LinkedDataSources, LinkedTableView } from "@finos/vuu-datatable";
 import { useMemo } from "react";
 
-let displaySequence = 0;
-
 export const TwoLevelLinkedTablesWithDescriptors = () => {
   const linkedDataSources = useMemo<LinkedDataSources>(() => {
     return {
@@ -35,7 +33,6 @@ export const TwoLevelLinkedTablesWithDescriptors = () => {
     </LocalDataSourceProvider>
   );
 };
-TwoLevelLinkedTablesWithDescriptors.displaySequence = displaySequence++;
 
 export const MultipleLevelTwoTables = () => {
   const linkedDataSources = useMemo<LinkedDataSources>(() => {
@@ -81,7 +78,6 @@ export const MultipleLevelTwoTables = () => {
     </LocalDataSourceProvider>
   );
 };
-MultipleLevelTwoTables.displaySequence = displaySequence++;
 
 export const ThreeLevelLinkedTablesWithDescriptors = () => {
   const linkedDataSources = useMemo<LinkedDataSources>(() => {
@@ -124,4 +120,3 @@ export const ThreeLevelLinkedTablesWithDescriptors = () => {
     </LocalDataSourceProvider>
   );
 };
-ThreeLevelLinkedTablesWithDescriptors.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/DataTable/TreeTable.examples.tsx b/vuu-ui/showcase/src/examples/DataTable/TreeTable.examples.tsx
index 9c9701b5f..1b95f1aaa 100644
--- a/vuu-ui/showcase/src/examples/DataTable/TreeTable.examples.tsx
+++ b/vuu-ui/showcase/src/examples/DataTable/TreeTable.examples.tsx
@@ -7,14 +7,11 @@ import { TableRowSelectHandler } from "@finos/vuu-table-types";
 import { TreeDataSource } from "@finos/vuu-data-local";
 import { Input } from "@salt-ds/core";
 
-let displaySequence = 1;
-
 export const ShowcaseTree = () => {
   return (
     <TreeTable rowHeight={30} showColumnHeaders={false} source={showcaseData} />
   );
 };
-ShowcaseTree.displaySequence = displaySequence++;
 
 export const ShowcaseTreeSelected = () => {
   return (
@@ -32,7 +29,6 @@ export const ShowcaseTreeSelected = () => {
     </div>
   );
 };
-ShowcaseTreeSelected.displaySequence = displaySequence++;
 
 export const ShowcaseTreeSelectedAutoReveal = () => {
   console.log({ showcaseData });
@@ -49,7 +45,6 @@ export const ShowcaseTreeSelectedAutoReveal = () => {
     />
   );
 };
-ShowcaseTreeSelectedAutoReveal.displaySequence = displaySequence++;
 
 const addDataNodes = (
   treeNodes: TreeSourceNode[],
@@ -80,7 +75,6 @@ export const ShowcaseTreeNodeOptions = () => {
     />
   );
 };
-ShowcaseTreeNodeOptions.displaySequence = displaySequence++;
 
 export const TreeTableSearch = () => {
   const dataSource = useMemo(
@@ -132,4 +126,3 @@ export const TreeTableSearch = () => {
     </div>
   );
 };
-TreeTableSearch.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Filters/ExpandoCombobox.examples.tsx b/vuu-ui/showcase/src/examples/Filters/ExpandoCombobox.examples.tsx
index cd008973c..15f189bac 100644
--- a/vuu-ui/showcase/src/examples/Filters/ExpandoCombobox.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Filters/ExpandoCombobox.examples.tsx
@@ -15,8 +15,6 @@ import { LocalDataSourceProvider, getSchema } from "@finos/vuu-data-test";
 import { FilterClauseValueChangeHandler } from "@finos/vuu-filters/src/filter-clause/useFilterClause";
 import { MultiSelectionHandler } from "@finos/vuu-ui-controls";
 
-let displaySequence = 1;
-
 const longUsStates = [
   "Alabama",
   "Alaska",
@@ -132,7 +130,6 @@ export const DefaultExpandoComboboxSalt = (props: ComboBoxProps) => {
     </ExpandoCombobox>
   );
 };
-DefaultExpandoComboboxSalt.displaySequence = displaySequence++;
 
 export const DefaultExpandoComboBox = (
   props: Partial<ComboBoxProps<ColumnDescriptor>>,
@@ -175,12 +172,10 @@ export const DefaultExpandoComboBox = (
     </ExpandoCombobox>
   );
 };
-DefaultExpandoComboBox.displaySequence = displaySequence++;
 
 export const DefaultExpandoComboBoxHighlightFirstRow = () => {
   return <DefaultExpandoComboBox />;
 };
-DefaultExpandoComboBoxHighlightFirstRow.displaySequence = displaySequence++;
 
 export const DataBoundTextInputEmpty = () => {
   const tableSchema = getSchema("instruments");
@@ -211,7 +206,6 @@ export const DataBoundTextInputEmpty = () => {
     </LocalDataSourceProvider>
   );
 };
-DataBoundTextInputEmpty.displaySequence = displaySequence++;
 
 export const DataBoundTextInputLoaded = () => {
   const tableSchema = getSchema("instruments");
@@ -242,7 +236,6 @@ export const DataBoundTextInputLoaded = () => {
     </LocalDataSourceProvider>
   );
 };
-DataBoundTextInputLoaded.displaySequence = displaySequence++;
 
 export const MultiSelectExpandoComboBox = () => {
   const currencies: string[] = useMemo(
@@ -266,4 +259,3 @@ export const MultiSelectExpandoComboBox = () => {
     </ExpandoCombobox>
   );
 };
-MultiSelectExpandoComboBox.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Filters/ExpandoInput.examples.tsx b/vuu-ui/showcase/src/examples/Filters/ExpandoInput.examples.tsx
index fe202ccb7..ac2721414 100644
--- a/vuu-ui/showcase/src/examples/Filters/ExpandoInput.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Filters/ExpandoInput.examples.tsx
@@ -1,8 +1,6 @@
 import { ExpandoInput } from "@finos/vuu-ui-controls";
 import { ChangeEvent, useCallback, useState } from "react";
 
-let displaySequence = 1;
-
 export const DefaultExpandoInput = () => {
   const [value, setValuue] = useState("Enter value");
 
@@ -13,4 +11,3 @@ export const DefaultExpandoInput = () => {
 
   return <ExpandoInput onChange={handleChange} value={value} />;
 };
-DefaultExpandoInput.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterBar.examples.tsx b/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterBar.examples.tsx
index fa16b240f..498c7f124 100644
--- a/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterBar.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterBar.examples.tsx
@@ -112,8 +112,6 @@ const DefaultFilterBarCore = ({
   );
 };
 
-let displaySequence = 1;
-
 const FilterBarTemplate = ({
   QuickFilterProps,
   filterState: filterStateProp = { filters: [], activeIndices: [] },
@@ -155,14 +153,12 @@ const FilterBarTemplate = ({
 export const FilterBarNoSuggestions = (props: Partial<FilterBarProps>) => (
   <FilterBarTemplate {...props} />
 );
-FilterBarNoSuggestions.displaySequence = displaySequence++;
 
 export const DefaultFilterBar = (props: Partial<FilterBarProps>) => (
   <LocalDataSourceProvider modules={["SIMUL"]}>
     <FilterBarTemplate {...props} />
   </LocalDataSourceProvider>
 );
-DefaultFilterBar.displaySequence = displaySequence++;
 
 export const FilterBarOneSimpleFilter = () => {
   return (
@@ -176,7 +172,6 @@ export const FilterBarOneSimpleFilter = () => {
     />
   );
 };
-FilterBarOneSimpleFilter.displaySequence = displaySequence++;
 
 export const FilterBarOneMultiValueFilter = () => {
   return (
@@ -195,7 +190,6 @@ export const FilterBarOneMultiValueFilter = () => {
     />
   );
 };
-FilterBarOneMultiValueFilter.displaySequence = displaySequence++;
 
 export const FilterBarMultipleFilters = ({
   onFilterDeleted,
@@ -236,7 +230,6 @@ export const FilterBarMultipleFilters = ({
     />
   );
 };
-FilterBarMultipleFilters.displaySequence = displaySequence++;
 
 export const FilterBarMultipleFilterSets = () => {
   const [filterSets, setFilterSets] = useState(initialFilterSets);
@@ -327,7 +320,6 @@ const initialFilterSets: FilterState[] = [
     activeIndices: [],
   },
 ];
-FilterBarMultipleFilterSets.displaySequence = displaySequence++;
 
 export const QuickFilters = () => {
   return (
@@ -342,7 +334,6 @@ export const QuickFilters = () => {
     </>
   );
 };
-QuickFilters.displaySequence = displaySequence++;
 
 export const QuickFiltersThreeColumns = () => {
   return (
@@ -352,7 +343,6 @@ export const QuickFiltersThreeColumns = () => {
     />
   );
 };
-QuickFiltersThreeColumns.displaySequence = displaySequence++;
 
 export const FullFilters = () => {
   return (
@@ -365,4 +355,3 @@ export const FullFilters = () => {
     </>
   );
 };
-FullFilters.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterPill.examples.tsx b/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterPill.examples.tsx
index 4679a2c11..fa5f29047 100644
--- a/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterPill.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterPill.examples.tsx
@@ -5,8 +5,6 @@ import { ExitEditModeHandler, Icon } from "@finos/vuu-ui-controls";
 import { Button, Input } from "@salt-ds/core";
 import { useCallback, useMemo, useState } from "react";
 
-let displaySequence = 1;
-
 export const DefaultFilterPill = () => {
   const [active, setActive] = useState(false);
   const handleClick = useMemo(() => () => setActive((value) => !value), []);
@@ -25,8 +23,6 @@ export const DefaultFilterPill = () => {
   );
 };
 
-DefaultFilterPill.displaySequence = displaySequence++;
-
 export const FilterPillNotEditable = () => {
   const [active, setActive] = useState(false);
   const handleClick = useMemo(() => () => setActive((value) => !value), []);
@@ -46,8 +42,6 @@ export const FilterPillNotEditable = () => {
   );
 };
 
-FilterPillNotEditable.displaySequence = displaySequence++;
-
 const menuBuilder: MenuBuilder = (_, options) => [
   { action: "and-clause", label: "AND", options },
   { action: "or-clause", label: "OR", options },
@@ -92,8 +86,6 @@ export const FilterPillWithMenu = () => {
   );
 };
 
-FilterPillWithMenu.displaySequence = displaySequence++;
-
 export const FilterPillEditableLabel = () => {
   const [active, setActive] = useState(false);
   const [editing, setEditing] = useState(false);
@@ -119,7 +111,7 @@ export const FilterPillEditableLabel = () => {
       console.log(`${originalValue} -> ${newValue}`);
       setEditing(false);
     },
-    []
+    [],
   );
 
   const beginEdit = () => {
@@ -152,8 +144,6 @@ export const FilterPillEditableLabel = () => {
   );
 };
 
-FilterPillEditableLabel.displaySequence = displaySequence++;
-
 export const FilterPillVariations = () => {
   return (
     <div>
@@ -178,5 +168,3 @@ export const FilterPillVariations = () => {
     </div>
   );
 };
-
-FilterPillVariations.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Filters/FilterClause/FilterClause.examples.tsx b/vuu-ui/showcase/src/examples/Filters/FilterClause/FilterClause.examples.tsx
index 553e1b723..98695e5a2 100644
--- a/vuu-ui/showcase/src/examples/Filters/FilterClause/FilterClause.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Filters/FilterClause/FilterClause.examples.tsx
@@ -1,12 +1,10 @@
 import { LocalDataSourceProvider, getSchema } from "@finos/vuu-data-test";
 import { SchemaColumn, TableSchema } from "@finos/vuu-data-types";
-import { FilterClauseModel, FilterClause } from "@finos/vuu-filters";
+import { ColumnDescriptorsByName } from "@finos/vuu-filter-types";
+import { FilterClause, FilterClauseModel } from "@finos/vuu-filters";
 import { useMemo } from "react";
 
 import "./FilterClause.examples.css";
-import { ColumnDescriptorsByName } from "@finos/vuu-filter-types";
-
-let displaySequence = 1;
 
 const FilterClauseTemplate = ({
   filterClauseModel = new FilterClauseModel({}),
@@ -36,12 +34,10 @@ export const NewFilterClause = () => {
     </LocalDataSourceProvider>
   );
 };
-NewFilterClause.displaySequence = displaySequence++;
 
 export const NewFilterClauseNoCompletions = () => {
   return <FilterClauseTemplate />;
 };
-NewFilterClauseNoCompletions.displaySequence = displaySequence++;
 
 export const PartialFilterClauseColumnOnly = () => {
   const filterClauseModel = useMemo(
@@ -57,7 +53,6 @@ export const PartialFilterClauseColumnOnly = () => {
     </LocalDataSourceProvider>
   );
 };
-PartialFilterClauseColumnOnly.displaySequence = displaySequence++;
 
 export const PartialFilterClauseColumnAndOperator = () => {
   const filterClauseModel = useMemo(
@@ -74,7 +69,6 @@ export const PartialFilterClauseColumnAndOperator = () => {
     </LocalDataSourceProvider>
   );
 };
-PartialFilterClauseColumnAndOperator.displaySequence = displaySequence++;
 
 export const CompleteFilterClauseTextEquals = () => {
   const filterClauseModel = useMemo(
@@ -93,7 +87,6 @@ export const CompleteFilterClauseTextEquals = () => {
     </LocalDataSourceProvider>
   );
 };
-CompleteFilterClauseTextEquals.displaySequence = displaySequence++;
 
 export const PartialFilterClauseDateColumnOnly = () => {
   const tableColumns: SchemaColumn[] = [
@@ -144,7 +137,6 @@ export const PartialFilterClauseDateColumnOnly = () => {
     </LocalDataSourceProvider>
   );
 };
-PartialFilterClauseDateColumnOnly.displaySequence = displaySequence++;
 
 const columnDescriptorsByName = (columns: TableSchema["columns"]) =>
   columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});
diff --git a/vuu-ui/showcase/src/examples/Filters/FilterEditor/FilterEditor.examples.tsx b/vuu-ui/showcase/src/examples/Filters/FilterEditor/FilterEditor.examples.tsx
index 6984d73e6..591cc1b7b 100644
--- a/vuu-ui/showcase/src/examples/Filters/FilterEditor/FilterEditor.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Filters/FilterEditor/FilterEditor.examples.tsx
@@ -10,8 +10,6 @@ import {
 import type { ColumnDescriptor } from "@finos/vuu-table-types";
 import { useCallback, useMemo } from "react";
 
-let displaySequence = 1;
-
 const FilterEditorTemplate = ({
   onSave: onSaveProp,
   tableSchema = getSchema("instruments"),
@@ -56,8 +54,6 @@ export const NewFilter = (props: Partial<FilterEditorProps>) => (
   </LocalDataSourceProvider>
 );
 
-NewFilter.displaySequence = displaySequence++;
-
 export const NewFilterDateColumns = (props: Partial<FilterEditorProps>) => {
   const [tableSchema, columnDescriptors] = useMemo<
     [TableSchema, ColumnDescriptor[]]
@@ -95,8 +91,6 @@ export const NewFilterDateColumns = (props: Partial<FilterEditorProps>) => {
   );
 };
 
-NewFilterDateColumns.displaySequence = displaySequence++;
-
 export const EditSimplerFilter = (props: Partial<FilterEditorProps>) => {
   const filter = useMemo<Filter>(() => {
     return {
@@ -112,7 +106,6 @@ export const EditSimplerFilter = (props: Partial<FilterEditorProps>) => {
     </LocalDataSourceProvider>
   );
 };
-EditSimplerFilter.displaySequence = displaySequence++;
 
 export const EditMultiClauseAndFilter = (props: Partial<FilterEditorProps>) => {
   const filter = useMemo<Filter>(() => {
@@ -139,7 +132,6 @@ export const EditMultiClauseAndFilter = (props: Partial<FilterEditorProps>) => {
     </LocalDataSourceProvider>
   );
 };
-EditMultiClauseAndFilter.displaySequence = displaySequence++;
 
 export const EditMultiClauseOrFilter = (props: Partial<FilterEditorProps>) => {
   const filter = useMemo<Filter>(() => {
@@ -166,4 +158,3 @@ export const EditMultiClauseOrFilter = (props: Partial<FilterEditorProps>) => {
     </LocalDataSourceProvider>
   );
 };
-EditMultiClauseOrFilter.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Filters/InlineFilter/InlineFilter.examples.tsx b/vuu-ui/showcase/src/examples/Filters/InlineFilter/InlineFilter.examples.tsx
index 513c37f9b..a921a5bbf 100644
--- a/vuu-ui/showcase/src/examples/Filters/InlineFilter/InlineFilter.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Filters/InlineFilter/InlineFilter.examples.tsx
@@ -5,8 +5,6 @@ import { useDataSource } from "@finos/vuu-utils";
 import { TableConfig } from "@finos/vuu-table-types";
 import { Table } from "@finos/vuu-table";
 
-let displaySequence = 0;
-
 const table = { module: "SIMUL", table: "instrumentsExtended" } as const;
 const schema = getSchema("instrumentsExtended");
 
@@ -49,4 +47,3 @@ export const SimpleInlineFilters = () => {
     </LocalDataSourceProvider>
   );
 };
-SimpleInlineFilters.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Filters/QuickFilters/QuickFilters.examples.tsx b/vuu-ui/showcase/src/examples/Filters/QuickFilters/QuickFilters.examples.tsx
index a38b50f26..176ac3197 100644
--- a/vuu-ui/showcase/src/examples/Filters/QuickFilters/QuickFilters.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Filters/QuickFilters/QuickFilters.examples.tsx
@@ -6,8 +6,6 @@ import { LocalDataSourceProvider, getSchema } from "@finos/vuu-data-test";
 import { useViewContext, View } from "@finos/vuu-layout";
 import { setPersistentState } from "@finos/vuu-layout";
 
-let displaySequence = 1;
-
 const QuickFiltersTemplate = ({
   allowAddColumn,
   allowFind,
@@ -57,7 +55,6 @@ export const SearchOnly = () => {
     />
   );
 };
-SearchOnly.displaySequence = displaySequence++;
 
 export const OneColumn = () => {
   return (
@@ -67,7 +64,6 @@ export const OneColumn = () => {
     />
   );
 };
-OneColumn.displaySequence = displaySequence++;
 
 export const ThreeColumns = () => {
   const [availableColumns, quickFilterColumns] = useMemo<
@@ -94,7 +90,6 @@ export const ThreeColumns = () => {
     />
   );
 };
-ThreeColumns.displaySequence = displaySequence++;
 
 export const ThreeColumnsOnly = () => {
   const [availableColumns, quickFilterColumns] = useMemo<
@@ -122,7 +117,6 @@ export const ThreeColumnsOnly = () => {
     />
   );
 };
-ThreeColumnsOnly.displaySequence = displaySequence++;
 
 export const QuickDateFilter = () => {
   const [availableColumns, quickFilterColumns] = useMemo<
@@ -156,7 +150,6 @@ export const QuickDateFilter = () => {
     />
   );
 };
-QuickDateFilter.displaySequence = displaySequence++;
 
 const PersistentFilter = () => {
   const { load, save } = useViewContext();
@@ -205,4 +198,3 @@ export const WithPersistence = () => {
     </LocalDataSourceProvider>
   );
 };
-WithPersistence.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Layout/DockLayout.examples.tsx b/vuu-ui/showcase/src/examples/Layout/DockLayout.examples.tsx
index a0e957e04..87b139dcb 100644
--- a/vuu-ui/showcase/src/examples/Layout/DockLayout.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Layout/DockLayout.examples.tsx
@@ -13,8 +13,6 @@ import { Button } from "@salt-ds/core";
 
 import "./DockLayout.examples.css";
 
-let displaySequence = 1;
-
 type InlineDrawerProps = {
   inline?: boolean;
   position: "left" | "right" | "top" | "bottom";
@@ -69,68 +67,52 @@ const InlineDrawer = ({
 export const LeftInlineDrawerPeek = () => (
   <InlineDrawer position="left" inline peekaboo />
 );
-LeftInlineDrawerPeek.displaySequence = displaySequence++;
 
 export const RightInlineDrawerPeek = () => (
   <InlineDrawer position="right" inline peekaboo />
 );
-RightInlineDrawerPeek.displaySequence = displaySequence++;
 
 export const TopInlineDrawerPeek = () => (
   <InlineDrawer position="top" inline peekaboo />
 );
-TopInlineDrawerPeek.displaySequence = displaySequence++;
 
 export const BottomInlineDrawerPeek = () => (
   <InlineDrawer position="bottom" inline peekaboo />
 );
-BottomInlineDrawerPeek.displaySequence = displaySequence++;
 
 export const LeftOverlayDrawerPeek = () => (
   <InlineDrawer position="left" peekaboo />
 );
-LeftOverlayDrawerPeek.displaySequence = displaySequence++;
 
 export const RightOverlayDrawerPeek = () => (
   <InlineDrawer position="right" peekaboo />
 );
-RightOverlayDrawerPeek.displaySequence = displaySequence++;
 
 export const TopOverlayDrawerPeek = () => (
   <InlineDrawer position="top" peekaboo />
 );
-TopOverlayDrawerPeek.displaySequence = displaySequence++;
 
 export const BottomOverlayDrawerPeek = () => (
   <InlineDrawer position="bottom" peekaboo />
 );
-BottomOverlayDrawerPeek.displaySequence = displaySequence++;
 
 export const LeftInlineDrawer = () => <InlineDrawer position="left" inline />;
-LeftInlineDrawer.displaySequence = displaySequence++;
 
 export const RightInlineDrawer = () => <InlineDrawer position="right" inline />;
-RightInlineDrawer.displaySequence = displaySequence++;
 
 export const TopInlineDrawer = () => <InlineDrawer position="top" inline />;
-TopInlineDrawer.displaySequence = displaySequence++;
 
 export const BottomInlineDrawer = () => (
   <InlineDrawer position="bottom" inline />
 );
-BottomInlineDrawer.displaySequence = displaySequence++;
 
 export const LeftOverlayDrawer = () => <InlineDrawer position="left" />;
-LeftOverlayDrawer.displaySequence = displaySequence++;
 
 export const RightOverlayDrawer = () => <InlineDrawer position="right" />;
-RightOverlayDrawer.displaySequence = displaySequence++;
 
 export const TopOverlayDrawer = () => <InlineDrawer position="top" />;
-TopOverlayDrawer.displaySequence = displaySequence++;
 
 export const BottomOverlayDrawer = () => <InlineDrawer position="bottom" />;
-BottomOverlayDrawer.displaySequence = displaySequence++;
 
 export const LeftInlineDrawerStack = () => {
   const [open, setOpen] = useState(false);
@@ -169,7 +151,6 @@ export const LeftInlineDrawerStack = () => {
     </Flexbox>
   );
 };
-LeftInlineDrawerStack.displaySequence = displaySequence++;
 
 export const LeftInlineDrawerFlexbox = () => {
   const [open, setOpen] = useState(false);
@@ -252,7 +233,6 @@ export const LeftInlineDrawerFlexbox = () => {
     </DockLayout>
   );
 };
-LeftInlineDrawerFlexbox.displaySequence = displaySequence++;
 
 export const InlineDrawerFlexboxVariants = () => {
   const [open, setOpen] = useState(false);
@@ -375,7 +355,6 @@ export const InlineDrawerFlexboxVariants = () => {
     </>
   );
 };
-InlineDrawerFlexboxVariants.displaySequence = displaySequence++;
 
 export const CustomSizeDrawer = () => {
   return (
@@ -422,7 +401,6 @@ export const CustomSizeDrawer = () => {
     </DockLayout>
   );
 };
-CustomSizeDrawer.displaySequence = displaySequence++;
 
 export const WithToggleButton = () => {
   return (
@@ -453,4 +431,3 @@ export const WithToggleButton = () => {
     </DockLayout>
   );
 };
-WithToggleButton.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Layout/DropMenu.examples.tsx b/vuu-ui/showcase/src/examples/Layout/DropMenu.examples.tsx
index 45ec73d64..80bb7de6f 100644
--- a/vuu-ui/showcase/src/examples/Layout/DropMenu.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Layout/DropMenu.examples.tsx
@@ -7,8 +7,6 @@ import {
 import { PopupService } from "@finos/vuu-popups";
 import { useEffect, useRef } from "react";
 
-let displaySequence = 1;
-
 const dropPositionBase: DropPosition = {
   Absolute: false,
   Centre: false,
@@ -93,5 +91,3 @@ export const DropMenuTwoOptionsNorth = () => {
     />
   );
 };
-
-DropMenuTwoOptionsNorth.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Layout/Flexbox.examples.tsx b/vuu-ui/showcase/src/examples/Layout/Flexbox.examples.tsx
index a2bdec306..8b277760e 100644
--- a/vuu-ui/showcase/src/examples/Layout/Flexbox.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Layout/Flexbox.examples.tsx
@@ -11,8 +11,6 @@ import { Brown } from "./components";
 import { SplitterMoveHandler } from "@finos/vuu-layout/src/flexbox/flexboxTypes";
 import { useCallback } from "react";
 
-let displaySequence = 1;
-
 export const Empty = () => (
   <FlexboxLayout
     style={{
@@ -26,8 +24,6 @@ export const Empty = () => (
   />
 );
 
-Empty.displaySequence = displaySequence++;
-
 export const SingleChild = () => {
   return (
     // <ConfigWrapper>
@@ -53,7 +49,6 @@ export const SingleChild = () => {
     // </ConfigWrapper>
   );
 };
-SingleChild.displaySequence = displaySequence++;
 
 export const SimpleTower = () => {
   const handleSplitterMoved = (sizes: any) => {
@@ -99,8 +94,6 @@ export const SimpleTower = () => {
   );
 };
 
-SimpleTower.displaySequence = displaySequence++;
-
 export const TowerWithCollapsibleViews = () => {
   const handleSplitterMoved = useCallback<SplitterMoveHandler>(
     (contentMeta) => {
@@ -153,8 +146,6 @@ export const TowerWithCollapsibleViews = () => {
   );
 };
 
-TowerWithCollapsibleViews.displaySequence = displaySequence++;
-
 export const ThreeChildTower = () => {
   const handleSplitterMoved = (sizes: any) => {
     console.log(`splitter moved ${JSON.stringify(sizes)}`);
@@ -205,8 +196,6 @@ export const ThreeChildTower = () => {
   );
 };
 
-ThreeChildTower.displaySequence = displaySequence++;
-
 export const TerraceWithBorderPaddingMargin = () => (
   <FlexboxLayout
     style={{
@@ -235,8 +224,6 @@ export const TerraceWithBorderPaddingMargin = () => (
   </FlexboxLayout>
 );
 
-TerraceWithBorderPaddingMargin.displaySequence = displaySequence++;
-
 export const TerraceAutoSizing = () => (
   <FlexboxLayout
     style={{
@@ -274,8 +261,6 @@ export const TerraceAutoSizing = () => (
   </FlexboxLayout>
 );
 
-TerraceAutoSizing.displaySequence = displaySequence++;
-
 export const TerraceWithHeader = () => (
   <FlexboxLayout
     title="Flexie"
@@ -304,7 +289,6 @@ export const TerraceWithHeader = () => (
     />
   </FlexboxLayout>
 );
-TerraceWithHeader.displaySequence = displaySequence++;
 
 export const TowerWithinTerrace = () => (
   <div>
@@ -379,8 +363,6 @@ export const TowerWithinTerrace = () => (
   </div>
 );
 
-TowerWithinTerrace.displaySequence = displaySequence++;
-
 export const QuadTerraceWithinTower = () => (
   <FlexboxLayout
     style={{ flexDirection: "column", width: 500, height: 500 }}
@@ -413,7 +395,6 @@ export const QuadTerraceWithinTower = () => (
     </FlexboxLayout>
   </FlexboxLayout>
 );
-QuadTerraceWithinTower.displaySequence = displaySequence++;
 
 export const DeeperNesting = () => (
   // <ConfigWrapper>
@@ -500,8 +481,6 @@ export const DeeperNesting = () => (
   // </ConfigWrapper>
 );
 
-DeeperNesting.displaySequence = displaySequence++;
-
 export const ComplexNestedLayout = () => (
   <FlexboxLayout
     column
@@ -569,5 +548,3 @@ export const ComplexNestedLayout = () => (
     <Component style={{ backgroundColor: "grey", height: 32 }} />
   </FlexboxLayout>
 );
-
-ComplexNestedLayout.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Layout/FluidGrid.examples.tsx b/vuu-ui/showcase/src/examples/Layout/FluidGrid.examples.tsx
index 99f7ef2bc..29586878a 100644
--- a/vuu-ui/showcase/src/examples/Layout/FluidGrid.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Layout/FluidGrid.examples.tsx
@@ -4,8 +4,6 @@ const RED = "rgba(255,0,0,.4)";
 const ORANGE = "rgba(255,165,0,.7)";
 const VIOLET = "rgba(238,130,238,.7)";
 
-let displaySequence = 1;
-
 export const ResponsiveDefault = () => (
   <FluidGrid
     spacing={3}
@@ -31,8 +29,6 @@ export const ResponsiveDefault = () => (
   </FluidGrid>
 );
 
-ResponsiveDefault.displaySequence = displaySequence++;
-
 const breakPoints = { xs: 0, sm: 600, md: 960, lg: 1280 };
 
 export const WithBreakPoints = () => (
@@ -60,7 +56,6 @@ export const WithBreakPoints = () => (
     <div data-xs={12} data-sm={3} style={{ backgroundColor: "violet" }} />
   </FluidGrid>
 );
-WithBreakPoints.displaySequence = displaySequence++;
 
 export const ResponsiveStructure = () => (
   <FluidGrid
@@ -96,4 +91,3 @@ export const ResponsiveStructure = () => (
     <div data-xs={12} style={{ height: 32 }} />
   </FluidGrid>
 );
-ResponsiveStructure.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Layout/Header.examples.tsx b/vuu-ui/showcase/src/examples/Layout/Header.examples.tsx
index 3dc0ee6d4..214f23cf9 100644
--- a/vuu-ui/showcase/src/examples/Layout/Header.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Layout/Header.examples.tsx
@@ -3,8 +3,6 @@ import { Tab, Tabstrip } from "@finos/vuu-ui-controls";
 import { Button } from "@salt-ds/core";
 import { CSSProperties, useState } from "react";
 
-let displaySequence = 1;
-
 const toolbarStyle = {
   "--saltToolbar-background": "white",
 } as CSSProperties;
@@ -20,7 +18,6 @@ export const DefaultHeader = () => {
     />
   );
 };
-DefaultHeader.displaySequence = displaySequence++;
 
 export const HeaderWithTabs = () => {
   const [activeTabIndex, setActiveTabIndex] = useState(0);
@@ -81,7 +78,6 @@ export const HeaderWithTabs = () => {
     </Flexbox>
   );
 };
-HeaderWithTabs.displaySequence = displaySequence++;
 
 export const HeaderWithTitle = () => {
   return (
@@ -103,4 +99,3 @@ export const HeaderWithTitle = () => {
     </Flexbox>
   );
 };
-HeaderWithTitle.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Layout/LayoutContainer.examples.tsx b/vuu-ui/showcase/src/examples/Layout/LayoutContainer.examples.tsx
index 3f5255501..c6cbfe87d 100644
--- a/vuu-ui/showcase/src/examples/Layout/LayoutContainer.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Layout/LayoutContainer.examples.tsx
@@ -17,8 +17,6 @@ import { Brown, StatefulComponent } from "./components";
 
 import "./LayoutContainer.examples.css";
 
-let displaySequence = 1;
-
 const Box = (props: HTMLAttributes<HTMLDivElement>) => (
   <div
     style={{
@@ -72,8 +70,6 @@ export const EmptyDraggable = () => {
   );
 };
 
-EmptyDraggable.displaySequence = displaySequence++;
-
 export const SimpleNesting = () => {
   const handleLayoutChange = () => {
     console.log(`handleLayoutChange`);
@@ -144,8 +140,6 @@ export const SimpleNesting = () => {
   );
 };
 
-SimpleNesting.displaySequence = displaySequence++;
-
 export const ImplicitSizing = () => (
   <LayoutContainer style={{ width: "100vw", height: "100vh" }}>
     <Flexbox
@@ -197,8 +191,6 @@ export const ImplicitSizing = () => (
   </LayoutContainer>
 );
 
-ImplicitSizing.displaySequence = displaySequence++;
-
 export const SimpleNestingWithOffset = () => {
   const handleLayoutChange = () => {
     console.log(`handleLayoutChange`);
@@ -264,8 +256,6 @@ export const SimpleNestingWithOffset = () => {
   );
 };
 
-SimpleNestingWithOffset.displaySequence = displaySequence++;
-
 export const MultipleDraggableContainers = () => (
   <LayoutProvider>
     <LayoutContainer style={{ width: 800, height: 800 }}>
@@ -358,8 +348,6 @@ export const MultipleDraggableContainers = () => (
   </LayoutProvider>
 );
 
-MultipleDraggableContainers.displaySequence = displaySequence++;
-
 export const CustomDrag = () => (
   <LayoutProvider>
     <LayoutContainer
@@ -405,8 +393,6 @@ export const CustomDrag = () => (
   </LayoutProvider>
 );
 
-CustomDrag.displaySequence = displaySequence++;
-
 export const ComplexNestedLayout = () => {
   const handleLayoutChange = () => {
     console.log(`handleLayoutChange`);
@@ -574,8 +560,6 @@ export const ComplexNestedLayout = () => {
   );
 };
 
-ComplexNestedLayout.displaySequence = displaySequence++;
-
 export const ScrollingLayout = () => (
   <LayoutContainer>
     <Flexbox
@@ -647,8 +631,6 @@ export const ScrollingLayout = () => (
   </LayoutContainer>
 );
 
-ScrollingLayout.displaySequence = displaySequence++;
-
 export const JsonLayout = () => {
   return (
     <LayoutProvider
@@ -720,5 +702,3 @@ export const JsonLayout = () => {
     </LayoutProvider>
   );
 };
-
-JsonLayout.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Layout/LayoutPatterns.examples.tsx b/vuu-ui/showcase/src/examples/Layout/LayoutPatterns.examples.tsx
index 675f0092f..3da64a645 100644
--- a/vuu-ui/showcase/src/examples/Layout/LayoutPatterns.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Layout/LayoutPatterns.examples.tsx
@@ -4,8 +4,6 @@ import type { TableConfig } from "@finos/vuu-table-types";
 import { Table } from "@finos/vuu-table";
 import { useMemo } from "react";
 
-let displaySequence = 1;
-
 export const TableWithFooter = () => {
   const tableConfig = useMemo<TableConfig>(() => {
     return {
@@ -30,4 +28,3 @@ export const TableWithFooter = () => {
     </FlexboxLayout>
   );
 };
-TableWithFooter.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Layout/LayoutProvider.examples.tsx b/vuu-ui/showcase/src/examples/Layout/LayoutProvider.examples.tsx
index 1d315f44a..14755de07 100644
--- a/vuu-ui/showcase/src/examples/Layout/LayoutProvider.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Layout/LayoutProvider.examples.tsx
@@ -18,8 +18,6 @@ import { LocalDataSourceProvider } from "@finos/vuu-data-test";
 
 registerComponent("FilterTable", VuuFilterTableFeature, "view");
 
-let displaySequence = 1;
-
 const contentRed = {
   type: "div",
   props: {
@@ -84,7 +82,6 @@ export const StaticTemplateNoChrome = () => {
     </>
   );
 };
-StaticTemplateNoChrome.displaySequence = displaySequence++;
 
 export const LeftRightChrome = () => {
   const handleLayoutChange = useCallback<LayoutChangeHandler>((layout) => {
@@ -145,7 +142,6 @@ export const LeftRightChrome = () => {
     </>
   );
 };
-LeftRightChrome.displaySequence = displaySequence++;
 
 const LayoutProviderTemplate = ({
   workspaceJSON,
@@ -179,8 +175,6 @@ export const SimpleStaticLayoutJson = () => (
   />
 );
 
-SimpleStaticLayoutJson.displaySequence = displaySequence++;
-
 // prettier-ignore
 export const SimpleStaticLayoutJsonWithViews = () => (
   <LayoutProviderTemplate
@@ -204,8 +198,6 @@ export const SimpleStaticLayoutJsonWithViews = () => (
   />
 );
 
-SimpleStaticLayoutJsonWithViews.displaySequence = displaySequence++;
-
 // prettier-ignore
 export const LayoutJsonWithPreloadedFeatures = () => (
   <LocalDataSourceProvider modules={["BASKET"]}>
@@ -230,8 +222,6 @@ export const LayoutJsonWithPreloadedFeatures = () => (
   </LocalDataSourceProvider>
 );
 
-LayoutJsonWithPreloadedFeatures.displaySequence = displaySequence++;
-
 // prettier-ignore
 export const LayoutJsonWithPreloadedFeaturesVisualLinks = () => (
   <LocalDataSourceProvider modules={["BASKET"]}>
@@ -264,7 +254,6 @@ export const LayoutJsonWithPreloadedFeaturesVisualLinks = () => (
     />
   </LocalDataSourceProvider>
 );
-LayoutJsonWithPreloadedFeaturesVisualLinks.displaySequence = displaySequence++;
 
 // prettier-ignore
 export const LayoutJsonWithTabbedFeaturesVisualLinks = () => (
@@ -327,4 +316,3 @@ export const LayoutJsonWithTabbedFeaturesVisualLinks = () => (
     />
   </LocalDataSourceProvider>
 );
-LayoutJsonWithTabbedFeaturesVisualLinks.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Layout/MeasuredContainer.examples.tsx b/vuu-ui/showcase/src/examples/Layout/MeasuredContainer.examples.tsx
index 7044b1f14..328fdbb22 100644
--- a/vuu-ui/showcase/src/examples/Layout/MeasuredContainer.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Layout/MeasuredContainer.examples.tsx
@@ -4,8 +4,6 @@ import { useCallback, useMemo, useState } from "react";
 
 import "./MeasuredContainer.examples.css";
 
-let displaySequence = 1;
-
 const MeasuredChild = () => {
   const [{ h, w }, setSize] = useState<{ h: number; w: number }>({
     h: 0,
@@ -35,7 +33,7 @@ const MeasuredChild = () => {
         resizeObserver.observe(el);
       }
     },
-    [resizeObserver]
+    [resizeObserver],
   );
 
   return (
@@ -54,7 +52,6 @@ export const DefaultMeasuredContainer = () => {
     </MeasuredContainer>
   );
 };
-DefaultMeasuredContainer.displaySequence = displaySequence++;
 
 export const FixedSizeMeasuredContainer = () => {
   return (
@@ -63,7 +60,6 @@ export const FixedSizeMeasuredContainer = () => {
     </MeasuredContainer>
   );
 };
-FixedSizeMeasuredContainer.displaySequence = displaySequence++;
 
 export const FixedHeightMeasuredContainer = () => {
   return (
@@ -72,7 +68,6 @@ export const FixedHeightMeasuredContainer = () => {
     </MeasuredContainer>
   );
 };
-FixedHeightMeasuredContainer.displaySequence = displaySequence++;
 
 export const PercentageSizeMeasuredContainer = () => {
   return (
@@ -81,7 +76,6 @@ export const PercentageSizeMeasuredContainer = () => {
     </MeasuredContainer>
   );
 };
-PercentageSizeMeasuredContainer.displaySequence = displaySequence++;
 
 export const FlexLayoutMeasuredContainer = () => {
   return (
@@ -104,4 +98,3 @@ export const FlexLayoutMeasuredContainer = () => {
     </div>
   );
 };
-FlexLayoutMeasuredContainer.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Layout/Palette.examples.tsx b/vuu-ui/showcase/src/examples/Layout/Palette.examples.tsx
index 876f5ca38..35e9a033b 100644
--- a/vuu-ui/showcase/src/examples/Layout/Palette.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Layout/Palette.examples.tsx
@@ -11,8 +11,6 @@ import {
 
 import "./LayoutContainer.examples.css";
 
-let displaySequence = 1;
-
 export const SimplePalette = () => (
   <LayoutProvider>
     <Flexbox style={{ width: 900, height: 800 }}>
@@ -76,7 +74,6 @@ export const SimplePalette = () => (
     </Flexbox>
   </LayoutProvider>
 );
-SimplePalette.displaySequence = displaySequence++;
 
 export const StructuredPalette = () => (
   <View
@@ -196,4 +193,3 @@ export const StructuredPalette = () => (
     </Palette>
   </View>
 );
-StructuredPalette.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Layout/Stack.examples.tsx b/vuu-ui/showcase/src/examples/Layout/Stack.examples.tsx
index d903094e5..191bbc561 100644
--- a/vuu-ui/showcase/src/examples/Layout/Stack.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Layout/Stack.examples.tsx
@@ -7,8 +7,6 @@ import {
 } from "@finos/vuu-layout";
 import { useState } from "react";
 
-let displaySequence = 1;
-
 const allowAddTab = true;
 const allowCloseTab = true;
 const allowRenameTab = true;
@@ -32,8 +30,6 @@ export const FourTabStack = () => {
   );
 };
 
-FourTabStack.displaySequence = displaySequence++;
-
 export const FourTabsLeft = () => {
   return (
     <LayoutProvider>
@@ -53,8 +49,6 @@ export const FourTabsLeft = () => {
   );
 };
 
-FourTabsLeft.displaySequence = displaySequence++;
-
 export const FourTabStackAllowRename = () => {
   return (
     <LayoutProvider>
@@ -77,8 +71,6 @@ export const FourTabStackAllowRename = () => {
   );
 };
 
-FourTabStackAllowRename.displaySequence = displaySequence++;
-
 export const FourTabStackAllowClose = () => {
   return (
     <LayoutProvider>
@@ -102,8 +94,6 @@ export const FourTabStackAllowClose = () => {
   );
 };
 
-FourTabStackAllowClose.displaySequence = displaySequence++;
-
 export const FourTabStackAllowAddCloseRenameTab = () => {
   return (
     <LayoutProvider>
@@ -127,8 +117,6 @@ export const FourTabStackAllowAddCloseRenameTab = () => {
   );
 };
 
-FourTabStackAllowAddCloseRenameTab.displaySequence = displaySequence++;
-
 export const VerticalTabsControlled = () => {
   const [active] = useState(0);
 
@@ -154,8 +142,6 @@ export const VerticalTabsControlled = () => {
   );
 };
 
-VerticalTabsControlled.displaySequence = displaySequence++;
-
 export const EmptyStackAddTab = () => {
   const createContent = (index: number) => (
     <View
@@ -179,8 +165,6 @@ export const EmptyStackAddTab = () => {
   );
 };
 
-EmptyStackAddTab.displaySequence = displaySequence++;
-
 export const TabsWithinTabs = () => (
   <LayoutProvider>
     <StackLayout style={{ width: 800, height: 500 }} active={0}>
@@ -223,8 +207,6 @@ export const TabsWithinTabs = () => (
   </LayoutProvider>
 );
 
-TabsWithinTabs.displaySequence = displaySequence++;
-
 export const TabsWithFlexChildren = () => {
   const handleLayoutChange = (layout: any) => {
     console.log(JSON.stringify(layout, null, 2));
@@ -273,5 +255,3 @@ export const TabsWithFlexChildren = () => {
     </LayoutProvider>
   );
 };
-
-TabsWithFlexChildren.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Layout/Toolbar.examples.tsx b/vuu-ui/showcase/src/examples/Layout/Toolbar.examples.tsx
index bd06bb94c..c5bb3e7d5 100644
--- a/vuu-ui/showcase/src/examples/Layout/Toolbar.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Layout/Toolbar.examples.tsx
@@ -4,14 +4,12 @@ import { CSSProperties, MouseEvent, useCallback, useState } from "react";
 
 import "./Toolbar.examples.css";
 
-let displaySequence = 1;
-
 export const DefaulToolbar = () => {
   const handleNavigateOutOfBounds = useCallback<NavigationOutOfBoundsHandler>(
     (direction) => {
       console.log(`onNavigateOutOfBounds ${direction}`);
     },
-    []
+    [],
   );
   return (
     <div
@@ -42,14 +40,13 @@ export const DefaulToolbar = () => {
     </div>
   );
 };
-DefaulToolbar.displaySequence = displaySequence++;
 
 export const ToolbarWrapPriority = () => {
   const handleNavigateOutOfBounds = useCallback<NavigationOutOfBoundsHandler>(
     (direction) => {
       console.log(`onNavigateOutOfBounds ${direction}`);
     },
-    []
+    [],
   );
   return (
     <div
@@ -80,7 +77,6 @@ export const ToolbarWrapPriority = () => {
     </div>
   );
 };
-ToolbarWrapPriority.displaySequence = displaySequence++;
 
 export const ToolbarControlledSelection = () => {
   const [activeItem, setActiveItem] = useState<number[]>([]);
@@ -115,7 +111,6 @@ export const ToolbarControlledSelection = () => {
     </div>
   );
 };
-ToolbarControlledSelection.displaySequence = displaySequence++;
 
 export const DefaulToolbarActivateSingle = () => {
   return (
@@ -148,7 +143,6 @@ export const DefaulToolbarActivateSingle = () => {
     </div>
   );
 };
-DefaulToolbarActivateSingle.displaySequence = displaySequence++;
 
 export const DefaulToolbarActivateSingleDeselectable = () => {
   return (
@@ -182,7 +176,6 @@ export const DefaulToolbarActivateSingleDeselectable = () => {
     </div>
   );
 };
-DefaulToolbarActivateSingleDeselectable.displaySequence = displaySequence++;
 
 export const ToolbarActivateMultipleItems = () => {
   return (
@@ -216,8 +209,6 @@ export const ToolbarActivateMultipleItems = () => {
   );
 };
 
-ToolbarActivateMultipleItems.displaySequence = displaySequence++;
-
 export const ToolbarShiftActivateMultipleItems = () => {
   return (
     <div
@@ -250,8 +241,6 @@ export const ToolbarShiftActivateMultipleItems = () => {
   );
 };
 
-ToolbarShiftActivateMultipleItems.displaySequence = displaySequence++;
-
 export const ToolbarActivateMultipleItemsNonSelectableItem = () => {
   return (
     <div
@@ -289,9 +278,6 @@ export const ToolbarActivateMultipleItemsNonSelectableItem = () => {
   );
 };
 
-ToolbarActivateMultipleItemsNonSelectableItem.displaySequence =
-  displaySequence++;
-
 export const ToolbarItemsEventHandlers = () => {
   const handleClick = useCallback((evt: MouseEvent<HTMLButtonElement>) => {
     const { dataset } = evt.target as HTMLButtonElement;
@@ -368,5 +354,3 @@ export const ToolbarItemsEventHandlers = () => {
     </div>
   );
 };
-
-ToolbarItemsEventHandlers.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Layout/View.examples.tsx b/vuu-ui/showcase/src/examples/Layout/View.examples.tsx
index 9daf57403..eaa8a8afa 100644
--- a/vuu-ui/showcase/src/examples/Layout/View.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Layout/View.examples.tsx
@@ -1,7 +1,5 @@
 import { Component, View } from "@finos/vuu-layout";
 
-let displaySequence = 1;
-
 export const ComponentWithBorderAndHeader = ({ width = 500, height = 400 }) => (
   <View
     title="Tye Boss"
@@ -17,4 +15,3 @@ export const ComponentWithBorderAndHeader = ({ width = 500, height = 400 }) => (
     <Component />
   </View>
 );
-ComponentWithBorderAndHeader.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Performance/Performance.examples.css b/vuu-ui/showcase/src/examples/Performance/Performance.examples.css
deleted file mode 100644
index e06af099c..000000000
--- a/vuu-ui/showcase/src/examples/Performance/Performance.examples.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.vuuPerfExamplesToolbar .Responsive-inner {
-    align-items: center;
-}
-
-.vuuPerfExamplesToolbar .saltButton {
-    margin: 3px 0;
-}
\ No newline at end of file
diff --git a/vuu-ui/showcase/src/examples/Performance/Performance.examples.tsx b/vuu-ui/showcase/src/examples/Performance/Performance.examples.tsx
deleted file mode 100644
index 9d00552e4..000000000
--- a/vuu-ui/showcase/src/examples/Performance/Performance.examples.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import { VuuDataSource } from "@finos/vuu-data-remote";
-import { DataSourceRow } from "@finos/vuu-data-types";
-import { VuuGroupBy, VuuRpcMenuRequest } from "@finos/vuu-protocol-types";
-import { metadataKeys } from "@finos/vuu-utils";
-import { Button } from "@salt-ds/core";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useAutoLoginToVuuServer } from "../utils/useAutoLoginToVuuServer";
-
-import "./Performance.examples.css";
-
-const { COUNT } = metadataKeys;
-
-let displaySequence = 1;
-
-const zeroCounts = (rows: DataSourceRow[]) =>
-  rows.every((row) => row[COUNT] === 0);
-
-const fullCounts = (rows: DataSourceRow[]) =>
-  rows.every((row) => row[COUNT] > 0);
-
-const isInitialTreeResponse = (message: any) => {
-  return message.size === 3 && zeroCounts(message.rows);
-};
-
-const isFullTreeResponse = (message: any) => {
-  return message.rows.length === 3 && fullCounts(message.rows);
-};
-
-const isClearTreeResponse = (message: any) => {
-  return message.size > 100;
-};
-
-export const TreePerformance = () => {
-  useAutoLoginToVuuServer();
-
-  const [parentOrderCount, setParentOrderCount] = useState(0);
-  const [childOrderCount, setChildOrderCount] = useState(0);
-  const [operation, setOperation] = useState("");
-  const [operationStatus, setOperationStatus] = useState("");
-
-  const dataResolver = useRef<(value: unknown) => void | undefined>();
-  const dataReceived = () =>
-    new Promise((resolve) => {
-      dataResolver.current = resolve;
-    });
-
-  const treeDataResolver = useRef<(value: unknown) => void | undefined>();
-  const treeDataReceived = () =>
-    new Promise((resolve) => {
-      treeDataResolver.current = resolve;
-    });
-
-  const [dataSourceParent, dataSourceChild] = useMemo(() => {
-    const dsParentOrders = new VuuDataSource({
-      bufferSize: 0,
-      columns: ["id", "ric"],
-      table: { table: "parentOrders", module: "SIMUL" },
-    });
-    dsParentOrders.subscribe({ range: { from: 0, to: 0 } }, (message) => {
-      switch (message.type) {
-        case "viewport-update":
-          if (message.size) {
-            setParentOrderCount(message.size);
-          }
-          break;
-      }
-    });
-
-    // create a separate viewport to track childORders size, otw size is affected by groupBy, filter
-    const dsChildOrdersSize = new VuuDataSource({
-      bufferSize: 0,
-      columns: ["id"],
-      table: { table: "childOrders", module: "SIMUL" },
-    });
-
-    dsChildOrdersSize.subscribe({ range: { from: 0, to: 20 } }, (message) => {
-      if (message.type === "viewport-update" && message.size) {
-        setChildOrderCount(message.size);
-      }
-    });
-
-    const dsChildOrders = new VuuDataSource({
-      bufferSize: 0,
-      columns: [
-        "id",
-        "parentOrderId",
-        "ric",
-        "ccy",
-        "exchange",
-        "quantity",
-        "price",
-      ],
-      table: { table: "childOrders", module: "SIMUL" },
-    });
-    dsChildOrders.subscribe({ range: { from: 0, to: 20 } }, (message) => {
-      switch (message.type) {
-        case "viewport-update":
-          if (message.rows) {
-            if (isInitialTreeResponse(message)) {
-              setOperationStatus("initial response received");
-            } else if (isFullTreeResponse(message)) {
-              if (typeof treeDataResolver.current === "function") {
-                treeDataResolver.current(undefined);
-              }
-            } else if (isClearTreeResponse(message)) {
-              if (typeof treeDataResolver.current === "function") {
-                treeDataResolver.current(undefined);
-              }
-            } else if (typeof dataResolver.current === "function") {
-              dataResolver.current(undefined);
-              dataResolver.current = undefined;
-            }
-          }
-          break;
-      }
-    });
-
-    return [dsParentOrders, dsChildOrders];
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      if (dataSourceParent) {
-        dataSourceParent.unsubscribe();
-      }
-      if (dataSourceChild) {
-        dataSourceChild.unsubscribe();
-      }
-    };
-  }, [dataSourceChild, dataSourceParent]);
-
-  const handleAddRows = useCallback(() => {
-    console.log("add rows");
-    dataSourceParent.menuRpcCall({
-      type: "VIEW_PORT_MENUS_SELECT_RPC",
-      rpcName: "ADD_1M_ROWS",
-    } as Omit<VuuRpcMenuRequest, "vpId">);
-  }, [dataSourceParent]);
-
-  const handleGroupBy = useCallback(
-    async (groupBy: VuuGroupBy) => {
-      const startTime = performance.now();
-      dataSourceChild.groupBy = groupBy;
-      if (groupBy.length > 0) {
-        setOperation(`group by ${groupBy.join(",")}`);
-      } else {
-        setOperation("clear group by");
-      }
-      setOperationStatus("in flight");
-      await treeDataReceived();
-      const endTime = performance.now();
-      setOperationStatus(`took ${((endTime - startTime) / 1000).toFixed(2)} s`);
-    },
-    [dataSourceChild],
-  );
-
-  const handleSort = useCallback(
-    async (column: string) => {
-      const startTime = performance.now();
-      dataSourceChild.sort = { sortDefs: [{ column, sortType: "A" }] };
-      setOperation(`sort on ${column}`);
-      setOperationStatus("in flight");
-      await dataReceived();
-      const endTime = performance.now();
-      setOperationStatus(`took ${((endTime - startTime) / 1000).toFixed(2)} s`);
-    },
-    [dataSourceChild],
-  );
-
-  const disableButtons = operationStatus === "in flight";
-  return (
-    <div
-      style={{ display: "flex", width: 900, height: 900, background: "yellow" }}
-    >
-      <div className="vuuToolbarProxy vuuToolbarProxy-vertical vuuPerfExamplesToolbar">
-        <Button disabled={disableButtons} onClick={handleAddRows}>
-          Add 1 Million rows
-        </Button>
-        <Button disabled={disableButtons} onClick={() => handleSort("ccy")}>
-          Sort CCY
-        </Button>
-        <Button disabled={disableButtons} onClick={() => handleSort("price")}>
-          Sort Price
-        </Button>
-        <Button
-          disabled={disableButtons}
-          onClick={() => handleGroupBy(["ccy"])}
-        >
-          GroupBy CCY
-        </Button>
-        <Button
-          disabled={disableButtons}
-          onClick={() => handleGroupBy(["ccy", "exchange"])}
-        >
-          GroupBy CCY, Exchange
-        </Button>
-        <Button
-          disabled={disableButtons}
-          onClick={() => handleGroupBy(["ccy", "exchange", "ric"])}
-        >
-          GroupBy CCY, Exchange, Ric
-        </Button>
-        <Button disabled={disableButtons} onClick={() => handleGroupBy([])}>
-          Clear GroupBy
-        </Button>
-      </div>
-      <div style={{ padding: 12 }}>
-        <div>Parent Orders: {parentOrderCount}</div>
-        <div>Child Orders: {childOrderCount}</div>
-        <div>
-          {operation} {operationStatus}
-        </div>
-      </div>
-    </div>
-  );
-};
-TreePerformance.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Performance/index.ts b/vuu-ui/showcase/src/examples/Performance/index.ts
deleted file mode 100644
index 508064297..000000000
--- a/vuu-ui/showcase/src/examples/Performance/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Performance.examples";
diff --git a/vuu-ui/showcase/src/examples/Popups/ContextMenu.examples.tsx b/vuu-ui/showcase/src/examples/Popups/ContextMenu.examples.tsx
index aa7e6ab6b..7a702a7d9 100644
--- a/vuu-ui/showcase/src/examples/Popups/ContextMenu.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Popups/ContextMenu.examples.tsx
@@ -28,8 +28,6 @@ import {
   useState,
 } from "react";
 
-let displaySequence = 1;
-
 const usePosition = () => {
   const ref = useRef<HTMLDivElement>(null);
   const [position, setPosition] = useState<{ x: number; y: number }>({
@@ -97,8 +95,6 @@ export const DefaultContextMenu = () => {
   );
 };
 
-DefaultContextMenu.displaySequence = displaySequence++;
-
 export const FlatContextMenu = () => {
   const { ref } = usePosition();
 
@@ -131,8 +127,6 @@ export const FlatContextMenu = () => {
   );
 };
 
-FlatContextMenu.displaySequence = displaySequence++;
-
 export const ContextMenuControlledHighlighting = () => {
   const handleClose: ContextMenuProps["onClose"] = () => {
     console.log(`clicked menu action`);
@@ -156,8 +150,6 @@ export const ContextMenuControlledHighlighting = () => {
   );
 };
 
-ContextMenuControlledHighlighting.displaySequence = displaySequence++;
-
 type IdProps = { children: string | JSX.Element };
 const Id = ({ children }: IdProps) => (
   <span style={{ color: "blue" }}>{children}</span>
@@ -166,7 +158,7 @@ const Id = ({ children }: IdProps) => (
 export const AdditionalNesting = () => {
   const { ref, position } = usePosition();
   const handleClose: ContextMenuProps["onClose"] = (
-    reason?: PopupCloseReason
+    reason?: PopupCloseReason,
   ) => {
     if (reasonIsMenuAction(reason)) {
       console.log(`menu closed ${reason.menuId}`);
@@ -248,12 +240,10 @@ export const AdditionalNesting = () => {
   );
 };
 
-AdditionalNesting.displaySequence = displaySequence++;
-
 export const ContextMenuPopup = () => {
   const contextMenu = useMemo(() => {
     const handleClose: ContextMenuProps["onClose"] = (
-      reason?: PopupCloseReason
+      reason?: PopupCloseReason,
     ) => {
       if (reasonIsMenuAction(reason)) {
         console.log(`menu closed ${reason.menuId}`);
@@ -354,8 +344,6 @@ export const ContextMenuPopup = () => {
   );
 };
 
-ContextMenuPopup.displaySequence = displaySequence++;
-
 const ComponentWithMenu = ({
   location,
   ...props
@@ -395,8 +383,6 @@ export const SimpleContextMenuProvider = () => {
   );
 };
 
-SimpleContextMenuProvider.displaySequence = displaySequence++;
-
 export const ContextMenuProviderWithLocationAwareMenuBuilder = () => {
   const menuDescriptors: ContextMenuItemDescriptor[] = [
     { label: "Sort", action: "sort", icon: "sort-up" },
@@ -423,7 +409,7 @@ export const ContextMenuProviderWithLocationAwareMenuBuilder = () => {
   const menuBuilder: MenuBuilder = (location: string) =>
     menuDescriptors.filter(
       (descriptor) =>
-        descriptor.location === undefined || descriptor.location === location
+        descriptor.location === undefined || descriptor.location === location,
     );
 
   const localMenuBuilder: MenuBuilder = (/* location: string */) => {
@@ -458,5 +444,3 @@ export const ContextMenuProviderWithLocationAwareMenuBuilder = () => {
     </ContextMenuProvider>
   );
 };
-ContextMenuProviderWithLocationAwareMenuBuilder.displaySequence =
-  displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Popups/DialogProvider.examples.tsx b/vuu-ui/showcase/src/examples/Popups/DialogProvider.examples.tsx
index 905f071be..dd454579c 100644
--- a/vuu-ui/showcase/src/examples/Popups/DialogProvider.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Popups/DialogProvider.examples.tsx
@@ -3,8 +3,6 @@ import { useDialogContext } from "@finos/vuu-popups";
 import { Button } from "@salt-ds/core";
 import { MouseEventHandler, useCallback, useRef, useState } from "react";
 
-let displaySequence = 1;
-
 const ComponentThatShowsDialog = () => {
   const renderCountRef = useRef(0);
   const [, forceRefresh] = useState({});
@@ -15,7 +13,7 @@ const ComponentThatShowsDialog = () => {
   const handleClick = useCallback(() => {
     showDialog(
       <div style={{ width: 200, height: 130, background: "cornflowerblue" }} />,
-      "A Dialog"
+      "A Dialog",
     );
   }, [showDialog]);
 
@@ -45,4 +43,3 @@ export const DefaultDialogProvider = () => (
     <ComponentThatShowsDialog />
   </DialogProvider>
 );
-DefaultDialogProvider.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Popups/Notifications/Notifications.examples.tsx b/vuu-ui/showcase/src/examples/Popups/Notifications/Notifications.examples.tsx
index a01257e70..2ca5ae132 100644
--- a/vuu-ui/showcase/src/examples/Popups/Notifications/Notifications.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Popups/Notifications/Notifications.examples.tsx
@@ -13,8 +13,6 @@ import {
   Option,
 } from "@salt-ds/core";
 
-let displaySequence = 1;
-
 // this example allows to fire notifications dynamically when wrapped in NotificationsProvider
 const Notifications = () => {
   const [type, setType] = useState<NotificationLevel>("info");
@@ -80,8 +78,6 @@ export const NotificationsWithContext = () => (
   </NotificationsProvider>
 );
 
-NotificationsWithContext.displaySequence = displaySequence++;
-
 export const SuccessNotificationToast = () => (
   <ToastNotification
     top={20}
@@ -95,8 +91,6 @@ export const SuccessNotificationToast = () => (
   />
 );
 
-SuccessNotificationToast.displaySequence = displaySequence++;
-
 export const ErrorNotificationToast = () => (
   <ToastNotification
     top={20}
@@ -110,8 +104,6 @@ export const ErrorNotificationToast = () => (
   />
 );
 
-ErrorNotificationToast.displaySequence = displaySequence++;
-
 export const WarningNotificationToast = () => (
   <ToastNotification
     top={20}
@@ -125,8 +117,6 @@ export const WarningNotificationToast = () => (
   />
 );
 
-WarningNotificationToast.displaySequence = displaySequence++;
-
 export const InfoNotificationToast = () => (
   <ToastNotification
     top={20}
@@ -139,5 +129,3 @@ export const InfoNotificationToast = () => (
     }}
   />
 );
-
-InfoNotificationToast.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Popups/PopupMenu.examples.tsx b/vuu-ui/showcase/src/examples/Popups/PopupMenu.examples.tsx
index e54ce92e3..8e6f17532 100644
--- a/vuu-ui/showcase/src/examples/Popups/PopupMenu.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Popups/PopupMenu.examples.tsx
@@ -7,8 +7,6 @@ import {
 } from "@finos/vuu-popups";
 import { useCallback, useMemo } from "react";
 
-let displaySequence = 1;
-
 const menuBuilder: MenuBuilder = () => [
   { action: "action-1", label: "Menu Item 1" },
   { action: "action-2", label: "Menu Item 2" },
@@ -27,7 +25,7 @@ export const DefaultPopupMenu = ({
 }: Partial<PopupMenuProps>) => {
   const menuHandler = useMemo<MenuActionHandler>(
     () => menuActionHandler ?? defaultMenuHandler,
-    [menuActionHandler]
+    [menuActionHandler],
   );
 
   const onMenuOpen = useCallback(() => {
@@ -56,22 +54,19 @@ export const DefaultPopupMenu = ({
   );
 };
 
-DefaultPopupMenu.displaySequence = displaySequence++;
-
 export const PopupMenuWithLabel = ({ height = 300, width = 600 }) => {
   const menuBuilder = useMemo<MenuBuilder>(
-    () => () =>
-      [
-        {
-          action: "action-1",
-          label: "Menu Item 1",
-        },
-        {
-          action: "action-2",
-          label: "Menu Item 2",
-        },
-      ],
-    []
+    () => () => [
+      {
+        action: "action-1",
+        label: "Menu Item 1",
+      },
+      {
+        action: "action-2",
+        label: "Menu Item 2",
+      },
+    ],
+    [],
   );
 
   const menuHandler = useMemo<MenuActionHandler>(
@@ -83,7 +78,7 @@ export const PopupMenuWithLabel = ({ height = 300, width = 600 }) => {
           return true;
         }
       },
-    []
+    [],
   );
 
   return (
@@ -108,24 +103,21 @@ export const PopupMenuWithLabel = ({ height = 300, width = 600 }) => {
   );
 };
 
-PopupMenuWithLabel.displaySequence = displaySequence++;
-
 export const PopupMenuWithMenuOptions = () => {
   const menuBuilder = useMemo<MenuBuilder>(
-    () => (_locaction, options) =>
-      [
-        {
-          action: "action-1",
-          label: "Menu Item 1",
-          options,
-        },
-        {
-          action: "action-2",
-          label: "Menu Item 2",
-          options,
-        },
-      ],
-    []
+    () => (_locaction, options) => [
+      {
+        action: "action-1",
+        label: "Menu Item 1",
+        options,
+      },
+      {
+        action: "action-2",
+        label: "Menu Item 2",
+        options,
+      },
+    ],
+    [],
   );
 
   const menuHandler = useMemo<MenuActionHandler>(
@@ -137,14 +129,14 @@ export const PopupMenuWithMenuOptions = () => {
           return true;
         }
       },
-    []
+    [],
   );
 
   const menuOptions = useMemo(
     () => ({
       test: "value-1",
     }),
-    []
+    [],
   );
 
   return (
@@ -160,8 +152,6 @@ export const PopupMenuWithMenuOptions = () => {
   );
 };
 
-PopupMenuWithMenuOptions.displaySequence = displaySequence++;
-
 export const PopupMenuUsingLocationAndContext = () => {
   const contextMenuDescriptors = [
     { label: "Sort", action: "sort", location: "test-location" },
@@ -177,20 +167,19 @@ export const PopupMenuUsingLocationAndContext = () => {
     contextMenuDescriptors.filter((menuItem) => menuItem.location === location);
 
   const menuBuilder = useMemo<MenuBuilder>(
-    () => (_locaction, options) =>
-      [
-        {
-          action: "action-1",
-          label: "Menu Item 1",
-          options,
-        },
-        {
-          action: "action-2",
-          label: "Menu Item 2",
-          options,
-        },
-      ],
-    []
+    () => (_locaction, options) => [
+      {
+        action: "action-1",
+        label: "Menu Item 1",
+        options,
+      },
+      {
+        action: "action-2",
+        label: "Menu Item 2",
+        options,
+      },
+    ],
+    [],
   );
 
   const menuHandler = useMemo<MenuActionHandler>(
@@ -201,14 +190,14 @@ export const PopupMenuUsingLocationAndContext = () => {
           return true;
         }
       },
-    []
+    [],
   );
 
   const menuOptions = useMemo(
     () => ({
       test: "value-1",
     }),
-    []
+    [],
   );
 
   return (
@@ -234,5 +223,3 @@ export const PopupMenuUsingLocationAndContext = () => {
     </ContextMenuProvider>
   );
 };
-
-PopupMenuUsingLocationAndContext.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Popups/Tooltip.examples.tsx b/vuu-ui/showcase/src/examples/Popups/Tooltip.examples.tsx
index 59a295ec2..d1f3e0e97 100644
--- a/vuu-ui/showcase/src/examples/Popups/Tooltip.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Popups/Tooltip.examples.tsx
@@ -5,8 +5,6 @@ import { SyntheticEvent, useCallback, useMemo, useRef, useState } from "react";
 
 // import "./Tooltip.examples.css";
 
-let displaySequence = 1;
-
 type TooltipPlacement = "above" | "right" | "below" | "left";
 
 export const DefaultTooltip = () => {
@@ -14,7 +12,7 @@ export const DefaultTooltip = () => {
   const [tooltipPlacement, setTooltipPlacement] =
     useState<TooltipPlacement>("right");
   const [tooltipContent, setTooltipContent] = useState<"child" | "text">(
-    "text"
+    "text",
   );
 
   const id = useId();
@@ -24,7 +22,7 @@ export const DefaultTooltip = () => {
       const { value } = evt.target as HTMLButtonElement;
       setTooltipPlacement(value as TooltipPlacement);
     },
-    []
+    [],
   );
 
   const handleChangeContent = useCallback(
@@ -32,7 +30,7 @@ export const DefaultTooltip = () => {
       const { value } = evt.target as HTMLButtonElement;
       setTooltipContent(value as "child" | "text");
     },
-    []
+    [],
   );
 
   const tooltipChild = useMemo(
@@ -50,7 +48,7 @@ export const DefaultTooltip = () => {
         Custom Content
       </div>
     ),
-    []
+    [],
   );
 
   const { anchorProps, tooltipProps } = useTooltip({
@@ -114,4 +112,3 @@ export const DefaultTooltip = () => {
     </div>
   );
 };
-DefaultTooltip.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/AppHeader.examples.tsx b/vuu-ui/showcase/src/examples/Shell/AppHeader.examples.tsx
index d4b0b82bb..d26adf702 100644
--- a/vuu-ui/showcase/src/examples/Shell/AppHeader.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/AppHeader.examples.tsx
@@ -1,8 +1,5 @@
 import { AppHeader } from "@finos/vuu-shell";
 
-let displaySequence = 1;
-
 export const DefaultAppHeader = () => {
   return <AppHeader />;
 };
-DefaultAppHeader.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/ConnectionStatus.examples.tsx b/vuu-ui/showcase/src/examples/Shell/ConnectionStatus.examples.tsx
index 348e9e2a8..bacf822e0 100644
--- a/vuu-ui/showcase/src/examples/Shell/ConnectionStatus.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/ConnectionStatus.examples.tsx
@@ -10,8 +10,6 @@ import { ConnectionManager } from "@finos/vuu-data-remote";
 import { useLayoutEffect, useRef, useState } from "react";
 import { Button } from "@salt-ds/core";
 
-let displaySequence = 1;
-
 export const ConnectionStatusIndicatorConnected = () => {
   const connectionState: WebSocketConnectionState = {
     connectionPhase: "connecting",
@@ -22,7 +20,6 @@ export const ConnectionStatusIndicatorConnected = () => {
   };
   return <ConnectionStatusIndicator connectionState={connectionState} />;
 };
-ConnectionStatusIndicatorConnected.displaySequence = displaySequence++;
 
 export const ConnectionStatusIndicatorDisconnectedNoRetryUsed = () => {
   const connectionState: WebSocketConnectionState = {
@@ -34,8 +31,6 @@ export const ConnectionStatusIndicatorDisconnectedNoRetryUsed = () => {
   };
   return <ConnectionStatusIndicator connectionState={connectionState} />;
 };
-ConnectionStatusIndicatorDisconnectedNoRetryUsed.displaySequence =
-  displaySequence++;
 
 export const ConnectionStatusIndicatorDisconnectedOneRetryUsed = () => {
   const connectionState: WebSocketConnectionState = {
@@ -47,8 +42,6 @@ export const ConnectionStatusIndicatorDisconnectedOneRetryUsed = () => {
   };
   return <ConnectionStatusIndicator connectionState={connectionState} />;
 };
-ConnectionStatusIndicatorDisconnectedOneRetryUsed.displaySequence =
-  displaySequence++;
 
 export const ConnectionStatusIndicatorDisconnectedTwoRetryUsed = () => {
   const connectionState: WebSocketConnectionState = {
@@ -60,8 +53,6 @@ export const ConnectionStatusIndicatorDisconnectedTwoRetryUsed = () => {
   };
   return <ConnectionStatusIndicator connectionState={connectionState} />;
 };
-ConnectionStatusIndicatorDisconnectedTwoRetryUsed.displaySequence =
-  displaySequence++;
 
 export const ConnectionStatusIndicatorDisconnectedThreeRetryUsed = () => {
   const connectionStatusMessage: WebSocketConnectionState = {
@@ -75,8 +66,6 @@ export const ConnectionStatusIndicatorDisconnectedThreeRetryUsed = () => {
     <ConnectionStatusIndicator connectionState={connectionStatusMessage} />
   );
 };
-ConnectionStatusIndicatorDisconnectedThreeRetryUsed.displaySequence =
-  displaySequence++;
 
 export const ConnectionStatusIndicatorDisconnectedFourRetryUsed = () => {
   const connectionStatusMessage: WebSocketConnectionState = {
@@ -90,8 +79,6 @@ export const ConnectionStatusIndicatorDisconnectedFourRetryUsed = () => {
     <ConnectionStatusIndicator connectionState={connectionStatusMessage} />
   );
 };
-ConnectionStatusIndicatorDisconnectedFourRetryUsed.displaySequence =
-  displaySequence++;
 
 export const ConnectionStatusIndicatorDisconnectedAllRetryUsed = () => {
   const connectionStatusMessage: WebSocketConnectionState = {
@@ -105,8 +92,6 @@ export const ConnectionStatusIndicatorDisconnectedAllRetryUsed = () => {
     <ConnectionStatusIndicator connectionState={connectionStatusMessage} />
   );
 };
-ConnectionStatusIndicatorDisconnectedAllRetryUsed.displaySequence =
-  displaySequence++;
 
 export const ConnectionStatusIndicatorFailed = () => {
   const connectionStatusMessage: WebSocketConnectionState = {
@@ -120,7 +105,6 @@ export const ConnectionStatusIndicatorFailed = () => {
     <ConnectionStatusIndicator connectionState={connectionStatusMessage} />
   );
 };
-ConnectionStatusIndicatorFailed.displaySequence = displaySequence++;
 
 export const ConnectionStateDisplayConnected = () => {
   useLayoutEffect(() => {
@@ -134,7 +118,6 @@ export const ConnectionStateDisplayConnected = () => {
   }, []);
   return <ConnectionStateDisplay />;
 };
-ConnectionStateDisplayConnected.displaySequence = displaySequence++;
 
 export const ConnectionStateDisplayConnecting = () => {
   useLayoutEffect(() => {
@@ -148,7 +131,6 @@ export const ConnectionStateDisplayConnecting = () => {
   }, []);
   return <ConnectionStateDisplay />;
 };
-ConnectionStateDisplayConnecting.displaySequence = displaySequence++;
 
 const initialConnectionState: WebSocketConnectionState = {
   connectionPhase: "connecting",
@@ -230,4 +212,3 @@ export const InteractiveStateDisplay = () => {
     </div>
   );
 };
-InteractiveStateDisplay.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/Feature.examples.tsx b/vuu-ui/showcase/src/examples/Shell/Feature.examples.tsx
index b7a5a28ed..b361fc745 100644
--- a/vuu-ui/showcase/src/examples/Shell/Feature.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/Feature.examples.tsx
@@ -3,8 +3,6 @@ import { ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
 import { SyntheticEvent, useMemo, useState } from "react";
 import { getSchema } from "@finos/vuu-data-test";
 
-let displaySequence = 1;
-
 type PathMap = { [key: string]: { jsUrl: string; cssUrl?: string } };
 
 const componentPaths: { [key: string]: PathMap } = {
@@ -80,4 +78,3 @@ export const DefaultFeature = () => {
     </div>
   );
 };
-DefaultFeature.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/FeatureList.examples.tsx b/vuu-ui/showcase/src/examples/Shell/FeatureList.examples.tsx
index f470e61f8..c4a273287 100644
--- a/vuu-ui/showcase/src/examples/Shell/FeatureList.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/FeatureList.examples.tsx
@@ -1,8 +1,6 @@
 import { FeatureList, GroupedFeatureProps } from "@finos/vuu-shell";
 import { DynamicFeatureProps } from "@finos/vuu-utils";
 
-let displaySequence = 1;
-
 export const DefaultFeatureList = () => {
   const features: DynamicFeatureProps[] = [
     { title: "Component 1", url: "test" },
@@ -13,7 +11,6 @@ export const DefaultFeatureList = () => {
 
   return <FeatureList features={features} style={{ width: 300 }} />;
 };
-DefaultFeatureList.displaySequence = displaySequence++;
 
 export const FeatureListWithTitle = () => {
   const features: DynamicFeatureProps[] = [
@@ -31,7 +28,6 @@ export const FeatureListWithTitle = () => {
     />
   );
 };
-FeatureListWithTitle.displaySequence = displaySequence++;
 
 export const FeatureListWithGroups = () => {
   const features: GroupedFeatureProps = {
@@ -56,7 +52,6 @@ export const FeatureListWithGroups = () => {
     />
   );
 };
-FeatureListWithGroups.displaySequence = displaySequence++;
 
 export const FeatureListWithGroupsManyItems = () => {
   const features: GroupedFeatureProps = {
@@ -96,4 +91,3 @@ export const FeatureListWithGroupsManyItems = () => {
     />
   );
 };
-FeatureListWithGroupsManyItems.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/FeatureProvider.examples.tsx b/vuu-ui/showcase/src/examples/Shell/FeatureProvider.examples.tsx
index 6e8799673..22984fe19 100644
--- a/vuu-ui/showcase/src/examples/Shell/FeatureProvider.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/FeatureProvider.examples.tsx
@@ -2,8 +2,6 @@ import { FeatureList, useFeatures } from "@finos/vuu-shell";
 import { StaticFeatureDescriptor } from "@finos/vuu-utils";
 import { FeatureAndLayoutProvider } from "@finos/vuu-shell";
 
-let displaySequence = 1;
-
 const staticFeatures: StaticFeatureDescriptor[] = [
   { label: "label1", type: "Placeholder" },
   { label: "label2", type: "Component" },
@@ -23,9 +21,11 @@ const StaticFeaturesTemplate = () => {
 
 export const DefaultStaticFeatures = () => {
   return (
-    <FeatureAndLayoutProvider dynamicFeatures={[]} staticFeatures={staticFeatures}>
+    <FeatureAndLayoutProvider
+      dynamicFeatures={[]}
+      staticFeatures={staticFeatures}
+    >
       <StaticFeaturesTemplate />
     </FeatureAndLayoutProvider>
   );
 };
-DefaultStaticFeatures.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/LayoutList.examples.tsx b/vuu-ui/showcase/src/examples/Shell/LayoutList.examples.tsx
index e9306a42a..ad269cda2 100644
--- a/vuu-ui/showcase/src/examples/Shell/LayoutList.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/LayoutList.examples.tsx
@@ -7,12 +7,10 @@ import {
 import layoutMetadata from "../_test-data/layoutMetadata";
 import { useMemo } from "react";
 
-let displaySequence = 0;
-
 export const DefaultLayoutList = (): JSX.Element => {
   const demoPersistenceManager = useMemo(
     () => new StaticPersistenceManager({ layoutMetadata }),
-    []
+    [],
   );
 
   return (
@@ -23,7 +21,6 @@ export const DefaultLayoutList = (): JSX.Element => {
     </PersistenceProvider>
   );
 };
-DefaultLayoutList.displaySequence = displaySequence++;
 
 export const LayoutListManyLayouts = (): JSX.Element => {
   const demoPersistenceManager = useMemo(
@@ -51,7 +48,7 @@ export const LayoutListManyLayouts = (): JSX.Element => {
         {id: "layout-18", group: "Group 4", name: "Layout 18", created: "26.05.2024", screenshot: "", user: "steve" },
       ],
       }),
-    []
+    [],
   );
 
   return (
@@ -62,4 +59,3 @@ export const LayoutListManyLayouts = (): JSX.Element => {
     </PersistenceProvider>
   );
 };
-LayoutListManyLayouts.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/LayoutListProvider.examples.tsx b/vuu-ui/showcase/src/examples/Shell/LayoutListProvider.examples.tsx
index fdb42b02c..d3c6dd8e4 100644
--- a/vuu-ui/showcase/src/examples/Shell/LayoutListProvider.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/LayoutListProvider.examples.tsx
@@ -8,8 +8,6 @@ import { useMemo } from "react";
 import { sysLayouts } from "../_test-data/sysLayoutMetadata";
 import { FeatureAndLayoutProvider } from "@finos/vuu-shell";
 
-let displaySequence = 0;
-
 export const LayoutListProvider = (): JSX.Element => {
   const demoPersistenceManager = useMemo(
     () =>
@@ -39,4 +37,3 @@ export const LayoutListProvider = (): JSX.Element => {
     </PersistenceProvider>
   );
 };
-LayoutListProvider.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/LeftNav.examples.tsx b/vuu-ui/showcase/src/examples/Shell/LeftNav.examples.tsx
index 064862671..f522c9a0b 100644
--- a/vuu-ui/showcase/src/examples/Shell/LeftNav.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/LeftNav.examples.tsx
@@ -1,23 +1,17 @@
 import { LeftNav } from "@finos/vuu-shell";
 
-let displaySequence = 0;
-
 export const VerticalTabstrip = () => {
   return <LeftNav />;
 };
-VerticalTabstrip.displaySequence = displaySequence++;
 
 export const VerticalTabstripCollapsed = () => {
   return <LeftNav defaultExpanded={false} />;
 };
-VerticalTabstripCollapsed.displaySequence = displaySequence++;
 
 export const VerticalTabstripCollapsedContent = () => {
   return <LeftNav defaultActiveTabIndex={1} defaultExpanded={false} />;
 };
-VerticalTabstripCollapsedContent.displaySequence = displaySequence++;
 
 export const VerticalTabstripContent = () => {
   return <LeftNav defaultActiveTabIndex={1} defaultExpanded />;
 };
-VerticalTabstripContent.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/LoginPanel.examples.tsx b/vuu-ui/showcase/src/examples/Shell/LoginPanel.examples.tsx
index 5ecb11bb2..915720f71 100644
--- a/vuu-ui/showcase/src/examples/Shell/LoginPanel.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/LoginPanel.examples.tsx
@@ -1,8 +1,5 @@
 import { LoginPanel } from "@finos/vuu-shell";
 
-let displaySequence = 1;
-
 export const DefaultLoginPanel = () => {
   return <LoginPanel onSubmit={() => console.log("onSubmit")} />;
 };
-DefaultLoginPanel.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/SavePanel.examples.tsx b/vuu-ui/showcase/src/examples/Shell/SavePanel.examples.tsx
index d55c20e3e..5bac2dfdd 100644
--- a/vuu-ui/showcase/src/examples/Shell/SavePanel.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/SavePanel.examples.tsx
@@ -2,8 +2,6 @@ import { SaveLayoutPanel } from "@finos/vuu-shell";
 import { Dialog, DialogContent, DialogHeader } from "@salt-ds/core";
 import { useCallback } from "react";
 
-let displaySequence = 1;
-
 export const SavePanel = () => {
   const handleSave = useCallback((layoutMeta) => {
     console.log(JSON.stringify(layoutMeta, null, 2));
@@ -18,4 +16,3 @@ export const SavePanel = () => {
     </Dialog>
   );
 };
-SavePanel.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/SessionTableEditing.examples.tsx b/vuu-ui/showcase/src/examples/Shell/SessionTableEditing.examples.tsx
index 094b5a309..0dcaf41df 100644
--- a/vuu-ui/showcase/src/examples/Shell/SessionTableEditing.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/SessionTableEditing.examples.tsx
@@ -16,8 +16,6 @@ import { ColumnDescriptor } from "@finos/vuu-table-types";
 import { SessionEditingForm } from "@finos/vuu-data-react";
 import { HTMLAttributes, MouseEventHandler, useMemo } from "react";
 
-let displaySequence = 0;
-
 const openFile: ActionWithParams = {
   id: "openFile",
   description: "open a file",
@@ -102,7 +100,6 @@ export const SingleFieldForm = () => {
     />
   );
 };
-SingleFieldForm.displaySequence = displaySequence++;
 
 export const TwinFieldForm = () => {
   return (
@@ -117,7 +114,6 @@ export const TwinFieldForm = () => {
     />
   );
 };
-TwinFieldForm.displaySequence = displaySequence++;
 
 const ComponentWithMenu = ({
   location,
@@ -167,7 +163,7 @@ const initialValue = (colType?: VuuColumnDataType) => {
 
 const emptyRow = (key: string, columns: ColumnDescriptor[]) =>
   columns.map((col) =>
-    col.name === "key" ? key : initialValue(col.serverDataType)
+    col.name === "key" ? key : initialValue(col.serverDataType),
   );
 
 const getDataSource = (action: ActionWithParams): DataSource => {
@@ -175,7 +171,7 @@ const getDataSource = (action: ActionWithParams): DataSource => {
     action.params.map((param) => ({
       name: param.name,
       serverDataType: param.type,
-    }))
+    })),
   );
 
   return new ArrayDataSource({
@@ -202,11 +198,11 @@ export const ContextMenuActions = () => {
       { label: "Set Outbound Fix ...", action: "setOutboundFix" },
       { label: "Load File ...", action: "loadFile" },
     ],
-    []
+    [],
   );
 
   const handleMenuAction: MenuActionHandler = (
-    action: MenuActionClosePopup
+    action: MenuActionClosePopup,
   ) => {
     const actionDescriptor = actionDescriptors[action.menuId];
     if (hasParams(actionDescriptor)) {
@@ -231,7 +227,7 @@ export const ContextMenuActions = () => {
   const menuBuilder: MenuBuilder = (location: string) =>
     menuDescriptors.filter(
       (descriptor) =>
-        descriptor.location === undefined || descriptor.location === location
+        descriptor.location === undefined || descriptor.location === location,
     );
 
   return (
@@ -247,4 +243,3 @@ export const ContextMenuActions = () => {
     </ContextMenuProvider>
   );
 };
-ContextMenuActions.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/ShellLayout.examples.tsx b/vuu-ui/showcase/src/examples/Shell/ShellLayout.examples.tsx
index 3f4195317..dc5c3a7b3 100644
--- a/vuu-ui/showcase/src/examples/Shell/ShellLayout.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/ShellLayout.examples.tsx
@@ -25,8 +25,6 @@ registerComponent("Placeholder", Placeholder, "component");
 
 const user = { username: "test-user", token: "test-token" };
 
-let displaySequence = 1;
-
 const htmlAttributes = {
   "data-testid": "shell",
 } as HTMLAttributes<HTMLDivElement>;
@@ -49,8 +47,6 @@ export const DefaultShell = () => {
   );
 };
 
-DefaultShell.displaySequence = displaySequence++;
-
 export const SimpleShellCustomHeader = () => {
   const headerStyle: CSSProperties = {
     alignItems: "center",
@@ -80,8 +76,6 @@ export const SimpleShellCustomHeader = () => {
   );
 };
 
-SimpleShellCustomHeader.displaySequence = displaySequence++;
-
 export const SimpleShellNoWorkspaceTabs = () => {
   return (
     <Shell
@@ -103,8 +97,6 @@ export const SimpleShellNoWorkspaceTabs = () => {
   );
 };
 
-SimpleShellNoWorkspaceTabs.displaySequence = displaySequence++;
-
 export const FullHeightLeftPanel = () => {
   return (
     <Shell
@@ -126,7 +118,6 @@ export const FullHeightLeftPanel = () => {
     />
   );
 };
-FullHeightLeftPanel.displaySequence = displaySequence++;
 
 export const FullHeightLeftPanelLeftPanelClosed = () => {
   return (
@@ -152,8 +143,6 @@ export const FullHeightLeftPanelLeftPanelClosed = () => {
   );
 };
 
-FullHeightLeftPanelLeftPanelClosed.displaySequence = displaySequence++;
-
 export const InlayLeftPanel = () => {
   const persistNothing = useMemo(() => new StaticPersistenceManager({}), []);
   return (
@@ -178,7 +167,6 @@ export const InlayLeftPanel = () => {
     </PersistenceProvider>
   );
 };
-InlayLeftPanel.displaySequence = displaySequence++;
 
 const ToolbarTabs = () => {
   const dispatchLayoutAction = useLayoutProviderDispatch();
@@ -275,7 +263,6 @@ export const LeftMainTabs = () => {
     </PersistenceProvider>
   );
 };
-LeftMainTabs.displaySequence = displaySequence++;
 
 export const SimpleShellCustomPlaceholder = () => {
   const persistNothing = useMemo(() => new StaticPersistenceManager({}), []);
@@ -314,8 +301,6 @@ export const SimpleShellCustomPlaceholder = () => {
   );
 };
 
-SimpleShellCustomPlaceholder.displaySequence = displaySequence++;
-
 export const SimpleShellMultiLayouts = () => {
   const persistNothing = useMemo(() => new StaticPersistenceManager({}), []);
 
@@ -381,5 +366,3 @@ export const SimpleShellMultiLayouts = () => {
     </PersistenceProvider>
   );
 };
-
-SimpleShellMultiLayouts.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/ThemeProvider.examples.tsx b/vuu-ui/showcase/src/examples/Shell/ThemeProvider.examples.tsx
index 4057e08c9..6137a32e5 100644
--- a/vuu-ui/showcase/src/examples/Shell/ThemeProvider.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/ThemeProvider.examples.tsx
@@ -4,8 +4,6 @@ import { ThemedPanel } from "./components/ThemedPanel";
 
 import "./ThemeProvider.examples.css";
 
-let displaySequence = 1;
-
 const menuDescriptors = [
   { label: "Sort", action: "sort" },
   { label: "Filter", action: "sort" },
@@ -33,4 +31,3 @@ export const NestedThemeProviders = () => {
     </ContextMenuProvider>
   );
 };
-NestedThemeProviders.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/ThemeSwitch.examples.tsx b/vuu-ui/showcase/src/examples/Shell/ThemeSwitch.examples.tsx
index 1d1013a4b..b884b9260 100644
--- a/vuu-ui/showcase/src/examples/Shell/ThemeSwitch.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/ThemeSwitch.examples.tsx
@@ -2,8 +2,6 @@ import { ThemeSwitch } from "@finos/vuu-shell";
 import { ThemeMode } from "@finos/vuu-utils";
 import { useCallback, useState } from "react";
 
-let displaySequence = 1;
-
 export const DefaultThemeSwitch = () => {
   const [mode, setMode] = useState<ThemeMode>("light");
   const handleChange = useCallback((mode: ThemeMode) => {
@@ -25,4 +23,3 @@ export const DefaultThemeSwitch = () => {
     </div>
   );
 };
-DefaultThemeSwitch.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/UserSettings.examples.tsx b/vuu-ui/showcase/src/examples/Shell/UserSettings.examples.tsx
index 8dcad66c0..bf447bcc5 100644
--- a/vuu-ui/showcase/src/examples/Shell/UserSettings.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/UserSettings.examples.tsx
@@ -11,8 +11,6 @@ import { getStackWorkspaceJSON } from "@finos/vuu-shell";
 import { useMemo } from "react";
 import { scrollableSettingsFormSchema } from "./UserSettingsSchemaExamples/scrollableSettingsSchemaExample";
 
-let displaySequence = 1;
-
 // Showcase example showing the current default settings form
 export const DefaultUserSettingsForm = () => {
   const userSettingsSchema: SettingsSchema = {
@@ -37,7 +35,7 @@ export const DefaultUserSettingsForm = () => {
           },
         },
       }),
-    []
+    [],
   );
 
   return (
@@ -48,7 +46,6 @@ export const DefaultUserSettingsForm = () => {
     </PersistenceProvider>
   );
 };
-DefaultUserSettingsForm.displaySequence = displaySequence++;
 
 // Showcase example showing different form controls
 export const VariedFormControlUserSettingsForm = () => {
@@ -101,7 +98,7 @@ export const VariedFormControlUserSettingsForm = () => {
           },
         },
       }),
-    []
+    [],
   );
 
   return (
@@ -112,7 +109,6 @@ export const VariedFormControlUserSettingsForm = () => {
     </PersistenceProvider>
   );
 };
-VariedFormControlUserSettingsForm.displaySequence = displaySequence++;
 
 // Showcase example showing input validations
 export const InputValidationUserSettingsForm = () => {
@@ -142,7 +138,7 @@ export const InputValidationUserSettingsForm = () => {
           workspaceJSON: loadingJSON,
         },
       }),
-    []
+    [],
   );
 
   return (
@@ -153,7 +149,6 @@ export const InputValidationUserSettingsForm = () => {
     </PersistenceProvider>
   );
 };
-InputValidationUserSettingsForm.displaySequence = displaySequence++;
 
 // Showcase example showing large quantity of form controls
 export const ScrollableUserSettingsPanel = () => {
@@ -171,7 +166,7 @@ export const ScrollableUserSettingsPanel = () => {
           workspaceJSON: loadingJSON,
         },
       }),
-    []
+    [],
   );
 
   return (
@@ -182,42 +177,3 @@ export const ScrollableUserSettingsPanel = () => {
     </PersistenceProvider>
   );
 };
-ScrollableUserSettingsPanel.displaySequence = displaySequence++;
-
-// //Showcase example showing the shell with panel
-// const user = { username: "test-user", token: "test-token" };
-
-// export const SettingsFormInShell = () => {
-//   const demoPersistenceManager = useMemo(
-//     () =>
-//       new StaticPersistenceManager({
-//         applicationJSON: {
-//           userSettings: {
-//             userName: "",
-//             id: "",
-//           },
-//         },
-//       }),
-//     []
-//   );
-
-//   return (
-//     <PersistenceProvider persistenceManager={demoPersistenceManager}>
-//       <ApplicationProvider userSettingsSchema={scrollableSettingsFormSchema}>
-//         <Shell
-//           leftSidePanelLayout="full-height"
-//           loginUrl={window.location.toString()}
-//           user={user}
-//           style={
-//             {
-//               "--vuuShell-height": "100%",
-//               "--vuuShell-width": "100%",
-//             } as CSSProperties
-//           }
-//         />
-//       </ApplicationProvider>
-//     </PersistenceProvider>
-//   );
-// };
-
-// SettingsFormInShell.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/Workspace.examples.tsx b/vuu-ui/showcase/src/examples/Shell/Workspace.examples.tsx
index e8be4999b..80f39657f 100644
--- a/vuu-ui/showcase/src/examples/Shell/Workspace.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/Workspace.examples.tsx
@@ -6,14 +6,12 @@ import {
 } from "@finos/vuu-shell";
 import { useMemo } from "react";
 
-let displaySequence = 1;
-
 const user = { username: "why-the-lucky-stiff", token: "test-token" };
 
 export const DefaultLayoutNoStoredState = () => {
   const demoPersistenceManager = useMemo(
     () => new StaticPersistenceManager({}),
-    []
+    [],
   );
   return (
     <PersistenceProvider persistenceManager={demoPersistenceManager}>
@@ -21,12 +19,11 @@ export const DefaultLayoutNoStoredState = () => {
     </PersistenceProvider>
   );
 };
-DefaultLayoutNoStoredState.displaySequence = displaySequence++;
 
 export const DefaultLayoutNoStoredStateLoadDelay = () => {
   const demoPersistenceManager = useMemo(
     () => new StaticPersistenceManager({ applicationLoadDelay: 5000 }),
-    []
+    [],
   );
   return (
     <PersistenceProvider persistenceManager={demoPersistenceManager}>
@@ -34,12 +31,11 @@ export const DefaultLayoutNoStoredStateLoadDelay = () => {
     </PersistenceProvider>
   );
 };
-DefaultLayoutNoStoredStateLoadDelay.displaySequence = displaySequence++;
 
 export const CustomDefaultLayoutNoStoredState = () => {
   const demoPersistenceManager = useMemo(
     () => new StaticPersistenceManager({}),
-    []
+    [],
   );
   const layoutJSON = useMemo(
     () => ({
@@ -48,7 +44,7 @@ export const CustomDefaultLayoutNoStoredState = () => {
         style: { backgroundColor: "yellow", height: "100%" },
       },
     }),
-    []
+    [],
   );
   return (
     <PersistenceProvider persistenceManager={demoPersistenceManager}>
@@ -56,7 +52,6 @@ export const CustomDefaultLayoutNoStoredState = () => {
     </PersistenceProvider>
   );
 };
-CustomDefaultLayoutNoStoredState.displaySequence = displaySequence++;
 
 export const DefaultLayoutStoredState = () => {
   const demoPersistenceManager = useMemo(
@@ -84,7 +79,7 @@ export const DefaultLayoutStoredState = () => {
           },
         },
       }),
-    []
+    [],
   );
   return (
     <PersistenceProvider persistenceManager={demoPersistenceManager}>
@@ -92,7 +87,6 @@ export const DefaultLayoutStoredState = () => {
     </PersistenceProvider>
   );
 };
-DefaultLayoutStoredState.displaySequence = displaySequence++;
 
 export const CustomLayoutStoredState = () => {
   const layoutJSON = useMemo(
@@ -102,7 +96,7 @@ export const CustomLayoutStoredState = () => {
         style: { backgroundColor: "yellow", height: "100%" },
       },
     }),
-    []
+    [],
   );
 
   const demoPersistenceManager = useMemo(
@@ -134,7 +128,7 @@ export const CustomLayoutStoredState = () => {
           },
         },
       }),
-    []
+    [],
   );
   return (
     <PersistenceProvider persistenceManager={demoPersistenceManager}>
@@ -142,4 +136,3 @@ export const CustomLayoutStoredState = () => {
     </PersistenceProvider>
   );
 };
-CustomLayoutStoredState.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/BASKET.examples.tsx b/vuu-ui/showcase/src/examples/Table/BASKET.examples.tsx
index a9a577e48..328005072 100644
--- a/vuu-ui/showcase/src/examples/Table/BASKET.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/BASKET.examples.tsx
@@ -2,28 +2,20 @@ import { BasketTable } from "./BASKET/BasketTable";
 
 // import { default as Basket } from "./Basket";
 
-let displaySequence = 1;
-
 export const Basket = () => <BasketTable tableName="basket" />;
-Basket.displaySequence = displaySequence++;
 
 export const BasketConstituent = () => (
   <BasketTable tableName="basketConstituent" />
 );
-BasketConstituent.displaySequence = displaySequence++;
 
 export const BasketTrading = () => <BasketTable tableName="basketTrading" />;
-BasketTrading.displaySequence = displaySequence++;
 
 export const BasketTradingConstituent = () => (
   <BasketTable tableName="basketTradingConstituent" />
 );
-BasketTradingConstituent.displaySequence = displaySequence++;
 
 export const AlgoType = () => <BasketTable tableName="algoType" />;
-AlgoType.displaySequence = displaySequence++;
 
 export const PriceStrategyType = () => (
   <BasketTable tableName="priceStrategyType" />
 );
-PriceStrategyType.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/BigData.examples.tsx b/vuu-ui/showcase/src/examples/Table/BigData.examples.tsx
index fc72e5448..6d5e03082 100644
--- a/vuu-ui/showcase/src/examples/Table/BigData.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/BigData.examples.tsx
@@ -14,8 +14,6 @@ import {
 } from "react";
 import { columnGenerator, rowGenerator } from "./SimpleTableDataGenerator";
 
-let displaySequence = 1;
-
 export const SimpleTable = () => {
   const config = useMemo<TableConfig>(
     () => ({
@@ -23,13 +21,13 @@ export const SimpleTable = () => {
       rowSeparators: true,
       zebraStripes: true,
     }),
-    []
+    [],
   );
 
   const dataSource = useMemo<DataSource>(() => {
     const data = new ArrayProxy(
       1_000_000_000,
-      rowGenerator(config.columns.map((col) => col.name))
+      rowGenerator(config.columns.map((col) => col.name)),
     );
     return new ArrayDataSource({
       columnDescriptors: config.columns,
@@ -43,7 +41,6 @@ export const SimpleTable = () => {
     <Table config={config} dataSource={dataSource} height={625} width={1000} />
   );
 };
-SimpleTable.displaySequence = displaySequence++;
 
 export const TableScrollingAPI = () => {
   const [rowInputValue, setRowInputValue] = useState("");
@@ -82,13 +79,13 @@ export const TableScrollingAPI = () => {
       columns: columnGenerator(5),
       zebraStripes: true,
     }),
-    []
+    [],
   );
 
   const dataSource = useMemo<DataSource>(() => {
     const data = new ArrayProxy(
       1_000_000_000,
-      rowGenerator(config.columns.map((col) => col.name))
+      rowGenerator(config.columns.map((col) => col.name)),
     );
     return new ArrayDataSource({
       columnDescriptors: config.columns,
@@ -116,4 +113,3 @@ export const TableScrollingAPI = () => {
     </>
   );
 };
-TableScrollingAPI.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/BulkEdit.examples.tsx b/vuu-ui/showcase/src/examples/Table/BulkEdit.examples.tsx
index 97da696d3..6be2f69c1 100644
--- a/vuu-ui/showcase/src/examples/Table/BulkEdit.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/BulkEdit.examples.tsx
@@ -17,8 +17,6 @@ import { DemoTableContainer } from "./DemoTableContainer";
 import { useAutoLoginToVuuServer } from "../utils";
 import { DataSource } from "@finos/vuu-data-types";
 
-let displaySequence = 1;
-
 const BulkEditTableTemplate = ({
   table = "instruments",
 }: {
@@ -73,7 +71,6 @@ export const BulkEditTable = () => {
     </LocalDataSourceProvider>
   );
 };
-BulkEditTable.displaySequence = displaySequence++;
 
 export const BulkEditTableVuu = () => {
   useAutoLoginToVuuServer({ authenticate: false, secure: false });
@@ -85,4 +82,3 @@ export const BulkEditTableVuu = () => {
     </VuuDataSourceProvider>
   );
 };
-BulkEditTableVuu.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/ColumnLayout.examples.tsx b/vuu-ui/showcase/src/examples/Table/ColumnLayout.examples.tsx
index 697829187..fecac8c74 100644
--- a/vuu-ui/showcase/src/examples/Table/ColumnLayout.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/ColumnLayout.examples.tsx
@@ -1,12 +1,7 @@
 import { SimulTable } from "./SIMUL.examples";
 
-let displaySequence = 1;
-
 export const DefaultColumnLayout = () => <SimulTable />;
-DefaultColumnLayout.displaySequence = displaySequence++;
 
 export const StaticColumnLayout = () => <SimulTable columnLayout="static" />;
-StaticColumnLayout.displaySequence = displaySequence++;
 
 export const FitColumnLayout = () => <SimulTable columnLayout="fit" />;
-FitColumnLayout.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/Paging.examples.tsx b/vuu-ui/showcase/src/examples/Table/Paging.examples.tsx
index 7be6581ff..0140da5d5 100644
--- a/vuu-ui/showcase/src/examples/Table/Paging.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/Paging.examples.tsx
@@ -2,7 +2,7 @@ import { useVuuMenuActions } from "@finos/vuu-data-react";
 import {
   SimulTableName,
   simulModule,
-  simulSchemas
+  simulSchemas,
 } from "@finos/vuu-data-test";
 import { ContextMenuProvider } from "@finos/vuu-popups";
 import { Table, TableProps } from "@finos/vuu-table";
@@ -11,8 +11,6 @@ import { applyDefaultColumnConfig } from "@finos/vuu-utils";
 import { useCallback, useMemo } from "react";
 import { DemoTableContainer } from "./DemoTableContainer";
 
-let displaySequence = 0;
-
 const SimulTable = ({
   columnLayout,
   height = "100%",
@@ -34,11 +32,11 @@ const SimulTable = ({
         columns: applyDefaultColumnConfig(schema),
         rowClassNameGenerators,
         rowSeparators: true,
-        zebraStripes: true
+        zebraStripes: true,
       },
-      dataSource: simulModule.createDataSource(tableName)
+      dataSource: simulModule.createDataSource(tableName),
     }),
-    [columnLayout, rowClassNameGenerators, schema, tableName]
+    [columnLayout, rowClassNameGenerators, schema, tableName],
   );
 
   const handleConfigChange = useCallback(() => {
@@ -46,7 +44,7 @@ const SimulTable = ({
   }, []);
 
   const { buildViewserverMenuOptions, handleMenuAction } = useVuuMenuActions({
-    dataSource: tableProps.dataSource
+    dataSource: tableProps.dataSource,
   });
 
   return (
@@ -69,9 +67,7 @@ const SimulTable = ({
     </>
   );
 };
-SimulTable.displaySequence = displaySequence++;
 
 export const DefaultPaging = () => (
   <SimulTable columnLayout="fit" tableName="instruments" />
 );
-DefaultPaging.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/RestData.examples.tsx b/vuu-ui/showcase/src/examples/Table/RestData.examples.tsx
index e179dc89d..e85104574 100644
--- a/vuu-ui/showcase/src/examples/Table/RestData.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/RestData.examples.tsx
@@ -8,8 +8,6 @@ import { FilterBarProps } from "@finos/vuu-filters";
 import { FilterState } from "@finos/vuu-filter-types";
 import { DataSourceFilter } from "@finos/vuu-data-types";
 
-let displaySequence = 0;
-
 const FilterTableTemplate = ({
   quickFilterColumns,
   TableProps,
@@ -93,7 +91,6 @@ export const RestInstrumentsScrolling = () => {
     </RestDataSourceProvider>
   );
 };
-RestInstrumentsScrolling.displaySequence = displaySequence++;
 
 export const RestInstrumentsCustomHttpHeaders = () => {
   // Note, the test Rest service used for these returns the Access control header
@@ -113,7 +110,6 @@ export const RestInstrumentsCustomHttpHeaders = () => {
     </RestDataSourceProvider>
   );
 };
-RestInstrumentsCustomHttpHeaders.displaySequence = displaySequence++;
 
 export const RestInstrumentsPagination = () => {
   return (
@@ -122,4 +118,3 @@ export const RestInstrumentsPagination = () => {
     </RestDataSourceProvider>
   );
 };
-RestInstrumentsPagination.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/SIMUL.examples.tsx b/vuu-ui/showcase/src/examples/Table/SIMUL.examples.tsx
index ca75d6523..4c12963ee 100644
--- a/vuu-ui/showcase/src/examples/Table/SIMUL.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/SIMUL.examples.tsx
@@ -12,8 +12,6 @@ import { useCallback, useMemo } from "react";
 import { DemoTableContainer } from "./DemoTableContainer";
 import "./BuySellRowClassNameGenerator";
 
-let displaySequence = 1;
-
 const getDefaultColumnConfig = (
   tableName: string,
   columnName: string,
@@ -122,7 +120,6 @@ export const SimulTable = ({
     </>
   );
 };
-SimulTable.displaySequence = displaySequence++;
 
 export const InstrumentsExtended = () => (
   <SimulTable
@@ -130,7 +127,6 @@ export const InstrumentsExtended = () => (
     getDefaultColumnConfig={getDefaultColumnConfig}
   />
 );
-InstrumentsExtended.displaySequence = displaySequence++;
 
 export const Prices = () => {
   return (
@@ -140,7 +136,6 @@ export const Prices = () => {
     />
   );
 };
-Prices.displaySequence = displaySequence++;
 
 const rowClassGenerators = ["buy-sell-rows"];
 
@@ -154,7 +149,6 @@ export const Orders = () => {
     </NotificationsProvider>
   );
 };
-Orders.displaySequence = displaySequence++;
 
 export const InstrumentPrices = () => (
   <SimulTable
@@ -162,7 +156,6 @@ export const InstrumentPrices = () => (
     getDefaultColumnConfig={getDefaultColumnConfig}
   />
 );
-InstrumentPrices.displaySequence = displaySequence++;
 
 export const ParentOrders = () => (
   <SimulTable
@@ -170,7 +163,6 @@ export const ParentOrders = () => (
     getDefaultColumnConfig={getDefaultColumnConfig}
   />
 );
-ParentOrders.displaySequence = displaySequence++;
 
 export const ChildOrders = () => (
   <SimulTable
@@ -178,4 +170,3 @@ export const ChildOrders = () => (
     getDefaultColumnConfig={getDefaultColumnConfig}
   />
 );
-ChildOrders.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/TEST.examples.tsx b/vuu-ui/showcase/src/examples/Table/TEST.examples.tsx
index 3a46622a8..fe61833a8 100644
--- a/vuu-ui/showcase/src/examples/Table/TEST.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/TEST.examples.tsx
@@ -7,11 +7,9 @@ import { SchemaColumn } from "@finos/vuu-data-types";
 import { ColumnDescriptor } from "@finos/vuu-table-types";
 import { DemoTableContainer } from "./DemoTableContainer";
 
-let displaySequence = 1;
-
 const extendColumnConfig = (
   columns: SchemaColumn[],
-  config: Partial<ColumnDescriptor>
+  config: Partial<ColumnDescriptor>,
 ) => columns.map<ColumnDescriptor>((col) => ({ ...col, ...config }));
 
 const TestTable = ({
@@ -32,7 +30,7 @@ const TestTable = ({
       },
       dataSource: vuuModule<TestTableName>("TEST").createDataSource(tableName),
     }),
-    [props, schema.columns, tableName]
+    [props, schema.columns, tableName],
   );
 
   const { buildViewserverMenuOptions, handleMenuAction } = useVuuMenuActions({
@@ -54,4 +52,3 @@ const TestTable = ({
 export const TwoHundredColumns = (props: Partial<TableProps>) => (
   <TestTable tableName="TwoHundredColumns" {...props} width={914} />
 );
-TwoHundredColumns.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/Table.examples.tsx b/vuu-ui/showcase/src/examples/Table/Table.examples.tsx
index fa5d45d49..31edbfb8d 100644
--- a/vuu-ui/showcase/src/examples/Table/Table.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/Table.examples.tsx
@@ -47,8 +47,6 @@ import { columnGenerator, rowGenerator } from "./SimpleTableDataGenerator";
 import { VuuDataSourceProvider } from "@finos/vuu-data-react";
 import "./Table.examples.css";
 
-let displaySequence = 1;
-
 export const TestTable = ({
   columnLayout,
   config: configProp,
@@ -95,7 +93,6 @@ export const TestTable = ({
     />
   );
 };
-TestTable.displaySequence = displaySequence++;
 
 const TableTemplate = ({
   config,
@@ -178,7 +175,6 @@ export const ControlledNavigation = () => {
     </LocalDataSourceProvider>
   );
 };
-ControlledNavigation.displaySequence = displaySequence++;
 
 export const TabInAndOut = () => {
   return (
@@ -219,7 +215,6 @@ export const TabInAndOut = () => {
     </div>
   );
 };
-TabInAndOut.displaySequence = displaySequence++;
 
 const VuuTableTemplate = ({ schema }: { schema: TableSchema }) => {
   const { VuuDataSource } = useDataSource();
@@ -260,7 +255,6 @@ export const VuuInstruments = () => {
     </VuuDataSourceProvider>
   );
 };
-VuuInstruments.displaySequence = displaySequence++;
 
 export const FlexLayoutTables = () => {
   const tableConfig = useMemo<TableConfig>(() => {
@@ -307,7 +301,6 @@ export const FlexLayoutTables = () => {
     </LayoutProvider>
   );
 };
-FlexLayoutTables.displaySequence = displaySequence++;
 
 export const TableInLayoutWithContextPanel = () => {
   useMemo(() => {
@@ -339,7 +332,6 @@ export const TableInLayoutWithContextPanel = () => {
     </LayoutProvider>
   );
 };
-TableInLayoutWithContextPanel.displaySequence = displaySequence++;
 
 export const AutoTable = () => {
   const tableConfig = useMemo<TableConfig>(() => {
@@ -357,7 +349,6 @@ export const AutoTable = () => {
     <Table config={tableConfig} dataSource={dataSource} renderBufferSize={0} />
   );
 };
-AutoTable.displaySequence = displaySequence++;
 
 export const AutoTableAsFlexChild = () => {
   const tableConfig = useMemo<TableConfig>(() => {
@@ -392,7 +383,6 @@ export const AutoTableAsFlexChild = () => {
     </div>
   );
 };
-AutoTableAsFlexChild.displaySequence = displaySequence++;
 
 export const VuuTableCalculatedColumns = () => {
   const calculatedColumns: ColumnDescriptor[] = useMemo(
@@ -467,7 +457,6 @@ export const VuuTableCalculatedColumns = () => {
     </VuuDataSourceProvider>
   );
 };
-VuuTableCalculatedColumns.displaySequence = displaySequence++;
 
 export const GroupHeaderCellOneColumn = () => {
   const column = useMemo<GroupColumnDescriptor>(() => {
@@ -508,7 +497,6 @@ export const GroupHeaderCellOneColumn = () => {
     </div>
   );
 };
-GroupHeaderCellOneColumn.displaySequence = displaySequence++;
 
 export const GroupHeaderCellTwoColumn = () => {
   const column = useMemo<GroupColumnDescriptor>(() => {
@@ -556,7 +544,6 @@ export const GroupHeaderCellTwoColumn = () => {
     </div>
   );
 };
-GroupHeaderCellTwoColumn.displaySequence = displaySequence++;
 
 export const GroupHeaderCellThreeColumn = () => {
   const valueFormatter = defaultValueFormatter;
@@ -619,7 +606,6 @@ export const GroupHeaderCellThreeColumn = () => {
     </Flexbox>
   );
 };
-GroupHeaderCellThreeColumn.displaySequence = displaySequence++;
 
 export const GroupHeaderCellThreeColumnFixedWidth = () => {
   const valueFormatter = defaultValueFormatter;
@@ -670,7 +656,6 @@ export const GroupHeaderCellThreeColumnFixedWidth = () => {
     </div>
   );
 };
-GroupHeaderCellThreeColumnFixedWidth.displaySequence = displaySequence++;
 
 const SymbolHeader = (_: HeaderCellProps) => {
   const handleClick = useCallback<MouseEventHandler>((e) => {
@@ -736,4 +721,3 @@ export const CustomColumnRenderer = () => {
     />
   );
 };
-CustomColumnRenderer.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/TableEditing.examples.tsx b/vuu-ui/showcase/src/examples/Table/TableEditing.examples.tsx
index 0701c40e4..47eddd4fc 100644
--- a/vuu-ui/showcase/src/examples/Table/TableEditing.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/TableEditing.examples.tsx
@@ -18,8 +18,6 @@ import {
 import { useCallback, useMemo } from "react";
 import { DropdownCell } from "@finos/vuu-table-extras";
 
-let displaySequence = 0;
-
 registerComponent("dropdown-cell", DropdownCell, "cell-renderer", {
   userCanAssign: false,
 });
@@ -145,4 +143,3 @@ export const EditableTable = () => {
     </LocalDataSourceProvider>
   );
 };
-EditableTable.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/TableLayout.examples.tsx b/vuu-ui/showcase/src/examples/Table/TableLayout.examples.tsx
index 56a3b8cf8..7099355eb 100644
--- a/vuu-ui/showcase/src/examples/Table/TableLayout.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/TableLayout.examples.tsx
@@ -20,8 +20,6 @@ import { columnGenerator, rowGenerator } from "./SimpleTableDataGenerator";
 import { VuuRpcMenuRequest } from "@finos/vuu-protocol-types";
 import { useDataSource } from "@finos/vuu-utils";
 
-let displaySequence = 0;
-
 type DataTableProps = Partial<
   Omit<TableProps, "config"> & { config?: Partial<TableConfig> }
 > & {
@@ -76,7 +74,6 @@ export const ViewportRowLimitDefaultRowHeight = () => {
     </LocalDataSourceProvider>
   );
 };
-ViewportRowLimitDefaultRowHeight.displaySequence = displaySequence++;
 
 export const ViewportRowLimitExplicitRowHeight = () => {
   return (
@@ -85,7 +82,6 @@ export const ViewportRowLimitExplicitRowHeight = () => {
     </LocalDataSourceProvider>
   );
 };
-ViewportRowLimitExplicitRowHeight.displaySequence = displaySequence++;
 
 export const MaxViewportRowLimitRowsExceedLimit = () => {
   return (
@@ -94,7 +90,6 @@ export const MaxViewportRowLimitRowsExceedLimit = () => {
     </LocalDataSourceProvider>
   );
 };
-MaxViewportRowLimitRowsExceedLimit.displaySequence = displaySequence++;
 
 export const MaxViewportRowLimitFewRows = ({
   width,
@@ -111,7 +106,6 @@ export const MaxViewportRowLimitFewRows = ({
     </LocalDataSourceProvider>
   );
 };
-MaxViewportRowLimitFewRows.displaySequence = displaySequence++;
 
 type InlineDrawerProps = {
   inline?: boolean;
@@ -194,7 +188,6 @@ const InlineDrawer = ({
 export const RightInlineDrawerPeek = () => (
   <InlineDrawer position="right" inline />
 );
-RightInlineDrawerPeek.displaySequence = displaySequence++;
 
 export const SingleHeadingRow = () => {
   const tableProps = useMemo<Pick<TableProps, "config" | "dataSource">>(() => {
@@ -223,7 +216,6 @@ export const SingleHeadingRow = () => {
     <Table {...tableProps} height={645} renderBufferSize={10} width={800} />
   );
 };
-SingleHeadingRow.displaySequence = displaySequence++;
 
 const SimpleCustomHeader = ({ ariaRole, ariaRowIndex }: BaseRowProps) => {
   return (
@@ -271,7 +263,6 @@ export const CustomHeaderComponent = () => {
     />
   );
 };
-CustomHeaderComponent.displaySequence = displaySequence++;
 
 const CustomColumnHeader = ({
   ariaRole,
@@ -335,7 +326,6 @@ export const CustomHeaderElementVirtualizedColumns = () => {
     />
   );
 };
-CustomHeaderElementVirtualizedColumns.displaySequence = displaySequence++;
 
 export const MultipleCustomHeaders = () => {
   const config = useMemo<TableConfig>(
@@ -372,4 +362,3 @@ export const MultipleCustomHeaders = () => {
     />
   );
 };
-MultipleCustomHeaders.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/TableList.examples.tsx b/vuu-ui/showcase/src/examples/Table/TableList.examples.tsx
index b22a0f08b..af3610678 100644
--- a/vuu-ui/showcase/src/examples/Table/TableList.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/TableList.examples.tsx
@@ -3,8 +3,6 @@ import { ArrayDataSource } from "@finos/vuu-data-local";
 import { useMemo } from "react";
 import { ColumnDescriptor } from "@finos/vuu-table-types";
 
-let displaySequence = 1;
-
 export const DefaultTableList = () => {
   const [columns, dataSource] = useMemo(() => {
     const columns: ColumnDescriptor[] = [
@@ -49,4 +47,3 @@ export const DefaultTableList = () => {
     </div>
   );
 };
-DefaultTableList.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/TableNavigation.examples.tsx b/vuu-ui/showcase/src/examples/Table/TableNavigation.examples.tsx
index e58884057..2bbd2067d 100644
--- a/vuu-ui/showcase/src/examples/Table/TableNavigation.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/TableNavigation.examples.tsx
@@ -6,8 +6,6 @@ import { useAutoLoginToVuuServer } from "../utils";
 import { TableConfig } from "@finos/vuu-table-types";
 import { LocalDataSourceProvider, getSchema } from "@finos/vuu-data-test";
 
-let displaySequence = 0;
-
 const TableTemplate = ({
   navigationStyle,
   schema = getSchema("instruments"),
@@ -62,7 +60,6 @@ export const RowNavigation = () => {
     </LocalDataSourceProvider>
   );
 };
-RowNavigation.displaySequence = displaySequence++;
 
 export const CellNavigation = () => {
   return (
@@ -71,4 +68,3 @@ export const CellNavigation = () => {
     </LocalDataSourceProvider>
   );
 };
-CellNavigation.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/TableSelection.examples.tsx b/vuu-ui/showcase/src/examples/Table/TableSelection.examples.tsx
index 4ed3fdc07..5223da199 100644
--- a/vuu-ui/showcase/src/examples/Table/TableSelection.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/TableSelection.examples.tsx
@@ -7,8 +7,6 @@ import { useMemo } from "react";
 
 import "./Table.examples.css";
 
-let displaySequence = 1;
-
 type DataTableProps = Partial<
   Omit<TableProps, "config"> & { config?: Partial<TableConfig> }
 > & {
@@ -98,7 +96,6 @@ export const CheckboxSelection = ({
     </LocalDataSourceProvider>
   );
 };
-CheckboxSelection.displaySequence = displaySequence++;
 
 export const CellBlockSelectionOnly = () => {
   return (
@@ -107,7 +104,6 @@ export const CellBlockSelectionOnly = () => {
     </LocalDataSourceProvider>
   );
 };
-CellBlockSelectionOnly.displaySequence = displaySequence++;
 
 export const CellBlockCheckboxSelection = () => {
   return (
@@ -116,7 +112,6 @@ export const CellBlockCheckboxSelection = () => {
     </LocalDataSourceProvider>
   );
 };
-CellBlockCheckboxSelection.displaySequence = displaySequence++;
 
 export const CellBlockRowSelection = () => {
   return (
@@ -129,7 +124,6 @@ export const CellBlockRowSelection = () => {
     </LocalDataSourceProvider>
   );
 };
-CellBlockRowSelection.displaySequence = displaySequence++;
 
 export const PreSelectedRowByIndex = () => {
   const handleSelectionChange: SelectionChangeHandler = (selection) => {
@@ -147,7 +141,6 @@ export const PreSelectedRowByIndex = () => {
     </LocalDataSourceProvider>
   );
 };
-PreSelectedRowByIndex.displaySequence = displaySequence++;
 
 export const PreSelectedRowsByIndex = () => {
   return (
@@ -161,7 +154,6 @@ export const PreSelectedRowsByIndex = () => {
     </LocalDataSourceProvider>
   );
 };
-PreSelectedRowsByIndex.displaySequence = displaySequence++;
 
 export const PreSelectedRangeByIndex = () => {
   return (
@@ -175,7 +167,6 @@ export const PreSelectedRangeByIndex = () => {
     </LocalDataSourceProvider>
   );
 };
-PreSelectedRangeByIndex.displaySequence = displaySequence++;
 
 export const PreSelectedRowByKey = () => {
   const handleSelectionChange: SelectionChangeHandler = (selection) => {
@@ -193,4 +184,3 @@ export const PreSelectedRowByKey = () => {
     </LocalDataSourceProvider>
   );
 };
-PreSelectedRowByKey.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/TableVuuLayoutCombinations.examples.tsx b/vuu-ui/showcase/src/examples/Table/TableVuuLayoutCombinations.examples.tsx
index 3d4e55dc4..ef9fed1be 100644
--- a/vuu-ui/showcase/src/examples/Table/TableVuuLayoutCombinations.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/TableVuuLayoutCombinations.examples.tsx
@@ -2,8 +2,6 @@ import { LayoutProvider, Stack, View } from "@finos/vuu-layout";
 import { useState } from "react";
 import { TestTable } from "./Table.examples";
 
-let displaySequence = 1;
-
 export const TwoTabbedTables = () => {
   const [active, setActive] = useState(0);
   return (
@@ -28,7 +26,6 @@ export const TwoTabbedTables = () => {
     </LayoutProvider>
   );
 };
-TwoTabbedTables.displaySequence = displaySequence++;
 
 export const FourTabbedTables = () => {
   const [active, setActive] = useState(0);
@@ -50,4 +47,3 @@ export const FourTabbedTables = () => {
     </Stack>
   );
 };
-FourTabbedTables.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/TableExtras/CellRenderers.examples.tsx b/vuu-ui/showcase/src/examples/TableExtras/CellRenderers.examples.tsx
index 0bd2c6473..2ad0df63d 100644
--- a/vuu-ui/showcase/src/examples/TableExtras/CellRenderers.examples.tsx
+++ b/vuu-ui/showcase/src/examples/TableExtras/CellRenderers.examples.tsx
@@ -11,8 +11,6 @@ import { VuuInput } from "@finos/vuu-ui-controls";
 import { getValueFormatter } from "@finos/vuu-utils";
 import { FormEventHandler, useCallback, useMemo, useState } from "react";
 
-let displaySequence = 1;
-
 const columnMap = {
   price: 8,
 };
@@ -87,8 +85,6 @@ export const DefaultBackgroundCell = ({
   );
 };
 
-DefaultBackgroundCell.displaySequence = displaySequence++;
-
 const formatting0Decimals = { decimals: 0 };
 const formatting4Decimals = { decimals: 4 };
 const backgroundArrow = { ...defaultRenderer, flashStyle: "arrow-bg" as const };
@@ -97,19 +93,15 @@ const arrowOnly = { ...defaultRenderer, flashStyle: "arrow" as const };
 export const BackgroundCell4Decimals = () => (
   <DefaultBackgroundCell formatting={formatting4Decimals} />
 );
-BackgroundCell4Decimals.displaySequence = displaySequence++;
 
 export const BackgroundCellNoDecimals = () => (
   <DefaultBackgroundCell formatting={formatting0Decimals} />
 );
-BackgroundCellNoDecimals.displaySequence = displaySequence++;
 
 export const BackgroundArrowCell = () => (
   <DefaultBackgroundCell renderer={backgroundArrow} />
 );
-BackgroundArrowCell.displaySequence = displaySequence++;
 
 export const ArrowOnlyCell = () => (
   <DefaultBackgroundCell renderer={arrowOnly} />
 );
-ArrowOnlyCell.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/TableExtras/ColumnExpressionInput.examples.tsx b/vuu-ui/showcase/src/examples/TableExtras/ColumnExpressionInput.examples.tsx
index 24c1c4ce5..dae692ad8 100644
--- a/vuu-ui/showcase/src/examples/TableExtras/ColumnExpressionInput.examples.tsx
+++ b/vuu-ui/showcase/src/examples/TableExtras/ColumnExpressionInput.examples.tsx
@@ -13,8 +13,6 @@ import {} from "@finos/vuu-utils";
 import { useAutoLoginToVuuServer } from "../utils";
 import { Input } from "@salt-ds/core";
 
-let displaySequence = 1;
-
 const table = { module: "SIMUL", table: "instruments" };
 
 const columns = [
@@ -64,7 +62,7 @@ export const DefaultColumnExpressionInput = () => {
       console.log(`is valid ${isValidExpression}`);
       setIsValid(isValidExpression);
     },
-    [expression]
+    [expression],
   );
 
   return (
@@ -102,4 +100,3 @@ export const DefaultColumnExpressionInput = () => {
     </div>
   );
 };
-DefaultColumnExpressionInput.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/TableExtras/ColumnExpressionPanel.examples.tsx b/vuu-ui/showcase/src/examples/TableExtras/ColumnExpressionPanel.examples.tsx
index c2ade4fbb..cfda77880 100644
--- a/vuu-ui/showcase/src/examples/TableExtras/ColumnExpressionPanel.examples.tsx
+++ b/vuu-ui/showcase/src/examples/TableExtras/ColumnExpressionPanel.examples.tsx
@@ -5,8 +5,6 @@ import { useMemo } from "react";
 
 const instrumentPrices = { module: "SIMUL", table: "instrumentPrices" };
 
-let displaySequence = 1;
-
 export const DefaultColumnExpressionPanel = () => {
   const tableConfig = useMemo<TableConfig>(() => {
     return {
@@ -26,4 +24,3 @@ export const DefaultColumnExpressionPanel = () => {
     </div>
   );
 };
-DefaultColumnExpressionPanel.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/TableExtras/ColumnSettings/ColumnSettings.examples.tsx b/vuu-ui/showcase/src/examples/TableExtras/ColumnSettings/ColumnSettings.examples.tsx
index c8ae9bfe5..955fb1db4 100644
--- a/vuu-ui/showcase/src/examples/TableExtras/ColumnSettings/ColumnSettings.examples.tsx
+++ b/vuu-ui/showcase/src/examples/TableExtras/ColumnSettings/ColumnSettings.examples.tsx
@@ -16,8 +16,6 @@ import {
 } from "@finos/vuu-utils";
 import { useCallback, useMemo, useState } from "react";
 
-let displaySequence = 1;
-
 export const ColumnFormattingPanelDouble = () => {
   const [column, setColumn] = useState<ColumnDescriptor>({
     name: "price",
@@ -34,7 +32,7 @@ export const ColumnFormattingPanelDouble = () => {
         name: "vuu.price-move-background",
       },
     ],
-    []
+    [],
   );
 
   const handleChangeRendering = useCallback<ColumnRenderPropsChangeHandler>(
@@ -48,7 +46,7 @@ export const ColumnFormattingPanelDouble = () => {
         },
       }));
     },
-    []
+    [],
   );
 
   return (
@@ -68,8 +66,6 @@ export const ColumnFormattingPanelDouble = () => {
   );
 };
 
-ColumnFormattingPanelDouble.displaySequence = displaySequence++;
-
 export const ColumnFormattingPanelDateTime = () => {
   const [column, setColumn] = useState<ColumnDescriptor>({
     name: "lastUpdated",
@@ -85,12 +81,12 @@ export const ColumnFormattingPanelDateTime = () => {
 
   const availableRenderers = useMemo<CellRendererDescriptor[]>(
     () => [{ name: "Default renderer (data type long)" }],
-    []
+    [],
   );
 
   const handleChangeRendering = useCallback<ColumnRenderPropsChangeHandler>(
     (renderer) => console.log(`handleChangeRendering`, { renderer }),
-    []
+    [],
   );
 
   const onChangeFormatting = useCallback((formatting: ColumnTypeFormatting) => {
@@ -118,8 +114,6 @@ export const ColumnFormattingPanelDateTime = () => {
   );
 };
 
-ColumnFormattingPanelDateTime.displaySequence = displaySequence++;
-
 export const NewCalculatedColumnSettingsPanel = () => {
   const schema = getSchema("parentOrders");
   const [{ column, tableConfig }, setState] = useState<{
@@ -140,7 +134,7 @@ export const NewCalculatedColumnSettingsPanel = () => {
   const handleCreateCalculatedColumn = useCallback(
     (column: ColumnDescriptor) => {
       console.log(
-        `create calculated column ${JSON.stringify(column, null, 2)}`
+        `create calculated column ${JSON.stringify(column, null, 2)}`,
       );
       setState((s) => ({
         tableConfig: {
@@ -150,7 +144,7 @@ export const NewCalculatedColumnSettingsPanel = () => {
         column,
       }));
     },
-    []
+    [],
   );
 
   const handleCancelCreateColumn = useCallback(() => {
@@ -178,15 +172,13 @@ export const NewCalculatedColumnSettingsPanel = () => {
   );
 };
 
-NewCalculatedColumnSettingsPanel.displaySequence = displaySequence++;
-
 export const CalculatedColumnSettingsPanel = () => {
   const calculatedColumn = useMemo<ColumnDescriptor>(
     () => ({
       name: "ccyExchange:concatenate(currency,exchange):string",
       serverDataType: "string",
     }),
-    []
+    [],
   );
   const schema = getSchema("parentOrders");
   const [{ column, tableConfig }, setState] = useState<{
@@ -236,4 +228,3 @@ export const CalculatedColumnSettingsPanel = () => {
     </div>
   );
 };
-CalculatedColumnSettingsPanel.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/TableExtras/ColumnSettings/CustomConfigurationEditors.examples.tsx b/vuu-ui/showcase/src/examples/TableExtras/ColumnSettings/CustomConfigurationEditors.examples.tsx
index ac328be3d..2e01e41a7 100644
--- a/vuu-ui/showcase/src/examples/TableExtras/ColumnSettings/CustomConfigurationEditors.examples.tsx
+++ b/vuu-ui/showcase/src/examples/TableExtras/ColumnSettings/CustomConfigurationEditors.examples.tsx
@@ -3,8 +3,6 @@ import type { ColumnDescriptorCustomRenderer } from "@finos/vuu-table-types";
 import { ColumnRenderPropsChangeHandler } from "@finos/vuu-utils";
 import { useState } from "react";
 
-let displaySequence = 1;
-
 export const DefaultBackgroundCellConfigurationEditor = () => {
   const [column, setColumn] = useState<ColumnDescriptorCustomRenderer>({
     name: "test-column",
@@ -37,4 +35,3 @@ export const DefaultBackgroundCellConfigurationEditor = () => {
     />
   );
 };
-DefaultBackgroundCellConfigurationEditor.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/TableExtras/TableSettings/TableSettings.examples.tsx b/vuu-ui/showcase/src/examples/TableExtras/TableSettings/TableSettings.examples.tsx
index d9236be3b..13055616e 100644
--- a/vuu-ui/showcase/src/examples/TableExtras/TableSettings/TableSettings.examples.tsx
+++ b/vuu-ui/showcase/src/examples/TableExtras/TableSettings/TableSettings.examples.tsx
@@ -10,8 +10,6 @@ import { MoveItemHandler } from "@finos/vuu-ui-controls";
 import { moveItem } from "@finos/vuu-utils";
 import { useCallback, useMemo, useState } from "react";
 
-let displaySequence = 1;
-
 export const DefaultColumnList = () => {
   const initialColumns = useMemo<ColumnItem[]>(
     () => [
@@ -135,7 +133,7 @@ export const DefaultColumnList = () => {
         isCalculated: false,
       } as const,
     ],
-    []
+    [],
   );
 
   const [columns, setColumns] = useState(initialColumns);
@@ -156,7 +154,6 @@ export const DefaultColumnList = () => {
     />
   );
 };
-DefaultColumnList.displaySequence = displaySequence++;
 
 export const ManyColumnList = () => {
   const initialColumns = useMemo<ColumnItem[]>(() => {
@@ -187,7 +184,6 @@ export const ManyColumnList = () => {
     />
   );
 };
-ManyColumnList.displaySequence = displaySequence++;
 
 export const DefaultSettingsPanel = () => {
   const [availableColumns, tableConfig] = useMemo<
@@ -204,7 +200,7 @@ export const DefaultSettingsPanel = () => {
         columns: [],
       },
     ],
-    []
+    [],
   );
   const handleConfigChange = (config: TableConfig) => {
     console.log("handleConfigChange", {
@@ -228,4 +224,3 @@ export const DefaultSettingsPanel = () => {
     />
   );
 };
-DefaultSettingsPanel.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/UiControls/Calendar.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/Calendar.examples.tsx
index ca887378f..4c5235b93 100644
--- a/vuu-ui/showcase/src/examples/UiControls/Calendar.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/Calendar.examples.tsx
@@ -10,8 +10,6 @@ import {
 } from "@internationalized/date";
 import { useEffect, useRef, useState } from "react";
 
-let displaySequence = 1;
-
 const tz = getLocalTimeZone();
 const _today = today(tz);
 console.log({ tz, _today });
@@ -53,8 +51,6 @@ export const DefaultCalendar = () => {
   );
 };
 
-DefaultCalendar.displaySequence = displaySequence++;
-
 export const ControlledCalendar = () => {
   const [date, setDate] = useState<DateValue>(new CalendarDate(2024, 1, 1));
   const hoveredDate = new CalendarDate(2024, 1, 11);
@@ -77,5 +73,3 @@ export const ControlledCalendar = () => {
     </div>
   );
 };
-
-ControlledCalendar.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/UiControls/ColumnPicker.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/ColumnPicker.examples.tsx
index 60a5e984e..45080daf0 100644
--- a/vuu-ui/showcase/src/examples/UiControls/ColumnPicker.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/ColumnPicker.examples.tsx
@@ -5,8 +5,6 @@ import {
 } from "@finos/vuu-ui-controls";
 import { useMemo, useState } from "react";
 
-let displaySequence = 10;
-
 export const DefaultColumnSearch = () => {
   const columns = useMemo<string[]>(
     () => [
@@ -20,7 +18,7 @@ export const DefaultColumnSearch = () => {
       "lotSize",
       "exchangeRate",
     ],
-    []
+    [],
   );
 
   const handleChange = () => {
@@ -40,7 +38,6 @@ export const DefaultColumnSearch = () => {
     />
   );
 };
-DefaultColumnSearch.displaySequence = displaySequence++;
 
 export const DefaultColumnPicker = () => {
   const [selected, setSelected] = useState<string[]>([]);
@@ -61,7 +58,7 @@ export const DefaultColumnPicker = () => {
       "lotSize",
       "exchangeRate",
     ],
-    []
+    [],
   );
 
   return (
@@ -73,4 +70,3 @@ export const DefaultColumnPicker = () => {
     />
   );
 };
-DefaultColumnPicker.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/UiControls/DragDrop.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/DragDrop.examples.tsx
index 30dd6930f..34f56b8e8 100644
--- a/vuu-ui/showcase/src/examples/UiControls/DragDrop.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/DragDrop.examples.tsx
@@ -10,18 +10,16 @@ import {
 import { useCallback, useMemo, useState } from "react";
 import { usa_states } from "./List.data";
 
-let displaySequence = 1;
-
 export const DraggableListsOneWayDrag = () => {
   const [source1, source2] = useMemo(
     () => [usa_states.map((s) => `${s} 1`), usa_states.map((s) => `${s} 2`)],
-    []
+    [],
   );
   const dragSource = useMemo(
     () => ({
       list1: { dropTargets: ["list1", "list2"] },
     }),
-    []
+    [],
   );
 
   const [state1, setState1] = useState(source1);
@@ -40,7 +38,7 @@ export const DraggableListsOneWayDrag = () => {
         }
       });
     },
-    []
+    [],
   );
 
   const handleMoveListItem2 = useCallback<MoveItemHandler>(
@@ -56,7 +54,7 @@ export const DraggableListsOneWayDrag = () => {
         }
       });
     },
-    []
+    [],
   );
 
   const handleDragStart1 = useCallback<DragStartHandler>(
@@ -71,7 +69,7 @@ export const DraggableListsOneWayDrag = () => {
         dragDropState.setPayload(value);
       }
     },
-    [state1]
+    [state1],
   );
   const handleDragStart2 = useCallback<DragStartHandler>((dragDropState) => {
     console.log("handleDragStart2", {
@@ -91,7 +89,7 @@ export const DraggableListsOneWayDrag = () => {
         }
       });
     },
-    []
+    [],
   );
 
   return (
@@ -125,4 +123,3 @@ export const DraggableListsOneWayDrag = () => {
     </DragDropProvider>
   );
 };
-DraggableListsOneWayDrag.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/UiControls/EditableLabel.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/EditableLabel.examples.tsx
index 47f621a11..510574691 100644
--- a/vuu-ui/showcase/src/examples/UiControls/EditableLabel.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/EditableLabel.examples.tsx
@@ -1,8 +1,6 @@
 import { EditableLabel } from "@finos/vuu-ui-controls";
 import { useState } from "react";
 
-let displaySequence = 1;
-
 export const EditableLabelControlledValueUncontrolledEditing = () => {
   const [value, setValue] = useState<string>("Initial value");
 
@@ -36,5 +34,3 @@ export const EditableLabelControlledValueUncontrolledEditing = () => {
     </div>
   );
 };
-EditableLabelControlledValueUncontrolledEditing.displaySequence =
-  displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/UiControls/List.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/List.examples.tsx
index 79cec6a93..b1784e171 100644
--- a/vuu-ui/showcase/src/examples/UiControls/List.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/List.examples.tsx
@@ -20,8 +20,6 @@ import {
 } from "react";
 import { usa_states, usa_states_cities } from "./List.data";
 
-let displaySequence = 1;
-
 export const DefaultList = () => {
   const handleSelect = useCallback<SelectHandler>((evt, selected) => {
     console.log(`handleSelect ${selected}`);
@@ -30,7 +28,7 @@ export const DefaultList = () => {
     (evt, selected) => {
       console.log(`handleSelectionChange ${selected}`);
     },
-    []
+    [],
   );
   return (
     <List
@@ -43,7 +41,6 @@ export const DefaultList = () => {
     />
   );
 };
-DefaultList.displaySequence = displaySequence++;
 
 export const FixedWidthList = () => {
   const handleSelect = useCallback((evt, selected) => {
@@ -63,7 +60,6 @@ export const FixedWidthList = () => {
     />
   );
 };
-FixedWidthList.displaySequence = displaySequence++;
 
 export const DefaultSelectedItem = () => {
   const handleSelect = useCallback((evt, selected) => {
@@ -84,7 +80,6 @@ export const DefaultSelectedItem = () => {
     />
   );
 };
-DefaultSelectedItem.displaySequence = displaySequence++;
 
 export const InlineListItems = () => {
   const handleSelect = useCallback((evt, selected) => {
@@ -106,14 +101,13 @@ export const InlineListItems = () => {
     </List>
   );
 };
-InlineListItems.displaySequence = displaySequence++;
 
 export const ListExtendedSelection = () => {
   const handleSelectionChange = useCallback<MultiSelectionHandler>(
     (evt, selected) => {
       console.log(`handleSelectionChange`, { selected });
     },
-    []
+    [],
   );
   return (
     <List
@@ -125,7 +119,6 @@ export const ListExtendedSelection = () => {
     />
   );
 };
-ListExtendedSelection.displaySequence = displaySequence++;
 
 export const ListFocusAndHighlightedIndex = () => {
   const ref = useRef<HTMLDivElement>(null);
@@ -145,7 +138,6 @@ export const ListFocusAndHighlightedIndex = () => {
     />
   );
 };
-ListFocusAndHighlightedIndex.displaySequence = displaySequence++;
 
 export const ListHeight100Pct = () => {
   return (
@@ -169,7 +161,6 @@ export const ListHeight100Pct = () => {
     </Flexbox>
   );
 };
-ListHeight100Pct.displaySequence = displaySequence++;
 
 export const MultiSelectionList = () => {
   const handleSelect = useCallback((evt, selected) => {
@@ -199,7 +190,6 @@ export const MultiSelectionList = () => {
     </div>
   );
 };
-MultiSelectionList.displaySequence = displaySequence++;
 
 export const DraggableListItemsNoScroll = () => {
   const [data, setData] = useState(usa_states.slice(0, 10));
@@ -235,7 +225,6 @@ export const DraggableListItemsNoScroll = () => {
     />
   );
 };
-DraggableListItemsNoScroll.displaySequence = displaySequence++;
 
 export const DraggableListItems = () => {
   const [data, setData] = useState(usa_states);
@@ -275,12 +264,11 @@ export const DraggableListItems = () => {
     />
   );
 };
-DraggableListItems.displaySequence = displaySequence++;
 
 export const DraggableListItemsDropIndicator = () => {
   const dragStrategies: dragStrategy[] = useMemo(
     () => ["natural-movement", "drop-indicator"],
-    []
+    [],
   );
 
   const [data, setData] = useState(usa_states);
@@ -331,7 +319,6 @@ export const DraggableListItemsDropIndicator = () => {
     </>
   );
 };
-DraggableListItemsDropIndicator.displaySequence = displaySequence++;
 
 export const ListWithinFlexLayout = () => {
   const handleSelect = useCallback((evt, selected) => {
@@ -367,7 +354,6 @@ export const ListWithinFlexLayout = () => {
     </div>
   );
 };
-ListWithinFlexLayout.displaySequence = displaySequence++;
 
 export const DefaultSelectedWithinViewport = () => {
   const handleSelect = useCallback((evt, selected) => {
@@ -391,7 +377,6 @@ export const DefaultSelectedWithinViewport = () => {
     </>
   );
 };
-DefaultSelectedWithinViewport.displaySequence = displaySequence++;
 
 export const GroupedList = () => {
   const handleSelect = useCallback<SelectHandler>((evt, selected) => {
@@ -401,7 +386,7 @@ export const GroupedList = () => {
     (evt, selected) => {
       console.log(`handleSelectionChange ${selected}`);
     },
-    []
+    [],
   );
 
   return (
@@ -415,7 +400,6 @@ export const GroupedList = () => {
     />
   );
 };
-GroupedList.displaySequence = displaySequence++;
 
 export const GroupedListCollapsibleHeaders = () => {
   const handleSelect = useCallback<SelectHandler>((evt, selected) => {
@@ -425,7 +409,7 @@ export const GroupedListCollapsibleHeaders = () => {
     (evt, selected) => {
       console.log(`handleSelectionChange ${selected}`);
     },
-    []
+    [],
   );
 
   return (
@@ -440,4 +424,3 @@ export const GroupedListCollapsibleHeaders = () => {
     />
   );
 };
-GroupedListCollapsibleHeaders.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/UiControls/OverflowContainer.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/OverflowContainer.examples.tsx
index 37c93b992..82e2d5a68 100644
--- a/vuu-ui/showcase/src/examples/UiControls/OverflowContainer.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/OverflowContainer.examples.tsx
@@ -4,8 +4,6 @@ import { CSSProperties, useCallback, useState } from "react";
 
 import "./OverflowContainer.examples.css";
 
-let displaySequence = 1;
-
 export const DefaultOverflowContainer = () => {
   return (
     <div
@@ -31,8 +29,6 @@ export const DefaultOverflowContainer = () => {
   );
 };
 
-DefaultOverflowContainer.displaySequence = displaySequence++;
-
 export const WrapOverflowContainerFlexLayout = () => {
   return (
     <div
@@ -100,8 +96,6 @@ export const WrapOverflowContainerFlexLayout = () => {
   );
 };
 
-WrapOverflowContainerFlexLayout.displaySequence = displaySequence++;
-
 export const OverflowContainerHighPriorityItem = () => {
   return (
     <div
@@ -183,8 +177,6 @@ export const OverflowContainerHighPriorityItem = () => {
   );
 };
 
-OverflowContainerHighPriorityItem.displaySequence = displaySequence++;
-
 export const TestFixtureSimpleOverflowContainer = ({ width = 600 }) => {
   return (
     <>
@@ -202,8 +194,6 @@ export const TestFixtureSimpleOverflowContainer = ({ width = 600 }) => {
   );
 };
 
-TestFixtureSimpleOverflowContainer.displaySequence = displaySequence++;
-
 export const SortableOverflowContainer = () => {
   const [items, setItems] = useState<string[]>(["1", "2", "3", "4", "5", "6"]);
 
@@ -249,8 +239,6 @@ export const SortableOverflowContainer = () => {
   );
 };
 
-SortableOverflowContainer.displaySequence = displaySequence++;
-
 export const VerticalOverflowContainerFlexLayout = () => {
   return (
     <div
@@ -300,5 +288,3 @@ export const VerticalOverflowContainerFlexLayout = () => {
     </div>
   );
 };
-
-VerticalOverflowContainerFlexLayout.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/UiControls/SplitButton.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/SplitButton.examples.tsx
index 140a90b67..b1ca1e111 100644
--- a/vuu-ui/showcase/src/examples/UiControls/SplitButton.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/SplitButton.examples.tsx
@@ -7,8 +7,6 @@ import { MenuActionHandler, MenuBuilder } from "@finos/vuu-data-types";
 import { useCallback, useMemo, useState } from "react";
 import { PopupMenuProps } from "@finos/vuu-popups";
 
-let displaySequence = 1;
-
 const menuBuilder: MenuBuilder = (_, options) => [
   { action: "and-clause", label: "AND", options },
   { action: "or-clause", label: "OR", options },
@@ -29,7 +27,7 @@ export const DefaultSplitButton = ({
 }: Partial<SplitButtonProps>) => {
   const menuActionHandler = useMemo<MenuActionHandler>(
     () => PopupMenuProps?.menuActionHandler ?? defaultMenuHandler,
-    [PopupMenuProps?.menuActionHandler]
+    [PopupMenuProps?.menuActionHandler],
   );
 
   const menuProps: PopupMenuProps = {
@@ -40,7 +38,7 @@ export const DefaultSplitButton = ({
 
   const handleClick = useMemo(
     () => onClick ?? (() => console.log("main button click")),
-    [onClick]
+    [onClick],
   );
 
   return (
@@ -55,7 +53,6 @@ export const DefaultSplitButton = ({
     </div>
   );
 };
-DefaultSplitButton.displaySequence = displaySequence++;
 
 export const SegmentedSplitButton = ({
   PopupMenuProps,
@@ -88,7 +85,6 @@ export const SegmentedSplitButton = ({
     </div>
   );
 };
-SegmentedSplitButton.displaySequence = displaySequence++;
 
 export const SplitButtonVariations = () => {
   const menuProps: PopupMenuProps = {
@@ -136,7 +132,6 @@ export const SplitButtonVariations = () => {
     </div>
   );
 };
-SplitButtonVariations.displaySequence = displaySequence++;
 
 export const DefaultSplitStateButton = ({
   PopupMenuProps,
@@ -145,7 +140,7 @@ export const DefaultSplitStateButton = ({
 }: Partial<SplitButtonProps>) => {
   const menuActionHandler = useMemo<MenuActionHandler>(
     () => PopupMenuProps?.menuActionHandler ?? defaultMenuHandler,
-    [PopupMenuProps?.menuActionHandler]
+    [PopupMenuProps?.menuActionHandler],
   );
 
   const [selected, setSelected] = useState(false);
@@ -158,7 +153,7 @@ export const DefaultSplitStateButton = ({
 
   const handleClick = useMemo(
     () => onClick ?? (() => setSelected((value) => !value)),
-    [onClick]
+    [onClick],
   );
 
   return (
@@ -178,4 +173,3 @@ export const DefaultSplitStateButton = ({
     </div>
   );
 };
-DefaultSplitStateButton.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/UiControls/TablePicker.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/TablePicker.examples.tsx
index fe79f55b9..9ac5c9a57 100644
--- a/vuu-ui/showcase/src/examples/UiControls/TablePicker.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/TablePicker.examples.tsx
@@ -3,8 +3,6 @@ import { getSchema, LocalDataSourceProvider } from "@finos/vuu-data-test";
 import { TablePicker, TablePickerProps } from "@finos/vuu-ui-controls";
 import { useAutoLoginToVuuServer } from "../utils";
 
-let displaySequence = 0;
-
 const TablePickerTemplate = ({
   TableProps,
   rowToString,
@@ -48,7 +46,6 @@ export const DefaultInstrumentPicker = () => (
     />
   </LocalDataSourceProvider>
 );
-DefaultInstrumentPicker.displaySequence = displaySequence++;
 
 export const VuuInstrumentPicker = () => {
   useAutoLoginToVuuServer();
@@ -69,4 +66,3 @@ export const VuuInstrumentPicker = () => {
     </VuuDataSourceProvider>
   );
 };
-VuuInstrumentPicker.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/UiControls/TableSearch.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/TableSearch.examples.tsx
index 750d6ebb9..14b51130f 100644
--- a/vuu-ui/showcase/src/examples/UiControls/TableSearch.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/TableSearch.examples.tsx
@@ -25,8 +25,6 @@ import {
 } from "@salt-ds/core";
 import { TableConfig } from "@finos/vuu-table-types";
 
-let displaySequence = 1;
-
 const TableSearchTemplate = ({
   schema,
   TableProps: TablePropsProp,
@@ -82,8 +80,6 @@ export const DefaultInstrumentSearch = () => {
   );
 };
 
-DefaultInstrumentSearch.displaySequence = displaySequence++;
-
 export const InstrumentSearchVuuInstruments = () => {
   const schema = getSchema("instruments");
   return (
@@ -93,8 +89,6 @@ export const InstrumentSearchVuuInstruments = () => {
   );
 };
 
-InstrumentSearchVuuInstruments.displaySequence = displaySequence++;
-
 type DropTargetProps = HTMLAttributes<HTMLDivElement>;
 const DropTarget = ({ id, ...htmlAttributes }: DropTargetProps) => {
   const [instrument, setInstrument] = useState<DataSourceRow>();
@@ -161,8 +155,6 @@ export const InstrumentSearchDragDrop = () => {
   );
 };
 
-InstrumentSearchDragDrop.displaySequence = displaySequence++;
-
 const EnhancedInstrumentSearch = () => {
   const { VuuDataSource } = useDataSource();
   const schema = getSchema("instruments");
@@ -229,5 +221,3 @@ export const InstrumentSearchFavourites = () => {
     </LocalDataSourceProvider>
   );
 };
-
-InstrumentSearchFavourites.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/UiControls/TabsNext.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/TabsNext.examples.tsx
index 5734cf0bb..4009147c4 100644
--- a/vuu-ui/showcase/src/examples/UiControls/TabsNext.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/TabsNext.examples.tsx
@@ -50,8 +50,6 @@ import {
   useState,
 } from "react";
 
-let displaySequence = 0;
-
 const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
 const lotsOfTabs = [
   "Home",
@@ -95,7 +93,6 @@ export const Bordered = () => {
     </div>
   );
 };
-Bordered.displaySequence = displaySequence++;
 
 export const Inline = () => {
   return (
@@ -118,7 +115,6 @@ export const Inline = () => {
     </div>
   );
 };
-Inline.displaySequence = displaySequence++;
 
 const tabToIcon: Record<string, ComponentType> = {
   Home: HomeIcon,
@@ -154,7 +150,6 @@ export const WithIcon = () => {
     </div>
   );
 };
-WithIcon.displaySequence = displaySequence++;
 
 export const WithBadge = () => {
   return (
@@ -178,7 +173,6 @@ export const WithBadge = () => {
     </div>
   );
 };
-WithBadge.displaySequence = displaySequence++;
 
 export const Overflow = () => {
   return (
@@ -195,7 +189,6 @@ export const Overflow = () => {
     </TabsNext>
   );
 };
-Overflow.displaySequence = displaySequence++;
 
 export const Closable = () => {
   const [tabs, setTabs] = useState([
@@ -235,7 +228,6 @@ export const Closable = () => {
     </div>
   );
 };
-Closable.displaySequence = displaySequence++;
 
 export const DisabledTabs = () => {
   return (
@@ -259,7 +251,6 @@ export const DisabledTabs = () => {
     </div>
   );
 };
-DisabledTabs.displaySequence = displaySequence++;
 
 export const AddTabs = () => {
   const [tabs, setTabs] = useState(["Home", "Transactions", "Loans"]);
@@ -300,7 +291,6 @@ export const AddTabs = () => {
     </div>
   );
 };
-AddTabs.displaySequence = displaySequence++;
 
 export const Backgrounds = (): ReactElement => {
   const [variant, setVariant] =
@@ -345,7 +335,6 @@ export const Backgrounds = (): ReactElement => {
     </StackLayout>
   );
 };
-Backgrounds.displaySequence = displaySequence++;
 
 function AddTabDialog({
   open,
@@ -390,7 +379,6 @@ function AddTabDialog({
     </Dialog>
   );
 }
-AddTabDialog.displaySequence = displaySequence++;
 
 export const AddWithDialog = () => {
   const [tabs, setTabs] = useState(["Home", "Transactions", "Loans"]);
@@ -438,7 +426,6 @@ export const AddWithDialog = () => {
     </div>
   );
 };
-AddWithDialog.displaySequence = displaySequence++;
 
 function CloseConfirmationDialog({
   open,
@@ -525,7 +512,6 @@ export const CloseWithConfirmation = () => {
     </div>
   );
 };
-CloseWithConfirmation.displaySequence = displaySequence++;
 
 export const WithInteractiveElementInPanel = () => {
   return (
@@ -561,7 +547,6 @@ export const WithInteractiveElementInPanel = () => {
     </div>
   );
 };
-WithInteractiveElementInPanel.displaySequence = displaySequence++;
 
 export const WithMenu = () => {
   const [tabs, setTabs] = useState([
@@ -625,7 +610,6 @@ export const WithMenu = () => {
     </div>
   );
 };
-WithMenu.displaySequence = displaySequence++;
 
 export const Controlled = () => {
   const [tabs, setTabs] = useState(lotsOfTabs);
@@ -660,4 +644,3 @@ export const Controlled = () => {
     </TabsNext>
   );
 };
-Controlled.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/UiControls/Tabstrip.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/Tabstrip.examples.tsx
index 5da9b22db..ba6f8b0b7 100644
--- a/vuu-ui/showcase/src/examples/UiControls/Tabstrip.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/Tabstrip.examples.tsx
@@ -12,8 +12,6 @@ import "./Tabstrip.examples.css";
 
 const SPLITTER_WIDTH = 3;
 
-let displaySequence = 1;
-
 const TabstripTemplate = ({
   activeTabIndex: activeTabIndexProp = 0,
   allowAddTab = false,
@@ -39,17 +37,17 @@ const TabstripTemplate = ({
       setTabs((state) => state.filter((_, i) => i !== tabIndex));
       setActiveTabIndex(newActiveTabIndex);
     },
-    []
+    [],
   );
 
   const handleTabLabelChanged = useCallback<ExitTabEditModeHandler>(
     (originalValue, newValue) => {
       console.log(`tab label changed from '${originalValue}' to '${newValue}'`);
       setTabs((currentTabs) =>
-        currentTabs.map((name) => (name === originalValue ? newValue : name))
+        currentTabs.map((name) => (name === originalValue ? newValue : name)),
       );
     },
-    []
+    [],
   );
 
   const handleMoveTab = useCallback((fromIndex: number, toIndex: number) => {
@@ -99,19 +97,16 @@ export const DefaultTabstrip = ({
   activeTabIndex: activeTabIndexProp = 0,
   width = 500,
 }) => <TabstripTemplate activeTabIndex={activeTabIndexProp} width={width} />;
-DefaultTabstrip.displaySequence = displaySequence++;
 
 export const OveflowingTabstrip = ({
   activeTabIndex: activeTabIndexProp = 0,
   width = 350,
 }) => <TabstripTemplate activeTabIndex={activeTabIndexProp} width={width} />;
-OveflowingTabstrip.displaySequence = displaySequence++;
 
 export const OveflowingSelectedTab = ({
   activeTabIndex: activeTabIndexProp = 4,
   width = 350,
 }) => <TabstripTemplate activeTabIndex={activeTabIndexProp} width={width} />;
-OveflowingSelectedTab.displaySequence = displaySequence++;
 
 export const TabstripAddTab = ({
   activeTabIndex: activeTabIndexProp = 4,
@@ -124,7 +119,6 @@ export const TabstripAddTab = ({
     width={width}
   />
 );
-TabstripAddTab.displaySequence = displaySequence++;
 
 export const TabstripRemoveTab = ({
   activeTabIndex: activeTabIndexProp = 4,
@@ -137,7 +131,6 @@ export const TabstripRemoveTab = ({
     width={width}
   />
 );
-TabstripRemoveTab.displaySequence = displaySequence++;
 
 export const TabstripEditableLabels = ({
   activeTabIndex: activeTabIndexProp = 4,
@@ -149,7 +142,6 @@ export const TabstripEditableLabels = ({
     width={width}
   />
 );
-TabstripEditableLabels.displaySequence = displaySequence++;
 
 export const TabstripDragDrop = ({
   activeTabIndex: activeTabIndexProp = 4,
@@ -161,7 +153,6 @@ export const TabstripDragDrop = ({
     width={width}
   />
 );
-TabstripDragDrop.displaySequence = displaySequence++;
 
 export const TabstripVariations = () => {
   return (
@@ -204,8 +195,6 @@ export const TabstripVariations = () => {
   );
 };
 
-TabstripVariations.displaySequence = displaySequence++;
-
 export const TheFullMonty = ({
   activeTabIndex: activeTabIndexProp = 0,
   width = 700,
@@ -219,263 +208,3 @@ export const TheFullMonty = ({
     width={width}
   />
 );
-TheFullMonty.displaySequence = displaySequence++;
-
-/*
-const CloseTabWarningDialog = ({
-  closedTab,
-  onCancel,
-  onClose,
-  onConfirm,
-  open = false,
-}: {
-  closedTab: TabDescriptor;
-  onCancel: () => void;
-  onClose: () => void;
-  onConfirm: () => void;
-  open?: boolean;
-}) => (
-  <Dialog open={open} status="warning" onClose={onClose}>
-    <DialogTitle onClose={onClose}>Do you want to close this tab?</DialogTitle>
-    <DialogContent>
-      {`Closing the tab will cause any changes made to
-                '${closedTab.label}' to be lost.`}
-    </DialogContent>
-    <DialogActions>
-      <Button onClick={onCancel}>Cancel</Button>
-      <Button onClick={onConfirm} variant="cta">
-        Close Tab
-      </Button>
-    </DialogActions>
-  </Dialog>
-);
-
-export const TheFullMonty = () => {
-  const [selectedTab, setSelectedTab] = useState(0);
-  const [tabs, setTabs] = useState([
-    { label: "Home", closeable: false },
-    { label: "Transactions" },
-    { label: "Loans" },
-    { label: "Checks" },
-    { label: "Liquidity" },
-  ]);
-  const [closingTabIndex, setClosingTabIndex] = useState<number | undefined>(
-    undefined
-  );
-
-  const handleAddTab = () => {
-    const count = tabs.length;
-    setTabs((state) => state.concat([{ label: `Tab ${state.length + 1}` }]));
-    setSelectedTab(count);
-  };
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-
-  const onTabShouldClose = (index: number) => {
-    setIsDialogOpen(true);
-    setClosingTabIndex(index);
-  };
-
-  const onTabDidClose = () => {
-    if (closingTabIndex !== undefined) {
-      const newTabs = [...tabs];
-      newTabs.splice(closingTabIndex, 1);
-
-      let newSelectedTab = selectedTab;
-      if (selectedTab > closingTabIndex || newTabs.length === selectedTab) {
-        newSelectedTab--;
-      }
-
-      setSelectedTab(newSelectedTab);
-      setTabs(newTabs);
-    }
-  };
-
-  const handleTabSelection = (tabIndex: number) => {
-    setSelectedTab(tabIndex);
-  };
-
-  const onDidConfirmTabClose = () => {
-    onTabDidClose();
-    setIsDialogOpen(false);
-    setClosingTabIndex(undefined);
-  };
-
-  const onDialogDidClose = () => {
-    setIsDialogOpen(false);
-  };
-
-  return (
-    <div style={{ height: 300, width: 600 }}>
-      <Tabstrip
-        enableAddTab
-        enableCloseTab
-        allowRenameTab
-        onAddTab={handleAddTab}
-        onActiveChange={handleTabSelection}
-        onCloseTab={onTabShouldClose}
-        activeTabIndex={selectedTab}
-      >
-        {tabs.map(({ label, closeable }) => (
-          <Tab closeable={closeable} label={label} key={label} />
-        ))}
-      </Tabstrip>
-      {isDialogOpen && typeof closingTabIndex === "number" && (
-        <CloseTabWarningDialog
-          closedTab={tabs[closingTabIndex]}
-          onCancel={onDialogDidClose}
-          onClose={onDialogDidClose}
-          onConfirm={onDidConfirmTabClose}
-          open
-        />
-      )}
-    </div>
-  );
-};
-
-export const TheFullMontyNoConfirmation = () => {
-  const [selectedTab, setSelectedTab] = useState(0);
-  const [tabs, setTabs] = useState([
-    { label: "Home", closeable: false },
-    { label: "Transactions" },
-    { label: "Loans" },
-    { label: "Checks" },
-    { label: "Liquidity" },
-  ]);
-
-  const handleAddTab = () => {
-    const count = tabs.length;
-    setTabs((state) => state.concat([{ label: `Tab ${state.length + 1}` }]));
-    setSelectedTab(count);
-  };
-
-  const onTabDidClose = (closingTabIndex: number) => {
-    if (closingTabIndex !== undefined) {
-      const newTabs = [...tabs];
-      newTabs.splice(closingTabIndex, 1);
-
-      let newSelectedTab = selectedTab;
-      if (selectedTab > closingTabIndex || newTabs.length === selectedTab) {
-        newSelectedTab--;
-      }
-
-      setSelectedTab(newSelectedTab);
-      setTabs(newTabs);
-    }
-  };
-
-  const handleTabSelection = (tabIndex: number) => {
-    setSelectedTab(tabIndex);
-  };
-
-  return (
-    <div style={{ height: 300, width: 600 }}>
-      <Tabstrip
-        enableAddTab
-        allowRenameTab
-        onAddTab={handleAddTab}
-        onActiveChange={handleTabSelection}
-        onCloseTab={onTabDidClose}
-        activeTabIndex={selectedTab}
-      >
-        {tabs.map(({ label, closeable }) => (
-          <Tab closeable={closeable} label={label} key={label} />
-        ))}
-      </Tabstrip>
-    </div>
-  );
-};
-
-const tabLabels = [
-  "Tab Test 1",
-  "Tab Test 2",
-  "Tab Test 3",
-  "Tab Test 4",
-  "Tab Test 5",
-  "Tab Test 6",
-  "Tab Test 7",
-  "Tab Test 8",
-];
-
-export const DraggableTabs = () => {
-  const [, setSelectedTab] = useState(0);
-
-  const [tabs, setTabs] = useState(tabLabels);
-  const handleDrop = useCallback(
-    (fromIndex, toIndex) => {
-      const newTabs = tabs.slice();
-      const [tab] = newTabs.splice(fromIndex, 1);
-      if (toIndex === -1) {
-        setTabs(newTabs.concat(tab));
-      } else {
-        newTabs.splice(toIndex, 0, tab);
-        setTabs(newTabs);
-      }
-    },
-    [tabs]
-  );
-  return (
-    <div style={{ height: 300, width: 700 }}>
-      <Tabstrip
-        allowDragDrop
-        onActiveChange={setSelectedTab}
-        onMoveTab={handleDrop}
-      >
-        {tabs.map((label, i) => (
-          <Tab label={label} key={i} />
-        ))}
-      </Tabstrip>
-    </div>
-  );
-};
-export const DraggableTabsWithOverflow = () => {
-  const [activeTabIndex, setActiveTabIndex] = useState(0);
-  const [tabs, setTabs] = useState([
-    "Home",
-    "Transactions",
-    "Loans",
-    "Checks",
-    "Liquidity",
-    "Reports",
-    "Statements",
-    "Administration",
-    "Virtual Branch",
-    "More Services",
-  ]);
-
-  const handleDrop = useCallback(
-    (fromIndex: number, toIndex: number) => {
-      const tab = tabs[fromIndex];
-      const newTabs = tabs.filter((t) => t !== tab);
-      console.log(`handleDrop from ${fromIndex} to ${toIndex} 
-        existing tabs ${tabs.join(",")}
-      `);
-      if (toIndex === -1) {
-        setTabs(newTabs.concat(tab));
-      } else {
-        newTabs.splice(toIndex, 0, tab);
-        console.log(`new tabs ${newTabs.join(",")}`);
-        setTabs(newTabs);
-      }
-    },
-    [tabs]
-  );
-
-  const childTabs = useMemo(
-    () => tabs.map((label, i) => <Tab label={label} key={i} />),
-    [tabs]
-  );
-
-  return (
-    <div style={{ height: 300, width: 600 }}>
-      <Tabstrip
-        activeTabIndex={activeTabIndex}
-        allowDragDrop
-        onActiveChange={setActiveTabIndex}
-        onMoveTab={handleDrop}
-      >
-        {childTabs}
-      </Tabstrip>
-    </div>
-  );
-};
-*/
diff --git a/vuu-ui/showcase/src/examples/UiControls/VuuInput.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/VuuInput.examples.tsx
index a369d76e7..f0fcc1692 100644
--- a/vuu-ui/showcase/src/examples/UiControls/VuuInput.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/VuuInput.examples.tsx
@@ -2,8 +2,6 @@ import { VuuInput, VuuInputProps } from "@finos/vuu-ui-controls";
 import { CommitHandler } from "@finos/vuu-utils";
 import { CSSProperties, useCallback, useState } from "react";
 
-let displaySequence = 1;
-
 const VuuInputTemplate = ({
   position = { left: 0, top: 0 },
   ...props
@@ -34,12 +32,10 @@ const VuuInputTemplate = ({
 export const DefaultVuuInput = () => {
   return <VuuInputTemplate />;
 };
-DefaultVuuInput.displaySequence = displaySequence++;
 
 export const VuuInputWithErrorMessage = () => {
   return <VuuInputTemplate errorMessage="Help" />;
 };
-VuuInputWithErrorMessage.displaySequence = displaySequence++;
 
 // Showcase example showing the application of the VuuInput box with input validation
 export const VuuInputWithValidation = () => {
@@ -102,4 +98,3 @@ export const VuuInputWithValidation = () => {
     </div>
   );
 };
-VuuInputWithValidation.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/UiControls/VuuTypeaheadInput.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/VuuTypeaheadInput.examples.tsx
index 468375b85..392404a9f 100644
--- a/vuu-ui/showcase/src/examples/UiControls/VuuTypeaheadInput.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/VuuTypeaheadInput.examples.tsx
@@ -5,8 +5,6 @@ import { VuuTypeaheadInput } from "@finos/vuu-ui-controls";
 import { CommitHandler } from "@finos/vuu-utils";
 import { CSSProperties } from "react";
 
-let displaySequence = 1;
-
 const TypeaheadInputTemplate = ({
   allowFreeInput,
   column = { name: "currency", serverDataType: "string" },
@@ -56,7 +54,6 @@ export const CurrencyWithTypeaheadAllowFreeText = ({
     </LocalDataSourceProvider>
   );
 };
-CurrencyWithTypeaheadAllowFreeText.displaySequence = displaySequence++;
 
 export const CurrencyWithTypeaheadDisallowFreeText = ({
   onCommit,
@@ -80,7 +77,6 @@ export const CurrencyWithTypeaheadDisallowFreeText = ({
     </LocalDataSourceProvider>
   );
 };
-CurrencyWithTypeaheadDisallowFreeText.displaySequence = displaySequence++;
 
 export const CurrencyNoTypeaheadAllowFreeText = () => {
   return (
@@ -98,7 +94,6 @@ export const CurrencyNoTypeaheadAllowFreeText = () => {
     </div>
   );
 };
-CurrencyNoTypeaheadAllowFreeText.displaySequence = displaySequence++;
 
 export const CurrencyNoTypeaheadDisallowFreeText = () => {
   return (
@@ -116,4 +111,3 @@ export const CurrencyNoTypeaheadDisallowFreeText = () => {
     </div>
   );
 };
-CurrencyNoTypeaheadDisallowFreeText.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/VUU/Vuu.examples.tsx b/vuu-ui/showcase/src/examples/VUU/Vuu.examples.tsx
index 2c688ac61..baf486769 100644
--- a/vuu-ui/showcase/src/examples/VUU/Vuu.examples.tsx
+++ b/vuu-ui/showcase/src/examples/VUU/Vuu.examples.tsx
@@ -2,8 +2,6 @@ import { List, ListItem } from "@finos/vuu-ui-controls";
 import { useVuuTables, VuuDataSourceProvider } from "@finos/vuu-data-react";
 import { useAutoLoginToVuuServer } from "../utils";
 
-let displaySequence = 1;
-
 const VuuTablesTemplate = () => {
   const tableSchemas = useVuuTables();
 
@@ -27,5 +25,3 @@ export const VuuTables = () => {
     </VuuDataSourceProvider>
   );
 };
-
-VuuTables.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/VuuFeatures/BasketSelector.examples.tsx b/vuu-ui/showcase/src/examples/VuuFeatures/BasketSelector.examples.tsx
index aee278c16..cf3d8b267 100644
--- a/vuu-ui/showcase/src/examples/VuuFeatures/BasketSelector.examples.tsx
+++ b/vuu-ui/showcase/src/examples/VuuFeatures/BasketSelector.examples.tsx
@@ -4,8 +4,6 @@ import { buildColumnMap } from "@finos/vuu-utils";
 import { Basket, BasketSelector } from "feature-basket-trading";
 import { useCallback, useMemo, useState } from "react";
 
-let displaySequence = 1;
-
 const testBaskets = [
   ["Amber-0001", "Amber Basket", "OFF MARKET", "BUY"],
   ["Blue-0002", "Blue Basket", "ON MARKET", "SELL"],
@@ -63,4 +61,3 @@ export const DefaultBasketSelector = () => {
     />
   );
 };
-DefaultBasketSelector.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/VuuFeatures/BasketToolbar.examples.tsx b/vuu-ui/showcase/src/examples/VuuFeatures/BasketToolbar.examples.tsx
index f8e7a7221..b9b928bc7 100644
--- a/vuu-ui/showcase/src/examples/VuuFeatures/BasketToolbar.examples.tsx
+++ b/vuu-ui/showcase/src/examples/VuuFeatures/BasketToolbar.examples.tsx
@@ -5,8 +5,6 @@ import { BasketSelectorProps } from "sample-apps/feature-basket-trading/src/bask
 import { BasketChangeHandler } from "sample-apps/feature-basket-trading/src/basket-toolbar";
 import { BasketStatus } from "sample-apps/feature-basket-trading/src/VuuBasketTradingFeature";
 
-let displaySequence = 1;
-
 const testBasket: Basket = {
   dataSourceRow: [] as any,
   basketId: ".FTSE",
@@ -37,16 +35,16 @@ export const BasketToolbarDesign = () => {
       onClickAddBasket: () => console.log("Add Basket"),
       onSelectBasket: () => undefined,
     }),
-    [basket, dataSourceBasketTradingSearch]
+    [basket, dataSourceBasketTradingSearch],
   );
 
   const handleCommitBasketChange = useCallback<BasketChangeHandler>(
     (columnName, value) => {
       console.log(`${columnName} => ${value}`);
-      setBasket((basket) => ({ ...basket, [columnName]: value } as Basket));
+      setBasket((basket) => ({ ...basket, [columnName]: value }) as Basket);
       return Promise.resolve(true);
     },
-    []
+    [],
   );
 
   return (
@@ -60,7 +58,6 @@ export const BasketToolbarDesign = () => {
     />
   );
 };
-BasketToolbarDesign.displaySequence = displaySequence++;
 
 export const BasketToolbarOnMarket = () => {
   const [basketStatus, setBasketStatus] = useState<BasketStatus>("on-market");
@@ -76,7 +73,7 @@ export const BasketToolbarOnMarket = () => {
       onClickAddBasket: () => console.log("Add Basket"),
       onSelectBasket: () => undefined,
     }),
-    [dataSourceBasketTradingSearch]
+    [dataSourceBasketTradingSearch],
   );
 
   return (
@@ -89,4 +86,3 @@ export const BasketToolbarOnMarket = () => {
     />
   );
 };
-BasketToolbarOnMarket.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/VuuFeatures/BasketTradingFeature.examples.tsx b/vuu-ui/showcase/src/examples/VuuFeatures/BasketTradingFeature.examples.tsx
index d8046e090..02d9efae9 100644
--- a/vuu-ui/showcase/src/examples/VuuFeatures/BasketTradingFeature.examples.tsx
+++ b/vuu-ui/showcase/src/examples/VuuFeatures/BasketTradingFeature.examples.tsx
@@ -12,8 +12,6 @@ import { VuuBlotterHeader } from "./VuuBlotterHeader";
 
 registerComponent("BasketTradingFeature", BasketTradingFeature, "view");
 
-let displaySequence = 1;
-
 export const DefaultBasketTradingFeature = () => {
   const getLookupValues = useCallback<LookupTableProvider>((table) => {
     if (table.table === "algoType") {
@@ -55,7 +53,6 @@ export const DefaultBasketTradingFeature = () => {
     </LocalDataSourceProvider>
   );
 };
-DefaultBasketTradingFeature.displaySequence = displaySequence++;
 
 type Environment = "development" | "production";
 const env = process.env.NODE_ENV as Environment;
@@ -88,4 +85,3 @@ export const BasketTradingFeatureAsFeature = () => {
   );
 };
 BasketTradingFeatureAsFeature.displayName = "BasketTrading";
-BasketTradingFeatureAsFeature.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/VuuFeatures/FilterTableFeature.examples.tsx b/vuu-ui/showcase/src/examples/VuuFeatures/FilterTableFeature.examples.tsx
index f3cd19385..0e2d5848f 100644
--- a/vuu-ui/showcase/src/examples/VuuFeatures/FilterTableFeature.examples.tsx
+++ b/vuu-ui/showcase/src/examples/VuuFeatures/FilterTableFeature.examples.tsx
@@ -7,8 +7,6 @@ import { type DynamicFeatureProps, registerComponent } from "@finos/vuu-utils";
 
 registerComponent("FilterTableFeature", FilterTableFeature, "view");
 
-let displaySequence = 1;
-
 export const DefaultFilterTableFeature = () => {
   const schema = getSchema("instruments");
 
@@ -32,7 +30,6 @@ export const DefaultFilterTableFeature = () => {
     </div>
   );
 };
-DefaultFilterTableFeature.displaySequence = displaySequence++;
 
 export const FilterTableFeatureFlexBox = () => {
   const schema = getSchema("instruments");
@@ -72,7 +69,6 @@ export const FilterTableFeatureFlexBox = () => {
     </LocalDataSourceProvider>
   );
 };
-FilterTableFeatureFlexBox.displaySequence = displaySequence++;
 
 type Environment = "development" | "production";
 const env = process.env.NODE_ENV as Environment;
@@ -107,4 +103,3 @@ export const FilterTableFeatureAsFeature = () => {
   );
 };
 FilterTableFeatureAsFeature.displayName = "FilterTable";
-FilterTableFeatureAsFeature.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/VuuFeatures/InstrumentTilesFeature.examples.tsx b/vuu-ui/showcase/src/examples/VuuFeatures/InstrumentTilesFeature.examples.tsx
index 63e4027e6..018991c72 100644
--- a/vuu-ui/showcase/src/examples/VuuFeatures/InstrumentTilesFeature.examples.tsx
+++ b/vuu-ui/showcase/src/examples/VuuFeatures/InstrumentTilesFeature.examples.tsx
@@ -7,8 +7,6 @@ import { VuuBlotterHeader } from "./VuuBlotterHeader";
 
 registerComponent("InstrumentTilesFeature", InstrumentTilesFeature, "view");
 
-let displaySequence = 1;
-
 export const DefaultInstrumentTilesFeature = () => {
   const schema = getSchema("instrumentPrices");
 
@@ -37,7 +35,6 @@ export const DefaultInstrumentTilesFeature = () => {
     </LayoutProvider>
   );
 };
-DefaultInstrumentTilesFeature.displaySequence = displaySequence++;
 
 type Environment = "development" | "production";
 const env = process.env.NODE_ENV as Environment;
@@ -74,4 +71,3 @@ export const InstrumentTilesFeatureAsFeature = () => {
   );
 };
 InstrumentTilesFeatureAsFeature.displayName = "InstrumentTiles";
-InstrumentTilesFeatureAsFeature.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/VuuFeatures/NewBasketPanel.examples.tsx b/vuu-ui/showcase/src/examples/VuuFeatures/NewBasketPanel.examples.tsx
index 01da9ddc6..d0eb33872 100644
--- a/vuu-ui/showcase/src/examples/VuuFeatures/NewBasketPanel.examples.tsx
+++ b/vuu-ui/showcase/src/examples/VuuFeatures/NewBasketPanel.examples.tsx
@@ -2,8 +2,6 @@ import { LocalDataSourceProvider, getSchema } from "@finos/vuu-data-test";
 import { NewBasketPanel } from "feature-basket-trading";
 import { useCallback } from "react";
 
-let displaySequence = 1;
-
 export const DefaultNewBasketPanel = () => {
   const schema = getSchema("basket");
 
@@ -26,4 +24,3 @@ export const DefaultNewBasketPanel = () => {
     </LocalDataSourceProvider>
   );
 };
-DefaultNewBasketPanel.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/html/GridLayout.examples.tsx b/vuu-ui/showcase/src/examples/html/GridLayout.examples.tsx
index d54aea6e5..d12ee4ceb 100644
--- a/vuu-ui/showcase/src/examples/html/GridLayout.examples.tsx
+++ b/vuu-ui/showcase/src/examples/html/GridLayout.examples.tsx
@@ -1,5 +1,3 @@
-let displaySequence = 1;
-
 import { GridLayout } from "./components/GridLayout";
 import "./GridLayout.examples.css";
 
@@ -14,7 +12,6 @@ export const GridLayoutA = () => {
     </GridLayout>
   );
 };
-GridLayoutA.displaySequence = displaySequence++;
 
 export const GridLayoutB = () => {
   return (
@@ -27,7 +24,6 @@ export const GridLayoutB = () => {
     </GridLayout>
   );
 };
-GridLayoutB.displaySequence = displaySequence++;
 
 export const GridLayoutC = () => {
   return (
@@ -40,4 +36,3 @@ export const GridLayoutC = () => {
     </GridLayout>
   );
 };
-GridLayoutC.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/html/LayoutExperiments.examples.tsx b/vuu-ui/showcase/src/examples/html/LayoutExperiments.examples.tsx
index 266106c7d..19ba5f005 100644
--- a/vuu-ui/showcase/src/examples/html/LayoutExperiments.examples.tsx
+++ b/vuu-ui/showcase/src/examples/html/LayoutExperiments.examples.tsx
@@ -6,8 +6,6 @@ import { DockLayout } from "./components/DockLayout";
 
 import "./LayoutExperiments.examples.css";
 
-let displaySequence = 1;
-
 const classBase = "DockLayout";
 
 const CONTENT = 2;
@@ -67,7 +65,6 @@ export const DefaultDockLayout = () => {
     </div>
   );
 };
-DefaultDockLayout.displaySequence = displaySequence++;
 
 export const GridToolbar = () => {
   return (
@@ -83,4 +80,3 @@ export const GridToolbar = () => {
     </div>
   );
 };
-GridToolbar.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/html/SvgFun.examples.tsx b/vuu-ui/showcase/src/examples/html/SvgFun.examples.tsx
index ff7bf0506..f0253d970 100644
--- a/vuu-ui/showcase/src/examples/html/SvgFun.examples.tsx
+++ b/vuu-ui/showcase/src/examples/html/SvgFun.examples.tsx
@@ -8,8 +8,6 @@ import {
 import "./SvgFun.keyframes.css";
 import "./SvgFun.examples.css";
 
-let displaySequence = 0;
-
 export const SvgArrowAnimations = () => {
   return (
     <div style={{ display: "flex", gap: 20, height: "100%" }}>
@@ -45,5 +43,3 @@ export const SvgArrowAnimations = () => {
     </div>
   );
 };
-
-SvgArrowAnimations.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/index.ts b/vuu-ui/showcase/src/examples/index.ts
index ac5d71375..1678c5bde 100644
--- a/vuu-ui/showcase/src/examples/index.ts
+++ b/vuu-ui/showcase/src/examples/index.ts
@@ -13,4 +13,3 @@ export * as Table from "./Table";
 export * as UiControls from "./UiControls";
 export * as VUU from "./VUU";
 export * as VuuFeatures from "./VuuFeatures";
-export * as Performance from "./Performance";
diff --git a/vuu-ui/showcase/src/examples/salt/Accordion.examples.tsx b/vuu-ui/showcase/src/examples/salt/Accordion.examples.tsx
index 802a79a55..b1a0c218e 100644
--- a/vuu-ui/showcase/src/examples/salt/Accordion.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/Accordion.examples.tsx
@@ -6,8 +6,6 @@ import {
 } from "@salt-ds/core";
 import { Panel } from "@salt-ds/core";
 
-let displaySequence = 1;
-
 export const DefaultAccordion = () => {
   return (
     <Panel style={{ width: 600, height: 800 }}>
@@ -53,4 +51,3 @@ export const DefaultAccordion = () => {
     </Panel>
   );
 };
-DefaultAccordion.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/salt/Button.examples.tsx b/vuu-ui/showcase/src/examples/salt/Button.examples.tsx
index 3d9af1f5d..6a1b8b416 100644
--- a/vuu-ui/showcase/src/examples/salt/Button.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/Button.examples.tsx
@@ -2,8 +2,6 @@ import { Button } from "@salt-ds/core";
 import { CSSProperties } from "react";
 import { Icon, IconButton } from "@finos/vuu-ui-controls";
 
-let displaySequence = 1;
-
 export const DefaultButton = () => {
   const handleClick = () => {
     console.log("Button click");
@@ -14,7 +12,6 @@ export const DefaultButton = () => {
     </Button>
   );
 };
-DefaultButton.displaySequence = displaySequence++;
 
 export const IconButtons = () => {
   return (
@@ -40,7 +37,6 @@ export const IconButtons = () => {
     </div>
   );
 };
-IconButtons.displaySequence = displaySequence++;
 
 export const ButtonVariations = () => {
   return (
@@ -203,4 +199,3 @@ export const ButtonVariations = () => {
     </div>
   );
 };
-ButtonVariations.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/salt/Checkbox.examples.tsx b/vuu-ui/showcase/src/examples/salt/Checkbox.examples.tsx
index 81751d0ad..081dbaf15 100644
--- a/vuu-ui/showcase/src/examples/salt/Checkbox.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/Checkbox.examples.tsx
@@ -1,30 +1,24 @@
 import { Checkbox, SwitchProps } from "@salt-ds/core";
 import { ChangeEvent, useState } from "react";
 
-let displaySequence = 1;
-
 export const DefaultCheckbox = ({
   label = "Default",
   ...props
 }: Partial<SwitchProps>) => {
   return <Checkbox data-showcase-center {...props} label={label} />;
 };
-DefaultCheckbox.displaySequence = displaySequence++;
 
 export const CheckedSwitch = () => {
   return <DefaultCheckbox checked label="Checked Checkbox" />;
 };
-CheckedSwitch.displaySequence = displaySequence++;
 
 export const DisabledCheckbox = () => {
   return <DefaultCheckbox label="Disabled Checkbox" disabled />;
 };
-DisabledCheckbox.displaySequence = displaySequence++;
 
 export const DisabledCheckedCheckbox = () => {
   return <DefaultCheckbox checked label="Disabled + Checked" disabled />;
 };
-DisabledCheckedCheckbox.displaySequence = displaySequence++;
 
 export const ControlledCheckbox = () => {
   const [checked, setChecked] = useState(false);
@@ -35,7 +29,6 @@ export const ControlledCheckbox = () => {
 
   return <DefaultCheckbox checked={checked} onChange={handleChange} />;
 };
-ControlledCheckbox.displaySequence = displaySequence++;
 
 export const CheckboxVariations = () => {
   return (
@@ -71,10 +64,24 @@ export const CheckboxVariations = () => {
       <Checkbox label="Disabled Checkbox" disabled validationStatus="error" />
 
       <span>Disabled Checked</span>
-      <Checkbox checked label="Disabled + Checked" disabled validationStatus="success" />
-      <Checkbox checked label="Disabled + Checked" disabled validationStatus="warning" />
-      <Checkbox checked label="Disabled + Checked" disabled validationStatus="error" />
+      <Checkbox
+        checked
+        label="Disabled + Checked"
+        disabled
+        validationStatus="success"
+      />
+      <Checkbox
+        checked
+        label="Disabled + Checked"
+        disabled
+        validationStatus="warning"
+      />
+      <Checkbox
+        checked
+        label="Disabled + Checked"
+        disabled
+        validationStatus="error"
+      />
     </div>
   );
 };
-CheckboxVariations.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/salt/ComboBox.examples.tsx b/vuu-ui/showcase/src/examples/salt/ComboBox.examples.tsx
index 3924d2e18..00c054146 100644
--- a/vuu-ui/showcase/src/examples/salt/ComboBox.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/ComboBox.examples.tsx
@@ -1,20 +1,9 @@
-import {
-  FormField,
-  FormFieldHelperText,
-  FormFieldLabel,
-  StackLayout,
-  ComboBox,
-  ComboBoxProps,
-  Option,
-  OptionGroup,
-} from "@salt-ds/core";
-import { ChangeEvent, Suspense, SyntheticEvent, useState } from "react";
+import { ComboBox, ComboBoxProps, Option } from "@salt-ds/core";
+import { ChangeEvent, SyntheticEvent, useState } from "react";
 import { usStateExampleData } from "./exampleData";
 
 const usStates = usStateExampleData.slice(0, 10);
 
-let displaySequence = 1;
-
 function getTemplateDefaultValue({
   defaultValue,
   defaultSelected,
@@ -45,7 +34,7 @@ const BaseComboBox = (props: ComboBoxProps) => {
 
   const handleSelectionChange = (
     event: SyntheticEvent,
-    newSelected: string[]
+    newSelected: string[],
   ) => {
     props.onSelectionChange?.(event, newSelected);
     console.log(`handleSelectionChange ${newSelected.toString()}`);
@@ -73,7 +62,7 @@ const BaseComboBox = (props: ComboBoxProps) => {
     >
       {usStates
         .filter((state) =>
-          state.toLowerCase().includes(value.trim().toLowerCase())
+          state.toLowerCase().includes(value.trim().toLowerCase()),
         )
         .map((state) => (
           <Option value={state} key={state} />
@@ -83,28 +72,22 @@ const BaseComboBox = (props: ComboBoxProps) => {
 };
 
 export const DefaultComboBox = () => <BaseComboBox />;
-DefaultComboBox.displaySequence = displaySequence++;
 
 export const Placeholder = () => <BaseComboBox placeholder="State" />;
-Placeholder.displaySequence = displaySequence++;
 
 export const WithDefaultSelected = () => (
   <BaseComboBox defaultSelected={["California"]} />
 );
-WithDefaultSelected.displaySequence = displaySequence++;
 
 export const ReadOnly = () => (
   <BaseComboBox defaultSelected={["California"]} readOnly />
 );
-ReadOnly.displaySequence = displaySequence++;
 
 export const ReadOnlyEmpty = () => <BaseComboBox readOnly />;
-ReadOnlyEmpty.displaySequence = displaySequence++;
 
 export const Disabled = () => (
   <BaseComboBox disabled defaultSelected={["California"]} />
 );
-Disabled.displaySequence = displaySequence++;
 
 export const DisabledOption = () => {
   const [value, setValue] = useState("");
@@ -116,7 +99,7 @@ export const DisabledOption = () => {
 
   const handleSelectionChange = (
     event: SyntheticEvent,
-    newSelected: string[]
+    newSelected: string[],
   ) => {
     if (newSelected.length === 1) {
       setValue(newSelected[0]);
@@ -133,7 +116,7 @@ export const DisabledOption = () => {
     >
       {usStates
         .filter((state) =>
-          state.toLowerCase().includes(value.trim().toLowerCase())
+          state.toLowerCase().includes(value.trim().toLowerCase()),
         )
         .map((state) => (
           <Option value={state} key={state} disabled={state === "California"} />
@@ -141,474 +124,6 @@ export const DisabledOption = () => {
     </ComboBox>
   );
 };
-DisabledOption.displaySequence = displaySequence++;
-
-/*
-export const Variants: StoryFn<typeof ComboBox> = () => {
-  return (
-    <StackLayout>
-      <Template variant="primary" />
-      <Template variant="secondary" />
-    </StackLayout>
-  );
-};
-
-export const MultiSelect = Template.bind({});
-MultiSelect.args = {
-  multiselect: true,
-};
-
-export const WithFormField: StoryFn = () => {
-  const [value, setValue] = useState("");
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    // React 16 backwards compatibility
-    event.persist();
-
-    const value = event.target.value;
-    setValue(value);
-  };
-
-  const handleSelectionChange = (
-    event: SyntheticEvent,
-    newSelected: string[]
-  ) => {
-    // React 16 backwards compatibility
-    event.persist();
-
-    if (newSelected.length === 1) {
-      setValue(newSelected[0]);
-    } else {
-      setValue("");
-    }
-  };
-
-  return (
-    <FormField>
-      <FormFieldLabel>State</FormFieldLabel>
-      <ComboBox
-        onChange={handleChange}
-        onSelectionChange={handleSelectionChange}
-        value={value}
-      >
-        {usStates
-          .filter((state) =>
-            state.toLowerCase().includes(value.trim().toLowerCase())
-          )
-          .map((state) => (
-            <Option value={state} key={state} />
-          ))}
-      </ComboBox>
-      <FormFieldHelperText>Pick a US state</FormFieldHelperText>
-    </FormField>
-  );
-};
-
-export const Grouped: StoryFn<ComboBoxProps> = (args) => {
-  const [value, setValue] = useState(args.defaultValue?.toString() ?? "");
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    // React 16 backwards compatibility
-    event.persist();
-
-    const value = event.target.value;
-    setValue(value);
-  };
-
-  const handleSelectionChange = (
-    event: SyntheticEvent,
-    newSelected: string[]
-  ) => {
-    // React 16 backwards compatibility
-    event.persist();
-
-    if (newSelected.length === 1) {
-      setValue(newSelected[0]);
-    } else {
-      setValue("");
-    }
-  };
-
-  const options = [
-    {
-      value: "Chicago",
-      country: "US",
-    },
-    {
-      value: "Miami",
-      country: "US",
-    },
-    {
-      value: "New York",
-      country: "US",
-    },
-    {
-      value: "Liverpool",
-      country: "GB",
-    },
-    {
-      value: "London",
-      country: "GB",
-    },
-    {
-      value: "Manchester",
-      country: "GB",
-    },
-  ];
-
-  const groupedOptions = options
-    .filter((city) =>
-      city.value.trim().toLowerCase().includes(value.trim().toLowerCase())
-    )
-    .reduce((acc, option) => {
-      const country = option.country;
-      if (!acc[country]) {
-        acc[country] = [];
-      }
-      acc[country].push(option);
-      return acc;
-    }, {} as Record<string, typeof options>);
-
-  return (
-    <ComboBox
-      {...args}
-      onChange={handleChange}
-      onSelectionChange={handleSelectionChange}
-      value={value}
-    >
-      {Object.entries(groupedOptions).map(([country, options]) => (
-        <OptionGroup label={country} key={country}>
-          {options.map((option) => (
-            <Option value={option.value} key={option.value} />
-          ))}
-        </OptionGroup>
-      ))}
-    </ComboBox>
-  );
-};
-
-type Country = {
-  value: string;
-  icon: JSX.Element;
-  textValue: string;
-};
-
-const options: Country[] = [
-  {
-    value: "GB",
-    icon: <GB aria-hidden />,
-    textValue: "United Kingdom of Great Britain and Northern Ireland",
-  },
-  {
-    value: "US",
-    icon: <US aria-hidden />,
-    textValue: "United States of America",
-  },
-];
-
-export const ComplexOption: StoryFn<ComboBoxProps<Country>> = (args) => {
-  const [value, setValue] = useState(args.defaultValue?.toString() ?? "");
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    // React 16 backwards compatibility
-    event.persist();
-
-    const value = event.target.value;
-    setValue(value);
-  };
-
-  const handleSelectionChange = (
-    event: SyntheticEvent,
-    newSelected: Country[]
-  ) => {
-    // React 16 backwards compatibility
-    event.persist();
-
-    if (newSelected.length === 1) {
-      setValue(newSelected[0].textValue);
-    } else {
-      setValue("");
-    }
-  };
-
-  return (
-    <ComboBox<Country>
-      {...args}
-      onChange={handleChange}
-      onSelectionChange={handleSelectionChange}
-      value={value}
-      style={{ width: 200 }}
-      valueToString={(country) => country.textValue}
-    >
-      {options
-        .filter((country) =>
-          country.textValue.toLowerCase().includes(value.trim().toLowerCase())
-        )
-        .map((option) => (
-          <Option value={option} key={option.value}>
-            {option.icon} {option.textValue}
-          </Option>
-        ))}
-    </ComboBox>
-  );
-};
-
-export const LongList: StoryFn<ComboBoxProps<CountryCode>> = (args) => {
-  const [value, setValue] = useState(args.defaultValue?.toString() ?? "");
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    // React 16 backwards compatibility
-    event.persist();
-
-    const value = event.target.value;
-    setValue(value);
-  };
-
-  const handleSelectionChange = (
-    event: SyntheticEvent,
-    newSelected: CountryCode[]
-  ) => {
-    // React 16 backwards compatibility
-    event.persist();
-
-    if (newSelected.length === 1) {
-      setValue(
-        Object.values(countryMetaMap).find(
-          (country) => country.countryCode === newSelected[0]
-        )?.countryName ?? ""
-      );
-    } else {
-      setValue("");
-    }
-  };
-
-  const options = Object.values(countryMetaMap)
-    .sort((a, b) => a.countryName.localeCompare(b.countryName))
-    .filter(({ countryCode, countryName }) => {
-      const searchText = value.trim().toLowerCase();
-
-      return (
-        countryCode.toLowerCase().includes(searchText) ||
-        countryName.toLowerCase().includes(searchText)
-      );
-    });
-
-  const groupedOptions = options.reduce((acc, option) => {
-    const groupName = option.countryName[0];
-    if (!acc[groupName]) {
-      acc[groupName] = [];
-    }
-    acc[groupName].push(option);
-    return acc;
-  }, {} as Record<string, typeof options>);
-
-  return (
-    <ComboBox<CountryCode>
-      {...args}
-      onChange={handleChange}
-      onSelectionChange={handleSelectionChange}
-      value={value}
-      valueToString={(countryCode) => countryMetaMap[countryCode].countryName}
-    >
-      <Suspense fallback="">
-        {Object.entries(groupedOptions).map(([firstLetter, options]) => (
-          <OptionGroup label={firstLetter} key={firstLetter}>
-            {options.map((country) => (
-              <Option value={country.countryCode} key={country.countryCode}>
-                <LazyCountrySymbol aria-hidden code={country.countryCode} />
-                {country.countryName}
-              </Option>
-            ))}
-          </OptionGroup>
-        ))}
-      </Suspense>
-    </ComboBox>
-  );
-};
-
-export const EmptyMessage: StoryFn<ComboBoxProps> = (args) => {
-  const [value, setValue] = useState(args.defaultValue?.toString() ?? "");
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    // React 16 backwards compatibility
-    event.persist();
-
-    const value = event.target.value;
-    setValue(value);
-  };
-
-  const handleSelectionChange = (
-    event: SyntheticEvent,
-    newSelected: string[]
-  ) => {
-    // React 16 backwards compatibility
-    event.persist();
-
-    if (args.multiselect) {
-      return;
-    }
-
-    if (newSelected.length === 1) {
-      setValue(newSelected[0]);
-    } else {
-      setValue("");
-    }
-  };
-
-  const filteredOptions = usStates.filter((state) =>
-    state.toLowerCase().includes(value.trim().toLowerCase())
-  );
-
-  return (
-    <ComboBox
-      {...args}
-      onChange={handleChange}
-      onSelectionChange={handleSelectionChange}
-      value={value}
-    >
-      {filteredOptions.length > 0 ? (
-        filteredOptions.map((state) => <Option value={state} key={state} />)
-      ) : (
-        <Option value="">No results found for &quot;{value}&quot;</Option>
-      )}
-    </ComboBox>
-  );
-};
-
-export const Validation = () => {
-  return (
-    <StackLayout>
-      <Template validationStatus="error" />
-      <Template validationStatus="warning" />
-      <Template validationStatus="success" />
-    </StackLayout>
-  );
-};
-
-export const CustomFiltering: StoryFn<ComboBoxProps> = (args) => {
-  const [value, setValue] = useState(args.defaultValue?.toString() ?? "");
-  const [showAll, setShowAll] = useState(false);
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    // React 16 backwards compatibility
-    event.persist();
-
-    const value = event.target.value;
-    setValue(value);
-    setShowAll(false);
-  };
-
-  const handleSelectionChange = (
-    event: SyntheticEvent,
-    newSelected: string[]
-  ) => {
-    // React 16 backwards compatibility
-    event.persist();
-
-    args.onSelectionChange?.(event, newSelected);
-
-    if (args.multiselect) {
-      setValue("");
-      return;
-    }
-
-    if (newSelected.length === 1) {
-      setValue(newSelected[0]);
-    } else {
-      setValue("");
-    }
-  };
-
-  const handleOpenChange: ComboBoxProps["onOpenChange"] = (
-    _newOpen,
-    reason
-  ) => {
-    if (reason === "manual") {
-      setShowAll(true);
-    }
-  };
-
-  const filteredOptions = usStates.filter((state) =>
-    state.toLowerCase().includes(value.trim().toLowerCase())
-  );
-
-  const options = showAll ? usStates : filteredOptions;
-
-  return (
-    <ComboBox
-      {...args}
-      onChange={handleChange}
-      onSelectionChange={handleSelectionChange}
-      onOpenChange={handleOpenChange}
-      value={value}
-    >
-      {options.map((state) => (
-        <Option value={state} key={state} />
-      ))}
-    </ComboBox>
-  );
-};
-
-interface Person {
-  id: number;
-  firstName: string;
-  lastName: string;
-  displayName: string;
-}
-
-const people: Person[] = [
-  { id: 1, firstName: "John", lastName: "Doe", displayName: "John Doe" },
-  { id: 2, firstName: "Jane", lastName: "Doe", displayName: "Jane Doe" },
-  { id: 3, firstName: "John", lastName: "Smith", displayName: "John Smith" },
-  { id: 4, firstName: "Jane", lastName: "Smith", displayName: "Jane Smith" },
-];
-
-export const ObjectValue: StoryFn<ComboBoxProps<Person>> = (args) => {
-  const [value, setValue] = useState(args.defaultValue?.toString() ?? "");
-  const [selected, setSelected] = useState<Person[]>([]);
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    // React 16 backwards compatibility
-    event.persist();
-
-    const value = event.target.value;
-    setValue(value);
-  };
-
-  const handleSelectionChange = (
-    event: SyntheticEvent,
-    newSelected: Person[]
-  ) => {
-    // React 16 backwards compatibility
-    event.persist();
-
-    setSelected(newSelected);
-
-    setValue("");
-  };
-
-  const options = people.filter(
-    (person) =>
-      person.firstName.toLowerCase().includes(value.trim().toLowerCase()) ||
-      person.lastName.toLowerCase().includes(value.trim().toLowerCase())
-  );
-
-  return (
-    <ComboBox<Person>
-      {...args}
-      onChange={handleChange}
-      onSelectionChange={handleSelectionChange}
-      value={value}
-      selected={selected}
-      multiselect
-      valueToString={(person) => person.displayName}
-    >
-      {options.map((person) => (
-        <Option value={person} key={person.id} />
-      ))}
-    </ComboBox>
-  );
-};
-*/
 
 export const MultiplePills = () => (
   <BaseComboBox
@@ -616,7 +131,6 @@ export const MultiplePills = () => (
     multiselect
   />
 );
-MultiplePills.displaySequence = displaySequence++;
 
 export const MultiplePillsTruncated = () => (
   <BaseComboBox
@@ -625,7 +139,6 @@ export const MultiplePillsTruncated = () => (
     truncate
   />
 );
-MultiplePillsTruncated.displaySequence = displaySequence++;
 
 export const MultiplePillsControlledSelection = (props: ComboBoxProps) => {
   const [selected, setSelected] = useState<string[]>([]);
@@ -638,7 +151,7 @@ export const MultiplePillsControlledSelection = (props: ComboBoxProps) => {
 
   const handleSelectionChange = (
     event: SyntheticEvent,
-    newSelected: string[]
+    newSelected: string[],
   ) => {
     setSelected(newSelected);
   };
@@ -655,7 +168,7 @@ export const MultiplePillsControlledSelection = (props: ComboBoxProps) => {
     >
       {usStates
         .filter((state) =>
-          state.toLowerCase().includes(value.trim().toLowerCase())
+          state.toLowerCase().includes(value.trim().toLowerCase()),
         )
         .map((state) => (
           <Option value={state} key={state} />
@@ -663,4 +176,3 @@ export const MultiplePillsControlledSelection = (props: ComboBoxProps) => {
     </ComboBox>
   );
 };
-MultiplePillsControlledSelection.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/salt/DatePicker.examples.tsx b/vuu-ui/showcase/src/examples/salt/DatePicker.examples.tsx
index 9d00f6d06..dc674866d 100644
--- a/vuu-ui/showcase/src/examples/salt/DatePicker.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/DatePicker.examples.tsx
@@ -9,8 +9,6 @@ import { VuuDatePicker } from "@finos/vuu-ui-controls";
 import { FormField, FormFieldLabel } from "@salt-ds/core";
 import { CommitHandler } from "@finos/vuu-utils";
 
-let displaySequence = 1;
-
 const tz = getLocalTimeZone();
 const _today = today(tz);
 
@@ -29,7 +27,6 @@ export const DefaultDatePicker = () => {
     />
   );
 };
-DefaultDatePicker.displaySequence = displaySequence++;
 
 export const DefaultVuuDatePicker = () => {
   const [selectedDate, setSelectedDate] = useState<DateValue>();
@@ -53,7 +50,6 @@ export const DefaultVuuDatePicker = () => {
     />
   );
 };
-DefaultVuuDatePicker.displaySequence = displaySequence++;
 
 export const VuuDatePickerWithValue = () => {
   const [selectedDate, setSelectedDate] = useState<DateValue>(_today);
@@ -77,7 +73,6 @@ export const VuuDatePickerWithValue = () => {
     />
   );
 };
-VuuDatePickerWithValue.displaySequence = displaySequence++;
 
 export const WithFormField = () => {
   return (
@@ -87,4 +82,3 @@ export const WithFormField = () => {
     </FormField>
   );
 };
-WithFormField.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/salt/Dialog.examples.tsx b/vuu-ui/showcase/src/examples/salt/Dialog.examples.tsx
index 3c6d5ac39..ac9ea6806 100644
--- a/vuu-ui/showcase/src/examples/salt/Dialog.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/Dialog.examples.tsx
@@ -19,8 +19,6 @@ import {
 
 import "./Dialog.examples.css";
 
-let displaySequence = 1;
-
 const UnmountLogger = () => {
   useEffect(() => {
     return () => {
@@ -92,7 +90,6 @@ const DialogTemplate: FC<
 };
 
 export const DefaultDialog = () => <DialogTemplate id="Default" />;
-DefaultDialog.displaySequence = displaySequence++;
 
 export const LongContent = () => {
   const content = useMemo(
@@ -144,7 +141,7 @@ export const LongContent = () => {
         </div>
       </StackLayout>
     ),
-    []
+    [],
   );
 
   return (
@@ -154,7 +151,6 @@ export const LongContent = () => {
     />
   );
 };
-LongContent.displaySequence = displaySequence++;
 
 export const Preheader = () => (
   <DialogTemplate
@@ -162,7 +158,6 @@ export const Preheader = () => (
     preheader="I am a preheader"
   />
 );
-Preheader.displaySequence = displaySequence++;
 
 const AlertDialogTemplate: FC<
   Omit<DialogProps, "content"> & { header: string; content?: ReactNode }
@@ -219,22 +214,18 @@ const AlertDialogTemplate: FC<
 export const InfoStatus = () => (
   <AlertDialogTemplate status="info" header="Info" />
 );
-InfoStatus.displaySequence = displaySequence++;
 
 export const SuccessStatus = () => (
   <AlertDialogTemplate status="success" header="Success" />
 );
-SuccessStatus.displaySequence = displaySequence++;
 
 export const Warningtatus = () => (
   <AlertDialogTemplate status="warning" header="Warning" />
 );
-Warningtatus.displaySequence = displaySequence++;
 
 export const ErrorStatus = () => (
   <AlertDialogTemplate status="error" header="Error" />
 );
-ErrorStatus.displaySequence = displaySequence++;
 
 export const MandatoryAction = ({ open: openProp = false }: DialogProps) => {
   const [open, setOpen] = useState(openProp);
@@ -281,7 +272,6 @@ export const MandatoryAction = ({ open: openProp = false }: DialogProps) => {
     </>
   );
 };
-MandatoryAction.displaySequence = displaySequence++;
 
 function FakeWindow({ children }: PropsWithChildren<unknown>) {
   return (
@@ -324,4 +314,3 @@ export const DesktopDialog = () => {
     </StackLayout>
   );
 };
-DesktopDialog.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/salt/Dropdown.examples.tsx b/vuu-ui/showcase/src/examples/salt/Dropdown.examples.tsx
index a7ddc42ef..38311cc1a 100644
--- a/vuu-ui/showcase/src/examples/salt/Dropdown.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/Dropdown.examples.tsx
@@ -13,8 +13,6 @@ import { Icon } from "@finos/vuu-ui-controls";
 import { SyntheticEvent, useState } from "react";
 // import { LocationIcon } from "@salt-ds/icons";
 
-let displaySequence = 1;
-
 const usStates = [
   "Alabama",
   "Alaska",
@@ -89,25 +87,20 @@ const BaseDropdown = (args: DropdownProps) => (
 );
 
 export const DefaultDropdown = () => <BaseDropdown />;
-DefaultDropdown.displaySequence = displaySequence++;
 
 export const Placeholder = () => <BaseDropdown placeholder="State" />;
-Placeholder.displaySequence = displaySequence++;
 
 export const WithDefaultSelected = () => (
   <BaseDropdown defaultSelected={["California"]} />
 );
-WithDefaultSelected.displaySequence = displaySequence++;
 
 export const Readonly = () => (
   <BaseDropdown readOnly defaultSelected={["California"]} />
 );
-Readonly.displaySequence = displaySequence++;
 
 export const Disabled = () => (
   <BaseDropdown disabled defaultSelected={["California"]} />
 );
-Disabled.displaySequence = displaySequence++;
 
 export const DisabledOption = () => (
   <Dropdown>
@@ -116,7 +109,6 @@ export const DisabledOption = () => (
     ))}
   </Dropdown>
 );
-DisabledOption.displaySequence = displaySequence++;
 
 export const Variants = () => (
   <StackLayout>
@@ -132,10 +124,8 @@ export const Variants = () => (
     </Dropdown>
   </StackLayout>
 );
-Variants.displaySequence = displaySequence++;
 
 export const MultiSelect = () => <BaseDropdown multiselect />;
-MultiSelect.displaySequence = displaySequence++;
 
 export const WithFormField = () => {
   return (
@@ -150,7 +140,6 @@ export const WithFormField = () => {
     </FormField>
   );
 };
-WithFormField.displaySequence = displaySequence++;
 
 export const Grouped = () => (
   <Dropdown>
@@ -166,52 +155,7 @@ export const Grouped = () => (
     </OptionGroup>
   </Dropdown>
 );
-Grouped.displaySequence = displaySequence++;
-
-/*
-const countries: Record<string, { icon: JSX.Element; name: string }> = {
-  GB: {
-    icon: <GB aria-hidden size={0.75} />,
-    name: "United Kingdom of Great Britain and Northern Ireland",
-  },
-  US: {
-    icon: <US aria-hidden size={0.75} />,
-    name: "United States of America",
-  },
-};
-
-export const ComplexOption: StoryFn<DropdownProps> = (args) => {
-  const [selected, setSelected] = useState<string[]>([]);
-
-  const handleSelectionChange: DropdownProps["onSelectionChange"] = (
-    event,
-    newSelected
-  ) => {
-    setSelected(newSelected);
-    args.onSelectionChange?.(event, newSelected);
-  };
-
-  const adornment = countries[selected[0] ?? ""]?.icon || null;
 
-  return (
-    <Dropdown
-      {...args}
-      selected={selected}
-      startAdornment={adornment}
-      onSelectionChange={handleSelectionChange}
-      valueToString={(item) => countries[item].name}
-    >
-      <Option value="GB">
-        <GB size={0.75} aria-hidden /> United Kingdom of Great Britain and
-        Northern Ireland
-      </Option>
-      <Option value="US">
-        <US size={0.75} aria-hidden /> United States of America
-      </Option>
-    </Dropdown>
-  );
-};
-*/
 export const LongList = () => (
   <Dropdown>
     {longUsStates.map((state) => (
@@ -219,14 +163,13 @@ export const LongList = () => (
     ))}
   </Dropdown>
 );
-LongList.displaySequence = displaySequence++;
 
 export const CustomValue = (props: Partial<DropdownProps>) => {
   const [selected, setSelected] = useState<string[]>([]);
 
   const handleSelectionChange: DropdownProps["onSelectionChange"] = (
     event,
-    newSelected
+    newSelected,
   ) => {
     setSelected(newSelected);
     props.onSelectionChange?.(event, newSelected);
@@ -248,7 +191,6 @@ export const CustomValue = (props: Partial<DropdownProps>) => {
     </Dropdown>
   );
 };
-CustomValue.displaySequence = displaySequence++;
 
 export const Validation = () => {
   return (
@@ -259,12 +201,10 @@ export const Validation = () => {
     </StackLayout>
   );
 };
-Validation.displaySequence = displaySequence++;
 
 export const WithStartAdornment = () => (
   <BaseDropdown startAdornment={<Icon name="user" />} />
 );
-WithStartAdornment.displaySequence = displaySequence++;
 
 interface Person {
   id: number;
@@ -284,7 +224,7 @@ export const ObjectValue = () => {
   const [selected, setSelected] = useState<Person[]>([]);
   const handleSelectionChange = (
     event: SyntheticEvent,
-    newSelected: Person[]
+    newSelected: Person[],
   ) => {
     setSelected(newSelected);
   };
@@ -302,4 +242,3 @@ export const ObjectValue = () => {
     </Dropdown>
   );
 };
-ObjectValue.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/salt/FormField.examples.tsx b/vuu-ui/showcase/src/examples/salt/FormField.examples.tsx
index 5150fde2a..4a261402a 100644
--- a/vuu-ui/showcase/src/examples/salt/FormField.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/FormField.examples.tsx
@@ -5,8 +5,6 @@ import {
   Input,
 } from "@salt-ds/core";
 
-let displaySequence = 1;
-
 export const DefaultFormField = (props: FormFieldProps) => {
   return (
     <>
@@ -18,4 +16,3 @@ export const DefaultFormField = (props: FormFieldProps) => {
     </>
   );
 };
-DefaultFormField.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/salt/Input.examples.tsx b/vuu-ui/showcase/src/examples/salt/Input.examples.tsx
index 5df46e6e0..ccce8f509 100644
--- a/vuu-ui/showcase/src/examples/salt/Input.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/Input.examples.tsx
@@ -1,7 +1,5 @@
 import { FormField, FormFieldLabel, Input } from "@salt-ds/core";
 
-let displaySequence = 1;
-
 export const WithFormField = () => {
   return (
     <FormField style={{ width: 292 }}>
@@ -10,4 +8,3 @@ export const WithFormField = () => {
     </FormField>
   );
 };
-WithFormField.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/salt/Menu.examples.tsx b/vuu-ui/showcase/src/examples/salt/Menu.examples.tsx
index 4bdd73e47..c74803673 100644
--- a/vuu-ui/showcase/src/examples/salt/Menu.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/Menu.examples.tsx
@@ -18,8 +18,6 @@ import {
 import { useState } from "react";
 import { VirtualElement } from "@floating-ui/react";
 
-let displaySequence = 1;
-
 export const SingleLevel = (args: MenuProps) => {
   return (
     <Menu {...args}>
@@ -61,7 +59,6 @@ export const SingleLevel = (args: MenuProps) => {
     </Menu>
   );
 };
-SingleLevel.displaySequence = displaySequence++;
 
 function EditStylingMenu() {
   return (
@@ -95,7 +92,6 @@ function EditStylingMenu() {
     </Menu>
   );
 }
-EditStylingMenu.displaySequence = displaySequence++;
 
 function ClearStylingMenu() {
   return (
@@ -129,7 +125,6 @@ function ClearStylingMenu() {
     </Menu>
   );
 }
-ClearStylingMenu.displaySequence = displaySequence++;
 
 export const MultiLevel = (args: MenuProps) => {
   return (
@@ -167,7 +162,6 @@ export const MultiLevel = (args: MenuProps) => {
     </Menu>
   );
 };
-MultiLevel.displaySequence = displaySequence++;
 
 export const GroupedItems = (args: MenuProps) => {
   return (
@@ -194,7 +188,6 @@ export const GroupedItems = (args: MenuProps) => {
     </Menu>
   );
 };
-GroupedItems.displaySequence = displaySequence++;
 
 export const SeparatorOnly = (args: MenuProps) => {
   return (
@@ -221,7 +214,6 @@ export const SeparatorOnly = (args: MenuProps) => {
     </Menu>
   );
 };
-SeparatorOnly.displaySequence = displaySequence++;
 
 export const Icons = (args: MenuProps) => {
   return (
@@ -248,7 +240,6 @@ export const Icons = (args: MenuProps) => {
     </Menu>
   );
 };
-Icons.displaySequence = displaySequence++;
 
 export const IconWithGroups = (args: MenuProps) => {
   return (
@@ -287,11 +278,10 @@ export const IconWithGroups = (args: MenuProps) => {
     </Menu>
   );
 };
-IconWithGroups.displaySequence = displaySequence++;
 
 export const ContextMenu = () => {
   const [virtualElement, setVirtualElement] = useState<VirtualElement | null>(
-    null
+    null,
   );
   const [open, setOpen] = useState(false);
   return (
@@ -339,4 +329,3 @@ export const ContextMenu = () => {
     </>
   );
 };
-ContextMenu.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/salt/Pagination.examples.tsx b/vuu-ui/showcase/src/examples/salt/Pagination.examples.tsx
index 31a57477c..936c87c66 100644
--- a/vuu-ui/showcase/src/examples/salt/Pagination.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/Pagination.examples.tsx
@@ -2,12 +2,10 @@ import {
   GoToInput,
   Pagination,
   PaginationProps,
-  Paginator
+  Paginator,
 } from "@salt-ds/core";
 import { SyntheticEvent, useCallback } from "react";
 
-let displaySequence = 0;
-
 const PaginationTemplate = ({ count = 100 }: Partial<PaginationProps>) => {
   const handlePageChanged = useCallback((_: SyntheticEvent, page: number) => {
     console.log(`page changed ${page}`);
@@ -23,7 +21,5 @@ const PaginationTemplate = ({ count = 100 }: Partial<PaginationProps>) => {
 };
 
 export const DefaultPagination = () => <PaginationTemplate count={25} />;
-DefaultPagination.displaySequence = displaySequence++;
 
 export const LargeDataset = () => <PaginationTemplate count={10000} />;
-LargeDataset.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/salt/Progress.examples.tsx b/vuu-ui/showcase/src/examples/salt/Progress.examples.tsx
index 704ea266d..15c767075 100644
--- a/vuu-ui/showcase/src/examples/salt/Progress.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/Progress.examples.tsx
@@ -1,7 +1,5 @@
 import { CircularProgress, LinearProgress } from "@salt-ds/core";
 
-let displaySequence = 1;
-
 export const LinearDefault = () => (
   <div>
     <div>
@@ -18,7 +16,6 @@ export const LinearDefault = () => (
     </div>
   </div>
 );
-LinearDefault.displaySequence = displaySequence++;
 
 export const CircularDefault = () => (
   <div style={{ display: "flex" }}>
@@ -36,4 +33,3 @@ export const CircularDefault = () => (
     </div>
   </div>
 );
-CircularDefault.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/salt/Switch.examples.tsx b/vuu-ui/showcase/src/examples/salt/Switch.examples.tsx
index 7623edf60..39a0e3b82 100644
--- a/vuu-ui/showcase/src/examples/salt/Switch.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/Switch.examples.tsx
@@ -1,30 +1,24 @@
 import { Switch, SwitchProps } from "@salt-ds/core";
 import { ChangeEvent, useState } from "react";
 
-let displaySequence = 1;
-
 export const DefaultSwitch = ({
   label = "Default",
   ...props
 }: Partial<SwitchProps>) => {
   return <Switch data-showcase-center {...props} label={label} />;
 };
-DefaultSwitch.displaySequence = displaySequence++;
 
 export const CheckedSwitch = () => {
   return <DefaultSwitch checked label="Checked Switch" />;
 };
-CheckedSwitch.displaySequence = displaySequence++;
 
 export const DisabledSwitch = () => {
   return <DefaultSwitch label="Disabled Switch" disabled />;
 };
-DisabledSwitch.displaySequence = displaySequence++;
 
 export const DisabledCheckedSwitch = () => {
   return <DefaultSwitch checked label="Disabled + Checked" disabled />;
 };
-DisabledCheckedSwitch.displaySequence = displaySequence++;
 
 export const ControlledSwitch = () => {
   const [checked, setChecked] = useState(false);
@@ -35,4 +29,3 @@ export const ControlledSwitch = () => {
 
   return <DefaultSwitch checked={checked} onChange={handleChange} />;
 };
-ControlledSwitch.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/salt/ToggleButton.examples.tsx b/vuu-ui/showcase/src/examples/salt/ToggleButton.examples.tsx
index e53005a18..1fffc5421 100644
--- a/vuu-ui/showcase/src/examples/salt/ToggleButton.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/ToggleButton.examples.tsx
@@ -4,8 +4,6 @@ import { SyntheticEvent, useState } from "react";
 
 import "./ToggleButton.examples.css";
 
-let displaySequence = 1;
-
 interface ToggleButtonExampleProps {
   "data-variant"?: ButtonProps["variant"];
   "data-accented"?: boolean;
@@ -33,8 +31,6 @@ export const ButtonGroupWithTextOnly = (props: ToggleButtonExampleProps) => {
   );
 };
 
-ButtonGroupWithTextOnly.displaySequence = displaySequence++;
-
 export const ButtonGroupWithIconOnly = (props: ToggleButtonExampleProps) => {
   const [selectedIndex, setSelectedIndex] = useState<number>(1);
 
@@ -82,8 +78,6 @@ export const ButtonGroupWithIconOnly = (props: ToggleButtonExampleProps) => {
   );
 };
 
-ButtonGroupWithIconOnly.displaySequence = displaySequence++;
-
 export const ButtonGroupWithTextAndIcon = (props: ToggleButtonExampleProps) => {
   const [selectedIndex, setSelectedIndex] = useState<number>(1);
 
@@ -122,8 +116,6 @@ export const ButtonGroupWithTextAndIcon = (props: ToggleButtonExampleProps) => {
   );
 };
 
-ButtonGroupWithTextAndIcon.displaySequence = displaySequence++;
-
 export const ToggleButtonGroupVariations = () => {
   return (
     <div
@@ -168,7 +160,6 @@ export const ToggleButtonGroupVariations = () => {
     </div>
   );
 };
-ToggleButtonGroupVariations.displaySequence = displaySequence++;
 
 export const SingleToggleButton = () => {
   return (
@@ -177,4 +168,3 @@ export const SingleToggleButton = () => {
     </ToggleButton>
   );
 };
-SingleToggleButton.displaySequence = displaySequence++;
diff --git a/vuu-ui/tools/vuu-showcase/src/shared-utils.ts b/vuu-ui/tools/vuu-showcase/src/shared-utils.ts
index 61ec8b7b7..31ffe0ce4 100644
--- a/vuu-ui/tools/vuu-showcase/src/shared-utils.ts
+++ b/vuu-ui/tools/vuu-showcase/src/shared-utils.ts
@@ -5,7 +5,6 @@ export const env = process.env.NODE_ENV as Environment;
 
 export type VuuExample = {
   (props?: { [key: string]: unknown }): JSX.Element;
-  displaySequence: number;
 };
 
 export const pathFromKey = (key: string) => key.slice(5).split("|").join("/");
diff --git a/vuu-ui/tools/vuu-showcase/src/showcase-main/tree-nav/TreeNavPanel.tsx b/vuu-ui/tools/vuu-showcase/src/showcase-main/tree-nav/TreeNavPanel.tsx
index 8dc1f8888..a752a30db 100644
--- a/vuu-ui/tools/vuu-showcase/src/showcase-main/tree-nav/TreeNavPanel.tsx
+++ b/vuu-ui/tools/vuu-showcase/src/showcase-main/tree-nav/TreeNavPanel.tsx
@@ -1,13 +1,11 @@
 import { TreeTable, type TreeTableProps } from "@finos/vuu-datatable";
 import { View, type ViewProps } from "@finos/vuu-layout";
-import { VuuInput } from "@finos/vuu-ui-controls";
 import cx from "clsx";
 import { useTreeNavPanel } from "./useTreeNavPanel";
+import { TreeSourceNode } from "@finos/vuu-utils";
+import { Input } from "@salt-ds/core";
 
 import "./TreeNavPanel.css";
-import { TreeDataSource } from "@finos/vuu-data-local";
-import { useMemo } from "react";
-import { TreeSourceNode } from "@finos/vuu-utils";
 
 const classBase = "vuuTreeNavPanel";
 
@@ -27,12 +25,7 @@ export const TreeNavPanel = ({
   source,
   style,
 }: TreeNavPanelProps) => {
-  const { onCommit } = useTreeNavPanel();
-
-  const dataSource = useMemo(
-    () => new TreeDataSource({ data: source }),
-    [source],
-  );
+  const { dataSource, onChange, searchPattern } = useTreeNavPanel({ source });
 
   return (
     <View
@@ -41,7 +34,7 @@ export const TreeNavPanel = ({
       style={style}
     >
       <div className={`${classBase}-search`}>
-        <VuuInput onCommit={onCommit} />
+        <Input onChange={onChange} />
       </div>
       <div className={`${classBase}-treeContainer`}>
         <TreeTable
@@ -51,6 +44,7 @@ export const TreeNavPanel = ({
           showColumnHeaders={false}
           onSelect={onSelect}
           revealSelected
+          searchPattern={searchPattern}
           width="100%"
         />
       </div>
diff --git a/vuu-ui/tools/vuu-showcase/src/showcase-main/tree-nav/useTreeNavPanel.ts b/vuu-ui/tools/vuu-showcase/src/showcase-main/tree-nav/useTreeNavPanel.ts
index a95fef6ed..0288da6c4 100644
--- a/vuu-ui/tools/vuu-showcase/src/showcase-main/tree-nav/useTreeNavPanel.ts
+++ b/vuu-ui/tools/vuu-showcase/src/showcase-main/tree-nav/useTreeNavPanel.ts
@@ -1,11 +1,33 @@
-import { useCallback } from "react";
+import { ChangeEventHandler, useCallback, useMemo, useState } from "react";
+import { TreeNavPanelProps } from "./TreeNavPanel";
+import { TreeDataSource } from "@finos/vuu-data-local";
 
-export const useTreeNavPanel = () => {
-  const handleCommit = useCallback(() => {
-    console.log("onCommit");
-  }, []);
+export type TreeNavPanelHookProps = Pick<TreeNavPanelProps, "source">;
+
+export const useTreeNavPanel = ({ source }: TreeNavPanelHookProps) => {
+  const dataSource = useMemo(
+    () => new TreeDataSource({ data: source }),
+    [source],
+  );
+  const [searchPattern, setSearchPattern] = useState<string>("");
+
+  const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+    (evt) => {
+      const value = evt.target.value.trim();
+      setSearchPattern(value);
+
+      if (value === "") {
+        dataSource.filter = { filter: "" };
+      } else {
+        dataSource.filter = { filter: `label contains "${value}"` };
+      }
+    },
+    [dataSource],
+  );
 
   return {
-    onCommit: handleCommit,
+    dataSource,
+    onChange: handleChange,
+    searchPattern,
   };
 };