3.1 Properties

The graph visualization component contains the following properties:

• types
  This section describes the custom types supported in the Graph Visualization library.
• data
  This section describes the interfaces that support the initial graph data in a visualization.
• settings
  This section describes the settings to configure the graph layout, page size, theme, legends, animation, and so on.
• featureFlags
  This section describes the hierarchical flags to hide specified features or group of features.
• paginate
  This section describes the callback to retrieve a given page of graph data.
• expand
  This section describes the callback to retrieve n-hops neighbors of specified vertices.
• eventHandlers
  This section describes the callbacks to handle events triggered by the graph entities (vertices or edges).
• persist
  This section describes the callback to save any graph modification to a datasource.
• fetchActions
  This section describes the callback to retrieve actions from a data source and apply them during the initial loading of the graph.
• search
  This section describes the callback to retrieve a list of vertices and edges that matches a search.
• updateFilter
  This section describes the callback to update the list of filters.
• updateEvolution
  This section describes the callback to enable or disable the evolution feature.
• updateSelectedOption
  This section describes the callback to update the selected option for smart expand or smart group.
• updateSearchValue
  This section describes the callback to update the value used for live search.
• updateGraphData
  This section describes the callback to handle events when the graph data is updated.

3.1.1 types

This section describes the custom types supported in the Graph Visualization library.

type Optional<T> = T | undefined;

type Nullable<T> = T | null;

type TypedMap<T> = Record<string, T>;

type NonEmptyArray<T> = [T, ...T[]];

type VertexSearchResult = Record<Id, Vertex>;

type EdgesSearchResult = Record<Id, Edge>;

type DefaultProps = Record<Id, string | number>;

3.1.2 data

This section describes the interfaces that support the initial graph data in a visualization.

interface TypedArrayMap<TValue = any> {
  [key: string]: TValue;
}

interface Paginable {
  // Number of results used for pagination
  numResults?: number;
}

interface Graph extends Paginable {
  // Graph vertices
  vertices: Vertex[];
  // Graph edges
  edges: Edge[];
}

declare type Id = string | number;

interface Classable {
  // Entity classes used for styling
  classes?: string[];
}

interface Entity extends Classable {
  // Entity id
  id: Id;
  // Arbitrary entity properties
  properties?: TypedMap<string | number | boolean>;
  // Inline style
  style?: Style;
  // Labels associate with entity
  labels?: string[];
}

interface Vertex extends Entity {}

interface Edge extends Entity {
  // Source vertex id
  source: Id;
  // Target vertex id
  target: Id;
}

3.1.3 settings

This section describes the settings to configure the graph layout, page size, theme, legends, animation, and so on.

interface SearchResult {
  vertices?: VertexSearchResult;
  edges?: EdgesSearchResult;
  defaultProps?: DefaultProps;
}

type Theme = 'light' | 'dark';

type EdgeMarker = 'arrow' | 'none';

type VertexLabelOrientation = 'top' | 'bottom' | 'center' | 'left' | 'right';

type SizeMode = 'compact' | 'normal';

type ExpandedState = 'expanded' | 'collapsed';

type DefaultSettings = {
  // Specifies the default state of the 'Select - Move/Zoom' toggle button in the toolbar. True activates 'Select' mode and false switches to 'Move/Zoom' mode.
  interactionActive: Optional<Boolean>;
  // Specifies the default state of the 'Fit to Screen' toggle button in the toolbar. True activates the button and false deactivates it.
  fitToScreenActive: Optional<Boolean>;
  // Specifies the default state of the 'Sticky mode' toggle button in the toolbar. True activates the button and false deactivates it.
  stickyActive: Optional<Boolean>;
  // Specifies the default state of the 'Evolution' toggle button in the toolbar. True activates the button and false deactivates it.
  evolutionActive: Optional<Boolean>;
};

