Interface

The Javascript component has the following interface:

Properties

• types: Graph visualization types
• data: Initial graph data
• settings: Settings to configure graph layout, page size, etc.
• styles: Configuration of vertex / edge appearance
• featureFlags: Hierarchical flags to hide specified features or group of features
• paginate: Callback to retrieve given page of graph data
• expand: Callback to retrieve n-hops neighbors of specified vertices
• eventHandlers: Callbacks to handle events fired by graph entities (vertices/edges)
• persist: Callback to save a modification applied on the graph to a datasource
• fetchActions: Callback to retrieve actions(from a datasource) to apply on the graph on first load
• search: Callback to retrieve a list of vertices and edges that matches a search
• updateFilter: Callback to update the list of filters
• updateEvolution: Callback to enable/disable evolution feature
• updateSelectedOption: Callback update the selected option for smart expand or smart group
• updateSearchValue: Callback to update the value used for live search
• updateGraphData: Callback to handle events when the graph data is updated

Events

• graph: Current state of the graph (triggered on any graph change)
• selection: Currently selected vertices and edges (triggered on any selection change)

types

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>;

data

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;
}

settings

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';

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
  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 used for various components
  sizeMode: SizeMode;
  // Property used for live search feature
  searchValue: string | undefined;
  // Edger marker, can be 'arrow' or 'none', defaults to 'arrow'
  edgeMarker: EdgeMarker;
  // Flag to show/hide legend of vertices/edges, defaults to 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, defaults to 100
  tooltipCharLimit: Nullable<number>;
}

type FilterComponent = 'vertex' | 'edge';

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

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

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

interface ExpandCondition extends FilterCondition {
  component: FilterComponent;
}

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

export interface Conditions<T extends FilterCondition> {
  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[];
  sizes?: number[];
  icons?: string[];
  iconColors?: string[];
  image?: string[];
  label?: string[];
  style?: string[];
  animations?: GraphAnimation[][];
  legendTitle?: string[];
  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 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;
}

interface Filter extends FromTemplate {
  // Marks if Styling is enabled for a filter item and the vertices/edges that it controls
  stylingEnabled?: boolean;
  // Marks if Visibility is enabled for a filter item and the vertices/edges that it controls
  visibilityEnabled?: boolean;
  // Conditions deciding which vertices/edges will be affected by the filter item
  conditions?: Conditions<FilterCondition>;
  // The component (eg 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[];
  // Marks whether styling is configured for this filter
  stylingConfigured?: boolean;
  // The properties and range on which interpolation will apply
  interpolation?: FilterInterpolation;
  // References of filter ids
  filterReferenceIds?: number[];
}

interface LegendEntry extends Filter {
  // 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 veritces / edges on which this legend entry has influence
  filteredNodes: Vertex[] | Edge[];
}

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 'TB')
  rankDirection: HierarchicalRankDirection;
  // (default '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 100)
  height: number;
  // Type of the chart (default 'bar')
  chart: 'bar' | 'line';
  // Aggregation granularity in given unit (default 1)
  granularity: number;
  // Time unit or undefined for numbers (default 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 false)
    show: boolean;
  };
  // Playback options
  playback: {
    // Number of vertex / edge changes per step
    step: number;
    // Number of milliseconds between steps
    timeout: number;
  };
  // When 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 to work, 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, etc)
  // when displaying months only the tag of the month will be displayed (Jan, Feb, etc)
  // when displaying years, only the year wil be displayed (2001, 1999, etc).
  // 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 wouldn't fit, it will
  // change to the next bigger unit. For example, if days are being used, but the labels don't fit,
  // it would try using a month label, if a month label would be too big, a year label would 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;
}

All the properties in settings are optional and have their defaults.

styles

type Styles = TypedMap<VertexStyle | EdgeStyle>;

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

interface ImageStyle {
  // Image url (default undefined)
  url: string;
  // Image scale (default 1)
  scale?: number;
}

interface BorderStyle {
  // Border width (default 1)
  width?: number;
  // Border color (default #404040)
  color?: string;
}

interface IconStyle {
  // Icon class e.g. fa-bell (default undefined)
  class: string;
  // Icon text color (default white)
  color?: string;
}

interface VertexStyle extends Style {
  // Vertex radius (default 8)
  size: number;
  // Background image settings or just url or null for no background
  image: ImageStyle
  // Vertex border settings or just color or null for no border
  border: BorderStyle
  // Vertex icon settings or just class or null for no icon
  icon: IconStyle
}

interface EdgeStyle extends Style {
  // Edge width (default 2)
  width: number;
  // Fill pattern (default undefined)
  // Dasharray values '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 in degrees on the vertex range or null to position into
  // center
  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 10)
  size?: number;
  // Font family (default inherited)
  family?: string;
  // Font style (default inherited)
  style?: string;
  // Font weight (default inherited)
  weight?: string;
}

interface LabelStyle extends ElementPosition {
  // Label text
  text: string;
  // Color (default rgba(0, 0, 0, 0.8))
  color?: string;
  // Label max length (default 15), the whole label is displayed in tooltip
  maxLength: number;
  font: FontStyle
}

Styling is defined as an object, where keys are the rule expressions and values are VertexStyle or EdgeStyle. For each style, all the properties are optional and have their defaults. Besides specifying constant value for given style property it is also possible to use style expressions.

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 (aka JavaScript template literals). Example expressions:

• https://flagcdn.com/40x30/${properties.code}.png: constructs url using given property
• ${previous + 4}: returns bigger value. Could be used e.g. to make vertices / edges bigger on hover
• ${interpolate("group.size", 8, 16): interpolation based on the grouped vertex size

Rule Expressions

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

• elementName(.className)*(:modifier)*([conditionExpression])? (> elementName(.className)*)
• elementName := * | 'vertex' | 'edge'
• className: any className specified in classes array of input vertex / edge
• modifier := 'hover' | 'selected' | 'unselected' | 'group'
• conditionExpression: JavaScript expression that can access any property of evaluated vertex / edge.

Example rules:

• *: applies to all elements
• vertex: applies to all vertices
• edge: applies to all edges
• .example: applies to all elements with example class specified
• vertex.example: applies to all vertices with example class
• vertex:selected: applies to all selected vertices
• vertex[id > 10]: applies to all vertices with id > 10
• vertex[properties.some === 'value']: applies to all vertices that have some property with value value

featureFlags

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

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

paginate

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

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

expand

// ids: ids of the selected vertices to expand from
// hops: number of hops to fetch from selected vertices
// Returns expanded Graph
type ExpandActionType = 'expand' | 'focus';

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

If not provided, expand / focus is hidden.

eventHandlers

// 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>;

persist

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: the graph action to persist to a datasource
type Persist = (action: GraphAction) => Promise<void>;

fetchActions

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

search

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

updateFilter

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

updateEvolution

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

updateSelectedOption

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

updateSearchValue

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

updateGraphData

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