### Install Overview Engine Core

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0201_installation.adoc

Use this command to install the Overview Engine core package from npm.

```bash
npm install @com.mgmtp.a12.overviewengine/overviewengine-core
```

--------------------------------

### Start Development Environment

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/README.md

Start the development environment, including dev servers and TypeScript compilers in watch mode. This is the recommended command for development.

```sh
pnpm start
```

--------------------------------

### Migration Examples

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0502_model_migration_tool.adoc

Examples demonstrating how to use the migration tool for a single file or an entire directory. The `--backup` flag creates backups for model files if they are not under version control.

```bash
# file
overview-model-migration my-overview-model.json --backup

# folder
overview-model-migration . --backup
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/README.md

Install all project dependencies and link local packages using pnpm. This command is necessary before building or running the project.

```sh
pnpm install
```

--------------------------------

### List Documents Query Example

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0322_data_loader.adoc

This example demonstrates how Overview Engine constructs a query to list documents. It includes common properties like fields, constraints, sorting, and paging.

```typescript
const listDocumentsQuery: DataOperation.ListDocuments.Query = {
  id: "listDocuments",
  fields: ["id", "name", "creationDate"],
  constraint: {
    operator: "AND",
    predicates: [
      {
        field: "name",
        operator: "CONTAINS",
        value: "example"
      }
    ]
  },
  sorting: [
    {
      field: "creationDate",
      direction: "DESC"
    }
  ],
  paging: {
    pageSize: 50,
    pageNumber: 0
  }
};
```

--------------------------------

### Setup the Overview Engine in non-modular way

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0202_setup.adoc

Register Overview Engine's factories directly without using the module. This is an alternative setup method when modular registration is not preferred.

```typescript
import { OverviewEngineFactories } from "@mgm/a12-overview-engine";
import { ApplicationSagasFactory } from "@mgm/a12-application-sagas";

export const setupOverviewEngineNonModular = (sagasFactory: ApplicationSagasFactory) => {
  return new OverviewEngineFactories(sagasFactory);
};

```

--------------------------------

### Enable Data Services Configuration in Composable Setup

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0501_migrate_to_latest.adoc

If using the new composable setup, include the `withDataServicesConfigurationSlice` feature as a prerequisite of the `withOverviewEngine` feature.

```typescript
import { withDataServicesConfigurationSlice } from "@com.mgmtp.a12.client/client-core/dataServicesAdapter";
import { withOverviewEngine } from "@com.mgmtp.a12.overviewengine/overviewengine-core";

const { store, initialActions } = createA12ApplicationSetup(
	combineFeatures(
		withDataServicesConfigurationSlice,
		withOverviewEngine,
		// ...
	)(initialConfig)
);
```

--------------------------------

### List String Filter Options Query Example

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0322_data_loader.adoc

This example shows how Overview Engine creates a query to fetch options for a string filter. This is useful for populating dropdowns or autocomplete fields.

```typescript
const listStringFilterOptionsQuery: DataOperation.ListStringFilterOptions.Query = {
  id: "listFilterOptions",
  field: "status",
  constraint: {
    operator: "AND",
    predicates: [
      {
        field: "name",
        operator: "STARTS_WITH",
        value: "a"
      }
    ]
  }
};
```

--------------------------------

### Install and Execute Codemod with npx

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0503_codemod_instructions.adoc

Execute the codemod directly using npx without permanent installation. Provide the recipe ID or version and the tsconfig path.

```bash
npx @com.mgmtp.a12.overviewengine/overviewengine-codemod@latest <recipe-id-or-version> <tsconfig-path> [options]
```

--------------------------------

### Example: Migrating to Version 38.0.0

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0503_codemod_instructions.adoc

Illustrates migrating a project to version 38.0.0 by executing all relevant codemod recipes.

```bash
npx @com.mgmtp.a12.overviewengine/overviewengine-codemod@latest 38.0.0 ./tsconfig.json
```

--------------------------------

### Setup Overview Engine Infinite Scroll

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0308_infinite_scroll.adoc

Configure the infinite scroll settings for the OverviewEngine, including pageSize and cachePages. This setup is essential for efficient data loading during scrolling.

```typescript
const overviewEngine = new OverviewEngine({
  pageSize: 10,
  cachePages: 5
});
```

--------------------------------

### Install or Update Migration Tool

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0502_model_migration_tool.adoc

Install or update the model migration tool globally using npm. This command ensures you have the latest version of the tool.

```bash
npm install -g @com.mgmtp.a12.overviewengine/overviewengine-model-migration
```

--------------------------------

### Install and Execute Codemod with pnpm dlx

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0503_codemod_instructions.adoc

Execute the codemod directly using pnpm dlx without permanent installation. Provide the recipe ID or version and the tsconfig path.

```bash
pnpm dlx @com.mgmtp.a12.overviewengine/overviewengine-codemod@latest <recipe-id-or-version> <tsconfig-path> [options]
```

--------------------------------

### Setup the Overview Engine module

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0202_setup.adoc

Register the Overview Engine module and the Application sagas factory. This is the primary method for setting up the Overview Engine.

```typescript
import { OverviewEngineModule } from "@mgm/a12-overview-engine";
import { ApplicationSagasFactory } from "@mgm/a12-application-sagas";

export const setupOverviewEngineModule = (sagasFactory: ApplicationSagasFactory) => {
  return new OverviewEngineModule(sagasFactory);
};

