Ports and Wires
To move a wire, click on the wire. (It will highlight in bold if you've done so successfully.) Click on the port from which you want to take it, and drag it to its new destination.
To delete a wire, click on the wire. Hit delete on your keyboard.
NOTE: The wire will highlight in blue when you are hovering over it. It will stay bold in blue when you've successfully clicked on it.
Component Tool Bar (Documentation, Editing, Settings)
If you hover over a component, a tool bar will appear below it.
Clicking on an icon accesses functionality. The information icon opens the component's documentation. The light bulb will open the Cognitive Network (coming soon!) for that component. The pencil opens the Component Editor so you can edit the component if you have permission. The equalizer icon allows you to adjust Component Settings, which define information about the server-side environment that the components run in. The trash can deletes the component. (It does not make Oscar appear. It deletes the component from the dataflow. So be careful with that one, lest you become the grouch.)
Click on a port or double-click the component to expand the component. You can then expand individual ports to access their configuration tools by clicking on the bar next to the port. In this example the Table component is expanded and the data input of the component is expanded.
Depending on a ports purpose and the architecture of the component, you'll see different fields available for configuration inside each port. Configuration may require editing JSON or writing a brief expression. Each component will have different purposes and work in different ways.
One of your two primary tools for understanding how to configure a component is the component documentation, available via the information icon that appears while hovering over a collapsed component or in the ellipsis in the upper right of an expanded component.
There is also documentation for configuring components and many types of ports you will encounter.
Data Viewing and Editing
Once you've expanded a component, if you hover over the data bar next to a port, you'll see an edit icon (box and pencil). Clicking on that icon will open a larger window where you can view the data in that port in either JSON or in a table. You can also edit the data in that window and send it into the data flow.
Here is the data viewing and editing window at the bottom of the DATAFLOW canvas.
Port Tools - Send, persist, and clear data
Click on a port or double-click the component to expand it. If you hover over the port you want to work with ellipsis will appear. Or, if the port has a box next to it, click the box for the port you want to work with to expand it. There you'll find the ellipsis.
Clicking the arrow sends the data in the port through the dataflow.
When a component's input receives data, whether from another component or entered by hand, you have the option to have that data persist, not persist, or to clear it. Components default to persist. With "persist" checked, the value will persist even if you close the xap. When you open it, the value will reload in that input. Click "persist" to uncheck it, if you would like the value in that input to clear when you close the xap. The next time you open the xap, no value will load. Click "clear" to clear the value right away.
Merge Gates (a.k.a. Data Gates)
Click the T icon (just below the merge gates icon) to add an annotation to your Xap. Once clicked, an template text box will appear. Double click to open it, get help on annotations, or delete it.
You can add or remove components from a group while it's expanded. Just drag them into the box to add. Drag them out of the box to the left to remove. (Dragging to the right expands the box.)