interface Settings {
  // Size of pagination page (default 100).
  pageSize: number;
  // Whether to group edges with the same source and target (default false).
  groupEdges: boolean;
  // Layout type or LayoutSettings (default force).
  layout: LayoutType | Partial<LayoutSettings>;
  // Network Evolution configuration.
  evolution: NestedPartial<Shortcuts<Evolution>>;;
  // Filters correspond to Legend entries that also controls visiblity/styling highlights.
  // @Deprecated since version 25.1, use ruleBasedStyles instead.
  filters: Filter[];
  // Smart groups settings.
  smartGroup: SmartGroup;
  // Smart expand settings.
  smartExpand: SmartExpand;
  // Enables live search feature.
  searchEnabled: boolean;
  // Escapes HTML content used on vertex/edge tooltip.
  escapeHtml: boolean;
  // Width used for legend area.
  legendWidth: number;
  // Number of hops used for expand action.
  numberOfHops: number;
  // Smart expand used based on Id.
  selectedSmartExpand: Nullable<number>;
  // Smart group used based on Id.
  selectedSmartGroup: Nullable<number>;
  // Size mode determines the size of UI elements (like toolbar buttons, search region etc).
  // Possible values are 'compact' and 'normal'. If not specified, it will be computed based on the available page width.
  sizeMode: SizeMode;
  // Property used for live search feature.
  searchValue: string | undefined;
  // Edger marker, can be 'arrow' or 'none'. Default is 'arrow'.
  edgeMarker: EdgeMarker;
  // Flag to show/hide legend of vertices/edges. Default is true.
  showLegend: boolean;
  // Limit of characters that are shown for vertex/edge label.
  charLimit: number;
  // Show title of edge/vertex components.
  showTitle: boolean;
  // Vertex property showed on the visualization.
  vertexLabelProperty: Nullable<string>;
  // Edge property showed on the visualization.
  edgeLabelProperty: Nullable<string>;
  // Orientation for vertex caption.
  vertexLabelOrientation: VertexLabelOrientation;
  // theme settings (default light theme).
  theme: Theme;
  // customized theme settings.
  customTheme: CustomTheme;
  // Limit of characters shown on the vertex/edge tooltip. If not set, default is 100.
  tooltipCharLimit: Nullable<number>;
  // Styles applied to all vertices and edges
  baseStyles: Styles;
  // Rules correspond to Legend entries that also control visiblity/styling highlights.
  ruleBasedStyles: RuleBasedStyleSetting[];
// Determines whether the view represented by the Settings (Schema View or Graph View) is in 'expanded' or 'collapsed' state.
  viewMode?: ExpandedState;
  // Specifies the value shown in the label and tooltip to set the current view's context ('Schema' or 'Graph')
  viewLabel?: string;
  // Specifies whether the graph Views' legend region is in expanded or collapsed state. Not applicable for schema settings
  legendState?: ExpandedState;
  // Specifies the default state of various aspects of GVT
  defaults: Partial<DefaultSettings>;
}

export interface PropertySchema {
  // Name of the property.
  name: string;
  // Data type of the property value.
  dataType: 'string' | 'number' | 'date' | 'timestamp';
  // Limits used for validation like Maximum length, Precision / Scale etc depending on the data type of the property.
  limits?: number[];
  // Specifies if the property should always have a value.
  mandatory?: boolean;
}

//Base interface to VertexLabelSchema and EdgeLabelSchema, holding properties common to both.
export interface EntityLabelSchema {
  // Specifies the label associated with the schema's vertex or edge.
  labelName: string;
  // Properties defined in the schema.
  properties: PropertySchema[];
}

export interface VertexLabelSchema extends EntityLabelSchema {}

export interface EdgeLabelSchema extends EntityLabelSchema {
  // Specifies which Schema vertex the edge originates from.
  sourceVertexLabel?: string;
  // Specifies which Schema vertex the edge ends at.
  targetVertexLabel?: string;
}

export interface GraphSchema {
  // Vertices of the schema.
  vertices: VertexLabelSchema[];
  // Edges of the schema.
  edges: EdgeLabelSchema[];
}
  
type FilterComponent = 'vertex' | 'edge';

type ApplyTarget = 'vertex' | 'source' | 'target' | 'edge' | 'ingoing' | 'outgoing';

type FilterOperator = '<' | '<=' | '>' | '>=' | '=' | '!=' | '~' | '*';

interface ElementProperty<T> {
  property: string;
  value: T;
}

// @Deprecated since version 25.1 - use the equivalent BasicCondition instead.
export interface FilterCondition extends ElementProperty<string> {
  operator: FilterOperator;
}

export interface BasicCondition extends ElementProperty<string> {
  operator: FilterOperator;
}

export interface RuleCondition {
  rule: string;
}

interface ExpandCondition extends BasicCondition {
  component: FilterComponent;
}

