Server Row Sorting

1
"use client";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import {
4
  Grid,
5
  useServerDataSource,
6
  type UseServerDataSourceParams,
7
} from "@1771technologies/lytenyte-pro";
8

9
import { useCallback, useMemo, useState } from "react";
10
import { Server } from "./server.js";
11
import type { MovieData } from "./data";
12
import {
13
  GenreRenderer,
14
  Header,
15
  LinkRenderer,
16
  NameCellRenderer,
17
  RatingRenderer,
18
  ReleasedRenderer,
19
  TypeRenderer,
20
} from "./components.js";
21

22
export interface GridSpec {
23
  readonly data: MovieData;
24
  readonly column: { sort?: "asc" | "desc" };
25
  readonly api: {
26
    sortColumn: (id: string, dir: "asc" | "desc" | null) => void;
27
  };
28
}
29

30
const initialColumns: Grid.Column<GridSpec>[] = [
31
  {
32
    id: "#",
33
    name: "",
34
    width: 30,
35
    field: "link",
36
    widthMin: 30,
37
    widthMax: 30,
38
    cellRenderer: LinkRenderer,
39
    headerRenderer: () => <div></div>,
40
  },
41
  { id: "name", name: "Title", width: 250, widthFlex: 1, cellRenderer: NameCellRenderer },
42
  { id: "released_at", name: "Released", width: 120, cellRenderer: ReleasedRenderer },
43
  { id: "genre", name: "Genre", cellRenderer: GenreRenderer },
44
  { id: "type", name: "Type", width: 120, cellRenderer: TypeRenderer },
45
  { id: "imdb_rating", name: "Rating", width: 120, cellRenderer: RatingRenderer },
46
];
47

48
const base: Grid.ColumnBase<GridSpec> = { headerRenderer: Header };
49

50
export default function ServerDataDemo() {
51
  const [columns, setColumns] = useState(initialColumns);
52
  const queryFn: UseServerDataSourceParams<
53
    GridSpec["data"],
54
    [{ columnId: string; isDescending: boolean } | null]
55
  >["queryFn"] = useCallback((params) => {
56
    return Server(params.requests, params.queryKey[0]);
57
  }, []);
58

59
  const sort = useMemo(() => {
60
    const columnWithSort = columns.find((x) => x.sort);
61
    if (!columnWithSort) return null;
62

63
    return { columnId: columnWithSort.id, isDescending: columnWithSort.sort === "desc" };
64
  }, [columns]);
65

66
  const ds = useServerDataSource({
67
    queryFn,
68
    queryKey: [sort] as const,
69
    blockSize: 50,
70
  });
71

72
  const isLoading = ds.isLoading.useValue();
73

74
  const apiExtension = useMemo<GridSpec["api"]>(() => {
75
    return {
76
      sortColumn: (id, dir) => {
77
        setColumns((prev) => {
78
          const next = prev.map((x) => {
79
            // Remove any existing sort
80
            if (x.sort && x.id !== id) {
81
              const next = { ...x };
82
              delete next.sort;
83
              return next;
84
            }
85
            // Apply our new sort
86
            if (x.id === id) {
87
              const next = { ...x };
88
              if (dir == null) delete next.sort;
89
              else next.sort = dir;
90

91
              return next;
92
            }
93
            return x;
94
          });
95
          return next;
96
        });
97
      },
98
    };
99
  }, []);
100

101
  return (
102
    <div className="ln-grid" style={{ height: 500 }}>
103
      <Grid
104
        apiExtension={apiExtension}
105
        rowSource={ds}
106
        columns={columns}
107
        columnBase={base}
108
        styles={useMemo(() => {
109
          return { viewport: { style: { scrollbarGutter: "stable" } } };
110
        }, [])}
111
        slotRowsOverlay={
112
          isLoading && (
113
            <div className="bg-ln-gray-20/40 absolute left-0 top-0 h-full w-full animate-pulse"></div>
114
          )
115
        }
116
        events={{
117
          headerCell: {
118
            keyDown: ({ event: ev, column }) => {
119
              if (ev.key === "Enter") {
120
                const nextSort = column.sort === "asc" ? null : column.sort === "desc" ? "asc" : "desc";
121
                apiExtension.sortColumn(column.id, nextSort);
122
              }
123
            },
124
          },
125
        }}
126
      />
127
    </div>
128
  );
129
}

1
import { format } from "date-fns";
2
import type { JSX } from "react";
3
import { Rating, ThinRoundedStar } from "@smastrom/react-rating";
4
import "@smastrom/react-rating/style.css";
5
import { ArrowDownIcon, ArrowUpIcon, Link1Icon } from "@radix-ui/react-icons";
6
import type { Grid } from "@1771technologies/lytenyte-pro";
7
import type { GridSpec } from "./demo";
8

