occam-web-client

1.0.0

Occam

This is the main class for the site.

new Occam()
Static Members
loadTabPanel(element)
resize(element, event)
title()

AutoComplete

This represents a text input that can auto complete using the search capability. It will render icons specific to certain Occam objects and people/accounts on the system.

Generally, you instantiate an AutoComplete using AutoComplete.load(element) instead of invoking this directly.

new AutoComplete(element: HTMLElement)

Extends EventComponent

Parameters
element (HTMLElement) The main element for the auto complete; typically the <input> element.
Static Members
load(element)
Instance Members
initialize()
object()
select(item)
fillDropdown()
open()
close()
bindEvents()

This represents a dropdown menu used for navigation purposes or selecting an action from a list of possible actions.

Generally, you instantiate a Dropdown using Dropdown.load(element) instead of invoking this directly.

new Dropdown(element: HTMLElement)

Extends EventComponent

Parameters
element (HTMLElement) The main element for the dropdown menu; typically the <ul> element.

Util

This class contains useful functions mostly related to DOM exploration and ajax requests.

new Util()
Static Members
createElementFromTemplate(template)
replaceTag(element, tagName)
formatString(input, options)
submitForm(form, data_or_callback, callback, responseType)
submitForm(form, data_or_callback, callback)
ajax(method, url, data, callback, responseType)
ajax(method, url, data, callback, responseType)
get(url, callback, responseType, options)
get(url, callback, responseType, options)
getJSON(url, callback, options)
getJSON(url, callback, options)
post(url, data, callback, responseType)
post(url, data, callback, responseType)
getParameterByName(name, url?)
getParameterByName(name, url?)
getParameters(url?)
getChildIndex(element, filter?)
getChildIndex(element, filter)
getParents(element, parentSelector?, filter?)
getParents(element, parentSelector?, filter?)
hslToRgb(h, s, l)
hslToRgb(h, s, l)
copyToClipboard(text)
copyToClipboard(text)
getTextWidth(text, font)
canonizeKey(event)

Util

This class contains useful functions mostly related to DOM exploration and ajax requests.

new Util()
Static Members
createElementFromTemplate(template)
replaceTag(element, tagName)
formatString(input, options)
submitForm(form, data_or_callback, callback, responseType)
submitForm(form, data_or_callback, callback)
ajax(method, url, data, callback, responseType)
ajax(method, url, data, callback, responseType)
get(url, callback, responseType, options)
get(url, callback, responseType, options)
getJSON(url, callback, options)
getJSON(url, callback, options)
post(url, data, callback, responseType)
post(url, data, callback, responseType)
getParameterByName(name, url?)
getParameterByName(name, url?)
getParameters(url?)
getChildIndex(element, filter?)
getChildIndex(element, filter)
getParents(element, parentSelector?, filter?)
getParents(element, parentSelector?, filter?)
hslToRgb(h, s, l)
hslToRgb(h, s, l)
copyToClipboard(text)
copyToClipboard(text)
getTextWidth(text, font)
canonizeKey(event)

This represents a navigation list which is used to navigate within documentation pages.

new NavigationList(element: any)

Extends EventComponent

Parameters
element (any)
Static Members
Instance Members

Selector

This represents a dropdown selection and typically wraps a <select> element on the page.

Generally, you instantiate an Selector using Selector.load(element) instead of invoking the constructor directly.

new Selector(element: HTMLElement)

Extends EventComponent

Parameters
element (HTMLElement) The main element for the selector; typically the <select> element.
Static Members
load(element)
Instance Members
loading()
loaded()
clear()
items()
selected()
select(index_or_element)
infoFor(index_or_element)
open()
update(index_or_element, data)
append(data, toIndex)
disable()
enable()
bindEvents(force)
bindItemEvents(item)

ButtonSelector

This represents a dropdown selection for changing a button's behavior and typically wraps a div containing some number of <button> or <input> elements on the page.

