データテーブル

UI.table は、キャンバスの下部から データドック を分割します: グラフのノードとエッジを並べ替え可能、選択可能なグリッドとして表示します。それは力の配置が構造的に存在するためです。人間が常に行う 3 つのこと、つまり正確な値を読み取ること、大規模に選択すること、そしてどこから始めるべきかを考えています。

意図したループは、テーブルを見つけて、キャンバスを理解して、サイドバーを読んで: 並べ替えます。ハブを特定するには、Shift キーを押しながら上位 20 をクリックし、サイドバーの操作を行ってください。一括アクション。

const options = {
    UI: { mode: 'full' },
}

必要なのはそれだけです。 full モードでは、ドックはヘッダーに折り畳まれて下部に ** 置かれます。バー**;山形をクリックするか、Shift+T を押して表を表示します。 UI.table: false それを完全に削除します。

意図的にツールバーボタンはありません。バー * は* コントロールです。トップバーはすべてキャンバスの上に何かを開きますが、ドックはすでに分割された領域です独自のシェブロンを表示します。

ドックは full モードのみです。これはサイドバーの横のグリッド行であり、他のモードでは使用できません。それほどクロムを含まないキャンバスを約束します。

テーブルはあなたが要求していない限り何も変更しません

ドックは何も変化しません。グラフを反映し、選択を決定します。隠れて、そしてサイドバーの一括アクションで固定し、非表示ノードを復元しますフィルターパネルに留まります。ドックが追加するものははるかに優れた機器です建物の選択に基づいて実行されます。

変更できる唯一のことは、キャンバス ** が** に表示する内容であり、リクエストがあった場合にのみ変更できます。グラフに適用ボタンは、列フィルターで除外された要素を非表示にします。これを押すまでは、列の絞り込みはフィルタリングではなく読み取りです。

グラフ全体をリストします

テーブルはキャンバスをミラーリングしません****。すべてのノードがリストされ、[エッジ] タブにはすべてのノードがリストされます。エッジ — 現在非表示になっているエッジを含み、先頭の Visibility 列がどこにあるかを示します。それぞれが立っています：

値	スタイリング	意味
`visible`	静かで、色あせていない	今、キャンバス上に
`filtered`	琥珀チップ	フィルタ (ノードフィルタ) によって非表示にされるか、エッジの場合はその layer がオフになります。フィルターを変更すると元に戻ります
`excluded`	レッドチップ	手動で隠されたノード。フィルタパネルの非表示ノードリストから復元します
`nested`	破線の輪郭	キャンバスが閉じたクラスター内のノード、または 1 つの端を持つエッジ: その線はクラスターに描画されます。何もフィルターをかけていませんでした。クラスターを開いて確認してください
`endpoint`	中立的な輪郭	端がフィルタリングされて取り除かれたエッジ。エッジ自体には何も行われていません

各州は色だけでなく重み、境界線も異なるため、列は次のようになります。色合いに頼る。非表示の要素の行全体も後退し、何があるかに注意を払います。実際に描いたもの。

エッジが filtered よりも優先して endpoint と読み取られるのは、それが理由です。最初に修正します: 接触しているノードが消えている間、そのレイヤーを再びオンに切り替えても、エッジを戻します。

それは意図的なものです。「23 ノードが隠されている」という主張は検査できるはずです。探している行を静かに削除するテーブルは、テーブルがないよりも悪いです。並べ替え順 Visibility フィルターが何を除去したかを正確に確認します。

クラスター内のノード

クラスターのコンテンツも、グラフ自体のノードのピアとして行を取得します。 Cluster 列には、それらの元のパス (Team B / Squad、最も外側から) が示されます。 Children 列には、各クラスターの大きさが示されています。両方の列が常に表示されます。グラフにはクラスターがあります。ヘッダーの Nested Nodes スイッチは、次の場合にこれらの行を再度取り出します。最上位レベルのみが必要であり、UI.table.nested: false はそれらをまったく提供しません。

これらは意図的にクラスターの下にインデントされるのではなく、フラットにリストされます。テーブルは存在します。キャンバスでは答えられない質問に答えるために、どのノードがハブなのか、どのノードがハブなのか、しきい値 — これは、並べ替えまたはフィルターがすべての行に均等に到達した場合にのみ機能し続けます。あツリーは兄弟のみを並べ替えることができます。

知っておく価値があるのは、ネストされたノードは このグラフでは描画されない ということです。散開星団独自の別のサブグラフをレンダリングします。そのため、次のようになります。