```

--------------------------------

### Run End-to-End Tests

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/README.md

Run end-to-end tests. This requires the development servers to be running, typically started with 'pnpm start'.

```sh
pnpm testE2E
```

--------------------------------

### Example: Run a Single Recipe on a Project

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0503_codemod_instructions.adoc

Execute a specific codemod recipe, 'prefer-top-level-imports', on a project located at './client/tsconfig.json'.

```bash
npx @com.mgmtp.a12.overviewengine/overviewengine-codemod@latest prefer-top-level-imports ./client/tsconfig.json
```

--------------------------------

### Example: Running a Specific Recipe

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0503_codemod_instructions.adoc

Demonstrates how to run a specific codemod recipe, 'rename-deprecated-props', on a project's tsconfig.json.

```bash
npx @com.mgmtp.a12.overviewengine/overviewengine-codemod@latest rename-deprecated-props ./tsconfig.json
```

--------------------------------

### Get Initial Sorting Value

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Provides a way to get the initial sorting configuration for an OverviewModel.

```typescript
// (undocumented)
export namespace Sorting {
    export function getInitialValue(overviewModel: OverviewModel): Sorting[] | undefined;
}
```

--------------------------------

### Build All Packages

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/README.md

Build all packages in the repository, including compiling TypeScript, bundling the showcase, and generating documentation. This command should be run after installing dependencies.

```sh
pnpm compile
```

--------------------------------

### Create Engine Middlewares

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Utility function to create engine middlewares. No specific setup or constraints are documented.

```typescript
export function createEngineMiddlewares(): Middleware[];

```

--------------------------------

### Custom Reference Cell Example

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0317_custom_field_format.adoc

Implement a custom reference cell with a field formatter to modify field display. This example shows how to define the formatter within the component.

```typescript
import React from "react";
import { OverviewEngine, ExpressionCell, ReferenceCell, FieldFormatterParams } from "@mgm/a12-overview-engine";

const customReferenceCellExample = () => {
  const fieldFormatter = (params: FieldFormatterParams): string => {
    // Example: Append ' (formatted)' to the field value
    return `${params.value} (formatted)`;
  };

  const columns = [
    {
      key: "name",
      name: "Name",
      component: ReferenceCell,
      fieldFormatter: fieldFormatter,
    },
    {
      key: "value",
      name: "Value",
      component: ExpressionCell,
    },
  ];

  const data = [
    { id: 1, name: "Item 1", value: 100 },
    { id: 2, name: "Item 2", value: 200 },
  ];

  return <OverviewEngine columns={columns} data={data} />;
};

export default customReferenceCellExample;
```

--------------------------------

### Pagination Namespace

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Provides a function to get the initial pagination value.

```typescript
// (undocumented)
    export namespace Pagination {
        export function getInitialValue(overviewModel: OverviewModel): Pagination | undefined;
    }
```

--------------------------------

### useSummaryFormatter

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

A hook to get a function for formatting summary information.

```APIDOC
## useSummaryFormatter

### Description
Provides a utility function for formatting summary data, typically used for reference columns.

### Hook Signature
`useSummaryFormatter(): (referenceColumn: OverviewModel.ReferenceColumn, operation: OverviewModel.Summary.Operation) => string | undefined`

### Parameters
- `referenceColumn` (OverviewModel.ReferenceColumn) - The reference column data.
- `operation` (OverviewModel.Summary.Operation) - The summary operation to perform.

### Returns
- `string | undefined` - The formatted summary string or undefined if formatting is not possible.
```

--------------------------------

### Run Codemod in Interactive Mode

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0503_codemod_instructions.adoc

Launch the interactive interface for guided execution of codemods. This mode is useful for step-by-step transformations.

```bash
npx @com.mgmtp.a12.overviewengine/overviewengine-codemod@latest -i
```

--------------------------------

### Dispatching Engine Actions with Middleware

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0300_overview_engine_actions.adoc

Example of dispatching an engine event action within custom middleware, including the activity ID.

```typescript
import { Events, Commands } from "@com.mgmtp.a12.overviewengine/overviewengine-core/lib/main/store";

import { OverviewEngineActions } from "@com.mgmtp.a12.overviewengine/overviewengine-core/lib/main/client-extensions";

// Middleware
const customMiddleware: Middleware = (api) => (next) => (action) => {
	// ...other logics
	api.dispatch(OverviewEngineActions.event({
        activityId: "MY_ACTIVITY_ID",
        engineAction: Events.onFilterChanged({ activeFilters: [] })
	}))
}
```

--------------------------------

### Direct RTL Render Example

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/DEVELOPMENT.md

This snippet shows the standard way to render a component using React Testing Library without custom utilities. It's useful for basic component rendering tests.

```typescript
import { render } from "@testing-library/react";

const { container } = render(<CalloutTpl />);

expect(getAllByDataRole(container, `${baseClass}-body`)).toHaveLength(1);
```

--------------------------------

### Run Codemod in Interactive Mode

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0503_codemod_instructions.adoc

Launch the codemod in interactive mode for guided execution, allowing recipe or target version selection via prompts.

```bash
npx @com.mgmtp.a12.overviewengine/overviewengine-codemod@latest --interactive
```

--------------------------------

### Custom Test-Utils Render Example

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/DEVELOPMENT.md

Demonstrates using the custom `render` function from `test-utils` for easier selection of components via data-role attributes. This approach simplifies querying and improves readability.

```typescript
import { render } from "test-utils";

expect(render(<CalloutTpl />).getAllByDataRole(`${baseClass}-body`)).toHaveLength(1);
```

--------------------------------

### Dispatching Engine Actions with Saga

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0300_overview_engine_actions.adoc

Example of dispatching an engine command action within a Redux Saga, including the activity ID.

```typescript
// Saga
function* customSagaHandler(): SagaGenerator<void> {
	// ...other logics
	yield put(OverviewEngineActions.command({
        activityId: "MY_ACTIVITY_ID",
        engineAction: Commands.setDisabled({ disabled: true })
	}))
}
```

--------------------------------

### Add Data Services Reducer and Load Configuration

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0501_migrate_to_latest.adoc

To enable Data Services configuration lookup, add the Data Services configuration reducer during app setup and load the configuration once after the application is initialized.

```typescript
import { DataServicesReducerMap, loadDataServicesConfiguration } from "@com.mgmtp.a12.dataservices/dataservices-access";

