UIオプション
Pivotick は、グラフの上に柔軟な UI レイヤーを提供し、ユーザーがノード、エッジ、キャンバスと対話する方法を制御できるようにします。 UI オプションを使用すると、次のことができます。
- UI の全体的なモード (フル、ビューア、静的など) を構成します。
- サイドバー とパネルをカスタマイズして、プロパティや追加情報を表示します。
- オプションのカスタム レンダラーを使用して、ノードとエッジの tooltips を定義します。
- ノード、エッジ、キャンバスのコンテキストメニューを設定します。
- filter パネルのファセットを宣言するか、データから派生させます。
- legend をキャンバスにドッキングします。これはフィルターとしても機能する色のキーで、宣言されたノード タイプによって色が説明されるときに単独で表示されます。
- オンデマンドで取得したデータから、これらのサーフェス 非同期 のいずれかを埋めます。
- 統合で使用しない機能をオフ にします。
- ライブラリ独自のテキストをユーザーの言語に置き換えます。「UI の翻訳」を参照してください。
UIモード
mode オプションは、グラフ UI の全体的な動作と対話レベルを制御します。
fullデフォルト: すべてのパネル、メニュー、およびインタラクションが有効になった完全な UI。light: 重要なインタラクションが有効になっている最小限の UI。viewer: UI パネルを表示せずに、グラフの移動 (パン、ズーム、ドラッグ) のみを許可します。static: 静的グラフ、UI パネルやインタラクションなし。グラフは読み取り専用です。
Pivotick を画像スタイルで使用するには、次を使用します。
const container = document.getElementById('graph-container')
const options = {
UI: {
mode: 'viewer'
},
}
const graph = Pivotick(container, options)他の UI コンポーネントは、それぞれの名前空間を通じて構成できます。
const options = {
UI: {
sidebar: {},
mainHeader: {},
propertiesPanel: {},
extraPanels: [],
tooltip: {},
contextMenu: {},
filter: {},
}
}full モードのコントロールサーフェス
full モードでは、クロムはモード主導のレイアウトです: 左側の ** モード レール** (選択/作成/表示/物理)、アクティブなツール パネルコンテキスト ツール パネル ポインター モード、2 つの設定フライアウト — 表示 (キャンバスの背景とスイッチ) 物理 (レイアウト + シミュレーション) — トップバー (検索、フィルター、メモ、元に戻す/やり直し)、 選択範囲 サイドバー (プロパティ、ファセット、近傍、および一括アクション行)、および 右側のビューポートレール (フィットアンドセンター、ズーム、設定、フルスクリーン)、および ミニマップ は右下隅の空き領域にあり、折りたたまれます。 キャンバスが小さすぎてスペースに余裕がない場合 (UI.minimap: false ドロップする場合)。 light モードはサイドバーとミニマップを削除します。 viewer はビューポート レールのみを保持します。 static 裸のキャンバスです。
コーナークロームからの移行
フローティング GraphControls および GraphToolbar オーバーレイが削除されました。レイアウトと 物理学は物理学フライアウト (UIManager.physicsFlyout) に移動されました — これらは 1.5.0 のビュー フライアウト (UIManager.viewFlyout)。キャンバスの背景が保持されるようになりました。 そしてグリッドスイッチ。選択/作成ツールはツール パネル (UIManager.toolPanel) に表示され、 モードレール (UIManager.modeRail)。の UI.selectionMenu オプションはなくなりました。ノードごとのアクションには contextMenu を使用してください。 複数選択アクションのサイドバーの一括アクション行。 UIManager.graphNaviationは graphNavigationに名前変更されました。 UI.modeRail オプションとその無効化された Explore / Enrich スロットが削除されました — リアル モードを登録してください 代わりにaddRailMode。を参照してください。 CHANGELOG。
レールには 4 つのモードが組み込まれていますが、保持できるモードはそれだけではありません。プラグインによってそのモードが追加されます。 addRailMode を使用して、Explore または Enrich モードを使用して、 あなたの データが構築される意味を知っています。
機能をオフにする
UI モードは、グラフが取得するクロムの量を決定します。そのクロム内のすべての機能 一度に 1 つずつオフにすることもできます。これにより、統合によってその内容が削除されます。 バックエンドまたはそのユーザーは使用できません。
機能を無効にすると、その機能にアクセスするためのすべての操作手段がなくなります。ボタン、パネル、コンテキストメニューの項目、キーボードショートカットがまとめて無効になるため、クリックやキー操作をしても何も起こらない操作手段は残りません。
const options = {
UI: {
mode: 'full',
notes: { enabled: false },
history: { enabled: false },
inspector: { enabled: false },
editors: { deletion: { enabled: false } },
},
}スイッチ
| オプション | それに付随するものは何ですか |
|---|---|
UI.topBar.enabled | 上部のストリップ、予約された高さ、コントロールが所有するショートカット (Shift+J、Shift+K、Shift+N、Mod+Z)、および任意のホストアクション。下のスイッチを使用して 1 錠を落とし、残りを保管します。 |
UI.search.enabled | 検索ピル、そのノード ピッカー、および Shift+J。 |
UI.filter.enabled | Filter Graph ピル、そのパネル、および Shift+K。 graph.queryEngine は引き続きコードからフィルターします。 |
UI.notes.enabled | メモのピルとパネル、Shift+N、メモの追加ツール、キャンバス メニューのメモの追加、N、メモのコンテキスト メニュー、および noteManager.addNote (拒否)。 |
UI.history.enabled | 元に戻す/やり直しボタン、その履歴ドロップダウン、および Mod+Z / Mod+Shift+Z。 graph.history は録音を続けます。 |
UI.inspector.enabled | ノード メニューの [プロパティの検査] エントリと I。 |
UI.notifications.enabled | 乾杯。 graph.notifier.* は、undefined を返す no-op になります。 |
UI.sidebar.enabled | サイドコラム全体とそれにかかる幅。 |
UI.propertiesPanel.enabled | サイドバーのプロパティ パネルとそのセパレータ。 |
UI.neighborsPanel.enabled | サイドバーの隣接パネルとそのセパレータ。 |
UI.viewFlyout.enabled | [レールの表示] ボタンとそのパネル。 |
UI.physicsFlyout.enabled | 物理レール ボタンとそのパネル。 |
UI.tooltip.enabled | ホバーツールチップ、ピン留めされたツールチップが含まれます。 { nodes, edges, groups } または (element, kind) => boolean も使用できます。 ツールヒント を参照してください。 |
UI.contextMenu.enabled | すべてのコンテキスト メニュー。 |
UI.navigation.enabled | ビューポート レール: フィット、ズーム、フルスクリーン。 |
UI.legend: false | キャンバスの凡例 (それ自体が派生するものを含む)。 |
UI.minimap: false | ミニマップ。 |
UI.emptyState: false | 空のキャンバス に表示されるカード。 |
UI.table: false | データドックとそのShift+T。 |
UI.pivotMode: false | ピボット レール モード (登録されているもの)。 |
書き込みパス機能は UI.editors の下に同じスイッチがあるため、読み取り専用です。 統合により、すべてのクリックを拒否するのではなく、アフォーダンスが削除されます。 nodeCreator、edgeCreator、nodeEditor、edgeEditor、deletion。
レンダラーの動作は、render: zoomEnabled でオフになります (これにも時間がかかります) レールのズーム ボタン、フィットとセンターの維持)、dragEnabled、 selectionBox.enabled (マーキー ** および** 選択 ▸ なげなわツール)、 enableNodeExpansion (シェブロン、その Enter、および折りたたまれた破線) 概要）、enableFocusMode、 interactionEnabled ですべてを一度に行えます。 simulation.enabled レイアウトを停止します ランニングから。
作成モードはそのツールに従います
レールの作成モードには、ノードの追加、エッジの追加、注記の追加、編集の 4 つのツールが含まれています。 ノード。 4 つすべてのスイッチをオフにすると、モードは C ショートカットとともにレールから外れます。 空のパネルに開くのではなく。選択は常に残ります。
上部のバーにある自分のアクション
キャンバス全体に対するアクション (保存など) は、 元に戻す/やり直しグループ。 UI.topBar.actions は検索と同じスタイルで描かれた錠剤を宣言します。 フィルターとメモなので、これらのスタイルを変更するテーマはこれらもスタイル変更します。
const options = {
UI: {
topBar: {
actions: [{
id: 'save-graph',
text: () => storedId ? 'Update graph' : 'Save as graph',
async onclick(_event, ctx) {
if (storedId) return updateGraph(storedId, ctx.graph)
const values = await ctx.promptData({
fields: [{ key: 'name', label: 'Name', type: 'text' }],
})
if (values) storedId = await createGraph(values.name, ctx.graph)
},
menu: () => storedId
? [{ text: 'Save as new graph…', onclick: saveAsNew }]
: [],
}],
},
},
}- Where.
placement: 'end'(デフォルト) は、元に戻す/やり直しの直前にピルを配置します。 グループ。'start'は左側の内蔵錠剤の後に置きます。錠剤は秩序を保つ で宣言されました。 - その内容。
text、title、visible、enabledは、次の値または関数を取ります。 グラフ。関数はデータが変更されるたびに再度読み取られます。graph.UIManager.refreshTopBar()、そしてonclickから返された約束が解決したら。 その約束が切れている間は錠剤が無効になるため、スロー セーブを 2 回開始することはできません。 - 何を取得するか。
onclick(event, ctx)は、グラフと、 ライブラリのモーダル:ctx.promptData({ fields })は値またはnullに解決されます。 キャンセルし、ctx.confirm({ body })は確認ボタンでのみtrueを解決します。ctx.refresh()はすべてのアクションを再読み込みします。 - キャレット。
menuを使用すると、錠剤は分割ボタンになります。ラベルはonclickと続き、 キャレットにより、コンテキスト メニュー と同じ行形式で行が開きます。 (サブメニューなし)。関数フォームは同じctxで渡され、毎回呼び出されます。 リフレッシュして開くたびに。行を返さない間、ピルにはキャレットがありません。逃げるか、 他の場所をクリックすると行が閉じます。 - ショートカット。
shortcutは錠剤にバッジを描きます。これはラベルのみです。 自分を縛ること。
プラグインは ctx.addTopBarAction(action) で錠剤を追加し、ディスポーザーを返します (プラグインを参照)。錠剤はストリップに従っています: viewer または static にはありません モード、およびUI.topBar.enabled: false ではなし。
空のキャンバス
ノードもメモもないグラフでは、キャンバスの中央にカードが表示されるため、ソース 描画するものが何もない場合は、ロードに失敗したグラフとして読み取られません。 「何もありません」と表示されます キャンバスはまだです」、別の言い方をしない限り、次のようになります。
const options = {
UI: {
emptyState: {
render: ({ initial, graph }) => {
const box = document.createElement('div')
box.textContent = initial ? 'Nothing is related to this record.' : 'The canvas is empty.'
const button = document.createElement('button')
button.textContent = 'Find related'
button.onclick = () => graph.UIManager.openPivotMode()
box.append(button)
return box
},
},
},
}カードはデータに従います。ノードまたはメモを追加すると削除され、最後のノードまたはメモが削除されます。 手動で、または元の摂取を元に戻すことで、それらを元に戻します。ノード フィルタはまだカウントを非表示にします: グラフは空ではなく狭くなります。
render は、カードが表示されるたびに実行されます。カードが表示されるたびに実行されるわけではありません。 initial グラフがノードを保持するまでは true であるため、キャンバス全体を空にしたアナリストは、 空のソースで語られること以外のことを語られる。返された文字列は次のようにレンダリングされます プレーンテキストであり、render は以下のフックのように async になる場合があります。
カードはクロームの表面と枠線を使用しているので、テーマに沿っています。それは、 キャンバスのジェスチャを介してパン、ズーム、キャンバス メニューが機能します。 インタラクティブなコンテンツを除く: ボタン、リンク、フォーム コントロール、または tabindex は独自のクリックを取得します。 UI.emptyState: false には何も表示されません。
非同期コンテンツ
利用側が提供するコンテンツフックは、コンテンツそのものの代わりにPromiseを返せます。対象は、サイドバーのmainHeader.render、propertiesPanel.render / nodePropertiesMap / edgePropertiesMap、neighborsPanel.render、追加パネルのtitleとrender、ツールチップのrender、renderNodeExtra、renderEdgeExtraおよびプロパティマップ、そして空のキャンバスのrenderです。
これは、ノードのデータがレコードへの 参照 である場合に存在します。 レコード自体よりも、興味深いコンテンツは HTTP 呼び出しの背後にあります。
const options = {
UI: {
tooltip: {
renderNodeExtra: async (node, { signal }) => {
const res = await fetch(`/enrich/${node.getData().uuid}`, { signal })
return renderChips(await res.json()) // an HTMLElement
},
},
},
}async を追加し、signal を転送すると、ライブラリが残りを処理します。
| プレースホルダー | 約束が保留されている間、テーマのスケルトンがスロットを占めます。 |
| スワップ | 解決時に、コンテンツがプレースホルダーを置き換えます。 |
| 古さ | スロットがなくなった後 (別のノードにカーソルを合わせ、選択を変更し、パネルを更新した後) に届く結果は、ドロップ です。解決順序に関係なく、サーフェスの最新のレンダリングのみをコミットできます。 |
| キャンセル | ctx.signal はレンダリングが置き換えられるか、グラフが破棄されると中止されるため、転送された fetch はリークされるのではなくキャンセルされます。 |
| 失敗 | 拒否された Promise は、スピナーを永久に残すのではなく、コンパクトなエラー行をレンダリングします。中止されたレンダリングは失敗ではなく、何も表示されません。 |
レンダーコンテキスト
すべてのコンテンツフックは RenderContext を受け取ります 最後の 引数として。既存の同期フックは単にそれを無視します。
render: async (element, { signal, isStale }) => {
const rows = await fetchRows(element, signal)
if (isStale()) return '' // cheap guard for non-abortable work
return renderRows(rows)
}プレースホルダーのカスタマイズ
UI.asyncContent は、保留中および失敗時に表示される内容をオーバーライドします。両方 文字列、HTMLElement、または曲面の関数を受け入れます。
const options = {
UI: {
asyncContent: {
placeholder: (surface) => surface === 'tooltip' ? 'Loading…' : mySkeleton(),
error: 'Could not load',
},
},
}surface は、'tooltip'、'properties'、'neighbors'、'mainHeader'、のいずれかです。 'extraPanel' または 'emptyState'。
同期フックは変更されません
コンテンツを直接返すと、これまでとまったく同じように動作します。同じ呼び出し、同じです。 フレーム、プレースホルダーやラッパー要素はありません。既存のものについては何もありません 統合の変更。
非同期にできないもの
2 つのグループは意図的に同期を維持します。
HeaderMapEntry.title/subtitle自動調整タイトル スロット * および* にフィードします ノード検索 (resolveNodeByName)、両方ともテキストが必要です。を使用してください ヘッダーで詳細を取得する必要がある場合は、asyncmainHeader.renderを使用します。PropertyEntry.name/value— 代わりに行をフェッチします: 非同期nodePropertiesMapは一度解決してからプレーンなエントリを返します。 すべてのセルにスピナーを置くよりも。
フレームごとのレンダラー フック (render.renderNode、renderLabel、renderCluster) および NodeStyle.html) も同期専用です。これらは描画パス内で実行されます。 ノード、ティックごと。非同期ノード decoration が必要な場合は、ノードのデータにフェッチします そして同期レンダラーにそれを読み取らせます。