export type ConditionsOperator = 'and' | 'or';

export interface Conditions<T extends FilterCondition | RuleCondition | BasicCondition> {
  conditions: T[];
  operator: ConditionsOperator;
}

// Graph animations are applied within the filter properties.
interface GraphAnimation {
  id?: string;
  duration: number;
  timingFunction: string;
  direction?: string;
  keyFrames: KeyFrame[];
  iterationCount?: number;
}

type FilterProperties = {
  colors?: string[];
  classes?: string[];
  // @Deprecated since version 25.1 - use the equivalent RuleBasedStyle instead.
  sizes?: number[];
  // @Deprecated since version 25.1 - use the equivalent RuleBasedStyle instead.
  icons?: string[];
  // @Deprecated since version 25.1 - use the equivalent RuleBasedStyle instead.
  iconColors?: string[];
  // @Deprecated since version 25.1 - use the equivalent RuleBasedStyle instead.
  image?: string[];
  // @Deprecated since version 25.1 - use the equivalent RuleBasedStyle instead.
  label?: string[];
  // @Deprecated since version 25.1 - use the equivalent RuleBasedStyle instead.
  style?: string[];
  // @Deprecated since version 25.1 - use the equivalent RuleBasedStyle instead.
  animations?: GraphAnimation[][];
  // @Deprecated since version 25.1 - use the equivalent RuleBasedStyle instead.
  legendTitle?: string[];
  // @Deprecated since version 25.1 - use the equivalent RuleBasedStyle instead.
  legendDescription?: string[];
};

interface FilterInterpolation {
  // The property on which interpolation is applied.
  property: string;
  // The minimum range for interpolation.
  min?: number;
  // The maximum range for interpolation.
  max?: number;
}

// Different types of aggregation functions are supported.
type AggregationType = 'average' | 'min' | 'max' | 'sum' | 'count' | 'distinctCount';

interface PropertyAggregation {
  // The property of vertex or edge on which aggregation is computed.
  source: string;
  // The type of aggregation function used for computation.
  type: AggregationType;
}

// @Deprecated since version 25.1, use ruleBasedStyles instead.
interface Filter extends FromTemplate {
  // Marks if styling is enabled for a filter item and the vertices/edges that it controls.
  stylingEnabled?: boolean;
  // Conditions deciding which vertices/edges will be affected by the filter item.
  conditions?: Conditions<FilterCondition>;
  // The component (vertex/edge) for which the filter is defined.
  component: FilterComponent;
  // The target on which this filter applies (vertex, source, target, edge, ingoing, outgoing).
  target: ApplyTarget;
  // The various properties (like colors, icons, image, animations) of a vertex/edge that this filter's state can affect.
  properties: FilterProperties;
  // Marks if aggregation is enabled for a filter item, based on which computation is performed.
  aggregationEnabled?: boolean;
  // The various aggregation properties configured on this filter.
  aggregation?: PropertyAggregation[];
  // The properties and range on which interpolation will apply.
  interpolation?: FilterInterpolation;
  // References of filter ids.
  filterReferenceIds?: number[];
}

interface RuleBasedStyleSetting extends FromTemplate {
  // Marks if Styling is enabled for a filter item and the vertices/edges that it controls.
  stylingEnabled?: boolean;
  // Conditions deciding which vertices/edges will be affected by the filter item.
  conditions?: Conditions<BasicCondition | RuleCondition>;
  // The component for which the filter is defined.
  component: FilterComponent;
  // The target on which this filter applies (vertex, source, target, edge, ingoing, outgoing).
  target: ApplyTarget;
  // The various properties (like colors, icons, image, animations) of a vertex/edge that this filter's state can affect.
  properties: FilterProperties;
  // Marks if aggregation is enabled for a filter item, based on which computation is performed.
  aggregationEnabled?: boolean;
  // The various aggregation properties configured on this filter.
  aggregation?: PropertyAggregation[];
  // The properties and range on which interpolation will apply.
  interpolation?: FilterInterpolation;
  // References of filter ids.
  filterReferenceIds?: number[];
  // Legend title for the rule.
  legendTitle?: string;
  // Style for modifiers. Keys can be selected, unselected, group, hover.
  modifierStyles?: TypedMap<VertexStyle | EdgeStyle>;
  // Properties for animations.
  animations?: GraphAnimation[][];
  // Marks if the rule is a default rule.
  isDefaultRule?: boolean;
}

