# Observable Flashing Cells

Canonical page: https://www.adaptabletools.com/docs/handbook-flashing-cell-observables

- Observable Flashing Cells flash while a live [Observable Expression](https://www.adaptabletools.com/docs/adaptable-ql-expression-observable/index.md) Rule is true
- They are ideal for history / time conditions — e.g. net move over a window, change counts, silence
- Scope, Duration, Target and Flash Styles work the same as for standard changed-based Flashing

[Flashing Cells](https://www.adaptabletools.com/docs/handbook-flashing-cell/index.md) of Type **Observable** react to **how** a value has changed over time — not only to the latest tick.

- Configure it by setting `Type: 'Observable'` on the Flashing Cell Definition
- The Rule is a boolean Expression built from Observable Functions (curly braces), for example

```ts [[2, 1, "NET_CHANGE"], [1, 1, "github_stars"], [2, 1, "WITHIN"], [4, 1, "30s"]]
 NET_CHANGE{[github_stars], WITHIN(30s)} > 20
```

```ts [[2, 1, "CHANGE_COUNT"], [1, 1, "price"], [2, 1, "WITHIN"], [4, 1, "5m"]]
 CHANGE_COUNT{[price], WITHIN(5m)} > 3
```

See [Observable Expressions](https://www.adaptabletools.com/docs/adaptable-ql-expression-observable/index.md) for full details

- A single small tick may **not** flash if the Rule needs a larger net move or several changes in the window
- Windowed / clock-based Rules keep re-evaluating while `liveRefreshIntervalMs` is greater than `0` (default `1000`)

**Example: Observable Flashing Cells**

Flash when net change over a window is large enough

- This example has a Flashing Cell Definition which uses `Type: 'Observable'`
- Rule: `NET_CHANGE{[github_stars], WITHIN(30s)} > 10`
- Only the `Github Stars` column ticks (every 500ms by ±10), so a few moves in the same direction are needed before the cell flashes
- `liveRefreshIntervalMs` is set so the sliding window continues to update as time passes

Demo project (Vanilla); the files without a marker are shown below:

```text
src/
  adaptableOptions.ts
  agGridModules.ts      [template]
  columnDefs.ts         [template]
  gridOptions.ts        [template]
  index.ts              [template]
  onAdaptableReady.ts
  rowData.ts            [template]
  styles.css            [template]
  tickingDataHelper.ts  [template]
index.html              [template]
package.json            [template]
tsconfig.json           [template]
```

Files marked `[template]` are the same in every demo; see the [demo template](https://www.adaptabletools.com/llms/demo-template.md#vanilla).

**`src/adaptableOptions.ts`**

```ts
import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Observable Flashing',
  expressionOptions: {
    liveRefreshIntervalMs: 1000,
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['FlashingCell'],
    },
    Theme: {CurrentTheme: 'dark'},
    FlashingCell: {
      FlashingCellDefinitions: [
        {
          Name: 'flashingCell-stars-net-change',
          Type: 'Observable',
          Scope: {
            ColumnIds: ['github_stars'],
          },
          Rule: 'NET_CHANGE{[github_stars], WITHIN(30s)} > 10',
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'open_issues_count',
            'license',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};
```

**`src/onAdaptableReady.ts`**

```ts
import {AdaptableReadyInfo} from '@adaptabletools/adaptable';
import {tickNumericData} from './tickingDataHelper';

export const onAdaptableReady = ({adaptableApi}: AdaptableReadyInfo) => {
  tickNumericData(adaptableApi, 500, ['github_stars']);
};
```