You can style a graph using the Styles attribute in the Property Editor of the Page Designer.

1. Select the graph visualization component in the Rendering tab on the left pane of the Page Designer.
2. Select Attributes in the Property Editor on the right pane of the Page Designer.
3. Enter the input for styling in JSON format in the Styles input box.
   See styles in Oracle Graph JavaScript API Reference for Property Graph Visualization for more information on the Style interface.

   The following example shows the JSON input to add a vertex style.

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

   Note:

   If the JSON input contains styling for properties that are already set in the Appearance panel (such as Vertex Label, Edge Label, or Maximum Label Length), then the property values that are provided directly will override the JSON values.

You can apply different graph settings such as switching layouts, grouping edges, or showing the evolution of the graph entities based on a property using the Settings attribute in the Property Editor of the Page Designer.

1. Select the graph visualization component in the Rendering tab on the left pane of the Page Designer.
2. Select Attributes in the Property Editor on the right pane of the Page Designer.
3. Enter the input for the desired action in JSON format in the Settings input box in the Settings panel.
   See settings in Oracle Graph JavaScript API Reference for Property Graph Visualization for more information on the Settings interface.

   For instance, the following JSON example provides the layout and pageSize configurations:

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

   Note:

   If the JSON input contains the settings for properties that are already set in the Appearance panel (such as Layout or Group Edges) or Settings panel (Page Size), then the property values that are provided directly will override the JSON values.

   The following JSON example shows a sample configuration for adding network evolution to the graph visualization. The evolution of the graph data is based on the HireDate property:

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

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-8 Expanding on a Specific Graph Vertex

    
    Description of "Figure 8-8 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.