Customizing Graph Analytics visualization

If you installed the Graph Analytics feature in IBM FCI, you can customize a number of items, including the icons/colors displayed on the visualization, labels on the filter panel/edges, and properties that are highlighted when a node or edge is hovered over.

About this task

Graph analytics allows you to ingest any data irrespective of schema. You can also import more than one schema in the same graph database. For instance, if you have data related to Anti-Money Laundering (AML) and Insurance, the default schema for Graph Analytics is aml. The properties for this are located in the /fci-exports/fci-graph-writer-liberty/context directory on the Kubernetes master node. You can create a new context by making a new directory in the /fci-exports/fci-graph-writer-liberty/context folder.

The user has to update the UI and API properties inside the context folder.

There are two types of properties files:

api-props.json: Describes properties for the API modules.
ui-props.json: Describes properties relevant to the user interface.

You must update these properties inside the context folder.

API configuration file

Procedure

To modify API properties, follow these instructions:

Set the properties for Agnostic API in the api-props.json file:

"nodeId":"node_id"
Set the "dashboard" object. To do so, add blocks for every vertex for the dashboard API. For example:
```
"party" :{
"Display Name": "Janusgraph Property name"
```
Set node objects inside "nodes" as follows:
1. Create an object for node, with node_label as key. For example:
```
"party : {}
```
2. Add label with values, such as the Display Label name. For example:
```
"label : "party"
```
3. Create the properties object. To do so, add "title" and "type" in the "properties" object. For example:
```
"title" : "partyName",
"type" : "partyType",
```
4. Add the "info" object, which contains all properties that are required to be displayed for this node. For example:
```
 "info" : {
               "Account ID" : "node_id",
               "Association Score" : "association_score",
               "SAR" : "sar"
        }
```
Set edge objects inside "edges":
1. Create an object for node, with node_label as key. For example:
```
“transaction” : {}
```
2. Add "label" with values, such as Display Label name For example:
```
"label: : "Transaction"
```
3. Add a "properties" object, which contains all properties required to be displayed for this edge. For example:
```
"properties" : {
		"ID" : "transaction_id",
		"Amount" : "transaction_amount",
		"Type" : "transaction_type",
		"TimeStamp" : "transaction_datetime",
		"Foreign Transaction" : "is_frgn_trxn"
}
```

UI configuration file

The UI configuration JSON file has the following sections:

UI configuration Action Bar — Figure 2. UI configuration - Action Bar

Filter

The filter object has the following fields:

label: Identifies the filter panel heading.
button: Identifies the label for the filter buttons.
types: Lists the filters. Fields are as follows:
- id: A unique ID for the filter.
- label: Specifies the display name of the filter.
- placeHolder: Specifies the placeholder value for the filter.
- hide: When set to true, the filter is hidden from the visualization.
- format: This specifies the format of the filter. Possible values include:
  - MultiSelect: This can be used to select multiple values. For example, Transaction type is a MultiSelect field where you can select Cash, Wire, and ACH.
  - TimeRange: This can be used to select a time range. For example, Transaction timestamp is a TimeRange field where you can select a time range such as the last month or a custom time range.
  - NumberInput: This can be used to select a number. For example, Transaction amount is a NumberInput field where you can enter a number.
- type: The type of object in which the filter applies. Possible values are as follows:
  - node
  - edge
- property: Specifies the corresponding property name associated with the object. For filtering the types of node and edges, this value is null.
- parent: Specifies the type of object (node/label) and its label in which the filter is applied. For filtering types of node and edges, this value is null.
- default: Applicable for the filters of the format TimeRange and NumberInput. For the TimeRange, one of the values can be made default and for the NumberInput, a value can be set as the default.
- custom: Applicable for the filter of the format TimeRange. If true, custom datePicker is added as one of the options.
- operation: Applicable for the filter of the format NumberInput. Possible values:
  - Min
  - Max
- values: Applicable for the filters of the format MultiSelect and TimeRange. It is a list of objects with the following fields:
  - id: A unique id for the value.
  - label: Specifies the display name for the value.
  - value: Specifies the value that is sent to the backend.

