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
Wings/Pegasus
Kepler
Galaxy
- 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