Visibility は、ノード上のクラスターがシャットダウンされている間、nested を読み取り、一度 visible を読み取りますそれらはすべて開いています。それは決して filtered ではありません — そこにフィルターをかけることはありません。
Degree はノードの実際のエッジをカウントします。クラスタが閉じている間、キャンバスはそれらを描画します代わりにクラスターに送信されるため、これはノードの説明ではなくノード自体のカウントです。その写真。
行をクリックするとノードが選択されるため、サイドバーにノードが表示されます。多くの場合、これが唯一の方法です。それに到達します。キャンバスは、それを表す閉じた星団を囲みます。 ダブルクリック押すたびに 1 レベルずつ、クラスター が開きます。 render.enableNodeExpansion: false では、クラスターは閉じたままになり、代わりにビューがクラスターを中心に表示されます。

並べ替えと絞り込み

並べ替えるには、列見出しをクリックします。もう一度クリックすると元に戻ります。フィルター可能な列は成長します 行を狭めるヘッダー内のコントロール — のすべての列派生セットには 1 つがあり、自分で宣言した列は要求によって 1 つを取得します。 filterable: true。

どのコントロールを取得するかは列の type に従うため、列にそれが何であるかを尋ねることができます実際に答えることができます:

`type`	制御	一致
`numberRange`	最小/最大のペア	間隔内。どちらの端も空のままにすることができます
`select` · `multiselect` · `boolean`	列が保持する値のドロップダウン	正確な値、またはセルがリストの場合はメンバーシップ
`text` · `regex` · 型なし	テキストボックス	大文字と小文字を区別しない部分文字列

ドロップダウンは、宣言されたオプションリストではなく、列自体の値から構築されるため、空に戻る選択肢は決して提供されません。 50 個の個別の値を超えるとステップ実行されますテキストボックスは別として、これほど長いドロップダウンは誰でも使用できるコントロールではありません。

行フィルターはグラフのフィルターではありません。それはあなたの読書の内容を変える：キャンバスはそのままで、Visibility コラムはその傍らで真実を報道し続けます。どちらも間違ってはいないが同意しない。絞り込みをキャンバスに押し込むことは別の作業ですおよび明示的な行為 — 以下を参照してください。

ドックのカウントには両方が反映されます。絞り込むと、40 nodes が 12 of 40 nodes になります。

グラフにフィルターを適用する

ドックのツールバーのグラフに適用 は、列フィルターが残す要素を非表示にしますアウト。これは 2 種類のフィルタリングの間の橋渡しとなります。テーブルが表示されるまで行を絞り込みます。関心のある内容をリストし、それを 1 回押すと、キャンバスに同じ内容が表示されます。

これはライブリンクではなくワンショットプッシュであり、ボタンには自分が 3 つの状態のどれであるかが表示されます。で:

ボタン	意味
`Apply to graph`、消灯	何も押し付けられません。列フィルターが実際に何かを絞り込むまで無効になります。
`Clear`、点灯	グラフはフィルタリングされており、フィルタと一致しています。を押すと元に戻ります。
`Apply to graph`、点灯	グラフは early を押してフィルターされ、フィルターが次に進みます。を押して最新の状態にします。

知っておく価値のある 2 つのプロパティは、プッシュを予測可能に保つためのものです。

正確にフィルターが除外した行 を非表示にします。「これらのみを表示」することはありません。したがって、ノードプッシュがキャンバス上に留まった後に追加されます。あなたがプッシュしたのは、ある瞬間についてのステートメントであり、常設のクエリではありません。散開星団の内部は、その列の範囲内でのみ狭くなります取り残された人々の中には彼らもいた。ネストされた行がオフになり、名前は何もありませんそれらと内部は手つかずです。
Visibility 列は ** であり、決して ** プッシュの一部ではありませんが、それでも次のように行が絞り込まれます。他にも。その値 * はグラフのフィルター状態の * であるため、それらをプッシュすると何でも非表示になります。は現在キャンバス上にありますが、それ自体に同意しません。

プッシュが実行されている間、カウントは両方の半分 (12 of 40 nodes · 28 hidden) を報告します。フィルターパネルは、テーブルから名前を付けてクリアできる行を成長させます。そのため、プッシュは、ドックを折りたたんでしまうとフィルターが見つからなくなるということはありません。

プッシュは予約キーの下に単一のフィルターとして到達します。つまり、プッシュは次のキーで構成されます。パネルと競合するのではなくフィルターパネル: そのパネル独自のフォームに設定したものは何もありませんプッシュはパネルのフィルターをクリアしません。この 2 つを組み合わせると、ノードは両方とも存続する必要があります。