Settings

The settings object has the following fields:

heading: Identifies the heading of the settings modal window.
submit: Identifies the label for the Submit button.
cancel: Identifies the label for the Cancel button.
hops: Identifies the configuration for the default number of hops, the number of hops to expand, and the label of the setting.
hopsDisabled: Identifies whether hops are editable. This value can be true or false.
edge: Identifies the label for the show edge label setting, the default value of the setting.
node: Identifies the label for the show node label setting, the default value of the setting.

Algorithm

The algorithm object has the following fields:

label: Specifies the placeholder for the algorithm output drop-down list.
default: Specifies the default type of output to show on the graph.
values: Specifies the list of algorithm types that are populated in the drop-down list.
enable: Specifies whether there is an algorithm in the application. This value can be true or false.

Edge

The edge object has the following field:

types: The list of edge types with labels and the feature to view the edge properties in the information panel enabled on hover.
- type: The edge type
- label: It can be configured as two types:
  1. Static label: Where the edge label is displayed on the edge.
    Figure 4. Static label
  2. Dynamic label: The list of properties that are concatenated to form the label. The value should be the path to the property defined in the api-props.json. For example, in the following image, the transaction edge label is a concatenation of two properties: Currency and Amount.
    Figure 5. Dynamic label
The configuration is as follows:
Figure 6. Dynamic label configuration
- hover: If set to true, the edge properties are shown on the information level on hover. Note that the UI can be configured to display properties related to the edge when the user hovers over an edge (for example, an edge of type transaction, we can show the transaction amount, transaction type, transaction date, when the edge is hovered over). Not all edges have properties that need to be displayed. Edges that require this functionality should be added to this property.
labelLength: Specifies the maximum length of edge label that is displayed on the UI. If the edge label is longer than this value, the extra characters are clipped and followed by an ellipsis.

Node

The node object has the following fields:

types: Identifies the list of node types with the icon name and color specified for each.
types has the following format:
- type: Specifies the node type.
- label: It can be configured similar to the edge label by adding the list of properties that are concatenated to form the label. The value should be the path to the property defined in the api-props.json.
- icon: Specifies the name of the icon to be displayed on the node.
- color: Specifies the color of the node.
- subTypes: Specifies subtypes of the node. The subtypes follow the same format as nodes.
- legend: If true, the legend for the node is displayed.
highlight: Identifies the feature where the nodes are highlighted based on the property. highlight has the following format:
- nodeType: Specifies the type of node in which the highlight applies.
- property: Specifies the property based on which the node is highlighted.
- disable: If true, the highlight feature is disabled; if false, the highlight feature is enabled.
- value: Specifies the limit of the range and its color. value has three ranges (low, medium, high).
labelLength: Specifies the maximum length of node label that is displayed on the UI. If the node label is longer than this value, the extra characters is clipped and followed by an ellipsis.

API

The api object has the following fields:

fetchAllNodes: Identifies the API used to fetch all the nodes of a particular type.
fetchNode: Identifies the API used to fetch a network of a particular node based on a node ID.
fetchExploreData: Identifies the API used to fetch a network or a list of nodes for a cypher query.

Search

The search object has the following field:

searchParameters: Lists properties in which the nodes can be searched. For example, the nodes are searched based on Account ID and Title.
enable : Specifies whether or not search is required. This value can be true or false.

Actionbar

edit: Specifies whether to enable editing. This value can be true or false.
expandCollapse: Specifies whether or not expansion of the node is required. This value can be true or false.

cypherQueryLength

Specifies the maximum length of the Cypher query.

dashboardLimit

Specifies the maximum number of records displayed in the Dashboard page.

Procedure

To modify UI properties, update the following files. Keep in mind that fci_install_path is the location where Graph Analytics is installed.

Configuration file: /fci-exports/fci-graph-writer-liberty/context/{context}
For example: /fci-exports/fci-graph-writer-liberty/context/aml
Icons: /fci-exports/fci-graph-writer-liberty/context/{context}/icons/
For example: /fci-exports/fci-graph-writer-liberty/context/aml/icons/