const { store } = ApplicationFactories.createApplicationSetup({
	// ...
	reducerMap: { ...DataServicesReducerMap }
});

await loadDataServicesConfiguration(store);
```

--------------------------------

### Row Style Getter Example

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0315_row_style_getter.adoc

Demonstrates how to implement a row style getter to set the interactive status of a specific row. This callback is invoked by the Overview Engine for each row.

```typescript
const rowStyleGetter = (params: { row: any; rowIndex: number }) => {
  if (params.rowIndex === 2) {
    return { isInteractive: true };
  }
  return {};
};
```

--------------------------------

### Splitted Keyword Example for Simple Search

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0305_field_based_filtering.adoc

This JSON demonstrates how a keyword is split into words and combined with the 'and' operator for simple search queries on string fields. It's used when approximate match search is enabled.

```json
{
    "operator": "and",
    "operands": [
      {
        "operator": "simple_search",
        "fields": [
          "/product/name"
        ],
        "value": "Tennisball"
      },
      {
        "operator": "simple_search",
        "fields": [
          "/product/name"
        ],
        "value": "Pack"
      }
    ]
  }
```

--------------------------------

### Custom Attachment Thumbnail Selector

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0321_custom_selector_map.adoc

This example demonstrates how to customize the attachment thumbnail selector. It prioritizes using the attachment's content property if it starts with 'data:image/', otherwise it falls back to the default selector. Ensure DefaultSelectorMap is spread when customizing.

```typescript
import {
	DefaultSelectorMap,
	type SelectorMap
} from "@com.mgmtp.a12.overviewengine/overviewengine-core/lib/main/view/configuration/selector-map.js";

/**
 * The default selector looks up thumbnails by id
 *
 * Here, we use the content property of attachments instead.
 * If it does not exist, we fall back to the default selector.
 */
const CustomSelectorMap: SelectorMap = {
	...DefaultSelectorMap,
	attachmentThumbnail: (attachment) => {
		return (state) =>
			attachment.content?.startsWith("data:image/")
				? attachment.content
				: DefaultSelectorMap.attachmentThumbnail(attachment)(state);
	}
}
```

--------------------------------

### Handling Engine Actions in Saga

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0300_overview_engine_actions.adoc

Example of handling an engine event action within a Redux Saga, demonstrating how to access the activity ID and the nested engine action.

```typescript
include::./assets/generated/typescript/handle-custom-event-saga.ts[tags="handleCustomRowActionSaga"]
```

--------------------------------

### Apply default constraints to enumerated string filter

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0322_data_loader.adoc

This example demonstrates how to apply default constraints to an enumerated string filter within the data loader customization. It ensures that specific enumerated values are handled correctly.

```typescript
export class CustomDataLoader extends OverviewEngineDataLoader {
  public async query(dataOperation: DataOperation.Query): Promise<DataOperation.QueryResult> {
    const query = {
      ...dataOperation.query,
      filter: {
        ...dataOperation.query.filter,
        "some.enum.field": [
          "value1",
          "value2",
        ],
      },
    };
    return super.query({ ...dataOperation, query });
  }
}
```

--------------------------------

### withOverviewEngine

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Initializes the Overview Engine for an application. This function integrates the Overview Engine feature into the application's configuration.

```APIDOC
## withOverviewEngine

### Description
Initializes the Overview Engine for an application. This function integrates the Overview Engine feature into the application's configuration.

### Signature
```typescript
withOverviewEngine: <T extends ApplicationWithOverviewEngineConfig>(cfg: T) => ApplicationWithConfiguredFeature<T, "overviewEngine">;
```

### Parameters
* **cfg** (T) - Required - The application configuration object.
```

--------------------------------

### OverviewEngineFactories Configurations

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0308_infinite_scroll.adoc

Configurations for infinite scrolling behavior are provided through `OverviewEngineFactories`.

```APIDOC
## OverviewEngineFactories Configurations

### Description
Provides configuration options for the infinite scrolling behavior within the Overview Engine.

### Configurations
* `pageSize` (number): Defines the number of rows to load per page. Affects the number of requests and data loaded per request.
* `cachePages` (number): Specifies the number of pages to retain in the cache during scrolling, optimizing performance.
```

--------------------------------

### List Available Recipes

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0503_codemod_instructions.adoc

Display all available codemod recipes along with their supported version ranges and descriptions using the --list option.

```bash
npx @com.mgmtp.a12.overviewengine/overviewengine-codemod@latest --list
```

--------------------------------

### useFieldFormatter

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

A hook to get a function for formatting field values.

```APIDOC
## useFieldFormatter

### Description
Provides a utility function for formatting field values within the Overview Engine.

### Hook Signature
`useFieldFormatter(): (params: FieldFormatterParams) => string`

### Returns
- `(params: FieldFormatterParams) => string` - A function that takes `FieldFormatterParams` and returns a formatted string.
```

--------------------------------

### Perform Model Migration

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0502_model_migration_tool.adoc

Run the migration tool to process Overview Model files. Specify the path to a single file or a directory for recursive migration. The `--backup` flag is recommended for version-controlled files.

```bash
overview-model-migration <path to overview model file or directory> --backup
```

--------------------------------

### SectionType Enum

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Enumerates the types of sections, specifically 'start' and 'end'.

```APIDOC
## SectionType Enum

### Description
Enumerates the types of sections, specifically 'start' and 'end'.

### Values
- **START** - Represents the start of a section.
- **END** - Represents the end of a section.
```

--------------------------------

### RangeOptions Interface

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Generic interface for defining a start and end range for values.

```typescript
export interface RangeOptions<T> {
            // (undocumented)
            end?: T;
            // (undocumented)
            start?: T;
        }
