Workflow Application

Overview

The Workflow Application uses a wizard style user interface, directing the user through the various steps involved in running text analyses.

File Structure

• resources
  • css
  • images
  • js
    • contains files specific to the application, and extensions of Ext components
    • workflowFeature.js is the central file for this application
• index.html
  • loads all the JS and CSS files, and initializes the application

Important Files

workflowFeature.js

This file contains the Monk.feature.Workflow class and its main functions are as follows:

• keep a registry of the relation between windows and components
  • this.toolWindowRegistry
• parse any existing request parameters and use them to load a particular screen (Project, Toolset, etc.)
  • getURLParameters, initializeParameters
• initialize and launch components (used by Toolset)
  • initializeTools, this.components, initializeComponent
• store the application toolsets (as opposed to user toolsets)
  • initializeToolsets
• create the layout for the application
  • initializeLayout, initializeHeader

flow-manager.js

tool-flow-manager.js

WindowManager.js

Workflow Screens

Project Selector

Project

Toolsets

The toolsets displayed here are separated into two types:

• Default/application toolsets
  • This list of toolsets comes from the toolsetList in workflowFeature.js. It has the following structure:

    [
        {
            id: 'toolset-search', // unique toolset ID
            label: 'Classification', // the toolset's name
            pathToIcon: 'resources/images/toolsets/toolset.gif', // an icon for the toolset, should be w87 x h70 pixels
            description: 'A long description', //  describes the main function of the toolset, displayed as a rollover pop-up
            tools: [
                {
                    id: 'step1', // unique tool "step" ID
                    label: 'workset selection', // label for this step, displayed in the toolset toolbar
                    components: ['collections-tree-browser', 'workset-manager'], // an array of component IDs
                    layouts: [
                        {
                            id: 'collections-tree-browser-window', // the component window ID (component ID + '-window')
                            // the following values are floating point numbers between 0 and 1
                            x: 0, // window x position, 0 = far left, 1 = far right
                            y: 0, // window y position, 0 = top, 1 = bottom
                            width: 0.4499, // window width, 1 = full width
                            height: 0.4806 // window height, 1 = full height
                        },
                        { } // etc.
                    ]
                },
                { } // etc.
            ]
        },
        { } // etc.
    ]
    

  • The layouts array is optional. If none is provided, the default layout is a column layout, with each component window getting equal width.
  • An easy way to figure out the values for the layouts array is to manually arrange the windows in your toolset, then call the feature.windowManager.getWindowLayouts method, which will return an array with the appropriate structure.
• User toolsets
  • Users must create and save toolsets using the Toolset Editor in order for them to appear here.

Worksets

Results

Toolset Editor

Toolset