interface LegendEntry extends Filter, RuleBasedStyleSetting{
  // The title of the legend entry when the filter is shown in the legend area.
  legendTitle?: string[];
  // Marks if the legend entry is visible in the legend area.
  legendEntryVisible: boolean;
  // The style of legend entry in the legend area.
  style: Partial<VertexStyle> | Partial<EdgeStyle>;
  // The vertices / edges on which this legend entry has influence.
  filteredNodes: Vertex[] | Edge[];
  // The style is from RuleBasedSetting and will be applied to elements that match the rule.
  toApplyStyle?: Partial<VertexStyle> | Partial<EdgeStyle>;
}

type LayoutSettings =
  | CircleLayoutSettings
  | ConcentricLayoutSettings
  | ForceLayoutSettings
  | GridLayoutSettings
  | HierarchicalLayoutSettings
  | PresetLayoutSettings
  | RadialLayoutSettings
  | RandomLayoutSettings;

type LayoutType = 'circle' | 'concentric' | 'force' | 'grid' | 'hierarchical' | 'preset' | 'radial' | 'random';

interface BaseLayoutSettings {
  type: LayoutType;
}

interface SpacingLayoutSettings {
  // Spacing among vertices in multiples of vertex radius.
  spacing: number;
}

interface CircleLayoutSettings extends BaseLayoutSettings, SpacingLayoutSettings {
  type: 'circle';
}

interface ClusterOptions {
  clusterBy?: string; //vertex property
  hideUnclusteredVertices?: boolean; 
}

interface ConcentricLayoutSettings extends BaseLayoutSettings, SpacingLayoutSettings {
  type: 'concentric';
}

interface ForceLayoutSettings extends BaseLayoutSettings, SpacingLayoutSettings {
  type: 'force';
  alphaDecay: number; // (default 0.01)
  velocityDecay: number; // (default 0.1)
  edgeDistance: number; // (default 100)
  vertexCharge: number; // (default -60)
  clusterEnabled: boolean; // (default false)
  clusterOptions?: ClusterOptions;
}

// When selecting grid layout, if neither rows or columns are defined, the graph will be displayed in a square grid.
// If rows are selected, it will be displayed in a grid with that many rows.
// If columns are selected it will be displayed in a grid witht that many columns.
// If both rows and columns are selected, only the rows will be taken into consideration.
interface GridLayoutSettings extends BaseLayoutSettings, SpacingLayoutSettings {
  type: 'grid';
  rows?: number;
  columns?: number;
}

type HierarchicalRankDirection =
  | 'UL' // Up to left
  | 'UR' // Up to right
  | 'DL' // Down to left
  | 'DR' // Down to right
  | 'TB' // Top to bottom
  | 'BT' // Bottom to top
  | 'LR' // Left to right
  | 'RL'; // Right to left

type HierarchicalRanker = 'network-simplex' | 'tight-tree' | 'longest-path';

interface HierarchicalLayoutSettings extends BaseLayoutSettings {
  type: 'hierarchical';
  // Default is 'TB'.
  rankDirection: HierarchicalRankDirection;
  // Default is 'network-simplex'.
  ranker: HierarchicalRanker;
  vertexSeparation?: number;
  edgeSeparation?: number;
  rankSeparation?: number;
}

interface PresetLayoutSettings extends BaseLayoutSettings {
  type: 'preset';
  // Property of the vertex used as x coordinate.
  x: string;
  // Property of the vertex used as y coordinate.
  y: string;
}

interface RadialLayoutSettings extends BaseLayoutSettings, SpacingLayoutSettings {
  type: 'radial';
}

interface RandomLayoutSettings extends BaseLayoutSettings {
  type: 'random';
}

interface MapMarker {
  longitude: number;
  latitude: number;
  content?: string;
}

// Types of maps.
type MapType = 'osm_positron' | 'osm_bright' | 'osm_darkmatter' | 'world_map_mb' | 'custom_type';

interface GeographicalLayoutSettings extends BaseLayoutSettings {
  type: 'geographical';
  longitude: string;
  latitude: string;
  appId?: string;
  mapType?: MapType;
  showInfo?: boolean;
  showNavigation?: boolean;
  layers?: string;
  sources?: string;
  markers?: MapMarker[];
}

interface EvolutionEntity {
  // Start property.
  start: string;
  // End property.
  end?: string;
}

