8 APEXグラフ・ビジュアライゼーション・プラグインを使用したSQLグラフ問合せの視覚化

Oracle Application Express (APEX)グラフ・ビジュアライゼーション・プラグインを使用すると、APEXアプリケーションでSQLプロパティ・グラフを視覚化することやそれとやり取りすることができます。

次のトピックでは、このプラグインについて詳しく説明します。

• APEXグラフ・ビジュアライゼーション・プラグインについて
  APEXグラフ・ビジュアライゼーション・プラグインでは、APEXアプリケーションでのグラフ・ビジュアライゼーションをサポートする、Javaスクリプト・ライブラリが統合されます。
• APEXグラフ・ビジュアライゼーション・プラグインの概要
  この項は、APEXアプリケーションでグラフ・ビジュアライゼーション・プラグインを初めて使用する場合に役立ちます。
• APEXグラフ・ビジュアライゼーション・プラグインの属性の構成
  APEXアプリケーションでグラフ・ビジュアライゼーション・プラグインの属性を使用してグラフ・ビジュアライゼーションをカスタマイズする方法を説明します。

8.1 APEXグラフ・ビジュアライゼーション・プラグインについて

APEXグラフ・ビジュアライゼーション・プラグインでは、APEXアプリケーションでのグラフ・ビジュアライゼーションをサポートする、Javaスクリプト・ライブラリが統合されます。

詳細は、プロパティ・グラフ・ビジュアライゼーションのGraph JavaScript APIリファレンスを参照してください。

このプラグインでは、主に次のことが可能です。

• データベース内のグラフ・データからSQLプロパティ・グラフ問合せを視覚化します。
• グラフの頂点とエッジを調べます。これらのグラフ要素を個別に、またはグループ単位で選択し視覚化することもできます。
• グラフ・レイアウトの変更、選択した頂点のグループ化またはグループ化解除、選択した頂点またはエッジの削除などの様々な操作を実行することで、グラフ・ビジュアライゼーションとやり取りします。
• サイズ、色、アイコン、ラベル値などのスタイル設定を構成することで、グラフ内の頂点とエッジのスタイルを設定します。
• グラフの発展を経時的に視覚化し調査します。

次の図では、このプラグインを使用したAPEXアプリケーションでのグラフ・ビジュアライゼーションの例を示します。

図apex_graphviz_plugin.pngの説明

8.2 APEXグラフ・ビジュアライゼーション・プラグインの概要

この項は、APEXアプリケーションでグラフ・ビジュアライゼーション・プラグインを初めて使用する場合に役立ちます。

使用を開始する前に、APEXワークスペースが次の要件を満たしていることを確認してください:

• このプラグインのインポート先となるターゲット・アプリケーションが存在すること。
• ビジュアライゼーションに使用するSQLプロパティ・グラフがデフォルトのデータベース・スキーマに存在すること。

  SQLワークショップ・コンポーネント内のコマンド・エディタを使用すると、CREATE PROPERTY GRAPH DDL文でSQLプロパティ・グラフを作成できます(コマンド・エディタの使用を参照)。

1. Oracle APEX GitHubリポジトリからグラフ・ビジュアライゼーション(プレビュー)プラグインをダウンロードします。
2. 自分のAPEXワークスペースにサインインします(ワークスペースへのサインインを参照)。
3. ダウンロードしたプラグイン・スクリプト(region_type_plugin_graphviz.sql)ファイルをターゲットAPEXアプリケーションにインポートします(プラグインのインポートを参照)。
   このプラグインでは入力としてJSON形式のSQLグラフ問合せのみが受け入れられることを覚えておいてください。これは、ORA_SQLGRAPH_TO_JSON PL/SQL関数によってサポートされます。
