Cyberintegrator Web UI

Overview

Cyberintegrator web UI design and background.

• Overall principles
• No overwriting of right click menu
• Support for touch?
• Pages
• Workflow Editor & execution
• List workflows
• Workflow editor
• Three columns?
• Tools
• Graph
• Tool parameters and description
• Tools
• Add tool
• Remove tool
• Add connection
• Compatible input ports are highlighted when starting to make connections
• Remove connection
• Selecting tool changes its color
• Clicking on a parameter should highlight that parameter in the parameters windows as well, maybe even scroll to it

Technical details

• Divs for nodes and svg for lines
• yahoo pipes
• threehodes.js
• Layout algorithms?
• http://jqueryui.com/draggable/
• http://threedubmedia.com/code/event/drag/
• https://bitbucket.org/galaxy/galaxy-dist/src/8cbb23ed305e6803da733eb7be74bab779ee9ea4/static/scripts/galaxy.workflow_editor.canvas.js?at=default

Mockups

Main layout:

Alternate layout:

Tools on canvas:

Existing Systems

Taverna

Note: 

• Web service as a step/input
• Grouping steps

Wings/Pegasus

Note:

• Simple UI (Pegasus Engine/complex workflow)

Kepler

Note:

• Visualizing the steps (models/processes)
• Director (manage the execution)
• Workflow overview (mini map)

Galaxy

• Web-based editor
• tools show inputs and outputs on canvas but not parameters, those are shown in side panel
• overview of layout in bottom right
• tool parameters setting in the right panel
• button to layout

Yahoo Pipes

• tools organized by types
• tool parameters inside each tool on canvas
• tool list can be hidden
• button to layout

Threenode.js/vvvvv

• toll list and tool parameters both in left panel, toggle between them
• zooming ability in bottom right
• ability to play
• streaming workflows (continuously running)
• overwrites right-click menus
• inputs and parameters are the same?

Trident

Karma