Unbalanced Rows (Tree Data)

1
"use client";
2

3
import "@1771technologies/lytenyte-pro/light-dark.css";
4
import { useMemo, useState } from "react";
5
import { Server } from "./server.js";
6
import { LastModified, SizeRenderer } from "./components.js";
7
import { Grid, useServerDataSource } from "@1771technologies/lytenyte-pro";
8
import { RowGroupCell } from "@1771technologies/lytenyte-pro/components";
9

10
const columns: Grid.Column<{ data: any }>[] = [
11
  {
12
    id: "name",
13
    name: "Name",
14
    width: 200,
15
    widthFlex: 1,
16
    cellRenderer: (p) => {
17
      return (
18
        <RowGroupCell
19
          {...p}
20
          leafLabel={(p) => {
21
            if (p.loading) return null;
22
            return (
23
              <div className="font-bold" style={{ paddingInlineStart: 18 }}>
24
                {p.data.name}
25
              </div>
26
            );
27
          }}
28
        />
29
      );
30
    },
31
  },
32
  { id: "size", name: "Size", cellRenderer: SizeRenderer },
33
  { id: "last_modified", name: "Modified", cellRenderer: LastModified },
34
  { id: "type", width: 100, name: "Ext" },
35
];
36

37
export default function ServerDataDemo() {
38
  const [expansions, setExpansions] = useState<Record<string, boolean | undefined>>({ "/Documents": true });
39
  const ds = useServerDataSource<any>({
40
    queryFn: (params) => {
41
      return Server(params.requests);
42
    },
43
    queryKey: [],
44
    rowGroupExpansions: expansions,
45
    onRowGroupExpansionChange: setExpansions,
46
    blockSize: 50,
47
  });
48

49
  const isLoading = ds.isLoading.useValue();
50

51
  return (
52
    <div className="ln-grid" style={{ height: 500 }}>
53
      <Grid
54
        rowSource={ds}
55
        columns={columns}
56
        rowGroupColumn={false}
57
        styles={useMemo(() => {
58
          return { viewport: { style: { scrollbarGutter: "stable" } } };
59
        }, [])}
60
        slotViewportOverlay={
61
          isLoading && (
62
            <div className="bg-ln-gray-20/40 absolute left-0 top-0 z-20 h-full w-full animate-pulse"></div>
63
          )
64
        }
65
      />
66
    </div>
67
  );
68
}

1
import type { Grid } from "@1771technologies/lytenyte-pro";
2
import type { ClassValue } from "clsx";
3
import clsx from "clsx";
4
import { format } from "date-fns";
5
import { twMerge } from "tailwind-merge";
6

7
export function tw(...c: ClassValue[]) {
8
  return twMerge(clsx(...c));
9
}
10

11
const formatter = new Intl.NumberFormat("en-Us", {
12
  minimumFractionDigits: 2,
13
  maximumFractionDigits: 2,
14
});
15
function formatKBtoMB(kb: number) {
16
  if (isNaN(kb) || kb < 0) return "0";
17

18
  const mb = kb / 1024;
19
  const formatted = formatter.format(mb);
20

21
  // Add commas for readability
22
  return `${Number(formatted).toLocaleString()}`;
23
}
24

25
export function LastModified({ column, row, api }: Grid.T.CellRendererParams<{ data: any }>) {
26
  if (!api.rowIsLeaf(row)) return null;
27

28
  const value = api.columnField(column, row);
29

30
  return (
31
    <div className="flex w-full items-baseline justify-end gap-1 tabular-nums">
32
      {format(value as string, "dd MMM yyyy hh:mm:ss")}
33
    </div>
34
  );
35
}
36

37
export function SizeRenderer({ column, row, api }: Grid.T.CellRendererParams<{ data: any }>) {
38
  if (!api.rowIsLeaf(row)) return null;
39

40
  const value = api.columnField(column, row);
41

42
  return (
43
    <div className="flex w-full items-baseline justify-end gap-1 tabular-nums">
44
      {formatKBtoMB(value as number)} <span className="text-xs">MB</span>
45
    </div>
46
  );
47
}

1
import type {
2
  DataRequest,
3
  DataResponse,
4
  DataResponseBranchItem,
5
  DataResponseLeafItem,
6
} from "@1771technologies/lytenyte-pro";
7
import { data } from "./data.js";
8

9
const sleep = () => new Promise((res) => setTimeout(res, 200));
10

11
export async function Server(reqs: DataRequest[]) {
12
  // Simulate latency and server work.
13
  await sleep();
14

15
  return reqs.map((c) => {
16
    let pathNode = data;
17
    for (const p of c.path) {
18
      pathNode = pathNode[p!];
19
    }
20

21
    const rows = Object.entries(pathNode);
22

23
    return {
24
      asOfTime: Date.now(),
25
      data: rows.map<DataResponseLeafItem | DataResponseBranchItem>(([name, file]) => {
26
        const id = c.path.join("/") + "/" + name;
27
        if ("kind" in file) return { kind: "leaf", id, data: { ...file, name, depth: c.path.length } };
28

29
        return {
30
          kind: "branch",
31
          childCount: Object.values(file).length,
32
          data: { name },
33
          id,
34
          key: name,
35
        };
36
      }),
37
      start: 0,
38
      end: rows.length,
39
      kind: "center",
40
      path: c.path,
41
      size: rows.length,
42
    } satisfies DataResponse;
43
  });
44
}