4. APEXワークスペースにORA_SQLGRAPH_TO_JSON関数を作成します。
   1. Oracle APEXプラグインページでグラフ・ビジュアライゼーション(プレビュー)をクリックします。
   2. /optional-23c-onlyフォルダからgvt_sqlgraph_to_json.sqlファイルをダウンロードします。
   3. APEXワークスペースでgvt_sqlgraph_to_json.SQLスクリプトをアップロードし実行します(SQLスクリプトのアップロードを参照)。
   この手順により、データベースにORA_SQLGRAPH_TO_JSON関数が作成されます。ORA_SQLGRAPH_TO_JSON関数では入力としてCURSORのみが受け入れられることに注意してください。したがって、ヘルパー関数を使用してSQLグラフ問合せをCURSORに提供する必要があります。
5. SQLグラフ問合せにCURSORを提供するためのヘルパー関数(SQLコマンドの実行を参照)を作成し、その後、ORA_SQLGRAPH_TO_JSON関数からJSON出力を取得します。
   たとえば:

   CREATE OR REPLACE FUNCTION bank_sqlgraph_json (
     QUERY VARCHAR2
   ) RETURN CLOB
     AUTHID CURRENT_USER IS
     INCUR    SYS_REFCURSOR;
     L_CUR    NUMBER;
     RETVALUE CLOB;
   BEGIN
     OPEN INCUR FOR QUERY;
     L_CUR := DBMS_SQL.TO_CURSOR_NUMBER(INCUR);
     RETVALUE := ORA_SQLGRAPH_TO_JSON(L_CUR);
     DBMS_SQL.CLOSE_CURSOR(L_CUR);
     RETURN RETVALUE;
   END;

6. アプリケーション・ページにこのプラグインを実装して様々なグラフ・ビジュアライゼーションを実行します。

   次の基本的な例では、グラフ・ビジュアライゼーション・プラグインを使用してデータベース内にあるグラフを視覚化する手順を説明します。

   1. ページ・デザイナでアプリケーション・ページを開きます。
   2. ページ・デザイナの左ペインで「レンダリング」タブを選択します。
   3. 既存のコンポーネントを右クリックし、新しいリージョン・コンポーネントを追加します。
   4. 新しいリージョンを選択し、ページ・デザイナの右ペインにある「プロパティ・エディタ」の「リージョン」タブで次の属性を構成します。
      1. 識別の「タイトル」を入力します。
      2. 識別の「タイプ」としてグラフ・ビジュアライゼーション(プレビュー)を選択します。
      3. ソースの「場所」として「ローカル・データベース」を選択します。
      4. 「タイプ」として「SQL問合せ」を選択します。
      5. グラフ・データを取得するSQLグラフ問合せを埋め込みます。

         たとえば、次の例でのSQLグラフ問合せは、前の手順で作成したbank_sqlgraph_jsonヘルパー関数への入力として提供されます。

         SELECT bank_sqlgraph_json('SELECT id_a, id_e, id_b FROM GRAPH_TABLE (bank_sql_pg
           MATCH (a IS accounts) -[e IS transfers]-> (b IS accounts)
             WHERE a.id = 816
             COLUMNS (vertex_id(a) AS id_a, edge_id(e) AS id_e, vertex_id(b) AS id_b)
           )'
         ) AS result_column FROM DUAL;

         なお、この関数の後に列の別名を指定する必要があります。

   5. アプリケーション・ページを実行して、このプラグインによってレンダリングされたグラフを視覚化します。

      図8-1 APEXアプリケーションでのSQLグラフ問合せの視覚化

      
      「図8-1 APEXアプリケーションでのSQLグラフ問合せの視覚化」の説明
7. オプションで、Sample Graph VisualizationsアプリケーションをOracle APEX GitHubリポジトリからインポートして実行できます。
   詳細は、「APEXでのSample Graph Visualizationsアプリケーションのインポート」を参照してください。

• APEXでのSample Graph Visualizationsアプリケーションのインポート
  Sample Graph Visualizationsアプリケーションでは、グラフ・ビジュアライゼーション・プラグインの使用例を実際に確認できます。
• ページ区切りを使用したグラフ・ビジュアライゼーション
  ORA_SQLGRAPH_TO_JSON関数を使用している場合はページ区切りを実装できます。

