How to create and maintain graphs using only the admin UI

Creating graphs from the UI

You'll need the Associativy.Administration module to be able to have a UI for backend graph management.

  1. Enable the Associativy Ad-hoc Graphs feature.
  2. You'll notice there is a new creatable content type, Associativy Graph. Click it under New to see the graph editor.
  3. Choose a display name (i.e. what users may see) and a technical name (used internally to identify the graph).
  4. Choose which content types' items will be included in the graph (a content type can be part of multiple graphs).
  5. Save the graph. You can edit it later by e.g. visiting its editor from its admin menu item under the Associativy container.

Now you have a graph, but it's empty (there might be content items of the type(s) you selected, but since they don't have any connections to each other, they're not shown in the graph). So you might want to add connections between possible nodes to build the graph.

Editing node labels and managing connections

Fortunately after you saved your graph Associativy automatically added the Associativy Node Management Part and Associativy Node Label Part to the content types you selected. Those are needed for the following:

  • Associativy Node Management Part: adds a UI to content item editors for managing connections. That means, through this UI you can connect one content type to another.
  • Associativy Node Label: for easier management and visualization it's adviced to have labels for nodes. This is just a text, like a title, for labeling nodes.

Now go ahead and let's create that graph at last!

  1. Edit an existing item of the content types selected for the graph or create a new one. Under the item editor you'll see the UI to add connections to the node. This uses labels, and it's important for all content items in the graph to have labels. So if you created the graph with content types already having items, you first need to set labels for them. For this you have the following options:
    • Set the label for all items individually,
    • or generate them using a pattern. To go with this latter option go the the content type editor of each of the content types in the graph. There under the settings of Associativy Node Label you'll see the "Refresh Labels" button. Click it to refresh the labels used the pattern also shown there (you can customize the pattern of course). The generated label can still be overridden on the item level.
  2. Now all the nodes have labels, but they don't connect to each other yet. Edit the nodes and add neighbours to them using the Node Management UI.
  3. You won't be able to view a graph visualization yet. For this you need a frontend engine. Associativy comes with three engines, enable e.g. the Jit Frontend Engine.
  4. Afther that there will be a link on the graph's admin page to the visualizations. Now there is you graph, in its full glory!

Note that when displaying the graph only nodes that have connections are displayed.

For the Graphviz frontend engine to work, since it produces SVG files, the .svg file type should be allowed in the Orchard Web.config.