```

--------------------------------

### withConfiguredOverviewEngine

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Configures the Overview Engine with specific settings. This function takes an application configuration and returns the same configuration augmented with Overview Engine settings.

```APIDOC
## withConfiguredOverviewEngine

### Description
Configures the Overview Engine with specific settings. This function takes an application configuration and returns the same configuration augmented with Overview Engine settings.

### Signature
```typescript
withConfiguredOverviewEngine: <T extends ApplicationWithOverviewEngineConfig>(cfg: T) => T;
```

### Parameters
* **cfg** (T) - Required - The application configuration object to be extended with Overview Engine settings.
```

--------------------------------

### Get UI State Selector

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Selector to retrieve the UI state for a given activity ID.

```typescript
export function uiState(activityId: string): Selector_2<UiState>;
```

--------------------------------

### Get Models State Selector

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Selector to retrieve the models state for a given activity ID.

```typescript
export function modelsState(activityId: string): Selector_2<ModelsState | undefined>;
```

--------------------------------

### Prepare Preset Filters

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0305_field_based_filtering.adoc

This function prepares preset filters for initializing the Overview Engine. It's used to define initial filter configurations.

```typescript
function preparePresetFilters(filters: FilterMap): FilterMap {
    return filters;
}
```

--------------------------------

### withOverviewEngineView

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Integrates the Overview Engine view into the application configuration. This function prepares the configuration for rendering the Overview Engine's user interface.

```APIDOC
## withOverviewEngineView

### Description
Integrates the Overview Engine view into the application configuration. This function prepares the configuration for rendering the Overview Engine's user interface.

### Signature
```typescript
withOverviewEngineView: <T extends ApplicationWithOverviewEngineConfig>(cfg: T) => T;
```

### Parameters
* **cfg** (T) - Required - The application configuration object to which the Overview Engine view will be added.
```

--------------------------------

### Old loadData Callback Signature

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0501_migrate_to_latest.adoc

The previous signature for the `loadData` callback in `InfiniteScrollOptions` accepted `start` and `numberOfRows`.

```typescript
export interface InfiniteScrollOptions {
    // ... other properties
    loadData(start: number, numberOfRows: number): Promise<void>;
}
```

--------------------------------

### useOverviewEngineContext

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

A hook to access the Overview Engine context.

```APIDOC
## useOverviewEngineContext

### Description
Provides access to the Overview Engine's context, enabling components to interact with its core functionalities.

### Hook Signature
`useOverviewEngineContext<T>(selector: (value: OverviewEngineContextType) => T): T`

### Parameters
- `selector` (function) - A function to select a specific piece of data from the context.

### Returns
- `T` - The selected value from the Overview Engine context.
```

--------------------------------

### createEngineMiddlewares

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Creates the necessary middlewares for the engine.

```APIDOC
## createEngineMiddlewares

### Description
Creates the necessary middlewares for the engine.

### Function Signature
`createEngineMiddlewares(): Middleware[]`

### Returns
An array of `Middleware` objects.
```

--------------------------------

### OverviewEngine Configurations for Infinite Scrolling

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0308_infinite_scroll.adoc

Overview Engine provides configurations for infinite scrolling behavior through OverviewEngineFactories, including pageSize for rows per request and cachePages for retaining cached data.

```typescript
interface OverviewEngineFactories {
  pageSize: number;
  cachePages: number;
  // ... other configurations
}
```

--------------------------------

### Create Overview Engine Module

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Factory function to create a new Overview Engine module with optional configuration.

```typescript
export function createModule(config?: ModuleConfig): Module;
```

--------------------------------

### Overview Engine Actions

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

This section details the available actions for managing the state of the Overview Engine. These actions allow for programmatic control over various aspects such as column widths, dialog visibility, selection states, and query parameters.

```APIDOC
## Actions

### `setColumnWidths`

**Description**: Sets the widths for columns in the overview.

**Payload**: `SetColumnWidthsPayload` (contains `columnWidths`)

### `setDialog`

**Description**: Controls the visibility and content of a dialog within the overview.

**Payload**: `SetDialogPayload` (contains `dialog`)

### `setExpandedMultiSelection`

**Description**: Toggles the expanded state for multi-selection features.

**Payload**: `SetExpandedMultiSelectionPayload` (contains `expandedMultiSelection`)

### `setDisabled`

**Description**: Enables or disables components or features within the overview.

**Payload**: `SetDisabledPayload` (contains `disabled`)

### `setLatestSelectedDocumentId`

**Description**: Sets the ID of the most recently selected document.

**Payload**: `SetLatestSelectedDocumentIdPayload` (contains `latestSelectedDocumentId`)

### `setLatestSelectedDocumentIds`

**Description**: Sets a list of IDs for selected documents.

**Payload**: `SetLatestSelectedDocumentIdsPayload` (contains `latestSelectedDocumentIds`)

### `setQueryParameters`

**Description**: Updates the query parameters used for filtering, pagination, searching, and sorting.

**Payload**: `SetQueryParametersPayload` (contains optional `activeFilters`, `pagination`, `scrolling`, `searchString`, `sorting`)

### `setRowState`

**Description**: Updates the state of a specific row.

**Payload**: `SetRowStatePayload` (contains `rowState`)

### `setScrollToRow`

**Description**: Configures scrolling to a specific row.

**Payload**: `SetScrollToRowPayload` (contains optional `scrollToRow`)
```

--------------------------------

### onMultiSelectionClear Event

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0307_multi_selection.adoc

This event handler is triggered when the multi-selection state is cleared, for example, due to filtering or panel collapse.

```APIDOC
## onMultiSelectionClear Event

