Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Visualizing and Editing Graphs"

(New page: = Visualizing and Editing Graphs (Under Construction) = STEM uses color providers to determine the colors used for painting the map that appears during a simulation. The system goes throu...)
 
(Visualizing and Editing Graphs)
 
(17 intermediate revisions by 4 users not shown)
Line 1: Line 1:
= Visualizing and Editing Graphs (Under Construction) =
+
= Visualizing and Editing Graphs =
  
STEM uses color providers to determine the colors used for painting the map that appears during a simulation. The system goes through the graph elements that need to be painted and adapts each one of them into a color. This color is then used as the color for painting that element. If the element is the geographic nodes, then the color is used to fill the polygons that visually represent those nodes.
+
STEM uses graphs as data structure to save information concerning population sizes, areas, spatial information, neighborhood of areas and so on. When you start a scenario, you get information about its appendent graphs in a visual form, e.g. when you see the outlines of the countries you included in your scenario. The Graph Editor allows you to visualize graphs without starting a scenario. You can get a view of the data, edit titles and area sizes, add populations and adjust geographic information of a node. It also makes it possible to create new nodes and edges and to remove existing nodes and edges.
  
A dropdown box below the painted map allows the user running the simulation to choose the type of color provider to be used. STEM comes with a small set of color providers that can be used (like the Intensity and the SEIR). Developers can add new colors by using an extension point mechanism that allows them to plug in their customized color provider.
+
== Step 1. Open the Editor ==
  
Follow the steps below to develop and deploy a customized color provider.
+
When you right-click on an item of the type "Graph" within a project of the STEM Explorer, you will see a context-menu with an item "Display". Clicking on it visualizes the selected graph in the Graph Editor, if the graph contains nodes with spatial information. To visualize all graphs in a certain model, select the item "Display canonical graph" in the model's context menu.
  
==Step 1. Create the provider interface==
+
<gallery widths="300px" heights="300px">
 +
Image:StemOpenGraphEditor.png | Open Graph in Editor
 +
Image:StemOpenGraphEditorModel.png | Open Model in Editor
 +
</gallery>
  
Create a new interface that extends the ''org.eclipse.stem.ui.adapters.color.ColorProvider'' interface.
+
== Step 2. Edit the Graph ==
This interface declares the methods that should be implemented by the color provider.
+
  
For example, ''org.eclipse.stem.ui.adapters.color.IntensityColorsLabelsMappingColorProvider'' indirectly extends the above interface and does not declare any additional methods on top of those already existing in the ColorProvider interface.
+
The nodes of the graph are small circles, whose colors show the membership to a subgraph, i.e. when you have opened a canonical graph consisting of several countries, the country nodes will have different colors. When you click on a node, you get information about its title, its URI and all labels that are assigned to this node. Several of these values are editable. You can move a node by keeping the left mouse button pressed and dragging the node to the desired location. To add a label to a node (e.g. add information about population size or area of the node), remove a label or remove the node itself you have to right-click on the node and a context menu shows up. The parameters of a newly added label can be edited in the bottom part of the editor.
  
==Step 2. Create the adapter==
+
<gallery widths="600px" heights="300px">
 +
Image:StemGraphEditorAddLabel.png | Node Context Menu
 +
</gallery>
  
This class is where the actual work of choosing and providing the right color is done.
+
If you right-click in the graph, when no nodes and edges are selected, a context menu appears. This allows you to create a new node at the location, where you have right-clicked. The polygon of a newly created node is a rectangle, whose side length has to be specified in a dialog.
It should implement the provider interface created in step 1 and the methods declared by it (including the methods declared by the ''ColorProvider'' interface).
+
 
The adapter should also extend the ''ColorProviderAdapter'' class.
+
<gallery widths="600px" heights="300px">
 +
Image:StemGraphEditorAddNode.png | Add Node Context Menu
 +
</gallery>
 +
 
 +
Edges can also be selected to display their properties (type of the edge, ...). Some of the properties can also be edited. Right-clicking on an edge shows a context menu that allows removing this edge.
 +
 
 +
<gallery widths="600px" heights="300px">
 +
Image:StemGraphEditorRemoveEdge.png | Edge Context Menu
 +
</gallery>
 +
 
 +
To add an edge between two nodes, select the origin node. While holding the Ctrl key, right-click on the destination node to open the context menu. Different types of edges can be created.
 +
 
 +
<gallery widths="600px" heights="300px">
 +
Image:StemGraphEditorAddEdge.png | Add Edge Context Menu
 +
</gallery>
 +
 
 +
You can zoom in and out with the mouse wheel.
 +
 
 +
== Step 3. Save the Graph ==
 +
 
 +
To save an edited graph, you can select "Save Graph and Quit" (the changes are saved into the same files) or you select "Save Graph As" where you have to select a folder and filename. When you are working on references to graphs in the STEM graph/model repository, local copies of the references including your changes will be saved to the workspace. If you were working on local copies already, your files will be overwritten when "Save Graph" is selected.

Latest revision as of 20:10, 4 April 2012

Visualizing and Editing Graphs

STEM uses graphs as data structure to save information concerning population sizes, areas, spatial information, neighborhood of areas and so on. When you start a scenario, you get information about its appendent graphs in a visual form, e.g. when you see the outlines of the countries you included in your scenario. The Graph Editor allows you to visualize graphs without starting a scenario. You can get a view of the data, edit titles and area sizes, add populations and adjust geographic information of a node. It also makes it possible to create new nodes and edges and to remove existing nodes and edges.

Step 1. Open the Editor

When you right-click on an item of the type "Graph" within a project of the STEM Explorer, you will see a context-menu with an item "Display". Clicking on it visualizes the selected graph in the Graph Editor, if the graph contains nodes with spatial information. To visualize all graphs in a certain model, select the item "Display canonical graph" in the model's context menu.

Step 2. Edit the Graph

The nodes of the graph are small circles, whose colors show the membership to a subgraph, i.e. when you have opened a canonical graph consisting of several countries, the country nodes will have different colors. When you click on a node, you get information about its title, its URI and all labels that are assigned to this node. Several of these values are editable. You can move a node by keeping the left mouse button pressed and dragging the node to the desired location. To add a label to a node (e.g. add information about population size or area of the node), remove a label or remove the node itself you have to right-click on the node and a context menu shows up. The parameters of a newly added label can be edited in the bottom part of the editor.

If you right-click in the graph, when no nodes and edges are selected, a context menu appears. This allows you to create a new node at the location, where you have right-clicked. The polygon of a newly created node is a rectangle, whose side length has to be specified in a dialog.

Edges can also be selected to display their properties (type of the edge, ...). Some of the properties can also be edited. Right-clicking on an edge shows a context menu that allows removing this edge.

To add an edge between two nodes, select the origin node. While holding the Ctrl key, right-click on the destination node to open the context menu. Different types of edges can be created.

You can zoom in and out with the mouse wheel.

Step 3. Save the Graph

To save an edited graph, you can select "Save Graph and Quit" (the changes are saved into the same files) or you select "Save Graph As" where you have to select a folder and filename. When you are working on references to graphs in the STEM graph/model repository, local copies of the references including your changes will be saved to the workspace. If you were working on local copies already, your files will be overwritten when "Save Graph" is selected.

Copyright © Eclipse Foundation, Inc. All Rights Reserved.