Expand

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 := <hops>;
   n NUMBER := hops - 1;
   query VARCHAR2(1000) := 'SELECT e1 FROM MATCH ANY (x) ->{,' || n || '} (y) ON ' || graph || ', MATCH (y) -[e1]-> () ON ' || graph || ' WHERE id(x) = ''' || id || '''';
   BEGIN
   SELECT ORA_PGQL_TO_JSON(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

   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 on a specific vertex in the graph as shown:
    
    Description of the illustration apex_expand_vertex.png