8.2.1 APEXでのSample Graph Visualizationsアプリケーションのインポート

Sample Graph Visualizationsアプリケーションでは、グラフ・ビジュアライゼーション・プラグインの使用例を実際に確認できます。

次の手順を実行してSample Graph Visualizationsアプリケーションをインポートします。

1. Sample Graph VisualizationsアプリケーションをOracle APEX GitHubリポジトリからダウンロードします。
2. アプリケーションのインポートで示した手順に従って、ダウンロードしたsample-graph-visualizations.zipをAPEXインスタンスにインポートします。
   このサンプル・アプリケーションは、インストールした後に直接実行できます。

   図8-2 Sample Graph Visualizationのホーム・ページ

   
   「図8-2 Sample Graph Visualizationのホーム・ページ」の説明

   また、このサンプル・アプリケーションにはセキュアなHTTPS接続が必要であることに注意してください。セキュアな接続を無効にする場合は、次の手順を実行します。

   注意:

   本番デプロイメントでセキュアな接続を無効にすることはお薦めしません。

   1. アプリケーション・ビルダーでサンプル・アプリケーションのホームページに移動します。
   2. 共有コンポーネントをクリックします。
   3. 「セキュリティ」で「認証スキーム」をクリックします。
   4. 「現行」認証スキームをクリックします。
   5. セッション共有タブをクリックし、「セキュア」スイッチをオフにします。
   6. 「変更の適用」をクリックしてから、アプリケーションを実行します。

ORA_SQLGRAPH_TO_JSON関数(前の図で強調表示されている)を使用してSQLプロパティ・グラフ問合せのビジュアライゼーションを表示するには、次の手順をさらに実行する必要があります。

3. ORA_SQLGRAPH_TO_JSON関数がAPEXワークスペースにまだ追加されていない場合は、その関数を作成します。
   1. Oracle APEXプラグインページでグラフ・ビジュアライゼーション(プレビュー)をクリックします。
   2. /optional-23c-onlyフォルダからgvt_sqlgraph_to_json.sqlファイルをダウンロードします。
   3. APEXワークスペースでgvt_sqlgraph_to_json.SQLスクリプトをアップロードし実行します(SQLスクリプトのアップロードを参照)。