Generally, you instantiate a ButtonSelector using ButtonSelector.load(element) instead of invoking the constructor directly.

new ButtonSelector(element: HTMLElement)

Extends EventComponent

Parameters
element (HTMLElement) The main element for the dropdown; typically some <div> element.
Static Members
load(element)
Instance Members
items()
selected()
open()
disable()
enable()
select(index)
bindEvents(force)
bindItemEvents(item)

Calendar

Represents a calendar widget which is used primarily for the Object history page.

new Calendar(element: any)

Extends EventComponent

Parameters
element (any)
Static Members
load(element)
loadAll(element)
Instance Members
initialize()
draw()
drawHeader()
drawLegend()
drawMonth()
drawDay(day)
drawEvents(day, element)

optionFor

Returns the current option set for the given key.

optionFor(key: any)
Parameters
key (any)

This represents the actions tied to the object header (the main banner with the object name and dropdowns.

new Header(element: HTMLElement)

Extends EventComponent

Parameters
element (HTMLElement) The main element for the object header; typically the <h1> element.
Instance Members
bindEvents(force)

Locator

This represents an object lookup.

new Locator(element: any)
Parameters
element (any)
Static Members
load(element)
Instance Members
search()

Globe

Represents the earth for the purposes of visualizing object location.

The earth is a sphere. I am officially part of the globehead conspiracy.

new Globe(element: any, options: any)
Parameters
element (any)
options (any)
Instance Members
_resize(width, height)
_initializeGlobe()
_initializeGraticule()
drawGlobe()
_drawGraticule()
rotate
_rotate()
addPoint(latitude, longitude)

Tooltip

This class represents a tooltip. This can display helpful text on links or buttons that might not have text displayed for it.

These are automatically created for anything that has a title attribute.

Generally one uses the Tooltip.load() function to instantiate a tooltip, or, even better, just lets it get instantiated for any element with a title attribute automatically.

new Tooltip(element: HTMLElement)

Extends EventComponent

Parameters
element (HTMLElement) The element to attach the tooltip events to.
Static Members
loadAll(element)
load(element)
Instance Members
show(message)
hide()
bindEvents()

Terminal

This class instantiates a terminal emulator at the given element.

new Terminal(name: any, type: any, data: any, element: any, link: any)

Extends EventComponent

Parameters
name (any)
type (any)
data (any)
element (any)
link (any)

WebSocket

This class module manages any open WebSocket connections.

Generally, there is a single open websocket connection that is shared among all page components. This module routes requests from the server to the correct component.

new WebSocket()
Static Members
initialize()
onopen(event)
onclose(event)
onmessage(message)
onerror(event)
route(item, callback, self)
RECONNECT_PERIOD
MAX_RECONNECT_PERIOD
ws
router

Flash

This class represents flash popups. This can display helpful messages upon actions being taken or errors occurring.

new Flash()

Extends EventComponent

TagInput

This represents a tagged input element.

new TagInput(element: any)

Extends EventComponent

Parameters
element (any)
Static Members
load(element)

Tabs

This class handles any tab strip on the website.

new Tabs(element: any)

Extends EventComponent

Parameters
element (any)
Static Members
tabsFor(element)
Instance Members
tabStripWidth
checkDropdownVisibility()
showDropdownMenuButton(event)
hideDropdownMenuButton(event)
showDropdownMenu(event)
hideDropdownMenu(event)
showSidebarButton(index)
hideSidebarButton(index)
revealTabEvent(element, event)
index()
select(index, doNotPushState, force)
freezeTabWidth(tab)
documentTitle
updateDocumentTitle()
count()
selected()
bindEvents(tab, tabPanel)
bindDropdownEvents(tab)
addTab(name_or_element, b, c)
replaceTab(atIndexOrElement, newTab)
removeTab(atIndexOrElement)
tabAt(atIndex)
tabPanels()
tabPanelAt(atIndex)
merge()
mergeWith(subTabs)

Index

This class handles the index page at the root of the site ('/').

new Index(element: HTMLElement)

Extends EventComponent

Parameters
element (HTMLElement) The element to look for the index page.
Static Members
loadAll(element)
load(element)
Instance Members
determineActiveNavButton()
bindEvents()

The gallery is a series of images which are represented by a series of thumb images (smaller images). When somebody clicks on the thumb, the larger image is displayed above.

By default, a slideshow is started where the images cycle through in the thumbnail order every few seconds (configured using SLIDESHOW_INTERVAL).

A particular image may be displayed on page load when targetted in the URL using the hash syntax: "/foo/bar#gallery-image-3" will select the 4th image. This targetting also allows the gallery to be used when javascript is disabled through the use of css ":target" pseudo selector. This is why styling is done on both :target and .active, and why this module has to set the style of the opacity to 0.0 for all elements since the CSS-only way of doing things always reveals the first image, in case no hash is given in the URL.

When a particular image is selected in this manner, the slideshow feature is disabled. Also, when somebody clicks on a particular image, it is assumed they want to look at it, so the slideshow is similarly disabled.

Generally you use the Gallery.load method to instantiate a Gallery component.

new Gallery(element: HTMLElement)

Extends EventComponent

Parameters
element (HTMLElement) The element that contains the image gallery.
Static Members
SLIDESHOW_INTERVAL
THUMB_PADDING

This class implements the search results viewer and facet panel.

new Search(element: any)

Extends EventComponent

Parameters
element (any)
Static Members
POLL_TIME

FileList

This class handles the file listing and navigation.

It also handles file input configuration management for things such as selecting which files to use as input.

new FileList(element: any)

Extends EventComponent

Parameters
element (any)
Instance Members
loadGroup(url, name)
loadFile(url, type, name)
bindEvents()
uploadDirectory(info, path)
uploadFile(file, path)
uploadFileListItem(file, path)
uploadFileList(files, path)
create(path, name, isFile, existingRow)
createDirectory(path, name)
bindNewRowEvents(element)
updateDocumentTitle()

Runner

This class manages the various run panes throughout the site.

An instance of the class is created for the "View" or "Run" tab, of course, but also for the "Build" tab, any open file tabs, and any preview pane.

It is responsible for queuing runs or individual jobs and managing any widget events and widget configurations.

new Runner(element: any)

Extends EventComponent

Parameters
element (any)
Instance Members
runList
focus(runListItem)
cancel(runListItem)
loadBuild(runListItem)
loadPanel(runListItem)
inputObject()
openConfigurationPanel()
closeConfigurationPanel()
toggleConfigurationPanel()
run(task)
runBrowserTask(task)
runServerTask(task)
bindRunFormEvents()

RunForm

This class represents a VM builder widget that allows for the selection of the running object and potentially each providing object and backend.

new RunForm(element: any)

Extends EventComponent

Parameters
element (any)
Instance Members
run(button)
info
bindEvents()
dataFor(item)
update(item, data)
itemAt(index)
bindObjectEvents()

Task

This class retrieves information about a particular Task object.

new Task(element: any)
Parameters
element (any)
Instance Members
loadTask()
initialize()

Job

This class represents a Job in the job queue.

new Job(element: any)

Extends EventComponent

Parameters
element (any)
Static Members
POLL_TIME
Instance Members
on(name, callback)
connect(callback)

Widget

This class represents any running interactive object.

new Widget(element: any)

Extends EventComponent

Parameters
element (any)
Instance Members
isPreview()
isDirty()
object
input
taskInfo
initializePreview()
handleUpdateTask(message)
normalizeTask(taskInfo)
sendUpdateTask()
handleUpdateConfiguration(message)
handleUpdateInput(message)
handleUpdateToolbar(message)
handleUpdateFile(message)
handleUpdateData(message)
handleUpdateSize(message)
handleUpdateStatus(message)
sendReadyStatus()
bindEvents()
bindMessageEvents()

RunList

This class represents a run list, which is the list of queued or running jobs or tasks.

This panel appears on the "View" or "Run" and usually has an entry for "Queue" which can queue a new task. It also appears on each file tab.

This list is also reused for the job viewer to list the jobs for a node in a workflow.

new RunList(element: any)

Extends EventComponent

Parameters
element (any)
Instance Members
element
hide()
show()
showHideList(show)
select(index_or_element)
selected()
infoFor(index_or_element)

Viewer

This class manages the viewer object selector.

The Runner class still manages the runtime of these viewers.

new Viewer(element: any)

Extends EventComponent

Parameters
element (any)

Workflow

This class represents any Workflow component.

A workflow pane consists of at least a Workflow widget and possibly a set of sidebars for selecting objects, viewing configurations, and viewing job logs.

new Workflow(element: any)

Extends EventComponent

Parameters
element (any)
Static Members
POLL_TIME
defaults
Instance Members
connectToConfigurationTabs()
showObjectSelector()
hideObjectSelector()
showConfigurations()
hideConfigurations()
initializeSidebar()
insertNode(node)
selectPort(port)
unselectPort()
selectWire(wire)
unselectWire()
disconnect(portA, portB, wire)
connect(portA, portB)
moveTo(x, y)
pan(deltaX, deltaY)
x
y
layout()
redraw()
palette
nodes
nodeAt(index)
clear()
fromJSON(json)
toJSON()

Workflow

This is the main class for instantiating a Workflow widget.

new Workflow(element: HTMLElement, options: object?, graph: object?)

Extends EventComponent

Parameters
element (HTMLElement) The workflow element to instantiate within.
options (object?) The optional set of options. See Workflow.defaults.
graph (object?) The optional initial serialized graph data.
Static Members
POLL_TIME
defaults
Instance Members
connectToConfigurationTabs()
showObjectSelector()
hideObjectSelector()
showConfigurations()
hideConfigurations()
initializeSidebar()
insertNode(node)
selectPort(port)
unselectPort()
selectWire(wire)
unselectWire()
disconnect(portA, portB, wire)
connect(portA, portB)
moveTo(x, y)
pan(deltaX, deltaY)
x
y
layout()
redraw()
palette
nodes
nodeAt(index)
clear()
fromJSON(json)
toJSON()

SVGPlane

This class represents the SVG layer.

new SVGPlane(element: HTMLElement, options: object)

Extends EventComponent

Parameters
element (HTMLElement) The <svg> element.
options (object) The set of workflow widget options.
Static Members
create(options)
Instance Members
element
width
width
height
height
appendChild(child)
removeChild(child)

EventComponent

Extending this class allows a component to provide event handling and callbacks.

new EventComponent()
Instance Members
on(name, callback)
on(name, callback)
off(name, callback)
off(name)
trigger(name, data)
trigger(name, data)
callbacksFor(name)
callbackFor(name)

EventComponent

Extending this class allows a component to provide event handling and callbacks.

new EventComponent()
Instance Members
on(name, callback)
on(name, callback)
off(name, callback)
off(name)
trigger(name, data)
trigger(name, data)
callbacksFor(name)
callbackFor(name)

eventCallback

A generic event callback.

eventCallback(null-null: data)

Type: Function

Parameters
null-null (data) Any event data.

eventCallback

A generic event callback.

eventCallback(Any: data)

Type: Function

Parameters
Any (data) event data.

World

This represents a DOM surface. Each component within the World can be moved, with some rules.

Essentially, this class manages the interaction between a person and the widget in terms of handling mouse and touch events. This class registers event handlers and will pan, zoom, and move components around the overall visualization.

To add a component, just create a World based on an element, and then invoke the add() member with an instance of a MovableComponent, which itself is wrapping an element that is within the main element given to this constructor.

new World(element: HTMLElement, options: object)

Extends EventComponent

Parameters
element (HTMLElement) The element containing all components.
options (object) The options governing the possible interactions.
Instance Members
element
draggable
zoom
zoom
x
y
centerX
centerY
selected
add(component)
remove(component)
pan(deltaX, deltaY)
center(x, y)
moveTo(x, y)
move(component, x, y)
selectionMove(deltaX, deltaY)
redraw()
selectAll()
selectionClear()
selectionDragEvent(event)
selectionDragEndEvent(event)
panDragEvent(event)
wheelEvent(event)
mouseDownEvent(event)
keyDownEvent(event)
keyEvent(event)

Quadtree

This represents the Quadtree which manages the collision space.

new Quadtree(nodes: any, options: any)
Parameters
nodes (any)
options (any)
Instance Members
add(component)
update(component)
remove(component)
queryWithin(x, y, width, height)
queryOverlapping(x, y, width, height)

Wire

This represents a connection between two Ports.

new Wire(elementA: HTMLElement, elementB: HTMLElement, portA: Port, portB: Port, path: HTMLElement, options: object)

Extends EventComponent

Parameters
elementA (HTMLElement) The <li> element within the starting Port.
elementB (HTMLElement) The <li> element within the end Port.
portA (Port) The Port that serves as the starting point.
portB (Port) The Port that serves as the endpoint.
path (HTMLElement) The <path> element within the SVG plane.
options (object) The workflow widget options.
Static Members
create(options, portA, portB)
LEFT
RIGHT
UP
DOWN
Instance Members
toggle()
selected
select()
unselect()
portStart
portEnd
elementStart
elementEnd
indexStart
indexEnd
path
xStart
yStart
xEnd
yEnd
lengthStart
lengthEnd
directionStart
directionEnd
redraw()
disconnect()
destroy()

Port

This represents a component that reflects a "port" for a workflow node.

A port is a possible connection between nodes. It represents a relationship between nodes. Ports may be 'inputs' or 'outputs', in that they are tagged as such. In these cases, it reflects a semantic relationship and may be used this way to indicate the movement of work or data throughout the graph.

When you connect a node to another, the person will create a Wire between each port. Each node will have their own Port, represented visually by a dot. A wire may be created by dragging from one node to another, for instance.

The Port has a name and type. The types may be used to semantically relate different ports or nodes. For instance, it can be established that some ports only allow connections from a Port with the same type (or set of possible types)

new Port(element: any, node: any, options: any)

Extends EventComponent

Parameters
element (any)
node (any)
options (any)
Static Members
create(json, node, options)
Instance Members
node
index
element
direction
direction
top
left
toggle()
selected
select()
unselect()
redraw()
reposition()
wires
count
max
appendStart(wire)
appendEnd(wire)
remove(wire)
connectionType
type
type
name
name
visibility
visibility
fromJSON(json)
toJSON()
destroy()

Node

This represents a node in the workflow graph.

new Node(element: HTMLElement, options: any)

Extends MovableComponent

Parameters
element (HTMLElement) The <li> element representing the node.
options (any)
Static Members
create(json, options, element)
Instance Members
index
selectable
movable
regionSelectable
collidable
type
type
name
name
icon
icon
visibility
visibility
data
data
getData(key)
setData(key, value)
destroy()
allPorts
toggle()
selected
select()
unselect()
view()
unview()
highlight()
unhighlight()
rearrangePorts()
move(x, y)
redraw()
portAt(index)
inputAt(index)
outputAt(index)
ports
inputs
outputs
hiddenPorts
hiddenInputs
hiddenOutputs
showPortDropdown(button)
showInputDropdown(button)
showOutputDropdown(button)
hideDropdown()
updateJob(info)
fromJSON(json)
updatePortAddButtons()
toJSON()

JobDonut

This represents a set of jobs associated with a particular node.

new JobDonut(element: HTMLElement, options: Object)
Parameters
element (HTMLElement) The element for the node.
options (Object) The configuration of the donut.

MovableComponent

This represents a visual component that can be moved.

new MovableComponent(element: HTMLElement)

Extends StaticComponent

Parameters
element (HTMLElement) The element to wrap.
Instance Members
movable
move(x, y)
x
y
mouseDownEvent(event)
moveDragEvent(event)
moveDragEndEvent(event)

StaticComponent

This represents a visual component that cannot be moved.

new StaticComponent(element: HTMLElement)

Extends EventComponent

Parameters
element (HTMLElement) The element to wrap.
Instance Members
selectable
regionSelectable
collidable
element
x
y
width
height
bounds

Configuration

This class handles a configuration form.

new Configuration(element: any, callback: any)

Extends EventComponent

Parameters
element (any)
callback (any)
Instance Members
data()
dataPoints()
addDataPoint(objectId, objectRevision, nesting, datapoint, dataViewer)
bindValueEvents(element)
objectId()
objectRevision()
connectionIndex()
inputIndex()

ConfigurationPanel

This class handles the configuration panel that appears in the workflow editor.

This panel contains one or more Configuration forms which can be viewed or edited per node of the workflow.

new ConfigurationPanel(element: any)

Extends EventComponent

Parameters
element (any)
Instance Members
loadConfiguration(index, workflowObject, object)

ThemeManager

This class manages theme editing and selection.

new ThemeManager(element: HTMLElement)

Extends EventComponent

Parameters
element (HTMLElement) The element that displays the theme editor.
Static Members
loadAll(element)
load(element)
Instance Members
bindEvents()

OccamObject

This class handles functionality related to Occam objects. This class can pull down information and metadata and post updates to the Occam backend, if that is allowed by the object.

Objects have queues of pending actions which need to be ACK'd before continuing. That way actions are invoked in the correct order. An object's revision is updated whenever an action is acknowledged. Some actions require an object to be up-to-date in the backend worker, and thus must wait until the queue is empty. For instance, running the object in the browser. Basically, these actions are just in the queue as well... but we should somehow indicate that the actions are delayed.

new OccamObject(id: any, revision: any, type: any, name: any, file: any, index: any, link: any, token: any)
Parameters
id (any)
revision (any)
type (any)
name (any)
file (any)
index (any)
link (any)
token (any)
Static Members
MAX_CONCURRENT_PREVIEW_LOADS
PREVIEW_TIMEOUT

Collection

This implements behaviors for the people/collection page.

new Collection(element: any)

Extends EventComponent

Parameters
element (any)

EditModal

This implements behaviors for the objects/new modal.

new EditModal(element: any)

Extends EventComponent

Parameters
element (any)

NewModal

This implements behaviors for the objects/new modal.

new NewModal(element: any)

Extends EventComponent

Parameters
element (any)

AddDependencyModal

This implements behaviors for the objects/new modal.

new AddDependencyModal(element: any)

Extends EventComponent

Parameters
element (any)

AddResourceModal

This implements behaviors for the objects/new modal.

new AddResourceModal(element: any)

Extends EventComponent

Parameters
element (any)

ObjectList

This class represents an object list, which is used for displaying the list of dependencies or resources on the details page.

new ObjectList(element: any)

Extends EventComponent

Parameters
element (any)
Static Members
load(element)
loadAll(element)
Instance Members
bindEvents()
bindItemEvents(element)
update(entry, options)
clear()
append(options, atIndex)
remove(index_or_element)
length
replace(index_or_element, newEntry)
elementFor(index_or_element)
infoFor(index_or_element)

This class module holds useful functionality for keeping track of the browser history and state.

This can coordinate among elements on the page such that the browser back and forward buttons do not do a full page refresh, but rather update the page when the content already exists.

new NavigationState()
Static Members

ConfigurationValidator

This class handles a configuration form.

new ConfigurationValidator()