### Description
The `onMultiSelectionClear` event handler is triggered when the current multi-selection is cleared. This typically occurs when filtering or searching changes, or when the multi-selection panel is collapsed while rows are still selected.

### Event Handler
- **`onMultiSelectionClear`**: Called when the multi-selection is cleared.
```

--------------------------------

### Run Unit Tests

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/README.md

Execute unit tests across all packages in the repository. This command verifies the functionality of individual components.

```sh
pnpm test
```

--------------------------------

### Apply Row States Example

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0301_row.adoc

Applies 'selected', 'disabled', and 'useSecondaryColor' states to specific rows using Commands.setRowState.

```typescript
import { Commands } from "@mgm/a12-overview-engine";

// Assuming 'dispatch' is available from your state management setup
// dispatch(Commands.setRowState({
//   "0": { selected: true },
//   "1": { disabled: true },
//   "2": { useSecondaryColor: true },
// }));
```

--------------------------------

### Migrate to a Target Version

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0503_codemod_instructions.adoc

Run all applicable codemods for migrating to a specific library version by providing the target version number and the tsconfig path.

```bash
npx @com.mgmtp.a12.overviewengine/overviewengine-codemod@latest <target-version> <tsconfig-path>
```

--------------------------------

### Get View Component Provider

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Provides a function to retrieve a React component type for a given view component name.

```typescript
const viewComponentProvider: (componentName: string) => React_3.ComponentType<View> | undefined;
```

--------------------------------

### OverviewEngineActions

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Provides actions for interacting with the Overview Engine, such as creating activities, managing data holders, and updating enumerated string filters.

```APIDOC
## OverviewEngineActions

### Description

This namespace contains actions that can be dispatched to the Overview Engine to perform various operations.

### Actions

- **createActivity**
  - **Description**: Creates a new activity within the Overview Engine.
  - **Payload**: `ActivityActions.CreatePayload`, optional `UiState`.
  - **Returns**: An action with `ActivityActions.PushPayload`.

- **command**
  - **Description**: Dispatches a command to the Overview Engine.
  - **Payload**: `CommandPayload` containing an `activityId` and an `engineAction`.

- **event**
  - **Description**: Dispatches an event to the Overview Engine.
  - **Payload**: `EventPayload` containing an `activityId` and an `engineAction`.

- **createEnumeratedStringDataHolder**
  - **Description**: Creates a data holder for enumerated strings.
  - **Payload**: `CreateEnumeratedStringDataHolderPayload` including `activityId`, `data`, and `descriptor`.

- **enumeratedStringQueryParametersChanged**
  - **Description**: Handles changes in query parameters for enumerated strings.
  - **Payload**: `EnumeratedStringQueryParametersChangedPayload` including `activityId`, `fieldPath`, `keyword`, optional `modelId`, `nextPage`, and optional `reload`.

- **setEnumeratedStringCandidates**
  - **Description**: Sets the candidates for an enumerated string filter.
  - **Payload**: `SetEnumeratedStringCandidatesPayload` including `activityId`, `candidates`, `fieldPath`, and `fullSize`.
```

--------------------------------

### withOverviewEngineMiddlewares

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Adds middlewares to the Overview Engine configuration. This function allows for the integration of custom middleware logic.

```APIDOC
## withOverviewEngineMiddlewares

### Description
Adds middlewares to the Overview Engine configuration. This function allows for the integration of custom middleware logic.

### Signature
```typescript
withOverviewEngineMiddlewares: <T extends ApplicationWithOverviewEngineConfig>(cfg: T) => T;
```

### Parameters
* **cfg** (T) - Required - The application configuration object to which middlewares will be added.
```

--------------------------------

### Get Enumerated String Filter Map Selector

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Selector to retrieve the enumerated string filter map for a given activity ID.

```typescript
export function enumeratedStringFilterMap(activityId: string): Selector_2<OverviewEngineApi.EnumeratedStringFilterMap | undefined>;
```

--------------------------------

### Get Empty DateTimeViewInput

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Returns a default, empty DateTimeViewValue object. Use this to initialize date inputs or reset them to a default state.

```typescript
export function getEmptyDateTimeViewInput(): DateTimeViewValue;
```

--------------------------------

### OverviewEngineFactories

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Factory functions for creating and configuring Overview Engine modules, data providers, and components.

```APIDOC
## OverviewEngineFactories

### Description
Provides factory functions for creating and configuring various parts of the Overview Engine.

### Functions
- `createModule(config?: ModuleConfig)`: Creates an Overview Engine module.
- `createMiddlewares()`: Creates middlewares for the engine.
- `createDataProviders(dataLoader?: OverviewEngineDataLoader, config?: DataProvidersConfig)`: Creates data providers.
- `createDataReducers()`: Creates data reducers.
- `createApplicationSagas()`: Creates application sagas.

### Components
- `ViewComponent`: A React component for rendering views. It can optionally handle progress indicators.
- `viewComponentProvider(componentName: string)`: A provider function that returns a React component for a given view name.

### Types
- `ModuleConfig`: Configuration for the module (aliased from `DataProvidersConfig`).
- `ViewComponentProps`: Props for the `ViewComponent`.
```

--------------------------------

### Core UI Components

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

The overviewengine-core library provides a set of reusable React components for building user interfaces. These components cover various UI elements including input controls, layout structures, data display, and utility components.

```APIDOC
## Core UI Components

### Description
This section lists the primary React components available in the overviewengine-core library. These components are designed for direct use in building user interfaces.