4. サンプル・アプリケーションによって使用されるSQLプロパティ・グラフを作成します。
   SQLワークショップ・コンポーネント内のコマンド・エディタを使用して、次のCREATE PROPERTY GRAPH DDL文を実行します。

   CREATE PROPERTY GRAPH EBA_SAMPLE_GRAPH
     VERTEX TABLES (
       eba_graphviz_countries
         KEY ( country_id )
         LABEL country PROPERTIES ( country_id, country_name, region_id ),
       eba_graphviz_departments
         KEY ( department_id )
         LABEL department PROPERTIES ( department_id, department_name, location_id, manager_id ),
       eba_graphviz_locations
         KEY ( location_id )
         LABEL location PROPERTIES ( city, country_id, location_id, postal_code, state_province, street_address ),
       eba_graphviz_job_history
         KEY ( employee_id, end_date, job_id, start_date )
         PROPERTIES ( department_id, employee_id, end_date, job_id, start_date ),
       eba_graphviz_jobs
         KEY ( job_id )
         LABEL job PROPERTIES ( job_id, job_title, max_salary, min_salary ),
       eba_graphviz_regions
         KEY ( region_id )
         LABEL region PROPERTIES ( region_id, region_name ),
       eba_graphviz_employees
         KEY ( employee_id )
         LABEL employee PROPERTIES ( commission_pct, department_id, email, employee_id, first_name, hire_date, job_id, last_name, manager_id, phone_number, salary )
     )
     EDGE TABLES (
       eba_graphviz_countries AS country_located_in
         SOURCE KEY ( country_id ) REFERENCES eba_graphviz_countries (country_id)
         DESTINATION KEY ( region_id ) REFERENCES eba_graphviz_regions (region_id)
         NO PROPERTIES,
       eba_graphviz_departments AS department_located_in
         SOURCE KEY ( department_id ) REFERENCES eba_graphviz_departments (department_id)
         DESTINATION KEY ( location_id ) REFERENCES eba_graphviz_locations ( location_id )
         NO PROPERTIES,
       eba_graphviz_locations AS location_located_in
         SOURCE KEY ( location_id ) REFERENCES eba_graphviz_locations ( location_id )
         DESTINATION KEY ( country_id ) REFERENCES eba_graphviz_countries ( country_id )
         NO PROPERTIES,
       eba_graphviz_employees AS works_as
         SOURCE KEY ( employee_id ) REFERENCES eba_graphviz_employees ( employee_id )
         DESTINATION KEY ( job_id ) REFERENCES eba_graphviz_jobs ( job_id )
         NO PROPERTIES,
       eba_graphviz_employees AS works_at
         SOURCE KEY ( employee_id ) REFERENCES eba_graphviz_employees  ( employee_id ) 
         DESTINATION KEY ( department_id ) REFERENCES eba_graphviz_departments ( department_id ) 
         NO PROPERTIES,
       eba_graphviz_employees AS works_for
         SOURCE KEY ( employee_id ) REFERENCES eba_graphviz_employees ( employee_id )
         DESTINATION KEY ( manager_id ) REFERENCES eba_graphviz_employees  ( employee_id )
         NO PROPERTIES,
       eba_graphviz_job_history AS for_job KEY ( employee_id, start_date )
         SOURCE KEY ( employee_id, start_date ) REFERENCES eba_graphviz_job_history ( employee_id, start_date )
         DESTINATION KEY ( job_id ) REFERENCES eba_graphviz_jobs ( job_id )
         NO PROPERTIES,
       eba_graphviz_job_history AS for_department KEY ( employee_id, start_date )
         SOURCE KEY ( employee_id, start_date ) REFERENCES eba_graphviz_job_history ( employee_id, start_date )
         DESTINATION KEY ( department_id ) REFERENCES eba_graphviz_departments ( department_id )
         NO PROPERTIES,
       eba_graphviz_job_history AS for_employee KEY ( employee_id, start_date )
         SOURCE KEY ( employee_id, start_date ) REFERENCES eba_graphviz_job_history ( employee_id, start_date ) 
         DESTINATION KEY ( employee_id ) REFERENCES eba_graphviz_employees  ( employee_id )
         NO PROPERTIES
     )

5. SQLグラフ問合せにCURSORを提供するためにサンプル・アプリケーションで使用する、次のヘルパー関数(SQLコマンドの実行を参照)を作成します。

   CREATE OR REPLACE FUNCTION CUST_SQLGRAPH_JSON (
     QUERY VARCHAR2
   ) RETURN CLOB
     AUTHID CURRENT_USER IS
     INCUR    SYS_REFCURSOR;
     L_CUR    NUMBER;
     RETVALUE CLOB;
   BEGIN
     OPEN INCUR FOR QUERY;
     L_CUR := DBMS_SQL.TO_CURSOR_NUMBER(INCUR);
     RETVALUE := ORA_SQLGRAPH_TO_JSON(L_CUR);
     DBMS_SQL.CLOSE_CURSOR(L_CUR);
     RETURN RETVALUE;
   END;

