3.1 プロパティ

グラフ・ビジュアライゼーション・コンポーネントには次のプロパティが含まれています:

• タイプ
  このセクションには、グラフ・ビジュアライゼーション・ライブラリでサポートされているカスタム・タイプを記述します。
• data
  このセクションには、ビジュアライゼーションの初期グラフ・データをサポートするインタフェースを記述します。
• 設定
  このセクションには、グラフ・レイアウト、ページ・サイズ、テーマ、凡例、アニメーションなどを構成するための設定を記述します。
• featureFlags
  このセクションには、指定したフィーチャまたはフィーチャ・グループを非表示にする階層フラグを記述します。
• paginate
  このセクションには、グラフ・データの特定のページを取得するためのコールバックを記述します。
• expand
  このセクションには、指定した頂点のnホップの隣接範囲を取得するためのコールバックを記述します。
• eventHandlers
  このセクションには、グラフ・エンティティ(頂点またはエッジ)によってトリガーされるイベントを処理するためのコールバックを記述します。
• persist
  このセクションには、グラフの変更をデータソースに保存するためのコールバックを記述します。
• fetchActions
  このセクションには、データ・ソースからアクションを取得し、グラフの初期ロード時に適用するためのコールバックを記述します。
• search
  このセクションには、検索と一致する頂点およびエッジのリストを取得するためのコールバックを記述します。
• updateFilter
  このセクションには、フィルタのリストを更新するためのコールバックを記述します。
• updateEvolution
  このセクションには、成長機能を有効または無効にするためのコールバックを記述します。
• updateSelectedOption
  このセクションには、スマート展開またはスマート・グループに対して選択したオプションを更新するためのコールバックを記述します。
• updateSearchValue
  このセクションには、ライブ検索に使用する値を更新するためのコールバックを記述します。
• updateGraphData
  このセクションには、グラフ・データが更新された場合にイベントを処理するためのコールバックを記述します。

3.1.1 タイプ

このセクションには、グラフ・ビジュアライゼーション・ライブラリでサポートされているカスタム・タイプを記述します。

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

このセクションには、ビジュアライゼーションの初期グラフ・データをサポートするインタフェースを記述します。

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 設定

このセクションには、グラフ・レイアウト、ページ・サイズ、テーマ、凡例、アニメーションなどを構成するための設定を記述します。

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

• スタイル式
  
• ルール式
  

3.1.3.1 スタイル式

これらの式は、Entityを拡張するExpressionContextから何にでもアクセスできるため、スタイルを設定する頂点やエッジのすべてのプロパティにもアクセスできます。

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

コンテキストには、${accessor}構文(JavaScriptテンプレート・リテラル)を使用してアクセスします。次に、式の例をいくつか示します:

• https://flagcdn.com/40x30/${properties.code}.png: 指定されたプロパティを使用してURLを構築します。
• ${previous + 4}: より大きい値を返します。たとえば、カーソルをあわせると頂点やエッジが大きくなるようにするために使用できます。
• ${interpolate("group.size", 8, 16): グループ化された頂点サイズに基づく補間。

3.1.3.2 ルール式

ルール式は、指定したスタイルが適用されるターゲット要素を指定するために使用します。構造は次のとおりです。

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

前述の形式の説明:

• elementName := * | 'vertex' | 'edge'
• className (25.1以降では非推奨): 入力の頂点またはエッジのクラス配列で指定された任意のclassName。
• modifier := 'hover' | 'selected' | 'unselected' | 'group'
• conditionExpression (25.1以降では非推奨): 評価する頂点またはエッジの任意のプロパティにアクセスできるJavaScript式。

  settings.ruleBasedStylesを使用することをお薦めします。

また、次の点にも注意してください。

• *: すべての要素が該当します。
• vertex: すべての頂点が該当します。
• edge: すべてのエッジが該当します。
• example (25.1以降では非推奨): exampleクラスが指定されているすべての要素が該当します。
• vertex.example (25.1以降では非推奨): example クラスが指定されたすべての頂点が該当します。
• vertex:selected: 選択したすべての頂点が該当します。
• vertex[id > 10] (25.1以降では非推奨): id > 10が設定されたすべての頂点が該当します。

  settings.ruleBasedStylesを使用することをお薦めします。

• vertex[properties.some === 'value']: 値が設定されたプロパティが設定されたすべての頂点が該当します。

• settings.ruleBasedStylesを使用することをお薦めします。設定のすべてのプロパティはオプションで、デフォルトが設定されています。

3.1.4 featureFlags

このセクションには、指定したフィーチャまたはフィーチャ・グループを非表示にする階層フラグを記述します。

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

このセクションには、グラフ・データの特定のページを取得するためのコールバックを記述します。

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

デフォルトでは、ページ区切りは表示されません。指定する場合は、dataを設定する必要はなく、最初に表示する際に、グラフ・ビジュアライゼーションが最初のページを自動的にフェッチします。

3.1.6 expand

このセクションには、指定した頂点のnホップの隣接範囲を取得するためのコールバックを記述します。

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

デフォルトでは、expandまたはfocusは表示されません。

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

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

3.1.9 fetchActions

このセクションには、データ・ソースからアクションを取得し、グラフの初期ロード時に適用するためのコールバックを記述します。

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

このセクションには、検索と一致する頂点およびエッジのリストを取得するためのコールバックを記述します。

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

このセクションには、フィルタのリストを更新するためのコールバックを記述します。

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

3.1.12 updateEvolution

このセクションには、成長機能を有効または無効にするためのコールバックを記述します。

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

3.1.13 updateSelectedOption

このセクションには、スマート展開またはスマート・グループに対して選択したオプションを更新するためのコールバックを記述します。

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

3.1.14 updateSearchValue

このセクションには、ライブ検索に使用する値を更新するためのコールバックを記述します。

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

3.1.15 updateGraphData

このセクションには、グラフ・データが更新された場合にイベントを処理するためのコールバックを記述します。

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