### Components
- **Checkbox**: A component for boolean selection.
- **CheckboxIndeterminate**: A checkbox variant for indeterminate states.
- **ContentBox**: A versatile container for content with potential header and footer.
- **Counter**: A component for displaying numerical counts.
- **CssEllipsis**: A component for applying CSS ellipsis for text truncation.
- **DateInput**: An input field for date selection.
- **DateTimePickerHeader**: Header component for date/time pickers.
- **DateTimePickerInput**: Input component for date and time selection.
- **Filter**: A component for filtering data.
- **FilterBar**: A bar for displaying and managing filters.
- **FilterBarMobile**: A mobile-optimized filter bar.
- **FilterSelector**: A component for selecting filters.
- **FilterSelectorMobile**: A mobile-optimized filter selector.
- **FilterSelectorTemplate**: A template for filter selector UIs.
- **FilterSelectorTemplateActionBar**: Action bar within the filter selector template.
- **FilterSelectorTemplateActionElement**: Action element within the filter selector template.
- **FilterSelectorTemplateContent**: Content area within the filter selector template.
- **FilterSelectorTemplateItem**: An item within the filter selector template list.
- **FilterSelectorTemplateList**: List of items within the filter selector template.
- **FilterSelectorTemplateSearchInput**: Search input within the filter selector template.
- **FilterSelectorTemplateSection**: Section within the filter selector template.
- **Footer**: Footer component, likely for a ContentBox.
- **Heading**: Heading component, likely for a ContentBox.
- **HeadingAddon**: An addon for headings.
- **HiddenText**: Component to render text that is visually hidden.
- **Icon**: A component for displaying icons.
- **List**: A component for displaying lists of items.
- **ListItem**: An individual item within a List.
- **ListSubHeader**: A sub-header for lists.
- **Message**: A component for displaying messages.
- **MessageBox**: A box for displaying messages.
- **ModalNotification**: A component for modal notifications.
- **ModalOverlay**: An overlay for modal components.
- **MonthSelector**: A component for selecting a month.
- **Pagination**: A component for handling pagination.
- **PickerHeaderCloseButton**: A close button for picker headers.
- **PopUpMenu**: A component for displaying pop-up menus.
- **Radio**: A radio button component.
- **RadioItem**: An individual item for a radio group.
- **ResponsiveImageContainer**: A container for responsive images.
- **Select**: A dropdown select component.
- **SubActionBar**: A sub action bar component.
- **SubActionBarTpl**: A template for sub action bars.
- **SubHeading**: A sub-heading component.
- **Subtitle**: A subtitle component.
- **Table**: A component for displaying data in a table format.
- **TextOutput**: A component for displaying text output.
- **TimePicker**: A component for selecting time.
- **Title**: A title component, likely for a ContentBox.
- **YearMonthSelector**: A component for selecting a year and month.
- **YearSelector**: A component for selecting a year.
```

--------------------------------

### Get UI State Without Defaults Selector

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Selector to retrieve the UI state without default values for a given activity ID.

```typescript
export function uiStateWithoutDefaults(activityId: string): Selector_2<UiState | undefined>;
```

--------------------------------

### OverviewEngine

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

The main React component for rendering the Overview Engine. It accepts various props to configure its behavior, appearance, and data handling.

```APIDOC
## OverviewEngine

### Description
The main React component for rendering the Overview Engine. It accepts various props to configure its behavior, appearance, and data handling.

### Props
- **accessibilityConfigurations** (OverviewEngineApi.AccessibilityConfigurations) - Optional - Accessibility configurations for the engine.
- **activeRowId** (string) - Optional - The ID of the currently active row.
- **ariaLevel** (number) - Optional - ARIA level for accessibility.
- **cardView** (boolean) - Optional - Enables card view layout.
- **componentMap** (ComponentMap) - Optional - A map of custom components to use.
- **documentModel** (DocumentModel) - Required - The document model to display.
- **embedded** (boolean) - Optional - Indicates if the engine is embedded.
- **eventHandlers** (OverviewEngineApi.EventHandlers) - Optional - Custom event handlers.
- **loadingState** ("without" | "missing" | "loading" | "loaded" | "error") - Optional - The current loading state of the engine.
- **overviewModel** (OverviewModel) - Required - The model defining the overview structure and content.
- **rowActionState** (OverviewEngineApi.RowActionState) - Optional - State for row actions.
- **rowStyling** (RowStyleGetter<JSONDocument>) - Optional - A function to get row styling for JSON documents.
```

--------------------------------

### Modify fields projection

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0322_data_loader.adoc

This example illustrates how to modify the fields projection in a query. It allows you to specify which fields should be included or excluded in the query results.

```typescript
export class CustomDataLoader extends OverviewEngineDataLoader {
  public async query(dataOperation: DataOperation.Query): Promise<DataOperation.QueryResult> {
    const query = {
      ...dataOperation.query,
      fields: ["field1", "field2"],
    };
    return super.query({ ...dataOperation, query });
  }
}
```

--------------------------------

### Run Linting

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/README.md

Execute linting checks across the project to ensure code quality and consistency.

```sh
pnpm lint
```

--------------------------------

### Injecting Custom RequestSelectorMap into Overview Engine

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0324_request_selector_map.adoc

Demonstrates two ways to inject a custom RequestSelectorMap into an Overview Engine instance: using createModule or configuring data providers directly.

```typescript
function setup() {
    // Either
	OverviewEngineFactories.createModule({
		requestSelectorMap: customRequestSelectorMap
	});

    // Or directly configure it per data provider
    dataHandlers = OverviewEngineFactories.createDataProviders(OverviewEngineFactories.dataLoader, {
		requestSelectorMap: customRequestSelectorMap
	});

    // Rest...
}

```

--------------------------------

### Dispatch scroll-to-row event

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0325_scroll_to_row.adoc

This example demonstrates how to dispatch the Events.onScrollToRow event to scroll to the first row of a table. It utilizes a 'Scroll to top' button for user interaction.

```typescript
import React from 'react';
import { Events } from '@mgm/a12-overview-engine';

interface ScrollToRowExampleProps {
  // ... other props
}