6. アプリケーション・ビルダーに移動し、サンプル・アプリケーションのホームページからページ・デザイナ内のORA_SQLGRAPH_TO_JSON問合せページを開きます。
   1. ページ・デザイナの左ペインにある「レンダリング」タブでORA_SQLGRAPH_TO_JSON関数を使用するグラフコンポーネントを選択します。
   2. ページ・デザイナ(プロパティ・エディタ)の右ペインにある「リージョン」タブの「ソース」で、そのSQL問合せ(CUST_SQLGRAPH_JSONヘルパー関数を使用)をコメント解除します。

      また、次に示すように、「SQL問合せ」入力に1つの問合せのみが含まれていることを確認します。

      SELECT CUST_SQLGRAPH_JSON('SELECT employee, e, manager
          FROM GRAPH_TABLE ( EBA_SAMPLE_GRAPH
          MATCH (worker is employee) -[w is works_for]-> (boss is employee)
          COLUMNS (vertex_id(worker) AS employee, edge_id(w) AS e, vertex_id(boss) AS manager )
      )') as result_column FROM DUAL;

   3. 「保存」をクリックし、アプリケーション・ページを実行して、このプラグインによってレンダリングされたSQLグラフ問合せのビジュアライゼーションを表示します。

8.2.2 ページ区切りを使用したグラフ・ビジュアライゼーション

ORA_SQLGRAPH_TO_JSON関数を使用している場合はページ区切りを実装できます。

「APEXグラフ・ビジュアライゼーション・プラグインの概要」内の手順で、APEXアプリケーションでグラフ・ビジュアライゼーション・プラグインを設定する方法が示されています。ただし、ORA_SQLGRAPH_TO_JSON関数でのページ区切りを使用するには、次のことを確認する必要があります。

• APEXアプリケーション内のグラフ・ビジュアライゼーション・コンポーネントについて、「プロパティ・エディタ」の「属性」タブでSQL問合せでページ区切りをサポートする設定をオンにします。
• 次のコード例で示すように、このヘルパー関数にpage_startパラメータとpage_sizeパラメータを追加します。

  CREATE OR REPLACE FUNCTION bank_sqlgraph_json (
    QUERY VARCHAR2,
    PAGE_START NUMBER DEFAULT -1,
    PAGE_SIZE NUMBER DEFAULT -1
    ) RETURN CLOB
    AUTHID CURRENT_USER IS
    INCUR    SYS_REFCURSOR;
    L_CUR    NUMBER;
    RETVALUE CLOB;
  BEGIN
    OPEN INCUR FOR QUERY;
    L_CUR := DBMS_SQL.TO_CURSOR_NUMBER(INCUR);
    RETVALUE := ORA_SQLGRAPH_TO_JSON(L_CUR, PAGE_START, PAGE_SIZE);
    DBMS_SQL.CLOSE_CURSOR(L_CUR);
    RETURN RETVALUE;
  END;

• 「プロパティ・エディタ」の「リージョン」タブにある「SQL問合せ」入力でこのヘルパー関数をコールするときに、変数をpage_startとpage_sizeにバインドします。

  SELECT bank_sqlgraph_json('SELECT id_a, id_e, id_b FROM GRAPH_TABLE (bank_sql_pg
    MATCH (a IS accounts) -[e IS transfers]-> (b IS accounts)
      WHERE a.id = 816
      COLUMNS (vertex_id(a) AS id_a, edge_id(e) AS id_e, vertex_id(b) AS id_b)
    )',
    :page_start,
    :page_size
  ) AS result_column FROM DUAL;

  なお、page_start値は自動的に設定されます。「プロパティ・エディタ」の「属性」タブで、page_sizeの値を設定できます。

8.3 APEXグラフ・ビジュアライゼーション・プラグインの属性の構成

APEXアプリケーションでグラフ・ビジュアライゼーション・プラグインの属性を使用してグラフ・ビジュアライゼーションをカスタマイズする方法を説明します。

ページ・デザイナの右ペインにある「属性」タブ(プロパティ・エディタ)で、このプラグイン・コンポーネントの属性を構成できます。

図apex_plugin_attr.pngの説明

このプラグインの属性のインタフェース・マッピングについては、プロパティ・グラフ・ビジュアライゼーションのGraph JavaScript APIリファレンスのインタフェースページを参照してください。

属性は、次のパネルでそのスコープに従ってグループ化されています。

設定

属性	説明
ページ・サイズ	ページごとに表示する、頂点およびエッジの数を指定します。
設定	グラフ設定をJSON形式で指定します。詳細は、「「設定」」を参照してください。
SQL問合せでページ区切りをサポートする	paginateインタフェースを実装している場合は、このトグルをオンにします。 詳細は、「ページ区切りを使用したグラフ・ビジュアライゼーション」を参照してください。

