4.8 Icons

The Graph Visualization Toolkit supports Redwood as native icon library.

Consider the following example using the icon library:

// 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: {
      label: 'blue',
      name: 'Hello'
    }
  },
  {
    id: 2,
    properties: {
      label: 'blue',
      name: 'World'
    }
  },
  {
    id: 3,
    properties: {
      name: 'Some Name'
    }
  }
];

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

const settings = {};
settings.baseStyles = {
  // Style applies for all the vertices.
  vertex: {
    size: 12,
    label: '${properties.name}',
    color: 'red',
    icon: 'oj-ux-ico-user-not-available',
  },

  "vertex:hover": {
    size: '${previous + 4}'
  },
  // Style applies for all the edges.
  "edge": {
    label: '${id}',
    color: '#FF8080'
  }
};

settings.ruleBasedStyles = [
  {
    component: 'vertex',
    target: 'target',
    conditions: {
      conditions: [
        {
          property: 'name',
          operator: '=',
          value: 'Hello'
        }
      ],
      operator: 'and'
    },
    style: {
      color: 'green'
    },
    stylingEnabled: true,
  },
  {
    component: 'vertex',
    target: 'target',
    conditions: {
      conditions: [
        {
          rule: 'id % 3 === 0'
        }
      ],
      operator: 'and'
    },
    style: {
      color: 'gray',
      icon: { class: 'oj-ux-ico-user-available' }
    },
    stylingEnabled: true,
    legendTitle: 'advanced conditions'
  }
];

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

The resulting graph visualization is as shown:

Figure 4-12 Using Redwood Icons in Graph Visualization