interface Evolution {
  // Height of the UI component (default is 100).
  height: number;
  // Type of the chart (default is 'bar').
  chart: 'bar' | 'line';
  // Aggregation granularity in given unit (default is 1).
  granularity: number;
  // Time unit or undefined for numbers (default is undefined).
  unit?: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
  // Vertex Evolution properties (or just string specifying Start property).
  vertex?: string | EvolutionEntity;
  // Edge Evolution properties (or just string specifying Start property).
  edge?: string | EvolutionEntity;
  // Defines exclusion of values.
  exclude: {
    // Array of excluded values.
    values: (string | number)[];
    // Whether to always show or hide excluded values (default is false).
    show: boolean;
  };
  // Playback options.
  playback: {
    // Number of vertex / edge changes per step.
    step: number;
    // Number of milliseconds between steps.
    timeout: number;
  };
  // If turned on, network evolution will keep the original vertex positions of the graph
  // when vertices and edges unfold during playback.
  preservePositions: boolean;
  // Requires a string that represents the format in which the date must be displayed.
  // The format must include either YYYY, MM, or DD. Otherwise, it will be ignored.
  // If not provided, the following defaults apply:
  // When displaying units of days, only the day will be displayed (1, 15, 30, and so on).
  // When displaying months only the tag of the month will be displayed (Jan, Feb, and so on).
  // When displaying years, only the year wil be displayed (2001, 1999, and so on).
  // If the time window between the first date in the graph and the last date
  // in the graph is too big, such that the displayed time label cannot fit, it will
  // change to the next bigger unit. For example, if the unit is days and the labels cannot fit,
  // then it will attempt to use a month label. In case a month label is too big, then a year label will be used.
  labelFormat?: string;
  axis?: 'vertices' | 'edges' | 'both';
}

type SmartExplorerType = 'expand' | 'group';

interface FromTemplate {
  _fromTemplate?: boolean;
  _id?: number | string;
}

interface SmartExplorer extends FromTemplate {
  readonly type: SmartExplorerType;
  name: string;
}

interface SmartExpand extends SmartExplorer {
  readonly type: 'expand';
  numberOfHops: Optional<number>;
  navigation: Conditions<ExpandCondition>;
  destination: Conditions<ExpandCondition>;
}

interface SmartGroup extends SmartExplorer {
  readonly type: 'group';
  automatic: boolean;
  enabled: boolean;
  groupBy?: string;
  conditions: Conditions<ExpandCondition>;
}

type Theme = 'light' | 'dark';

interface CustomTheme {
  backgroundColor?: string;
  textColor?: string;
}

type Styles = TypedMap<VertexStyle | EdgeStyle>;

interface Style extends ElementPosition {
  // Default is (vertex: lightgray, edge: #C0C0C0).
  color: string;
  // Default is 1.
  opacity: number;
  // Css filter. Default is none.
  filter: string;
  // Label settings or just label text. It is null for no label.
  label: Nullable<LabelStyle>;
  // Legend style or just legend text. It is null for no legend.
  legend: Nullable<this & { text: string }>;
  // Definitions of child elements (for example, vertex / edge badges).
  children: Nullable<TypedMap<_VertexStyle & Classable>>;
}

interface ImageStyle {
  // Image url. Default is undefined.
  url: string;
  // Image scale. Default is 1.
  scale?: number;
}

interface BorderStyle {
  // Border width. Default is 1.
  width?: number;
  // Border color. Default is #404040.
  color?: string;
}

interface IconStyle {
  // Icon class. For example, fa-bell. Default is undefined.
  class: string;
  // Icon text color. Default is white.
  color?: string;
}

interface VertexStyle extends Style {
  // Vertex radius. Default is 8.
  size: number;
  // Background image settings or just url. Null for no background.
  image: ImageStyle
  // Vertex border settings or just color. Null for no border.
  border: BorderStyle
  // Vertex icon settings or just class. Null for no icon.
  icon: IconStyle
}

interface EdgeStyle extends Style {
  // Edge width. Default is 2.
  width: number;
  // Fill pattern. Default is undefined.
  // Dasharray values are: '1 5', '5', '5 10', '10 5', '5 1', '15 10 5', '15 10 5 10', '15 10 5 10 15', '5 5 1 5'
  dasharray: string;
}