コントロールがキャンバスにまったく触れることができないドックには filterGraph: false を渡します。

const options = {
    UI: { mode: 'full', table: { filterGraph: false } },
}

{#selecting}を選択

ジェスチャー	効果
行をクリックします	その要素を選択してください
Ctrl / Cmd を押しながらクリック	1 行追加または削除
Shift キーを押しながらクリック	現在リストされている順序で範囲を取得します
すべて選択	現在リストされているすべての行 - ソート後、フィルタ後
ダブルクリック	とを選択してキャンバスを中央に配置します
ホバー	キャンバス上の要素をハイライト表示します
右クリック	要素のコンテキストメニュー;複数選択の行で選択範囲が開きます。

これは両方向に機能します。キャンバス上のグループをラバーバンドで結び付けると、一致する行が表示されます。マークされてスクロールされます。選択内容はサイドバーの一括アクションで読み取られるものと同じです。追加の配線なしでループが閉じます。

非表示の行は他の行と同様に選択されます。これが非表示の行をリストするポイントです。

列

columns が宣言されていない場合、ドックは 3 つの段階でそれを解決します。

宣言 — UI.table.columns が完全に勝ちます。
あなたの側面から — それ以外の場合、あなたが宣言した場合 UI.filter.facets、それらから柱が建てられます。あなたのことを説明してください一度データを作成し、フィルターパネルとテーブルがそれについて一致します。
スキャン済み — それ以外の場合、データはカバレッジ の順序で読み取られます。密集したキーが最初に来て、まばらな末尾が右端にあります。

いずれの方法でも、グラフ対応列はデータをラップします。ノードの場合、Visibility および Label リード — ステータスガターと名前、つまり、ステータスを見つけるためにスキャンする 2 つのもの行 — クラスターを含むグラフ上で Cluster によって結合されます。ネストされた行は、どこから来たのかを示す必要があります。カウントはそれを閉じます: クラスターを含むグラフ上の Degree、および Children。カウントは最後にありますそれらはグラフの算術演算であるため、要素自体のデータであり、それらは狭い固定幅の列であるため、数桁名前が必要とする行のシェアを決して取らないでください。エッジは同じ Visibility 溝と次に、文として読みます — Source / Label / Target。

デフォルトの並べ替えは、先頭の列ではなく、Label 列です。つまり、Visibility で並べ替えます。 open では、各行が visible と表示されている間は何も表示されません。

デフォルトではすべてが表示され、グリッドはドロップされずに横にスクロールします。何でも。プロパティが多いノードでは、Columns ピッカーを使用して、必要のないものをオフにします need — これにより、ヘッダーからフィルター制御も削除されます。

派生列はフィルタリング可能です。 それらのラベル、型、配置はすべて推測されますすでに、行フィルターは同じ型から推論されます。つまり、テーブルは次のようになります。「決して構成されていない」は、まだ絞り込むことができるものです。宣言された列はその逆です。特に指定がない限り、あなたが書いたセット、filterable: false とまったく同じです。

内蔵カラム

tableColumns は、一般的なグリッドでは計算できない列を保持します。データではなくグラフ内の要素の位置:

import { Pivotick, tableColumns } from 'pivotick'

new Pivotick(el, data, {
    UI: {
        mode: 'full',
        table: {
            open: true,
            // Reference a built-in's key through the object rather than typing it —
            // the key itself is namespaced so it can never clash with a data key.
            sort: { key: tableColumns.degree.key, direction: 'desc' },
            columns: [
                tableColumns.visibility,
                { ...tableColumns.degree, label: 'Links' },
                tableColumns.label,
                { key: 'severity', label: 'Severity', type: 'numberRange', filterable: true },
            ],
        },
    },
})

label · degree · degreeIn · degreeOut · visibility · pinned · children · cluster に、エッジ用の source と target を加えます。上記のように、調整するには 1 つのクローンを作成します。

TableColumn は、FilterFacet にプレゼンテーションの追加要素がいくつか含まれています (width、align、sortable、filterable、hidden、format)、これがファセットができる理由です。そのまま列として使用できます。

エクスポート中

CSV および JSON ボタンは、あなたが見ている内容を正確に書き出します。このタブ、これらの表示される列をこの順序、この並べ替え、この行フィルターで表示します。生の値、決して列の format 出力に保存されるため、ファイルはマシン可読のままになります。

グラフ全体ではありません。コードを持っている人なら誰でもgraph.getNodes() 離れています。パス export: false ボタンを外したままにします。

埋め込みページでのダウンロード

サンドボックス化された iframe はダウンロードを完全にブロックする可能性があります。それが起こるとドックはそう言います何もしないように見えるボタンを放置するのではなく。

スケール

virtualizeAbove 行 (デフォルトでは 200) より上の行は ** ウィンドウ化**: 適合するもののみビューポートとマージンは DOM 内にありますが、スクロールバーは依然として全体を測定します。データセット。ソートでは、DOM ではなく基になる配列の順序が変更され、再構築では両方の順序が維持されます。スクロール位置と選択内容。

しきい値を下回ると、すべての行がレンダリングされるため、通常のケースは単純に保たれます。検査する。

オプション

オプション	デフォルト	何をするのか
`enabled`	`true`	`false` (または `UI.table: false`) はドックを完全に削除します
`tabs`	`['nodes', 'edges']`	テーブルの独自のビュー。内側のストリップをレンダリングしないもの
`columns` / `edgeColumns`	派生した	列を参照してください。
`open`	設定を解除する	アンセットはバーに折りたたまれて始まります。 `true` は展開を開始します。 `false` はドックをまったく残しません (`Shift+T` はまだドックを持ち込んでいます)
`collapsed`	折りたたまれた	ヘッダーバーに折り畳まれます。 `open: true`、`'auto'` は、自分で選択するまで利用可能な部屋に従います
`height`	`0.35`	ピクセル数、またはキャンバスの一部。クランプで固定されているため、キャンバスは使用可能な最小限に保たれます
`sort`	`Label`列	`{ key, direction }`
`rowActivate`	`'select'`	`'selectAndCenter'` もキャンバスを移動します。 `'none'` は行を不活性にします
`filterGraph`	`true`	オファーグラフに適用します。 `false` キャンバスをフィルタリングできないドックの場合
`nested`	`true`	クラスターの内容を独自の行としてリストします。クラスター内のノードを参照してください。
`export`	`['csv', 'json']`	`false` ボタンを非表示にします
`virtualizeAbove`	`200`	それを超える行がウィンドウ処理される行数

ドックにはテーブルより多くのものを収納できます

テーブルはドック内の 1 つのペイン であり、他に登録するものはすべて別のペインになります。

const dispose = graph.UIManager.addDockTab({
    label: 'Audit',
    render: () => myAuditPane(),        // called once, the first time the pane is opened
    toolbar: () => [clearButton],       // rebuilt on every activation
})

ドックのストリップには Table │ Audit と表示されます。切り替えにより、ボディ ** とヘッダー ** が入れ替わります。コントロール、Select all 以降、輸出と Columns はテーブルに属しており、別のペインには何も表示されません。 1 つのペインではストリップがまったくレンダリングされません。ひとつの設定で切り替え可能。

テーブルは特別なケースではありません。同じ addDockTab を通過するため、ペインは register はゲストではなく同等です。 order を配置します (等しい順序を維持します) 登録順序、およびプラグインの常として、後で登録されたペインはその後に着陸します。内蔵のもの）。返却されたディスポーザーが取り外します。

領域が 1 つあるため、高さと折り目も 1 つありますが、そこには多くのペインが含まれています。 2 つのペインがそれぞれサイズ変更可能なストリップを立てて、キャンバス上で競合することはできません。

したがって、ペインは表示されずに追加することができます。ペインはストリップ、折り畳まれたバーを結合します。が含まれており、クリックされるのを待ちます。 activateDockTab は、持参する別の行為ですドックを展開する唯一のもの。

2 つのレベルのスイッチと、見た目が異なる理由

Nodes と Edges は、ドックのタブではなく、** テーブル独自の** タブです。これらは、単一ペインなので、Audit の横にはリストされません。これにより、テーブルと別のペインは同じ種類のものです。

2 つのレベルは別々に描画されているため、隣り合っても次のように読むことができます。外側と内側:

	みたいです	クラス
`Table │ Audit`	フルハイトのタブ、アクティブな場合は下線が引かれ、ルールで閉じられます	`pvt-dock-tabs` / `pvt-dock-tab`
`Nodes │ Edges`	小さく分割された錠剤グループ	`pvt-dock-views` / `pvt-dock-view`

独自のビューを持つペインはテーブルと同じことを行います。つまり、toolbar にスイッチを描画し、ハンドルで refresh() を呼び出して本体を変更します。内部クラスはパブリックなので、 switch は、それを言い換えたものではなく、組み込みのものです。

function viewSwitch(current, pick) {
    const strip = document.createElement('div')
    strip.className = 'pvt-dock-views'
    for (const view of VIEWS) {
        const button = document.createElement('button')
        button.className = 'pvt-dock-view'
        button.textContent = view.label
        button.classList.toggle('active', view.key === current)
        button.addEventListener('click', () => pick(view.key))
        strip.appendChild(button)
    }
    return strip
}

graph.UIManager.addDockTab({
    label: 'Audit',
    toolbar: (pane) => [viewSwitch(current, (key) => { current = key; pane.refresh() })],
    render: () => renderCurrentView(),
})

どちらのレベルも、アクティブなアクセントを --pvt-theme-primary から取得するため、消費者はテーマを再着色します。テーマを使用してドックを再着色します。いずれかのクラスをオーバーライドしてさらに先に進みます。

refresh() はオプションの礼儀正しさではありません — ドックは要素 render を保持します。独自の DOM を交換したペインはドックを離れ、次に古いノードを再アタッチします。それが前に出たとき。

ライブについては、「ドックペインの追加」ギャラリーカードを参照してください。 1 つ、プラグインルートの場合は Plugins です。

`UI.dock` — 地域独自の設定

open、collapsed、height はテーブルではなく、領域を表し、UI.dock は彼らが属する場所:

// A dock holding only a plugin's pane, open on load
UI: { mode: 'full', table: false, dock: { open: true, height: 0.3 } }

UI.table は同じ 3 つの設定を今でも保持しており、常に保持しています。それらは名誉あるものであり、両方がセットされている場合は、UI.dock が勝ちます。テーブルの電源がオフになったら、UI.dock に手を伸ばします — これは、プラグインのタブによってもたらされるドックへの唯一のドアです。

プログラム制御

graph.openTable()
graph.closeTable()
graph.toggleTable()

ドックがない場合 (full または UI.table: false 以外のモード)、それぞれは何も行われません。 openTable() もテーブルのペインを最前面に移動するため、テーブルにちなんで名付けられた呼び出しが行われます。 1つを示します。それを行わずにリージョンを駆動するには:

graph.UIManager.dock?.setOpen(true)        // the region
graph.UIManager.activateDockTab('table')   // a pane, unfolding the dock if need be
graph.UIManager.getDockTabs()              // what is registered, in strip order

ドックは通常の選択 API を駆動するため、選択を読み取るものはすべて何を確認しますか構築されたテーブル:

graph.selectElements([nodeA, nodeB])   // replaces the selection
graph.addToSelection([nodeC])          // nodes only
graph.removeFromSelection([nodeA])

サイズ変更と折りたたみ

ディバイダをドックの上端に沿ってドラッグして、サイズを変更します。キャンバスは床を保ちますあなたが何を求めても、高さのないキャンバスはグラフではありません。

折りたたみ山形は、ドックをヘッダーバーに折り畳みます。放っておいて、collapsed: 'auto' その決定をユーザーに代わって行い、ドックを折りたたむと、ドックとドックの両方にとって短すぎるレイアウトになります。使えるキャンバス。初めて手で折りたたんだり展開したり、仕切りをドラッグしたりするときは、それは決定をやめてあなたに任せます。

折りたたまれたバーには引き続きそのペインに名前が付けられ、アクティブなバーのコントロールはそのペイン内に残ります。テーブルの行数、フェッチ中であることを示すピボットレビュー。これによりペインが到着しますドックが折りたたまれているときに、画面を見なくても気づかれます。をクリックするとそこのペインでドックが開きます。

ドックを展開して表示するペインは、削除されると領域を元に戻します。ペインが行き来すると、ドックは閉じたままになります。折りたたんだり、サイズを変更したり、別のペインに切り替えると、次のことが終了します。それぞれのペインは、地域について自分で決定します。そして、あなたに代わってそれを元に戻すものは何もありません。

ドックを開いてもグラフは移動しません

シミュレーションはキャンバスではなく、コンテナに対して自動的に調整されるため、クロムが開きます閉じてもレイアウトは変更できません。ドックのサイズを好きなだけ変更できます。グラフはそのまま残ります。配置し、再レイアウトすると、ドックが開いていても閉じていても同じ結果が得られます。

データテーブル ​

グラフ全体をリストします ​

クラスター内のノード ​

並べ替えと絞り込み ​

グラフにフィルターを適用する ​

{#selecting}を選択 ​

列 ​

内蔵カラム ​

エクスポート中 ​

スケール ​

オプション ​

ドックにはテーブルより多くのものを収納できます ​

2 つのレベルのスイッチと、見た目が異なる理由 ​

UI.dock — 地域独自の設定 ​

プログラム制御 ​

サイズ変更と折りたたみ ​