You can expand a selected vertex in the graph and fetch the adjacent vertices using the Expand attribute in the Property Editor of the Page Designer.

1. Switch to the Processing tab on the left pane of the Page Designer and navigate to the After Submit node.
2. Right-click and select Create Process from the context menu.
3. Enter the process Name.
4. Specify Type as Execute Code.
5. Select the source Location as Local Database.
6. Select the source Language as PL/SQL and enter the following code in the PL/SQL input box.

   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;

   In the preceding code:

   • <graph_name>: Name of the graph
   • <hops>: Number of hops to be expanded
   • <helper_function>: Name of the function that provides the CURSOR for the SQL graph query as input to the ORA_SQLGRAPH_TO_JSON function and obtains the JSON output for visualization.

   Note that the process takes the vertex id to be expanded as input and returns the resulting output as JSON.
7. Select the execution Point as Ajax Callback.
8. Switch to the Rendering tab on the left pane of the Page Designer and select the graph visualization component.
9. Switch to the Attributes tab on the right pane and enter the following code in the Expand input box in the Callbacks panel.

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

   In the preceding code, <process_name> refers to the name of process that was provided at step-3.

10. Click Save.
11. Run the application page and you can now click expand (as shown highlighted in the following figure) on any specific vertex in the graph.

    Figure 8-14 Expanding on a Specific Graph Vertex

    
    Description of "Figure 8-14 Expanding on a Specific Graph Vertex"

    The inset image in the preceding figure shows the graph with expanded vertices as rendered by the plug-in.