9
function SkeletonLoading() {
10
  return (
11
    <div className="h-full w-full p-2">
12
      <div className="bg-ln-gray-20 h-full w-full animate-pulse rounded-xl"></div>
13
    </div>
14
  );
15
}
16

17
export const NameCellRenderer = (params: Grid.T.CellRendererParams<GridSpec>) => {
18
  if (params.row.loading && !params.row.data) return <SkeletonLoading />;
19

20
  const field = params.api.columnField(params.column, params.row) as string;
21

22
  return <div className="overflow-hidden text-ellipsis">{field}</div>;
23
};
24

25
export const ReleasedRenderer = (params: Grid.T.CellRendererParams<GridSpec>) => {
26
  if (params.row.loading && !params.row.data) return <SkeletonLoading />;
27
  const field = params.api.columnField(params.column, params.row) as string;
28

29
  const formatted = field ? format(field, "dd MMM yyyy") : "-";
30

31
  return <div>{formatted}</div>;
32
};
33

34
export const GenreRenderer = (params: Grid.T.CellRendererParams<GridSpec>) => {
35
  if (params.row.loading && !params.row.data) return <SkeletonLoading />;
36
  const field = params.api.columnField(params.column, params.row) as string;
37

38
  const splits = field ? field.split(",") : [];
39

40
  return (
41
    <div className="flex h-full w-full items-center gap-1">
42
      {splits.map((c) => {
43
        return (
44
          <div
45
            className="border-(--primary-200) text-(--primary-700) dark:text-(--primary-500) bg-(--primary-200)/20 rounded border p-1 px-2 text-xs"
46
            key={c}
47
          >
48
            {c}
49
          </div>
50
        );
51
      })}
52
    </div>
53
  );
54
};
55

56
const FilmRealIcon = (props: JSX.IntrinsicElements["svg"]) => {
57
  return (
58
    <svg
59
      xmlns="http://www.w3.org/2000/svg"
60
      width="20"
61
      height="20"
62
      fill="currentcolor"
63
      viewBox="0 0 256 256"
64
      {...props}
65
    >
66
      <path d="M232,216H183.36A103.95,103.95,0,1,0,128,232H232a8,8,0,0,0,0-16ZM40,128a88,88,0,1,1,88,88A88.1,88.1,0,0,1,40,128Zm88-24a24,24,0,1,0-24-24A24,24,0,0,0,128,104Zm0-32a8,8,0,1,1-8,8A8,8,0,0,1,128,72Zm24,104a24,24,0,1,0-24,24A24,24,0,0,0,152,176Zm-32,0a8,8,0,1,1,8,8A8,8,0,0,1,120,176Zm56-24a24,24,0,1,0-24-24A24,24,0,0,0,176,152Zm0-32a8,8,0,1,1-8,8A8,8,0,0,1,176,120ZM80,104a24,24,0,1,0,24,24A24,24,0,0,0,80,104Zm0,32a8,8,0,1,1,8-8A8,8,0,0,1,80,136Z"></path>
67
    </svg>
68
  );
69
};
70

71
const MonitorPlayIcon = (props: JSX.IntrinsicElements["svg"]) => {
72
  return (
73
    <svg
74
      xmlns="http://www.w3.org/2000/svg"
75
      width="20"
76
      height="20"
77
      fill="currentcolor"
78
      viewBox="0 0 256 256"
79
      {...props}
80
    >
81
      <path d="M208,40H48A24,24,0,0,0,24,64V176a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V64A24,24,0,0,0,208,40Zm8,136a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8Zm-48,48a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,224Zm-3.56-110.66-48-32A8,8,0,0,0,104,88v64a8,8,0,0,0,12.44,6.66l48-32a8,8,0,0,0,0-13.32ZM120,137.05V103l25.58,17Z"></path>
82
    </svg>
83
  );
84
};
85

86
export const TypeRenderer = (params: Grid.T.CellRendererParams<GridSpec>) => {
87
  if (params.row.loading && !params.row.data) return <SkeletonLoading />;
88
  const field = params.api.columnField(params.column, params.row) as string;
89

90
  const isMovie = field === "Movie";
91
  const Icon = isMovie ? FilmRealIcon : MonitorPlayIcon;
92

93
  return (
94
    <div className="flex h-full w-full items-center gap-2">
95
      <span className={isMovie ? "text-(--primary-500)" : "text-ln-primary-50"}>
96
        <Icon />
97
      </span>
98
      <span>{field}</span>
99
    </div>
100
  );
101
};
102