export const ScrollToRowExample: React.FC<ScrollToRowExampleProps> = (props) => {
  const handleScrollToTop = () => {
    Events.onScrollToRow({
      rowIndex: 0,
      autoFocus: true,
    });
  };

  return (
    <div>
      {/* ... other content */}
      <button onClick={handleScrollToTop}>Scroll to top</button>
      {/* ... other content */}
    </div>
  );
};

```

--------------------------------

### Re-setting handleProgressIndicator for custom views

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0300_overview_engine.adoc

When extending OverviewEngineFactories.ViewComponent, ensure handleProgressIndicator is set if the default behavior is desired. This example shows how to maintain the progress indicator in a custom view.

```typescript
import React from 'react';
import { OverviewEngineFactories } from '@mgm/a12-overview-engine';

const CustomOverviewEngineView = OverviewEngineFactories.ViewComponent.extend({
  // main
  handleProgressIndicator: true,
});

export default CustomOverviewEngineView;

```

--------------------------------

### useOverviewEngineState

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

A hook to access and subscribe to the Overview Engine's state.

```APIDOC
## useOverviewEngineState

### Description
Enables components to read and react to changes in the global Overview Engine state.

### Hook Signature
`useOverviewEngineState<T>(selector: Selector<T, OverviewEngineState>): T`

### Parameters
- `selector` (Selector<T, OverviewEngineState>) - A selector function to extract a specific part of the state.

### Returns
- `T` - The selected state value.
```

--------------------------------

### Run a Specific Recipe

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0503_codemod_instructions.adoc

Execute a single codemod recipe by providing its identifier and the path to your TypeScript configuration file.

```bash
npx @com.mgmtp.a12.overviewengine/overviewengine-codemod@latest <recipe-id> <tsconfig-path>
```

--------------------------------

### Customizing Result Page Table Body

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0305_field_based_filtering.adoc

Example of customizing the default 'No results found' message by overriding the `TableBody` component. Requires a specific tag for inclusion.

```typescript
include::./assets/typescript/features/custom-components.tsx[tags="customTableBody"]
```

--------------------------------

### Add extra filter

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0322_data_loader.adoc

Customize the data loader to add extra filters to the query. This example shows how to modify the query object to include additional filtering criteria.

```typescript
export class CustomDataLoader extends OverviewEngineDataLoader {
  public async query(dataOperation: DataOperation.Query): Promise<DataOperation.QueryResult> {
    const query = {
      ...dataOperation.query,
      filter: {
        ...dataOperation.query.filter,
        "some.field": "some.value",
      },
    };
    return super.query({ ...dataOperation, query });
  }
}
```

--------------------------------

### useOverviewContentBoxContext

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

A hook to access the Overview Content Box context.

```APIDOC
## useOverviewContentBoxContext

### Description
Allows components to access and subscribe to changes in the Overview Content Box context.

### Hook Signature
`useOverviewContentBoxContext<T>(selector: (value: OverviewContentBoxContext.Type) => T): T`

### Parameters
- `selector` (function) - A function that extracts a specific value from the context.

### Returns
- `T` - The value extracted by the selector from the context.
```

--------------------------------

### Event Handlers

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Provides a list of event handlers that can be implemented to react to user interactions and system events within the Overview Engine.

```APIDOC
## Event Handlers

### Description

This interface defines various callback functions that can be implemented to handle user interactions and system events within the Overview Engine. These events allow for custom logic to be executed in response to user actions such as clicking on columns, rows, or buttons, as well as changes in data filtering, sorting, and pagination.

### Methods

- **onColumnClick**(columnIndex: number): void
  - Triggered when a column header is clicked.
- **onColumnWidthsChange**(params: { columnWidths: ColumnWidths }): void
  - Triggered when column widths are changed.
- **onDialogClose**(): void
  - Triggered when a dialog is closed.
- **onDialogConfirm**(): void
  - Triggered when a dialog confirmation action is taken.
- **onEventButtonClick**(event: string, button?: OverviewModel.Button): void
  - Triggered when an event-specific button is clicked.
- **onEventButtonClickRequest**(params: { buttonModel: OverviewModel.Button; componentKey: string }): void
  - Triggered when a request to click an event button is made, providing button and component details.
- **onFilterChange**(filters: FilterMap): void
  - Triggered when filters are changed.
- **onInfiniteScroll**(params: { scrolling: Scrolling }): void
  - Triggered during infinite scrolling events.
- **onMultiSelectionButtonClick**(): void
  - Triggered when a multi-selection button is clicked.
- **onMultiSelectionClear**(): void
  - Triggered when the multi-selection is cleared.
- **onNextPageClick**(): void
  - Triggered when the next page navigation button is clicked.
- **onOverallMultiSelectionButtonClick**(params: { affectedRowIds: string[]; selected: boolean }): void
  - Triggered for overall multi-selection actions, affecting multiple rows.
- **onPageChange**(page: number): void
  - Triggered when the page number changes.
- **onPreviousPageClick**(): void
  - Triggered when the previous page navigation button is clicked.
- **onRowButtonClick**(params: { documentId: string; rowActionModel: OverviewModel.Button }): void
  - Triggered when a button specific to a row is clicked.
- **onRowButtonClickRequest**(params: { row: JSONDocument; rowActionModel: OverviewModel.Button; componentKey: string }): void
  - Triggered when a request to click a row button is made, providing row, button, and component details.
- **onRowClick**(params: { documentId: string; customEvent?: string }): void
  - Triggered when a row is clicked.
- **onRowsSelect**(params: { documentId: string; selected: boolean }[]): void
  - Triggered when rows are selected or deselected.
- **onSearch**(searchString: string): void
  - Triggered when a search action is performed.