外観

属性	説明
レイアウト	グラフのレイアウトを指定します。
エッジのグループ化	このトグルをオンにするとエッジがグループ化されます。
頂点ラベル	頂点ラベルに使用するプロパティを指定します。
エッジ・ラベル	エッジ・ラベルに使用するプロパティを指定します。
ラベルの最大長	ラベルの最大長を指定します。
モードの表示	このチェック・ボックスを選択すると、次のオプションを含むモード・パネルが表示されます。 選択: 画面に合せる Stickyモードへの切替え
探索の表示	このチェック・ボックスを選択すると、次のグラフ探索アクションが表示されます。 削除 - 選択した頂点を削除する グループ化 - 選択した頂点をグループ化する グループ化解除 - 選択した頂点のグループ化を解除する 最後の操作の取消し 最後の操作の再実行 ビジュアライゼーションをそのデフォルト状態にリセットする
スタイル	スタイル構成をJSON形式で指定します。詳細は、「スタイル」を参照してください。

コールバック

属性	説明
拡張	グラフ・ビジュアライゼーション内の選択した頂点を拡張する方法の詳細は、「拡張」を参照してください。
アクションのフェッチ	データ・ソースからグラフ・アクションを取得する方法の詳細は、fetchActionsを参照してください。
永続	グラフ・アクションをデータ・ソースに永続化する方法の詳細は、persistを参照してください。

• 設定
  ページ・デザイナの「プロパティ・エディタ」にある「設定」属性を使用して、レイアウトの切替え、エッジのグループ化、プロパティに基づいたグラフ・エンティティの発展の表示などの様々なグラフ設定を適用できます。
• スタイル
  ページ・デザイナの「プロパティ・エディタ」で「スタイル」属性を使用してグラフをスタイル設定できます。
• 拡張」
  グラフ内の選択した頂点を拡張し、ページ・デザイナの「プロパティ・エディタ」で「拡張」属性を使用して、隣接する頂点をフェッチできます。

8.3.1 設定

ページ・デザイナの「プロパティ・エディタ」にある「設定」属性を使用して、レイアウトの切替え、エッジのグループ化、プロパティに基づいたグラフ・エンティティの発展の表示などの様々なグラフ設定を適用できます。

1. ページ・デザイナの左ペインにある「レンダリング」タブでグラフ・ビジュアライゼーション・コンポーネントを選択します。
2. ページ・デザイナの右ペインにある「プロパティ・エディタ」で「属性」を選択します。
3. 「設定」パネル内の「設定」入力ボックスに、目的のアクションについての入力をJSON形式で入力します。
   Settingsインタフェースの詳細は、プロパティ・グラフ・ビジュアライゼーションのOracle Graph JavaScript APIリファレンスのsettingsを参照してください。

   たとえば、次のJSON例では、layout構成とpageSize構成が示されています。

   { 
   "pageSize": 10,
   "layout": "concentric"
   }

   ノート:

   JSON入力に、「外観」パネル(「レイアウト」やエッジのグループ化など)または「設定」パネル(「ページ・サイズ」)ですでに設定されているプロパティについての設定が含まれている場合は、直接指定されているプロパティ値がJSON値より優先されます。

   次のJSON例では、グラフ・ビジュアライゼーションにネットワーク発展を追加するための構成のサンプルを示します。このグラフ・データの発展は、HireDateプロパティに基づいています。

   {
       "evolution": {
           "chart": "line",
           "unit": "year",
           "vertex": "properties.HireDate"
       }
   }

8.3.2 スタイル

ページ・デザイナの「プロパティ・エディタ」で「スタイル」属性を使用してグラフをスタイル設定できます。