// Position of the label or child vertex.
interface ElementPosition {
  // Angle position of label or child vertex (in degrees) w.r.t the parent vertex.
  // Following are some values and its corresponding positioning of label or child vertex:
  // null - inside the parent vertex
  // 0 - to the right side of the parent vertex
  // 90 - towards the top of the parent vertex
  // 180 - to the left side of the parent vertex
  // 270 - towards the bottom of the parent vertex (this is the default position unless overridden)
  angle?: Nullable<number>;
  // Position on the edge. Value between -1 (edge start) and 1 (edge end).
  position?: number;
  // Offset from: vertex radius (> 0: outside, < 0: inside) or edge path.
  // (> 0: above, < 0: under)
  d: number;
}

interface FontStyle {
  // Font size. Default is 10.
  size?: number;
  // Font family. Default is inherited.
  family?: string;
  // Font style. Default is inherited.
  style?: string;
  // Font weight. Default is inherited.
  weight?: string;
}

interface LabelStyle extends ElementPosition {
  // Label text.
  text: string;
  // Color - Default is rgba(0, 0, 0, 0.8).
  color?: string;
  // Maximum label length. Default is 15. The whole label is displayed in tooltip.
  maxLength: number;
  font: FontStyle
 // When disableBackdrop is true, it hides the faded backdrop placed behind vertex labels.
  // The backdrop that is enabled by default is particularly useful when vertex label crosses over an edge
  // or when label is shown inside a vertex.
  disableBackdrop: boolean = false;
  // When resizeParent is true, vertices will adapt its size and shape to suit the label's length.
  // Applies only when the label is shown within the vertex (that is label's style.angle is null)
  resizeParent: boolean = false;
}

• Style Expressions
  
• Rule Expressions
  

3.1.3.1 Style Expressions

These expressions can access anything from the ExpressionContext which extends Entity so also all the properties of the vertex / edge that is styled.

interface ExpressionContext extends Entity {
  // Helper function for value interpolation
  // path: path to the ExpressionContext property that will be interpolated
  // (e.g. 'id', 'properties.someProperty')
  // min: minimum interpolation result value
  // max: maximum interpolation result value
  interpolate: (path: string, min: number, max: number) => number;
  // Previous value of evaluated property
  previous?: number | string;
}

Context is accessed through ${accessor} syntax (that is JavaScript template literals). The following lists a few example expressions:

• https://flagcdn.com/40x30/${properties.code}.png: Constructs a URL using a given property.
• ${previous + 4}: Returns a bigger value. This can be used, for example, to make vertices or edges bigger on hover.
• ${interpolate("group.size", 8, 16): Interpolation based on the grouped vertex size.

3.1.3.2 Rule Expressions

Rule expressions are used to specify the target element into which given style will be applied. It has the following structure:

elementName(.className)*(:modifier)*([conditionExpression])? (> elementName(.className)*)

In the preceding format:

• elementName := * | 'vertex' | 'edge'
• className (deprecated since 25.1): Any className specified in input vertex or edge classes array.
• modifier := 'hover' | 'selected' | 'unselected' | 'group'
• conditionExpression (deprecated since 25.1): JavaScript expression that can access any property of evaluated vertex or edge.

  It is recommended to use settings.ruleBasedStyles.

Also, note the following:

• *: Applies to all elements.
• vertex: Applies to all vertices.
• edge: Applies to all edges.
• example (deprecated since 25.1): Applies to all elements with example class specified.
• vertex.example (deprecated since 25.1): Applies to all vertices with example class.
• vertex:selected: Applies to all selected vertices.
• vertex[id > 10] (deprecated since 25.1): Applies to all vertices with id > 10.

  It is recommended to use settings.ruleBasedStyles.

• vertex[properties.some === 'value']: Applies to all vertices that have some property with value value.

• It is recommended to use settings.ruleBasedStyles. All the properties in settings are optional and have their defaults.

3.1.4 featureFlags

This section describes the hierarchical flags to hide specified features or group of features.

type FeatureFlags =
  | false
  | NestedFlags<{
      // Use false to hide the whole exploration.
      exploration: {
        // Use false to hide expand.
        expand: boolean;
        focus: boolean;
        group: boolean;
        ungroup: boolean;
        drop: boolean;
        undo: boolean;
        redo: boolean;
        reset: boolean;
      };
      // Use false to hide all modes.
      modes: {
        // Use false to hide interaction mode.
        interaction: boolean;
        fitToScreen: boolean;
        sticky: boolean;
      };
      // Use false to hide pagination.
      pagination: boolean;
    }>;

type NestedFlags<T> = {
  readonly [P in keyof T]?: T[P] extends object ? false | NestedFlags<T[P]> : T[P];
};

3.1.5 paginate

This section describes the callback to retrieve a given page of graph data.

// start: Starting index of the pagination.
// size: Page size (from settings.pageSize).
// Returns the graph of given page.
type Paginate = (start: number, size: number) => Promise<Graph>;

By default, pagination is hidden. If provided, data does not have to be set and graph visualization will automatically fetch the first page on initial render.

3.1.6 expand

This section describes the callback to retrieve n-hops neighbors of specified vertices.

// ids: To expand from the ids of the selected vertices.
// hops: Number of hops to fetch from selected vertices.
// Returns the expanded graph.
type ExpandActionType = 'expand' | 'focus';

type Expand = (ids: Id[], hops: number, action: ExpandActionType, templateId?: number | null) => Promise<Graph>;

By default, expand or focus is hidden.

3.1.7 eventHandlers

This section describes the callbacks to handle events triggered by the graph entities (vertices or edges).

// id: Id of the child vertex targeted with the event(if any).
// entity: The entity or parent of the vertex(identified by the id parameter) targeted with the event.
type EntityEventCallback = (event: Event, id: Optional<string>, entity: Entity) => void;

// eventType: Supported <g> element event attributes without the -on- prefix.
// children: Event handlers for child entities.
interface _EntityEventHandlers {
  [eventType: string]: EntityEventCallback | _EntityEventHandlers;
  children?: EntityEventHandlers;
}

type EntityEventHandlers = Optional<_EntityEventHandlers>;

// vertex: Callbacks that handle events fired by vertices.
// edge: Callbacks that handle events fired by edges.
interface _AllEventHandlers {
  vertex: EntityEventHandlers;
  edge: EntityEventHandlers;
}

type AllEventHandlers = Partial<_AllEventHandlers>;

3.1.8 persist

This section describes the callback to save any graph modification to a datasource.

type GraphActionType = 'drop' | 'expand' | 'focus' | 'group' | 'ungroup' | 'undo' | 'redo' | 'reset';

// vertexIds: Ids of the vertices targeted with the action.
// edgeIds: Ids of the edges targeted with the action.
interface GraphAction {
  type: GraphActionType;
  vertexIds?: NonEmptyArray<Id>;
  edgeIds?: NonEmptyArray<Id>;
  template?: Nullable<number | string>;
}

// action: Graph action to persist to a datasource.
type Persist = (action: GraphAction) => Promise<void>;

3.1.9 fetchActions

This section describes the callback to retrieve actions from a data source and apply them during the initial loading of the graph.

// This gets executed only once when the graph loads for the first time.
// It contains code to retrieve graph actions to apply on the graph initially.
type FetchActions = () => Promise<GraphAction[]>;

3.1.10 search

This section describes the callback to retrieve a list of vertices and edges that matches a search.

// Function for live search feature.
//It returns the list of vertices and edges that matches the keyword.
type Search = (Keyword: string) => Promise<SearchResult>;

3.1.11 updateFilter

This section describes the callback to update the list of filters.

// Updates the list of filters with the given filter.
type UpdateFilter = (filter: Filter) => Promise<void>;

3.1.12 updateEvolution

This section describes the callback to enable or disable the evolution feature.

// Enables or disables the network evolution feature.
type UpdateEvolution = (enabled: boolean) => Promise<void>;

3.1.13 updateSelectedOption

This section describes the callback to update the selected option for smart expand or smart group.

// Updates the selected option for smart group or smart expand.
type UpdateSelectedOption = (option: number | null, tag: SmartExplorerType) => Promise<void>;

3.1.14 updateSearchValue

This section describes the callback to update the value used for live search.

// Updates the search value for the live search feature.
type UpdateSearchValue = (value: string) => Promise<void>;

3.1.15 updateGraphData

This section describes the callback to handle events when the graph data is updated.

// This gets executed when the graph data gets updated.
// Vertices and edges params contains all vertices and edges of the graph.
type UpdateGraphData = (Vertices: Vertex[], edges: Edge[]) => Promise<void>;