- **onSearchEnumeratedStringField**(params: { fieldPath: string; modelId?: string; keyword?: string; nextPage?: boolean }): void
  - Triggered to search within an enumerated string field.
- **onSort**(params: { sorting?: Sorting[] }): void
  - Triggered when sorting parameters are applied.
```

--------------------------------

### Customize DateType Field Conversion

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0310_conversion.adoc

Example of customizing the conversion logic for a DateType field. This snippet shows how to provide a custom implementation of the Conversion API for a specific field.

```typescript
import {
	ValueConversion,
	LocalizerContext,
	ConversionParameters
} from "@mgm/a12-utils-localization";

class CustomConversion implements ValueConversion {
	parseValue(value: any, params: ConversionParameters): any {
		// TODO: implement parsing logic
		return value;
	}

	formatValue(value: any, params: ConversionParameters): any {
		if (
			params.documentModelName === "PersonDM" &&
			params.modelPath === "DateOfBirth" &&
			params.elementtype === "DateType"
		) {
			const date = new Date(value);
			return date.toLocaleDateString(undefined, {
				year: "numeric",
				month: "2-digit",
				day: "2-digit"
			});
		}

		return value;
	}
}

export const main = (context: LocalizerContext) => {
	context.conversion = new CustomConversion();
};
```

--------------------------------

### Get Timezone Date Unit

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Retrieves a specific unit (month or year) of a date, adjusted for a given timezone. Useful for date calculations and comparisons across different timezones.

```typescript
export function getTimezoneDateUnit(date: Date | undefined, timezone: string, unit: "month" | "year"): number;
```

--------------------------------

### Update Scrolling API Interface

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/documentation/src/0501_migrate_to_latest.adoc

The `UiState.scrolling` property interface has been updated to support the new Query API paging feature. Note the change from `start` and `numberOfRows` to `pageSize` and `pageNumbers`.

```typescript
export interface Scrolling {
	readonly start: number;
	readonly numberOfRows: number;
	readonly visibleStart: number; // Range of visible rows - start point
	readonly visibleEnd: number; // Range of visible rows - end point
}
```

```typescript
export interface Scrolling {
	readonly pageSize: number;
	readonly pageNumbers: number[];
	readonly visibleStart: number; // Range of visible rows - start point
	readonly visibleEnd: number; // Range of visible rows - end point
}
```

--------------------------------

### Create Data Providers

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Factory function to create data providers for the Overview Engine, optionally using a data loader and configuration.

```typescript
const createDataProviders: (dataLoader?: OverviewEngineDataLoader, config?: DataProvidersConfig) => DataProvider[];
```

--------------------------------

### Convert UI Input States to DateTimeViewValue

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Converts two UI input states for start and end dates into a DateTimeViewValue object. This is useful for processing user input for date ranges.

```typescript
export function convertToDateTimeViewValue(start: DateTimeUiValueType.InputState, end: DateTimeUiValueType.InputState): DateTimeViewValue;
```

--------------------------------

### Create Data Reducers

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Factory function to create data reducers for the Overview Engine.

```typescript
const createDataReducers: () => ActivityReducers.DataReducer[];
```

--------------------------------

### withOverviewModelSupport

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

Adds support for Overview Engine models to the application configuration. This function enables the use of specific data models within the Overview Engine.

```APIDOC
## withOverviewModelSupport

### Description
Adds support for Overview Engine models to the application configuration. This function enables the use of specific data models within the Overview Engine.

### Signature
```typescript
withOverviewModelSupport: <T extends ApplicationWithOverviewEngineConfig>(cfg: T) => T;
```

### Parameters
* **cfg** (T) - Required - The application configuration object to which Overview Engine model support will be added.
```

--------------------------------

### OverviewEngineContext

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

The React context for the Overview Engine, providing access to its internal state and event handlers. It supports both Paginated and Infinite Scroll modes.

```APIDOC
## OverviewEngineContext

### Description
Provides access to the Overview Engine's state and event handlers. It can be either `Paginated` or `InfiniteScroll`.

### Type
`Context<OverviewEngineContextType>`

### Usage
```jsx
const context = useContext(OverviewEngineContext);
```

### OverviewEngineContextType
Union type of `OverviewEngineContextType.Paginated` and `OverviewEngineContextType.InfiniteScroll`.

#### Base Properties
- `componentMap`: `ComponentMap` - Map of components used in the overview.
- `eventHandlers`: `OverviewEngineApi.EventHandlers` - Handlers for various events.
- `expressionTrees`: `Record<string, Expression.RootNode | undefined>` - Expression trees for dynamic behavior.
- `referenceColumns`: `Record<string, OverviewModel.ReferenceColumn | undefined>` - Reference columns configuration.
- `selectorMap`: `SelectorMap` - Map of selectors.
- `smallView`: `boolean` - Flag indicating a small view.
- `uiState`: `UiState` - Current UI state.
- `widgetMap`: `WidgetMap` - Map of widgets.

#### InfiniteScroll Properties
Extends `Base` and `OverviewEngine.InfiniteScrollProps`.

#### Paginated Properties
Extends `Base` and `OverviewEngine.PaginatedProps`.

### Helper Functions
- `OverviewEngineContextType.InfiniteScroll.isInstance(props)`: Checks if the context is of type `InfiniteScroll`.
- `OverviewEngineContextType.Paginated.isInstance(props)`: Checks if the context is of type `Paginated`.
```

--------------------------------

### SelectorMap Interface

Source: https://github.com/mgm-tp/a12-overview-engine/blob/main/core/overviewengine-core.api.md

A map of selectors available within the Overview Engine context.

```APIDOC
## SelectorMap Interface

### Description
A map of selectors available within the Overview Engine context.

### Properties
- **attachmentThumbnail** - A selector function that takes an attachment and returns a string or undefined representing its thumbnail, within the OverviewEngineContextType.
```