1. ページ・デザイナの左ペインにある「レンダリング」タブでグラフ・ビジュアライゼーション・コンポーネントを選択します。
2. ページ・デザイナの右ペインにある「プロパティ・エディタ」で「属性」を選択します。
3. 「スタイル」入力ボックスに、スタイル設定についての入力をJSON形式で入力します。
   Styleインタフェースの詳細は、プロパティ・グラフ・ビジュアライゼーションのOracle Graph JavaScript APIリファレンスのstylesを参照してください。

   次の例では、頂点スタイルを追加するためのJSON入力を示します。

   {
      "vertex":{
         "size":12,
         "label":"${properties.FirstName} ${properties.LastName}",
         "color":"#d5445a",
         "icon":"fa-user"
       }
   }

   ノート:

   JSON入力に、「外観」パネル(頂点ラベル、エッジ・ラベルまたはラベルの最大長)ですでに設定されているプロパティについての設定が含まれている場合は、直接指定されているプロパティ値がJSON値より優先されます。

8.3.3 拡張

グラフ内の選択した頂点を拡張し、ページ・デザイナの「プロパティ・エディタ」で「拡張」属性を使用して、隣接する頂点をフェッチできます。

1. ページ・デザイナの左ペインにある「処理中」タブに切り替えて、送信後ノードに移動します。
2. 右クリックして、コンテキスト・メニューからプロセスの作成を選択します。
3. プロセスの名前を入力します。
4. 「タイプ」にコードの実行を指定します。
5. ソースの「場所」として「ローカル・データベース」を選択します。
6. ソースの「言語」として「PL/SQL」を選択し、PL/SQLの入力ボックスに次のコードを入力します。

   DECLARE data clob;
       id VARCHAR2(100) := apex_application.g_x01;
       graph VARCHAR2(100) := '<graph_name>';
       hops NUMBER := <no_of_hops>;
       n NUMBER := hops - 1;
       match_clause VARCHAR2(100);
       query VARCHAR2(1000);
   
   BEGIN
       IF n = 0 THEN
           match_clause := ' MATCH (x) -[e]-> (z) ';
       ELSE
           match_clause := ' MATCH (x) ->{,' || n || '} (y) -[e]-> (z) ';
       END IF;
   
       query := 'SELECT id_x, id_e, id_z
                 FROM GRAPH_TABLE (' || graph ||  match_clause  || 
                 'WHERE JSON_value(vertex_id(x), ''$.ELEM_TABLE'') || json_query(vertex_id(x), ''$.KEY_VALUE'' returning varchar2) = '''|| id ||'''
                 COLUMNS (vertex_id(x) as id_x, edge_id(e) as id_e, vertex_id(z) as id_z))';
       SELECT <helper_function>(query) INTO data FROM sys.dual;
       htp.p(data);
   END;

   前述のコードで:

   • <graph_name>: グラフの名前
   • <hops>: 拡張するホップの数
   • <helper_function>: ORA_SQLGRAPH_TO_JSON関数への入力としてSQLグラフ問合せのCURSORを提供しビジュアライゼーションのためのJSON出力を取得する関数の名前。

   なお、このプロセスでは、拡張する頂点のidが入力として受け入れられ、結果となる出力がJSONとして戻されます。
7. 実行の「ポイント」としてAjaxコールバックを選択します。
8. ページ・デザイナの左ペインにある「レンダリング」タブに切り替えて、グラフ・ビジュアライゼーション・コンポーネントを選択します。
9. 右ペインにある「属性」タブに切り替えて、「コールバック」パネルの「拡張」入力ボックスに次のコードを入力します。

   const data = await apex.server.process('<process_name>', {
       x01: ids[0]
   }, { dataType: 'text' });
   try {
       return JSON.parse(data);
   } catch (error) {
       return [];
   }

   前述のコードでは、<process_name>は、ステップ3で指定したプロセスの名前です。

10. 「保存」をクリックします。
11. アプリケーション・ページを実行します。これで、グラフ内の特定の頂点で「拡張」(次の図で強調表示されている)をクリックできるようになりました。

    図8-3 特定のグラフ頂点での拡張

    
    「図8-3 特定のグラフ頂点での拡張」の説明

    前の図の差し込み画像では、プラグインによってレンダリングされた、拡張された頂点を含むグラフが示されています。