4.6 Rule-Based Styles

Rule-based styles can be applied on any vertex or edge property values. You can define a rule-based styling using one or more defined properties. The set condition is verified and the vertices or edges are filtered based on the given condition.

The following operators can be used to determine if the property value matches the set rule: =, >, <, >=, <=, !=, and ~.

Consider the following example which describes a rule to color vertices blue if they have a label value blue in properties.

const vertices = [
  {
    id: 1,
    properties: {
      first_name: 'Angel',
      last_name: 'Rodriguez'
      age: 10
    }
    labels: ['person']
  },
  {
    id: 2,
    properties: {
      first_name: 'John',
      last_name: 'Anderson'
      age: 20
    },
    labels: ['person']
  },
  {
    id: 3,
    properties: {
      first_name: 'Matt',
      last_name: 'Judge'
      age: 30
    },
    labels: ['person']
  }
];

const edges = [
  {
    id: 1,
    source: 1,
    target: 2
  },
  {
    id: 2,
    source: 2,
    target: 3
  }
];

const settings = {};
settings.baseStyles = {
  vertex: {
    label: { text: '${properties.name}' }
  }
};

settings.ruleBasedStyles = [
  {
    // Rule's target
    target: 'vertex',
    component: 'vertex',
    // The conditions on which the filter will be applied
    conditions: {
      conditions: [
        // This condition will apply to all the vertices that has 'person' on their labels
        {
          property: "labels",
          operator: "CONTAINS",
          value: "person"
        }
      ]
    },
    // The title for the filter that will show in the legend
    legendTitle: 'Rule by labels',
    // The colors to apply to the nodes that match the rule
    style: {
      color: 'blue'
    },
    stylingEnabled: true
  },
  {
    // Rule's target
    target: 'vertex',
    component: 'vertex',
    // The conditions on which the filter will be applied
    conditions: {
      conditions: [
        // This condition will verify if the property first_name on a vertex is equals to 'John'
        {
          property: "first_name",
          operator: "=",
          value: "John"
        }
      ]
    },
    // The title for the filter that will show in the legend
    legendTitle: 'Rule by property named first_name being equals to John',
    // The colors to apply to the nodes that match the rule
    style: {
      color: 'red'
    },
    stylingEnabled: true
  }
];

new GraphVisualization({
  target: document.body,
  props: { data: { vertices, edges }, settings }
});

Rule-based styles can also be applied to adjust the size of nodes. Also, you can define a rule to match multiple conditions simultaneously. These conditions can be configured using and or or operators. In such a case, filtering is applied only when all the specified conditions are met for the and operator, or when any one of the conditions is satisfied for the or operator.

// This import is not necessary if you are using Oracle JET.
import '@ovis/graph/alta.css';
import Visualization from '@gvt/graphviz';

const vertices = [
  {
    id: 1,
    properties: {
      color: 'blue',
      name: 'Hello',
      age: 10
    }
  },
  {
    id: 2,
    properties: {
      color: 'blue',
      name: 'World',
      age: 20
    }
  },
  {
    id: 3,
    properties: {
      name: 'Some Name',
      age: 30
    }
  }
];

const edges = [
  {
    id: 1,
    source: 1,
    target: 2
  },
  {
    id: 2,
    source: 2,
    target: 3
  }
];

const settings = {};
settings.baseStyles = {
  vertex: {
    label: {text: '${properties.name}'}
  }
};

settings.ruleBasedStyles = [
  {
    // The target in the rule.
    target: 'vertex',
    component: 'vertex',
    // The conditions on which the rule will be applied.
    conditions: {
      operator: 'and',
      conditions: [
        // This condition will verify that the name contains the letter o.
        {
          property: "name",
          operator: "~",
          value: "o"
        },
        // This condition will verify that the name contains the letter l.
        {
          property: "name",
          operator: "~",
          value: "l"
        }
      ]
    },
    // The title for the filter that will show in the legend.
    legendTitle: 'Rule by name',
    // The colors to apply to the nodes that match the rule.
    style: {
      size: 15
    },
    stylingEnabled: true
  }
];

new GraphVisualization({
  target: document.body,
  props: { data: { vertices, edges }, settings }
});