103
export const RatingRenderer = (params: Grid.T.CellRendererParams<GridSpec>) => {
104
  if (params.row.loading && !params.row.data) return <SkeletonLoading />;
105
  const field = params.api.columnField(params.column, params.row) as string;
106
  const rating = field ? Number.parseFloat(field.split("/")[0]) : null;
107
  if (rating == null || Number.isNaN(rating)) return "-";
108

109
  return (
110
    <div className="flex h-full w-full items-center">
111
      <Rating
112
        style={{ maxWidth: 100 }}
113
        halfFillMode="svg"
114
        value={Math.round(rating / 2)}
115
        itemStyles={{
116
          activeFillColor: "hsla(173, 78%, 34%, 1)",
117
          itemShapes: ThinRoundedStar,
118
          inactiveFillColor: "transparent",
119
          inactiveBoxBorderColor: "transparent",
120
          inactiveBoxColor: "transparent",
121
          inactiveStrokeColor: "transparent",
122
        }}
123
        readOnly
124
      />
125
    </div>
126
  );
127
};
128

129
export const LinkRenderer = (params: Grid.T.CellRendererParams<GridSpec>) => {
130
  if (params.row.loading && !params.row.data) return <SkeletonLoading />;
131
  const field = params.api.columnField(params.column, params.row) as string;
132

133
  return (
134
    <a href={field} className="text-(--primary-500)">
135
      <Link1Icon />
136
    </a>
137
  );
138
};
139

140
export function Header({ api, column }: Grid.T.HeaderParams<GridSpec>) {
141
  return (
142
    <div
143
      className="group relative flex h-full w-full cursor-pointer items-center px-1 text-sm transition-colors"
144
      onClick={() => {
145
        const nextSort = column.sort === "asc" ? null : column.sort === "desc" ? "asc" : "desc";
146
        api.sortColumn(column.id, nextSort);
147
      }}
148
    >
149
      <div className="sort-button flex w-full items-center justify-between rounded px-1 py-1 transition-colors">
150
        {column.name ?? column.id}
151

152
        {column.sort === "asc" && <ArrowUpIcon className="text-ln-text-dark size-4" />}
153
        {column.sort === "desc" && <ArrowDownIcon className="text-ln-text-dark size-4" />}
154
      </div>
155
    </div>
156
  );
157
}

1
import type { DataRequest, DataResponse } from "@1771technologies/lytenyte-pro";
2
import type { MovieData } from "./data";
3
import { data as rawData } from "./data.js";
4

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

7
export async function Server(
8
  reqs: DataRequest[],
9
  sortModel: { columnId: string; isDescending: boolean } | null,
10
) {
11
  // Simulate latency and server work.
12
  await sleep();
13

14
  let data = rawData;
15

16
  if (sortModel) {
17
    data = rawData.toSorted((l, r) => {
18
      const id = sortModel.columnId as keyof MovieData;
19

20
      const leftValue = l[id];
21
      const rightValue = r[id];
22

23
      // Check null states before moving on to checking sort values
24
      if (!leftValue && !rightValue) return 0;
25
      else if (leftValue && !rightValue) return -1;
26
      else if (!leftValue && rightValue) return 1;
27

28
      let val = 0;
29
      if (id === "link" || id === "name" || id === "genre" || id === "type") {
30
        val = leftValue.localeCompare(rightValue);
31
      } else if (id === "released_at") {
32
        if (!leftValue && !rightValue) val = 0;
33
        else if (leftValue && !rightValue) val = -1;
34
        else if (!leftValue && rightValue) val = 1;
35
        else {
36
          const leftDate = new Date(leftValue);
37
          const rightDate = new Date(rightValue);
38

39
          if (leftDate < rightDate) val = -1;
40
          else if (leftDate > rightDate) val = 1;
41
          else val = 0;
42
        }
43
      } else if (id === "imdb_rating") {
44
        const left = Number.parseFloat(leftValue.split("/")[0]);
45
        const right = Number.parseFloat(rightValue.split("/")[0]);
46

47
        val = left - right;
48
      }
49

50
      if (val !== 0) return sortModel.isDescending ? -val : val;
51

52
      return val;
53
    });
54
  }
55

56
  return reqs.map((c) => {
57
    return {
58
      asOfTime: Date.now(),
59
      data: data.slice(c.start, c.end).map((x) => {
60
        return {
61
          kind: "leaf",
62
          id: x.uniq_id,
63
          data: x,
64
        };
65
      }),
66
      start: c.start,
67
      end: c.end,
68
      kind: "center",
69
      path: c.path,
70
      size: data.length,
71
    } satisfies DataResponse;
72
  });
73
}