Data Updates

Handle live data updates to display real-time views driven by server events. LyteNyte Grid's server data source requests update ticks from the server at a configurable frequency.

Processing Updates

By default, the LyteNyte Grid server data source does not expect row data to update regularly. As a result, it does not request updates from the server unless the view changes. However, the data source provides a refresh method that sends data requests for the current view to the server. Therefore, a real-time data grid can be established in two steps:

Set up the data grid view using the standard non-updating configuration with the useServerDataSource hook.
Call the refresh method whenever the grid should update its rows.

The example below demonstrates this behavior. A setInterval polls the server every second for updates, and the grid refreshes accordingly. The example uses a grouped data view to show that update ticking works for both flat and grouped views.

Data Ticking

"use client";

import { Grid, useServerDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { useEffect, useId } from "react";
import { Server } from "./server";
import type { DataEntry } from "./data";
import { GroupCell, HeaderCell, NumberCell } from "./components";
import type { Column } from "@1771technologies/lytenyte-pro/types";

const columns: Column<DataEntry>[] = [
  {
    id: "bid",
    name: "Bid",
    type: "number",
    groupVisibility: "always",
    cellRenderer: NumberCell,
    width: 120,
    widthFlex: 1,
  },
  {
    id: "ask",
    name: "Ask",
    type: "number",
    groupVisibility: "always",
    cellRenderer: NumberCell,
    width: 120,
    widthFlex: 1,
  },
  {
    id: "spread",
    name: "Spread",
    type: "number",
    groupVisibility: "always",
    cellRenderer: NumberCell,
    width: 120,
    widthFlex: 1,
  },

  {
    id: "volatility",
    name: "Volatility",
    type: "number",
    groupVisibility: "always",
    cellRenderer: NumberCell,
    width: 120,
    widthFlex: 1,
  },
  {
    id: "latency",
    name: "Latency",
    type: "number",
    groupVisibility: "always",
    cellRenderer: NumberCell,
    width: 120,
    widthFlex: 1,
  },
  {
    id: "symbol",
    name: "Symbol",
    hide: true,
    groupVisibility: "always",
    type: "number",
  },
];

export default function RowUpdates() {
  const ds = useServerDataSource<DataEntry>({
    dataFetcher: (params) => {
      return Server(params.requests, params.model.groups, params.model.aggregations);
    },
    blockSize: 50,
  });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns: columns,
    rowGroupModel: ["symbol"],
    rowGroupColumn: {
      width: 170,
      cellRenderer: GroupCell,
    },

    columnBase: {
      headerRenderer: HeaderCell,
    },

    aggModel: {
      time: { fn: "first" },
      volume: { fn: "group" },
      bid: { fn: "avg" },
      ask: { fn: "avg" },
      spread: { fn: "avg" },
      volatility: { fn: "first" },
      latency: { fn: "first" },
      pnl: { fn: "first" },
      symbol: { fn: "first" },
    },
  });

  useEffect(() => {
    const i = setInterval(() => {
      ds.refresh();
    }, 1000);

    return () => clearInterval(i);
  }, [ds]);

  const view = grid.view.useValue();

  return (
    <div className="lng-grid" style={{ height: 500 }}>
      <Grid.Root grid={grid}>
        <Grid.Viewport style={{ overflowY: "scroll" }}>
          <Grid.Header>
            {view.header.layout.map((row, i) => {
              return (
                <Grid.HeaderRow key={i} headerRowIndex={i}>
                  {row.map((c) => {
                    if (c.kind === "group") return null;

                    return (
                      <Grid.HeaderCell
                        key={c.id}
                        cell={c}
                        className="flex h-full w-full items-center px-2 text-sm capitalize"
                      />
                    );
                  })}
                </Grid.HeaderRow>
              );
            })}
          </Grid.Header>
          <Grid.RowsContainer
            className={ds.isLoading.useValue() ? "animate-pulse bg-gray-100" : ""}
          >
            <Grid.RowsCenter>
              {view.rows.center.map((row) => {
                if (row.kind === "full-width") return null;

                return (
                  <Grid.Row row={row} key={row.id}>
                    {row.cells.map((c) => {
                      return <Grid.Cell key={c.id} cell={c} />;
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

import "./component.css";
import type {
  CellRendererParams,
  HeaderCellRendererFn,
} from "@1771technologies/lytenyte-pro/types";
import { ArrowDownIcon, ArrowUpIcon } from "@radix-ui/react-icons";
import { usePrevious } from "@uidotdev/usehooks";
import clsx from "clsx";
import { useEffect, useRef } from "react";
import type { DataEntry } from "./data";
import { ChevronDownIcon, ChevronRightIcon } from "@1771technologies/lytenyte-pro/icons";

const formatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

export function NumberCell({ grid, column, row }: CellRendererParams<DataEntry>) {
  const field = grid.api.columnField(column, row) as number;

  const prev = usePrevious(field);

  const value = typeof field === "number" ? formatter.format(field) : "-";

  const diff = field - (prev ?? field);

  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (!ref.current) return;

    ref.current.style.animation = "none";
    void ref.current.offsetWidth;
    ref.current.style.animation = "fadeOut 3s ease-out forwards";
  }, [diff]);

  return (
    <div
      className={clsx(
        "flex h-full items-center justify-end gap-2 px-2 font-mono tabular-nums tracking-tighter",
      )}
    >
      {diff !== 0 && (
        <div
          ref={ref}
          className={clsx(
            "flex items-center rounded px-1 text-[10px]",
            diff < 0 && "bg-red-800/20 text-red-500",
            diff > 0 && "bg-green-500/20 text-green-500",
          )}
        >
          {diff < 0 && <ArrowDownIcon width={12} height={12} />}
          {diff > 0 && <ArrowUpIcon width={12} height={12} />}
          <span>{diff.toFixed(2)}</span>
        </div>
      )}

      {value}
    </div>
  );
}

export function GroupCell({ grid, row }: CellRendererParams<DataEntry>) {
  if (grid.api.rowIsGroup(row)) {
    const symbol = row.key;

    const isExpanded = grid.api.rowGroupIsExpanded(row);

    return (
      <div className="flex h-full w-full items-center gap-2 overflow-hidden text-nowrap px-3">
        {row.loadingGroup && (
          <div className="w-5">
            <LoadingSpinner />
          </div>
        )}
        {!row.loadingGroup && (
          <button
            className="hover:bg-ln-gray-10 w-5 cursor-pointer rounded transition-colors"
            onClick={() => {
              grid.api.rowGroupToggle(row);
            }}
          >
            <span className="sr-only">Toggle the row group</span>
            {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}
          </button>
        )}
        <div className="flex h-[32px] min-h-[32px] w-[32px] min-w-[32px] items-center justify-center overflow-hidden rounded-full">
          <img
            src={`/symbols/${symbol}.png`}
            alt=""
            className="h-[26px] min-h-[26px] w-[26px] min-w-[26] rounded-full bg-black p-1"
          />
        </div>
        <div className="symbol-cell flex min-w-[60px] items-center justify-center rounded-2xl bg-teal-600/20 px-1 py-0.5 text-xs">
          {symbol}
        </div>
      </div>
    );
  }
  if (!grid.api.rowIsLeaf(row)) return null;

  const symbol = row.data?.["symbol"] as string;

  return (
    <div className="flex h-full w-full items-center justify-end gap-3 overflow-hidden text-nowrap px-3">
      <div className="symbol-cell flex min-w-[60px] items-center justify-center rounded-2xl px-1 py-0.5 text-xs opacity-50">
        {symbol}
      </div>
    </div>
  );
}

export const HeaderCell: HeaderCellRendererFn<DataEntry> = ({ grid, column }) => {
  const aggs = grid.state.aggModel.useValue();
  const agg = aggs[column.id];
  const aggFn = column.id === "spread" ? "diff" : agg?.fn;
  const aggName = typeof aggFn === "string" ? aggFn : "Fn(x)";

  return (
    <div
      className={clsx(
        "flex h-full w-full items-center gap-2 text-sm text-[var(--lng1771-gray-80)]",
        column.type === "number" && "flex-row-reverse",
      )}
    >
      <div>{column.name ?? column.id}</div>
      {aggFn && aggFn !== "group" && (
        <span className="focus-visible:ring-ln-primary-50 rounded px-1 py-1 text-xs text-[var(--lng1771-primary-50)] focus:outline-none focus-visible:ring-1">
          ({aggName as string})
        </span>
      )}
    </div>
  );
};

const LoadingSpinner = () => {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <svg
        className="h-4 w-4 animate-spin text-blue-500"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
      >
        <circle
          className="opacity-25"
          cx="12"
          cy="12"
          r="8"
          stroke="currentColor"
          strokeWidth="4"
        ></circle>
        <path
          className="opacity-75"
          fill="currentColor"
          d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
        ></path>
      </svg>
    </div>
  );
};

import type {
  AggModelFn,
  DataRequest,
  DataResponse,
  RowGroupModelItem,
} from "@1771technologies/lytenyte-pro/types";
import { data, type DataEntry } from "./data";

const sleep = () => new Promise((res) => setTimeout(res, 600));

export async function Server(
  reqs: DataRequest[],
  groupModel: RowGroupModelItem<DataEntry>[],
  aggModel: { [columnId: string]: { fn: AggModelFn<DataEntry> } },
) {
  // Simulate latency and server work.
  await sleep();

  return reqs.map((c) => {
    // Return flat items if there are no row groups
    if (!groupModel.length) {
      return {
        asOfTime: Date.now(),
        data: data.slice(c.start, c.end).map((x) => {
          return {
            kind: "leaf",
            id: x.id,
            data: x,
          };
        }),
        start: c.start,
        end: c.end,
        kind: "center",
        path: c.path,
        size: data.length,
      } satisfies DataResponse;
    }

    const groupLevel = c.path.length;
    const groupKeys = groupModel.slice(0, groupLevel + 1);

    const filteredForGrouping = data.filter((row) => {
      return c.path.every((v, i) => {
        const groupKey = groupModel[i];
        return `${row[groupKey as keyof DataEntry]}` === v;
      });
    });

    // This is the leaf level of the grouping
    if (groupLevel === groupModel.length) {
      return {
        kind: "center",
        asOfTime: Date.now(),
        start: c.start,
        end: c.end,
        path: c.path,
        data: filteredForGrouping.slice(c.start, c.end).map((x) => {
          return {
            kind: "leaf",
            id: x.id,
            data: x,
          };
        }),
        size: filteredForGrouping.length,
      } satisfies DataResponse;
    }

    const groupedData = Object.groupBy(filteredForGrouping, (r) => {
      const groupPath = groupKeys.map((g) => {
        if (typeof g !== "string")
          throw new Error("Non-string groups are not supported by this dummy implementation");

        return r[g as keyof DataEntry];
      });

      return groupPath.join(" / ");
    });

    const rows = Object.entries(groupedData);

    return {
      kind: "center",
      asOfTime: Date.now(),
      data: rows.slice(c.start, c.end).map((x) => {
        const childRows = x[1]!;

        const nextGroup = groupLevel + 1;
        let childCnt: number;
        if (nextGroup === groupModel.length) childCnt = childRows.length;
        else {
          childCnt = Object.keys(
            Object.groupBy(childRows, (x) => {
              const groupKey = groupModel[nextGroup];
              return `${x[groupKey as keyof DataEntry]}`;
            }),
          ).length;
        }

        const aggData = Object.fromEntries(
          Object.entries(aggModel)
            .map(([column, m]) => {
              if (typeof m.fn !== "string")
                throw new Error(
                  "Non-string aggregations are not supported by this dummy implementation",
                );

              const id = column as keyof DataEntry;

              if (m.fn === "first") return [column, childRows[0][id]];
              if (m.fn === "last") return [column, childRows.at(-1)![id]];

              if (m.fn === "avg")
                return [
                  column,
                  childRows.reduce((acc, x) => acc + (x[id] as number), 0) / childRows.length,
                ];

              if (m.fn === "sum")
                return [column, childRows.reduce((acc, x) => acc + (x[id] as number), 0)];

              if (m.fn === "min")
                return [column, Math.min(...childRows.map((x) => x[id] as number))];
              if (m.fn === "max")
                return [column, Math.max(...childRows.map((x) => x[id] as number))];
            })
            .filter(Boolean) as [string, number | string][],
        );

        return {
          kind: "branch",
          childCount: childCnt,
          data: aggData,
          id: x[0],
          key: x[0].split(" / ").at(-1)!,
        };
      }),

      path: c.path,
      start: c.start,
      end: c.end,
      size: rows.length,
    } satisfies DataResponse;
  });
}

Manually Refreshing the Grid

The refresh method described above is a convenience wrapper around two other methods provided by the LyteNyte Grid server data source:

requestsForView: an atom that returns Data Request Objects for the current view.
pushRequests: sends Data Request Objects to the server to force an update for the slices described by the requests.

Therefore, the following code blocks are equivalent:

const ds = useServerDataSource({ ... })

ds.refresh()
// Is equivalent to
ds.pushRequests(ds.requestsForView.get())

Data Updating Considerations

Live ticking data grids involve several subtle challenges that many developers, and even other grid libraries, often fail to handle correctly. Fortunately, most of these complexities are handled automatically when using LyteNyte Grid's server data source.

Large Number of Updates

Some data views can display hundreds or even thousands of visible cells that may update simultaneously and at high frequency. LyteNyte Grid handles these updates efficiently; however, because updates originate from the server, browser serialization and deserialization introduce performance costs. In such cases, batching updates is recommended. For example, request a data refresh every 5 seconds to process updates in 5-second intervals. The exact implementation depends on the user case. In practice, you are more likely to encounter network update limits before hitting cell-rendering constraints in LyteNyte Grid. If you notice performance dips, they are likely occurring in the data-processing layer of your application.

Consistent Group Updates

When row groups are present, data requests occur per group row and its children. For example, if a single expanded row group is in view, the view consists of:

The root data slice containing the group rows
The child rows of the expanded group

These represent two separate data requests. LyteNyte Grid's dataFetcher provides both slices simultaneously, but if your implementation splits them into multiple server requests, the returned data may become out of sync. This can occur if the server data ticks between requests. To prevent this, handle refresh requests together to ensure data consistency.

Next Steps

Unbalanced Rows: handle asymmetric row groups of varying depths.
Optimistic Loading: use optimistic loading to prefetch data and improve responsiveness.
Server Row Grouping and Aggregation: handle grouped data and load group slices.
Handling Load Failures: explore how to handle failed data requests.

Data UpdatesCopy Page