仕組み
グリッドはファイルやエンジンについて何も知らず、TableSource から範囲の行を読むだけです。描く重さは、表が 100 行でも 10 億行でも変わりません。
セルはキャンバスに描きます。画面いっぱいのセル(1,000 個以上)で 1 フレーム約 2 ms です。メニュー、パネル、検索のバー、「値の全体を表示」の画面は、その上に重ねた DOM の要素です。スクロールでは React を描画し直さずにキャンバスだけを描きます。React がツールバー、ステータスバー、パネルを描き直すのは、表示する内容が変わったときです。
キャンバスは色と文字の設定をグリッドのルートの CSS のカスタムプロパティから読むので、セルもほかの部分と同じように CSS で変えられます。
キャンバスの上に透明のスクロール用の要素を重ねているので、ホイール、トラックパッド、スクロールバーは OS 本来の動きのままです。ブラウザーには要素の大きさの上限があるため(Chromium で約 1,677 万 px。24 px の行では 70 万行に届きません)、ScrollAxis がスクロールの実際の位置を仮想の位置に写します。小さな移動はそのままの量だけ動かし、大きな移動と両端は比例で写します。10 億行のどの行にも、スクロールバーとキーボードで届きます。
グリッドは毎フレーム、見えている行と列を伝えます。RowCache は、足りない 256 行 × 48 列のまとまりを、見えているものから先に、続いて 1 画面先と前まで読みます。遠くへスクロールしたまとまりの要求は取り消し、上限を超えたら最も長く使っていないまとまりから捨て、失敗したまとまりは少し待ってから読み直します。エンジンは表示用に長い文字列を切ります(vastgrid-duckdb では 2,000 文字)。コピーと「値の全体を表示」では、値の全体を読みます。
DuckDB のエンジン
Section titled “DuckDB のエンジン”- 開く。 区切りのテキストと JSON は、セッションの DuckDB のファイルの中で表になります。ファイルを読み込む間は、最初の 1,000 行をプレビューから返します。Parquet はファイルのまま行の位置で読み、読み込みはありません。DuckDB が読めない文字コード(Shift_JIS・EUC-JP)は先に変換します。
- ビュー。 並べ替えと絞り込みはビューを作ります。2,000 万行までの表では並べ替えた複製を作るので、範囲の行を 2 ms で取り出せます。それより大きな表では行の順番だけを作るので、数分かかる処理が数秒で済み、一時領域も数分の 1 になります。
- 隔離。 エンジンは DuckDB に、指定したフォルダーだけを実際の場所で読ませ、その設定をあとから変えられないようにします。SQL はすべて組み立てたもので、値は必ずパラメーターで渡します。
- プロトコル。
RemoteSourceは、サーバーと小さな JSON のプロトコルを話します。再起動などでサーバーが表やビューを忘れた場合は、表を開き直し、ビューを作り直します。
これらを選んだ理由は、既存のビューワーとグリッドの調査で説明しています。