\");;return buf.join(\"\");\n};\n\nthis[\"jade\"][\"templates\"][\"workflow\"] = function template(locals) {\nvar buf = [];\nvar jade_mixins = {};\nvar jade_interp;\n\nbuf.push(\"\");;return buf.join(\"\");\n};\n\nthis[\"jade\"][\"templates\"][\"workflowConnection\"] = function template(locals) {\nvar buf = [];\nvar jade_mixins = {};\nvar jade_interp;\nvar locals_ = (locals || {}),connectionPath = locals_.connectionPath;\nbuf.push(\"\");;return buf.join(\"\");\n};\n\nthis[\"jade\"][\"templates\"][\"workflowStep\"] = function template(locals) {\nvar buf = [];\nvar jade_mixins = {};\nvar jade_interp;\nvar locals_ = (locals || {}),step = locals_.step,edit = locals_.edit,portShape = locals_.portShape;\nvar color;\nif (step.visualization) {\ncolor = 'lightgreen';\n} else if (step.isOutput || step.isInput) {\ncolor = 'lightblue';\n} else {\ncolor = 'whitesmoke';\n}\nvar isTask = !step.visualization && !step.isOutput && !step.isInput;\nvar editClass = isTask ? 'refresh-step' : '';\nvar editCursor = isTask ? 'pointer' : '';\nvar editIcon = isTask ? '\\u27f3' : '';\nvar portOffset = 20;\nbuf.push(\"\" + (jade.escape(null == (jade_interp = step.name) ? \"\" : jade_interp)) + \"\");\nif ( edit)\n{\nbuf.push(\"X✎\" + (jade.escape(null == (jade_interp = editIcon) ? \"\" : jade_interp)) + \"\");\n}\nbuf.push(\"\");\n// iterate step.task.inputs\n;(function(){\n var $$obj = step.task.inputs;\n if ('number' == typeof $$obj.length) {\n\n for (var index = 0, $$l = $$obj.length; index < $$l; index++) {\n var input = $$obj[index];\n\nbuf.push(\"\");\n }\n\n } else {\n var $$l = 0;\n for (var index in $$obj) {\n $$l++; var input = $$obj[index];\n\nbuf.push(\"\");\n }\n\n }\n}).call(this);\n\nbuf.push(\"\");\n// iterate step.task.inputs\n;(function(){\n var $$obj = step.task.inputs;\n if ('number' == typeof $$obj.length) {\n\n for (var index = 0, $$l = $$obj.length; index < $$l; index++) {\n var input = $$obj[index];\n\nbuf.push(\"\");\n }\n\n } else {\n var $$l = 0;\n for (var index in $$obj) {\n $$l++; var input = $$obj[index];\n\nbuf.push(\"\");\n }\n\n }\n}).call(this);\n\nbuf.push(\"\");\n// iterate step.task.outputs\n;(function(){\n var $$obj = step.task.outputs;\n if ('number' == typeof $$obj.length) {\n\n for (var index = 0, $$l = $$obj.length; index < $$l; index++) {\n var output = $$obj[index];\n\nbuf.push(\"\");\n }\n\n } else {\n var $$l = 0;\n for (var index in $$obj) {\n $$l++; var output = $$obj[index];\n\nbuf.push(\"\");\n }\n\n }\n}).call(this);\n\nbuf.push(\"\");\n// iterate step.task.outputs\n;(function(){\n var $$obj = step.task.outputs;\n if ('number' == typeof $$obj.length) {\n\n for (var index = 0, $$l = $$obj.length; index < $$l; index++) {\n var output = $$obj[index];\n\nbuf.push(\"\");\n }\n\n } else {\n var $$l = 0;\n for (var index in $$obj) {\n $$l++; var output = $$obj[index];\n\nbuf.push(\"\");\n }\n\n }\n}).call(this);\n\nbuf.push(\"\");;return buf.join(\"\");\n};","(function ($, _, atob, Backbone, d3, girder, Uint8Array) {\n 'use strict';\n\n window.flow = {\n events: _.clone(Backbone.Events),\n\n saveLocation: null,\n\n webFormat: {\n table: 'rows',\n tree: 'nested',\n string: 'text',\n number: 'number',\n image: 'png.base64',\n r: 'serialized',\n geometry: 'vtkpolydata.serialized'\n },\n\n validatorNiceName: function (validator) {\n return validator.type + ':' + validator.format;\n },\n\n // entities should be key val\n // with the key being a UI friendly string\n // val being the actual object - which is passed to done\n resolveEntities: function (entities, done) {\n done = (_.isFunction(done)) ? done : function () {};\n\n if (_.isEmpty(entities)) {\n this.bootstrapAlert(\"danger\", \"files are unsupported.\", 15);\n } else if (_.size(entities) == 1) {\n done(_.first(_.values(entities)));\n } else {\n $('#th-dialog-container').html(jade.templates.prompt({\n prompt: 'What type of data is this?',\n choices: _.keys(entities)\n })).modal();\n\n $('#th-dialog-container').on('shown.bs.modal', function () {\n $('#th-dialog-container').off('shown');\n });\n\n $('#th-dialog-container .th-confirm-button').click(function () {\n $('#th-dialog-container').modal('hide');\n done(entities[$('#prompt-choice').val()]);\n });\n }\n },\n\n resolveTypeFormats: function (typeFormats, done) {\n this.resolveEntities(_.object(_.map(typeFormats, flow.validatorNiceName),\n typeFormats), done);\n },\n\n resolveExtensions: function (extensions, done) {\n this.resolveEntities(_.object(extensions, extensions), done);\n },\n\n setDisplay: function (mode) {\n [\"intro\", \"vis\", \"editor\"].forEach(function (d) {\n d3.select(\"#\" + d).classed(\"hidden\", mode !== d);\n });\n },\n\n // @todo should this be renamed? It actually returns \"validators\"\n // Given an extension, like \"csv\", return the types/formats\n // that can be associated with it\n getTypeFormatsFromExtension: function (extension) {\n return _.filter(this.validators, function (validator) {\n return (_.has(validator, 'validator') &&\n _.has(validator.validator, 'extensions') &&\n _.contains(validator.validator.extensions, extension));\n });\n },\n\n // Returns the extensions a given type/format could be stored as.\n // Both parameters are optional, so called with 0 arguments would\n // return all extensions registered to any type/format.\n getExtensionsFromTypeFormat: function (type, format) {\n var typeFormats = _.filter(this.validators, function (typeFormat) {\n return ((_.isUndefined(type) || typeFormat.type === type) &&\n (_.isUndefined(format) || typeFormat.format === format));\n }),\n validators = _.pluck(typeFormats, 'validator'),\n extensions = _.filter(_.flatten(_.pluck(validators, 'extensions')),\n function (ext) {\n return ext !== undefined;\n });\n\n return extensions;\n },\n\n /**\n * Given a type, return all formats that can be stored on disk (in other words, have\n * at least 1 extension).\n **/\n getFormatStringsFromType: function (type) {\n return _.pluck(_.filter(this.validators, function (typeFormat) {\n return (typeFormat.type === type &&\n _.has(typeFormat, 'validator') &&\n _.has(typeFormat.validator, 'extensions') &&\n _.size(typeFormat.validator.extensions) > 0);\n }), 'format');\n },\n\n // Converts a dataset (either a Girder-backed dataset or dataset\n // stored in the browser) into another format and returns the result\n // to the done function.\n retrieveDatasetAsFormat: function (dataset, type, format, dataIsURI, done) {\n var uri,\n byteCharacters,\n byteNumbers,\n byteArray,\n i;\n dataset.id = dataset.get('_id');\n\n if (dataIsURI && dataset.id) {\n dataset.set({\n data: girder.apiRoot + '/item/' + dataset.id + '/flow/' + type + '/' + dataset.get('format') + '/' + format\n });\n if (girder.currentUser) {\n dataset.set({data: dataset.get('data') + '?token=' + girder.currentUser.get('token')});\n }\n done(null, dataset);\n return;\n }\n if (dataset.has('data')) {\n if (dataset.get('format') === format) {\n done(null, dataset);\n return;\n }\n if (dataset.get('type') === 'table' && dataset.get('format') === 'rows') {\n dataset = new Backbone.Model({type: 'table', format: 'rows.json', data: JSON.stringify(dataset.get('data'))});\n }\n if (dataset.get('type') === 'tree' && dataset.get('format') === 'nested') {\n dataset = new Backbone.Model({type: 'tree', format: 'nested.json', data: JSON.stringify(dataset.get('data'))});\n }\n if (dataset.get('type') === 'number' && dataset.get('format') === 'number') {\n dataset = new Backbone.Model({type: 'number', format: 'json', data: JSON.stringify(dataset.get('data'))});\n }\n if (dataset.get('format') === format) {\n done(null, dataset);\n return;\n }\n if (dataset.get('type') === 'image' && dataset.get('format') === 'png.base64' && format === 'png') {\n byteCharacters = atob(dataset.get('data'));\n byteNumbers = [];\n byteNumbers.length = byteCharacters.length;\n for (i = 0; i < byteCharacters.length; i += 1) {\n byteNumbers[i] = byteCharacters.charCodeAt(i);\n }\n byteArray = new Uint8Array(byteNumbers);\n done(null, new Backbone.Model({type: 'image', format: 'png', data: byteArray}));\n return;\n }\n uri = 'item/flow/' + type + '/' + dataset.get('format') + '/' + format;\n\n girder.restRequest({\n path: uri,\n type: 'POST',\n data: dataset.get('data'),\n contentType: false,\n processData: false,\n error: null\n }).done(_.bind(function (converted) {\n done(null, new Backbone.Model(converted));\n }, this)).error(_.bind(function (error) {\n done(error);\n }, this));\n } else {\n uri = 'item/' + dataset.id + '/flow/' + type + '/' + dataset.get('format') + '/' + format;\n girder.restRequest({\n path: uri,\n error: null\n }).done(_.bind(function (converted) {\n done(null, new Backbone.Model(converted));\n }, this)).error(_.bind(function (error) {\n done(error);\n }, this));\n }\n },\n\n // Run an analysis.\n performAnalysis: function (analysisId, inputs, outputs, done) {\n var bindings = {inputs: inputs, outputs: outputs};\n girder.restRequest({\n path: 'item/' + analysisId + '/flow',\n type: 'POST',\n data: JSON.stringify(bindings),\n contentType: 'application/json',\n error: null\n }).done(_.bind(function (result) {\n done(null, result);\n }), this).error(_.bind(function (error) {\n console.log(\"Error encountered: \" + error.responseText);\n done(error);\n }, this));\n },\n\n lineInput: function (params) {\n params = _.extend({\n title: 'Enter a name',\n initialValue: 'Untitled',\n yesText: 'Save',\n yesClass: 'btn-primary',\n noText: 'Cancel'\n }, params);\n\n $('#th-dialog-container').html(jade.templates.lineInput({\n params: params\n })).modal();\n\n $('#th-dialog-container').on('shown.bs.modal', function () {\n $('#th-dialog-container .th-line-input').focus().select();\n $('#th-dialog-container').off('shown');\n });\n\n $(\"#th-dialog-container .th-line-input\").keyup(function (event) {\n if (event.keyCode === 13) {\n $(\"#th-dialog-container .th-confirm-button\").click();\n }\n });\n\n $('#th-dialog-container .th-confirm-button').click(function () {\n $('#th-dialog-container').modal('hide');\n params.confirmCallback($('#th-dialog-container .th-line-input').val());\n });\n },\n\n accessor: function (spec) {\n var func,\n field,\n fieldMap = {};\n\n if (spec.field !== undefined) {\n func = function (d) {\n var path = spec.field.split('.'),\n obj = d;\n path.slice(0, -1).forEach(function (field) {\n if (obj[field] !== undefined) {\n obj = obj[field];\n }\n });\n return obj[path[path.length - 1]];\n };\n } else if (spec.value !== undefined) {\n func = function (d) { return spec.value; };\n } else if (spec.object !== undefined) {\n for (field in spec.object) {\n if (spec.object.hasOwnProperty(field) && field !== '_accessor') {\n fieldMap[field] = window.flow.accessor(spec.object[field]);\n }\n }\n func = function (d) {\n var value = {}, field;\n for (field in fieldMap) {\n if (fieldMap.hasOwnProperty(field)) {\n value[field] = fieldMap[field](d);\n }\n }\n return value;\n };\n }\n\n func.spec = spec;\n spec._accessor = true;\n return func;\n },\n\n accessorify: function (spec) {\n var out,\n field;\n\n if (_.isArray(spec)) {\n out = [];\n spec.forEach(function (d) {\n out.push(window.flow.accessorify(d));\n });\n } else if (_.isFunction(spec)) {\n out = spec;\n } else if (_.isObject(spec)) {\n if (spec._accessor) {\n out = window.flow.accessor(spec);\n } else {\n out = {};\n for (field in spec) {\n if (spec.hasOwnProperty(field)) {\n out[field] = window.flow.accessorify(spec[field]);\n }\n }\n }\n } else {\n out = spec;\n }\n return out;\n },\n\n girderUpload: function (data, name, folderId, itemToOverwrite, success, error) {\n success = success || function () {};\n error = error || function () {};\n\n var file, bindEvents = function (file) {\n file.on('g:upload.complete', function () {\n success(arguments);\n window.flow.bootstrapAlert(\"success\", \"Upload complete!\", 5);\n }).on('g:upload.error', function () {\n }).on('g:upload.error g:upload.errorStarting', function () {\n error(arguments);\n window.flow.bootstrapAlert(\"danger\", \"Upload failed: \" + arguments[0].response.statusText);\n });\n return file;\n };\n\n if (itemToOverwrite) {\n // We have the dataset's itemid, but we need its fileid.\n var files = new girder.collections.FileCollection();\n files.altUrl = 'item/' + itemToOverwrite + '/files';\n\n files.on('g:changed', function () {\n file = bindEvents(files.models[0]);\n file.updateContents(data);\n }).fetch();\n } else {\n var folder = new girder.models.FolderModel({_id: folderId});\n file = bindEvents(new girder.models.FileModel());\n file.uploadToFolder(folder, data, name);\n }\n\n return file;\n },\n\n // Display a bootstrap-style alert message to the user.\n // Type should be success, info, warning, or danger.\n // Timeout is how long the alert should be display. Defaults to 5 seconds.\n // If timeout is false, the alert persists.\n bootstrapAlert: function (type, message, timeout) {\n if (timeout !== false) {\n timeout = typeof timeout !== 'undefined' ? timeout : 5;\n timeout *= 1000; // convert to milliseconds\n }\n\n $('#alert_placeholder').html('
');\n $('#alert_message').text(message);\n $('#alert_placeholder').removeClass(\"hidden\");\n $('#alert').on('closed.bs.alert', function () {\n $('#alert_placeholder').addClass(\"hidden\");\n });\n $('#alert_placeholder').show();\n\n if (timeout !== false) {\n window.setTimeout(function () {\n $('#alert').alert('close');\n }, timeout);\n }\n },\n\n girderItemInput: function (itemId) {\n return {\n mode: 'http',\n url: window.location.origin + girder.apiRoot + '/item/' + itemId + '/download',\n method: 'GET',\n headers: girder.currentUser ? {\n 'Girder-Token': girder.currentUser.get('token')\n } : {}\n };\n }\n };\n\n}(window.$, window._, window.atob, window.Backbone, window.d3, window.girder, window.Uint8Array));\n","(function (flow, girder) {\n \"use strict\";\n\n flow.DatasetModel = girder.models.ItemModel.extend({\n get: function (attribute) {\n // Revert to meta/flow/attribute if possible\n if ((!_.has(this.attributes, attribute) &&\n _.has(this.attributes, 'meta') &&\n _.has(this.get('meta'), 'flow'))) {\n return this.get('meta').flow[attribute];\n }\n\n return girder.models.ItemModel.prototype.get.call(this, attribute);\n }\n });\n}(window.flow, window.girder));\n","(function (flow, _, girder) {\n \"use strict\";\n\n flow.DatasetCollection = girder.collections.ItemCollection.extend({\n model: flow.DatasetModel\n });\n}(window.flow, window._, window.girder));\n","(function (flow, _, Backbone) {\n \"use strict\";\n\n // Generic view of a collection that creates and manages\n // views for items based on the constructor passed as itemView.\n // An optional filter sets key/value pairs that must be matched\n // in models in the collection for it to be displayed in the\n // view, which is useful for example in selecting all datasets\n // of a certain type. The itemOptions option specifies additional\n // constructor options to be passed to generated itemView views.\n flow.ItemsView = Backbone.View.extend({\n initialize: function (options) {\n this.filter = options.filter;\n this.listenTo(this.collection, 'add', this.add);\n this.listenTo(this.collection, 'remove', this.remove);\n this.listenTo(this.collection, 'reset', this.reset);\n this.itemViews = {};\n if (!options.itemView) {\n console.error(\"Error: itemView required\");\n return;\n }\n this.itemView = options.itemView;\n this.itemOptions = options.itemOptions;\n this.collection.forEach(_.bind(this.add, this));\n },\n\n matches: function (item) {\n var match = true;\n _.each(this.filter, function (value, key) {\n if (value !== item.get(key)) {\n match = false;\n }\n });\n return match;\n },\n\n add: function (item) {\n if (this.matches(item)) {\n var view = new this.itemView(_.extend({model: item}, this.itemOptions));\n this.$el.append(view.$el);\n view.render();\n this.itemViews[item.cid] = view;\n }\n },\n\n remove: function (item) {\n if (this.itemViews[item.cid]) {\n this.itemViews[item.cid].$el.remove();\n delete this.itemViews[item.cid];\n }\n },\n\n reset: function () {\n this.$el.empty();\n\n _.each(this.collection.models, function (item) {\n this.add(item);\n }, this);\n }\n });\n}(window.flow, window._, window.Backbone));\n","(function (flow, $, Backbone) {\n \"use strict\";\n\n flow.SVGView = Backbone.View.extend({\n nameSpace: \"http://www.w3.org/2000/svg\",\n _ensureElement: function () {\n if (!this.el) {\n var attrs = _.extend({}, _.result(this, 'attributes'));\n if (this.id) {\n attrs.id = _.result(this, 'id');\n }\n if (this.className) {\n attrs['class'] = _.result(this, 'className');\n }\n var $el = $(window.document.createElementNS(_.result(this, 'nameSpace'), _.result(this, 'tagName'))).attr(attrs);\n this.setElement($el, false);\n } else {\n this.setElement(_.result(this, 'el'), false);\n }\n }\n });\n\n})(window.flow, window.$, window.Backbone);\n","(function (tangelo, $, d3) {\n \"use strict\";\n\n if (!d3.selection.prototype.moveToFront) {\n d3.selection.prototype.moveToFront = function () {\n return this.each(function () {\n this.parentNode.appendChild(this);\n });\n };\n }\n\n var _id = 0,\n toggleExpand = function (d) {\n d.collapse = !d.collapse;\n },\n getChildren = function (d) {\n if (!d.collapse) {\n return d._children;\n }\n return [];\n },\n getID = function (d) {\n if (!d._treeID) {\n _id += 1;\n d._treeID = _id;\n }\n return d._treeID;\n };\n\n function findSource(d) {\n if (!d.parent || !d._treeNew) {\n return d;\n }\n return findSource(d.parent);\n }\n\n function findSink(d) {\n if (!d.parent || !d._treeOld) {\n return d;\n }\n return findSink(d.parent);\n }\n\n $.widget(\"tangelo.dendrogram\", {\n options: {\n // accessor to the node label\n label: tangelo.accessor({value: \"\"}),\n // accessor to a unique node id\n id: getID,\n // margin spacing\n margin: {\n top: 25,\n right: 25,\n bottom: 50,\n left: 25\n },\n // graph size in pixels or null to use the element size\n width: null,\n height: null,\n // transition duration\n duration: 750,\n // the tree root\n data: {},\n // accessor to distance\n distance: tangelo.accessor({value: 1}),\n // accessor to node colors\n nodeColor: tangelo.accessor({value: \"lightsteelblue\"}),\n // accessor to font size of the labels\n labelSize: tangelo.accessor({value: \"14px\"}),\n // accessor to line stroke width\n lineWidth: tangelo.accessor({value: 1}),\n // accessor to line stroke color\n lineColor: tangelo.accessor({value: \"black\"}),\n // line style: curved or axisAligned\n lineStyle: \"curved\",\n // accessor to node circle radius\n nodeSize: tangelo.accessor({value: 5}),\n // event callbacks\n on: {\n click: function () {\n return true;\n }\n },\n // accessor telling if the given node should be expanded\n // or collapsed\n expanded: function (d) {\n return !d.collapse;\n },\n // graph orientation: \"vertical\" or \"horizontal\"\n orientation: \"vertical\"\n },\n walk: function (f, root, all) {\n // call the function \"f\" on all nodes starting from root\n // root defaults to the tree root\n // if all === true, then traverse all nodes, not just the visible nodes\n var children, that = this;\n root = root || this.options.data;\n f(root);\n children = all ? root._children : root.children;\n children.forEach(function (c) {\n if (c) { // make sure we don't end up in an infinite loop\n that.walk(f, c, all);\n }\n });\n },\n _create: function () {\n this.svg = d3.select(this.element.get(0)).append(\"svg\");\n this.group = this.svg.append(\"g\");\n this._update();\n },\n _destroy: function () {\n this.svg.remove();\n },\n _transition: function (selection) {\n // helper function to apply a transition to the\n // selection if duration is truthy\n if (this.options.duration) {\n selection = selection.transition()\n .duration(this.options.duration);\n }\n return selection;\n },\n resize: function () {\n // resize the svg, temporarily turns of transitions\n // then calls update\n var duration = this.options.duration;\n this.options.duration = null;\n this._update();\n this.options.duration = duration;\n },\n _update: function () {\n var that = this, width, height, sw, sh,\n tree = d3.layout.cluster(),\n line,\n id = tangelo.accessor(this.options.id),\n selection, enter, exit, nodes, vert = this.options.orientation === \"vertical\",\n rotString = \"\", tmp, h,\n ml = this.options.margin.left, mt = this.options.margin.top,\n mr = this.options.margin.right, mb = this.options.margin.bottom;\n\n // get the total size of the content\n width = (this.options.width || this.element.width());\n height = (this.options.height || this.element.height());\n sw = width;\n sh = height;\n\n if (!vert) {\n // for horizontal layout, we apply a rotation\n // to the main svg group\n h = height - mb;\n tmp = width;\n width = height;\n height = tmp;\n rotString = \"translate(\" + ml + \",\" + h + \") \" + \"rotate(-90) \";\n mt = this.options.margin.right;\n mb = this.options.margin.left;\n ml = this.options.margin.top;\n mr = this.options.margin.bottom;\n } else {\n rotString = \"translate(\" + ml + \",\" + mt + \")\";\n }\n\n // set the svg size\n this.svg.attr(\"width\", sw)\n .attr(\"height\", sh);\n\n // get size without margins\n width -= ml + mr;\n height -= mt + mb;\n\n // apply rotations/translations\n this.group.attr(\"transform\", rotString);\n\n // save the old children array and positions for all nodes\n this.walk(function (d) {\n d._children = (d._children || d.children) || [];\n d.x0 = d.x === undefined ? width / 2 : d.x;\n d.y0 = d.y === undefined ? height / 2 : d.y;\n }, this.options.data, true);\n\n // set the graph size and children accessor\n tree.size([width, height])\n .children(getChildren);\n\n console.log(this.options.data);\n this.options.data._dist = 0;\n this.walk(function (d) {\n d._children.forEach(function (child) {\n child._dist = d._dist + that.options.distance(child);\n console.log(child._dist);\n });\n }, this.options.data, true);\n\n nodes = tree(this.options.data);\n\n var xscale = d3.scale.linear().domain([0, d3.max(nodes, function (d) { return d._dist; })]).range([0, height - 100]);\n\n this.options.data.y = 0;\n this.options.data.y0 = 0;\n this.walk(function (d) {\n d._children.forEach(function (child) {\n child.y = xscale(child._dist);\n child.y0 = d.y;\n });\n }, this.options.data, true);\n\n console.log(nodes);\n\n // select the node links\n selection = this.group.selectAll(\".line\")\n .data(tree.links(nodes), function (d) {\n return id(d.target);\n });\n\n enter = selection.enter();\n exit = selection.exit();\n\n // Reset flags that keep track of which nodes\n // are new in this selection, and which are\n // being removed. These flags determine the\n // source and sink values for transition effects.\n selection.each(function (d) {\n d.target._treeOld = false;\n d.target._treeNew = false;\n });\n exit.each(function (d) {\n d.target._treeOld = true;\n });\n\n // create the line generator according to the line style\n if (this.options.lineStyle === \"curved\") {\n line = d3.svg.diagonal();\n } else if (this.options.lineStyle === \"axisAligned\") {\n line = function (obj) {\n var l = d3.svg.line().interpolate(\"step-after\")\n .x(tangelo.accessor({field: \"x\"}))\n .y(tangelo.accessor({field: \"y\"}));\n return l([obj.source, obj.target]);\n };\n } else {\n throw new Error(\"illegal option for lineStyle: \" + this.options.lineStyle);\n }\n\n // append new paths\n enter.append(\"path\")\n .attr(\"class\", \"line tree\")\n .each(function (d) {\n d.target._treeNew = true;\n })\n .attr(\"d\", function (d) {\n var s = findSource(d.target),\n t = {x: s.x0, y: s.y0};\n return line({\n source: t,\n target: t\n });\n })\n .style(\"stroke-opacity\", 1e-6)\n .style(\"stroke\", this.options.lineColor)\n .style(\"stroke-width\", this.options.lineWidth)\n .style(\"fill\", \"none\");\n\n exit = this._transition(exit);\n exit\n .attr(\"d\", function (d) {\n var s = findSink(d.target);\n return line({\n source: s,\n target: s\n });\n })\n .style(\"stroke-opacity\", 1e-6)\n .remove();\n\n selection = this._transition(selection);\n selection\n .attr(\"d\", line)\n .style(\"stroke-opacity\", 1)\n .style(\"stroke\", this.options.lineColor)\n .style(\"stroke-width\", this.options.lineWidth);\n\n // determine if we need to rotate the labels or not\n // according to the tree orientation\n rotString = \"\";\n if (!vert) {\n rotString = \"rotate(90)\";\n }\n\n // select the node labels\n selection = this.group.selectAll(\".label\")\n .data(nodes, id);\n enter = selection.enter();\n exit = selection.exit();\n\n enter.append(\"text\")\n .attr(\"class\", \"label tree\")\n .attr(\"dx\", 5)\n .attr(\"transform\", function (d) {\n var s = findSource(d);\n return \"translate(\" + s.x0 + \",\" + s.y0 + \")\" + rotString;\n })\n .attr(\"text-anchor\", \"left\")\n .attr(\"font-size\", this.options.labelSize)\n .style(\"fill-opacity\", 1e-6)\n .text(this.options.label);\n\n exit = this._transition(exit);\n exit\n .attr(\"transform\", function (d) {\n var s = findSink(d);\n return \"translate(\" + s.x + \",\" + s.y + \")\" + rotString;\n })\n .style(\"fill-opacity\", 1e-6)\n .attr(\"font-size\", this.options.labelSize)\n .text(this.options.label)\n .remove();\n\n selection = this._transition(selection);\n selection\n .attr(\"transform\", function (d) {\n return \"translate(\" + d.x + \",\" + d.y + \")\" + rotString;\n })\n .attr(\"font-size\", this.options.labelSize)\n .style(\"fill-opacity\", 1)\n .text(this.options.label);\n\n // select the nodes\n selection = this.group.selectAll(\".node\")\n .data(nodes, id);\n\n enter = selection.enter();\n exit = selection.exit();\n\n enter.append(\"circle\")\n .attr(\"class\", \"node tree\")\n .attr(\"cx\", function (d) {\n return findSource(d).x0;\n })\n .attr(\"cy\", function (d) {\n return findSource(d).y0;\n })\n .attr(\"r\", this.options.nodeSize)\n .style(\"fill\", this.options.nodeColor)\n .style(\"fill-opacity\", 1e-6)\n .style(\"stroke-opacity\", 1e-6)\n .on(\"click\", function (d) {\n that.options.sinkNode = {value: d};\n that.options.sourceNode = {value: d};\n if (that.options.on.click.apply(this, arguments)) {\n toggleExpand.apply(this, arguments);\n }\n that._update();\n });\n\n exit = this._transition(exit);\n exit\n .attr(\"cx\", function (d) {\n return findSink(d).x;\n })\n .attr(\"cy\", function (d) {\n return findSink(d).y;\n })\n .attr(\"r\", this.options.nodeSize)\n .style(\"fill-opacity\", 1e-6)\n .style(\"stroke-opacity\", 1e-6)\n .remove();\n\n // bring the nodes in front of the links\n selection.moveToFront();\n selection = this._transition(selection);\n selection\n .attr(\"cx\", function (d) {\n return d.x;\n })\n .attr(\"cy\", function (d) {\n return d.y;\n })\n .attr(\"r\", this.options.nodeSize)\n .style(\"fill-opacity\", 0.5)\n .style(\"stroke-opacity\", 0.5)\n .style(\"fill\", this.options.nodeColor);\n }\n });\n}(window.tangelo, window.jQuery, window.d3));\n","(function (tangelo, $, d3) {\n \"use strict\";\n\n if (!($ && $.widget && d3)) {\n return;\n }\n\n $.widget(\"tangelo.edgebundling\", {\n options: {\n data: null\n },\n\n _create: function () {\n var div = $('');\n this.element.append(div);\n this._update();\n },\n\n _update: function () {\n var chart = d3.chart.edgebundling(),\n data = this.options.data;\n d3.select('#edgebundle')\n .datum(data)\n .call(chart);\n }\n });\n}(window.tangelo, window.jQuery, window.d3));\n","(function ($) {\n \"use strict\";\n\n $.fn.graph = function (spec) {\n var that = this[0];\n spec.data = JSON.parse(spec.data);\n\n return $(that).nodelink({\n data: {\n nodes: spec.data.nodes,\n links: spec.data.links\n },\n nodeLabel: function (d) { return d.id; },\n linkDistance: 75\n });\n };\n\n}(window.jQuery));\n","(function ($, d3) {\n \"use strict\";\n\n $.fn.image = function (options) {\n var data = options.data;\n if (options.data.indexOf(\"data:image/png;base64,\") !== 0) {\n data = \"data:image/png;base64,\" + options.data;\n }\n d3.select(this.get(0)).append(\"img\")\n .attr(\"src\", data);\n };\n\n}(window.$, window.d3));\n","(function (tangelo, $, d3) {\n \"use strict\";\n\n if (!($ && $.widget && d3)) {\n return;\n }\n\n $.widget(\"tangelo.interactiveheatmap\", {\n options: {\n data: null\n },\n\n _create: function () {\n var div = $('');\n this.element.append(div);\n this._update();\n },\n\n _update: function () {\n var heatmap = d3.chart.heatmap(),\n data = this.options.data.rows,\n columnHeaders = this.options.data.fields;\n\n d3.select(\"#heatmap\")\n .datum(data)\n .call(heatmap, columnHeaders);\n }\n });\n}(window.tangelo, window.jQuery, window.d3));\n","(function (tangelo, $, d3) {\n \"use strict\";\n\n $.widget(\"tangelo.nodelink\", {\n options: {\n nodeCharge: tangelo.accessor({value: -130}),\n nodeColor: tangelo.accessor({value: \"steelblue\"}),\n nodeSize: tangelo.accessor({value: 10}),\n nodeLabel: tangelo.accessor({value: \"\"}),\n nodeOpacity: tangelo.accessor({value: 1}),\n nodeId: tangelo.accessor({index: true}),\n linkSource: tangelo.accessor({field: \"source\"}),\n linkTarget: tangelo.accessor({field: \"target\"}),\n linkDistance: tangelo.accessor({value: 30}),\n linkOpacity: tangelo.accessor({value: 0.2}),\n nodeX: tangelo.accessor(),\n nodeY: tangelo.accessor(),\n width: 1000,\n height: 1000,\n dynamicLabels: false,\n data: null\n },\n\n _create: function () {\n this.colorScale = d3.scale.category10();\n\n this.force = d3.layout.force();\n\n this.svg = d3.select(this.element.get(0))\n .append(\"svg\");\n\n this._update();\n },\n\n _setOptions: function (options) {\n this._super(options);\n this._update();\n },\n\n _update: function () {\n var that = this,\n nodeIdMap = {};\n\n if (this.options.nodeX && !this.options.nodeX.undefined) {\n this.xScale = d3.scale.linear()\n .domain(d3.extent(this.options.data.nodes, this.options.nodeX))\n .range([50, this.options.width - 100]);\n }\n\n if (this.options.nodeY && !this.options.nodeY.undefined) {\n this.yScale = d3.scale.linear()\n .domain(d3.extent(this.options.data.nodes, this.options.nodeY))\n .range([this.options.height - 100, 50]);\n }\n\n this.force.linkDistance(this.options.linkDistance)\n .charge(this.options.nodeCharge)\n .size([this.options.width, this.options.height]);\n\n this.options.data.nodes.forEach(function (d, i) {\n nodeIdMap[that.options.nodeId(d, i)] = d;\n d.degree = 0;\n d.outgoing = [];\n d.incoming = [];\n });\n\n this.options.data.links.forEach(function (d, i) {\n d.source = nodeIdMap[that.options.linkSource(d, i)];\n d.target = nodeIdMap[that.options.linkTarget(d, i)];\n d.source.degree += 1;\n d.target.degree += 1;\n d.source.outgoing.push(d.target);\n d.target.incoming.push(d.source);\n });\n\n this.options.data.nodes.sort(function (a, b) {\n return d3.descending(a.degree, b.degree);\n });\n\n this.sizeScale = d3.scale.sqrt()\n .domain(d3.extent(this.options.data.nodes, that.options.nodeSize))\n .range([5, 15]);\n\n this.force.size([this.options.width, this.options.height])\n .nodes(this.options.data.nodes)\n .links(this.options.data.links)\n .start();\n\n this.link = this.svg.selectAll(\".link\")\n .data(this.options.data.links);\n\n this.link.enter()\n .append(\"line\")\n .classed(\"link\", true)\n .style(\"opacity\", this.options.linkOpacity)\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", 1);\n\n this.node = this.svg.selectAll(\".node\")\n .data(this.options.data.nodes);\n\n this.node.enter()\n .append(\"circle\")\n .classed(\"node\", true)\n .call(this.force.drag)\n .append(\"title\");\n\n this.node\n .attr(\"r\", function (d, i) {\n return that.sizeScale(that.options.nodeSize(d, i));\n })\n .style(\"fill\", function (d, i) {\n return that.colorScale(that.options.nodeColor(d, i));\n })\n .style(\"opacity\", this.options.nodeOpacity);\n\n this.node.selectAll(\"title\")\n .text(this.options.nodeLabel);\n\n if (!that.options.dynamicLabels) {\n this.label = this.svg.selectAll(\"text\")\n .data(this.options.data.nodes);\n\n this.label.enter().append(\"text\")\n .text(this.options.nodeLabel);\n }\n\n this.force.on(\"tick\", function () {\n that._tick(that);\n });\n\n this.force.resume();\n },\n\n _tick: function () {\n var that = this,\n nodeLabels;\n\n if (this.options.nodeX && !that.options.nodeX.undefined) {\n that.options.data.nodes.forEach(function (d, i) {\n d.x = that.xScale(that.options.nodeX(d, i));\n });\n }\n\n if (this.options.nodeY && !that.options.nodeY.undefined) {\n that.options.data.nodes.forEach(function (d, i) {\n d.y = that.yScale(that.options.nodeY(d, i));\n });\n }\n\n if (that.options.dynamicLabels) {\n nodeLabels = that._nodeLabels();\n\n that.svg.selectAll(\"text\").remove();\n that.svg.selectAll(\"text\")\n .data(nodeLabels)\n .enter().append(\"text\")\n .attr(\"x\", function (d) {\n return d.x;\n })\n .attr(\"y\", function (d) {\n return d.y;\n })\n .style(\"font-size\", function (d) {\n return d.count + 8;\n })\n .text(function (d) {\n return d.label;\n });\n } else {\n that.label.attr(\"x\", function (d) {\n return d.x;\n })\n .attr(\"y\", function (d) {\n return d.y;\n });\n }\n\n that.link.attr(\"x1\", function (d) {\n return d.source.x;\n })\n .attr(\"y1\", function (d) {\n return d.source.y;\n })\n .attr(\"x2\", function (d) {\n return d.target.x;\n })\n .attr(\"y2\", function (d) {\n return d.target.y;\n });\n\n that.node.attr(\"cx\", function (d) {\n return d.x;\n })\n .attr(\"cy\", function (d) {\n return d.y;\n });\n },\n\n // Compute a list of objects of the form:\n // {\n // count: 5 /* The number of nodes represented */\n // label: \"hi\" /* A reduced label representing all nodes */\n // x: 10\n // y: 20 /* The x,y location to draw the label */\n // }\n // This will be a reduced set of the original node data.\n _nodeLabels: function () {\n var that = this,\n nodeLabels = [];\n\n that.options.data.nodes.forEach(function (d) {\n d.visited = false;\n });\n\n // Walk the graph, collecting connected nodes\n // close to the starting node to collapse into\n // a single label.\n that.options.data.nodes.forEach(function (d, i) {\n var count = 0,\n labels = [],\n label;\n\n function visit(dd) {\n if (dd.visited) {\n return;\n }\n\n if (Math.abs(dd.x - d.x) < 50 &&\n Math.abs(dd.y - d.y) < 50) {\n count += 1;\n labels.push(that.options.nodeLabel(dd, i));\n dd.visited = true;\n dd.incoming.forEach(visit);\n dd.outgoing.forEach(visit);\n }\n }\n visit(d);\n\n if (count > 1) {\n label = that._reduceLabels(labels);\n nodeLabels.push({count: count, label: label, x: d.x, y: d.y});\n }\n });\n return nodeLabels;\n },\n\n // Reduce a collection of labels into a single label\n // using a frequent sequence of starting words.\n _reduceLabels: function (labels) {\n var label = \"\",\n prefixTree = {},\n word,\n maxCount,\n maxWord;\n\n // Build prefix tree\n labels.forEach(function (d) {\n var words, subtree = prefixTree;\n words = d.split(\" \");\n while (words.length > 0) {\n if (!subtree[words[0]]) {\n subtree[words[0]] = {count: 0, next: {}};\n }\n subtree[words[0]].count += 1;\n subtree = subtree[words[0]].next;\n words = words.slice(1);\n }\n });\n\n // Traverse prefix tree for most common prefix\n while (true) {\n maxCount = 0;\n maxWord = 0;\n for (word in prefixTree) {\n if (prefixTree.hasOwnProperty(word)) {\n if (prefixTree[word].count > maxCount) {\n maxCount = prefixTree[word].count;\n maxWord = word;\n }\n }\n }\n if (maxCount < 2) {\n break;\n }\n label += \" \" + maxWord;\n prefixTree = prefixTree[maxWord].next;\n }\n\n return label;\n }\n });\n}(window.tangelo, window.jQuery, window.d3));\n","(function ($, tangelo, vg) {\n \"use strict\";\n\n $.fn.scatterplot = function (spec) {\n var y = tangelo.accessor(spec.y),\n x = tangelo.accessor(spec.x),\n data = spec.data,\n dt = [],\n opt = {\n data: {table: dt},\n renderer: \"svg\",\n el: this[0]\n },\n that = this[0];\n\n data.forEach(function (row) {\n dt.push({\n x: _.isNumber(x(row)) ? x(row) : NaN,\n y: _.isNumber(y(row)) ? y(row) : NaN,\n orig: row\n });\n });\n\n function resize() {\n vg.parse.spec(\"static/built/plugins/flow/extras/scatterplot.json\", function (chart) {\n console.log($(that).width() + \",\" + $(that).height());\n if ($(that).width() > 0 && $(that).height() > 0) {\n chart(opt).width($(that).width() - 70).height($(that).height() - 70).update();\n }\n });\n }\n $(window).resize(resize);\n resize();\n\n return that;\n };\n\n}(window.jQuery, window.tangelo, window.vg));\n","(function (tangelo, $, d3) {\n \"use strict\";\n\n if (!($ && $.widget && d3)) {\n return;\n }\n\n $.widget(\"tangelo.scatterplotmatrix\", {\n options: {\n data: null,\n y: null\n },\n\n _create: function () {\n var div = $('');\n this.element.append(div);\n this._update();\n },\n\n _update: function () {\n var matrix = d3.scatterplot.matrix(),\n data = this.options.data.rows,\n y = this.options.y.field;\n d3.select(\"#matrix\")\n .datum(data)\n .call(matrix, y);\n }\n });\n}(window.tangelo, window.jQuery, window.d3));\n","/*jslint browser: true, nomen: true */\n\n(function (_, tangelo, $, d3) {\n 'use strict';\n\n if (!(_ && $ && $.widget && d3)) {\n $.fn.nodelink = tangelo.unavailable({\n plugin: 'nodelink',\n required: ['Underscore', 'JQuery', 'JQuery UI', 'd3']\n });\n return;\n }\n\n $.widget('tangelo.spaceMap', {\n options: {\n data: [],\n constraints: [],\n linkDistance: 0,\n charge: -30,\n gravity: 0.1,\n label: tangelo.accessor({value: ''}),\n width: $(window).width(),\n height: $(window).height(),\n color: tangelo.accessor({value: '#999'}),\n size: tangelo.accessor({value: 5}),\n fixed: tangelo.accessor({value: false}),\n showPoints: true,\n showConstraints: false,\n showLinks: true,\n layout: true,\n click: null\n },\n\n _create: function () {\n var options,\n mapConfig,\n mapOptions,\n that = this;\n\n this.force = d3.layout.force();\n\n this.svg = d3.select(this.element.get(0)).append('svg')\n .attr('width', '100%')\n .attr('height', '100%');\n this.legends = this.svg.append('g');\n\n options = $.extend(true, {}, this.options);\n options.data = this.options.data;\n delete options.disabled;\n delete options.create;\n this._setOptions(options);\n this._update();\n },\n\n _update: function () {\n var that = this,\n dataNodes = [],\n colorScale,\n nodeEnter,\n oldNodes = this.nodes,\n i,\n constraintsOrdered,\n padding = 80,\n axis,\n xRange = [padding, that.options.width - padding],\n yRange = [that.options.height - padding, padding],\n linexConstraints,\n lineyConstraints,\n xTypes = ['x', 'ordinalx', 'xy'],\n yTypes = ['y', 'ordinaly', 'xy'],\n xConstraints = [],\n yConstraints = [];\n\n if (!this.svg) {\n return;\n }\n\n this.nodes = [];\n this.links = [];\n this.mapOpacity = 0;\n\n this.options.data.forEach(function (d) {\n var node = {data: d};\n that.nodes.push(node);\n dataNodes.push(node);\n });\n\n // Take care of spreading out linex and liney dimensions\n linexConstraints = this.options.constraints.filter(function (d) { return d.type === 'linex'; });\n lineyConstraints = this.options.constraints.filter(function (d) { return d.type === 'liney'; });\n linexConstraints.forEach(function (d, i) {\n d.yPosition = yRange[0] + (i + 1) / linexConstraints.length * (yRange[1] - yRange[0]);\n });\n lineyConstraints.forEach(function (d, i) {\n d.xPosition = xRange[0] + (i + 1) / lineyConstraints.length * (xRange[1] - xRange[0]);\n });\n\n // Take care of multiple x and y dimensions\n this.options.constraints.forEach(function (constraint) {\n if (!_.isNumber(constraint.strength)) {\n constraint.strength = 1;\n }\n if (xTypes.indexOf(constraint.type) !== -1) {\n xConstraints.push(constraint);\n }\n if (yTypes.indexOf(constraint.type) !== -1) {\n yConstraints.push(constraint);\n }\n });\n xConstraints.forEach(function (constraint, i) {\n var span = xRange[1] - xRange[0],\n num = xConstraints.length;\n constraint.xRange = [xRange[0] + i * span / num, xRange[0] + (i + 1) * span / num - padding];\n });\n yConstraints.forEach(function (constraint, i) {\n var span = yRange[1] - yRange[0],\n num = yConstraints.length;\n constraint.yRange = [yRange[0] + i * span / num, yRange[0] + (i + 1) * span / num + padding];\n });\n\n // Now turn x,y pairs into xy\n constraintsOrdered = [];\n if (xConstraints.length > 0 && yConstraints.length > 0) {\n dataNodes.forEach(function (node) {\n node.data._paired = {};\n });\n xConstraints.forEach(function (xConstraint, i) {\n yConstraints.forEach(function (yConstraint, j) {\n constraintsOrdered.push({\n type: 'xy',\n accessor: tangelo.accessor({field: '_paired._' + i + '_' + j}),\n xRange: xConstraint.xRange,\n xOrdinal: xConstraint.type === 'ordinalx',\n yRange: yConstraint.yRange,\n yOrdinal: yConstraint.type === 'ordinaly',\n strength: xConstraint.strength * yConstraint.strength,\n xConstraint: xConstraint,\n yConstraint: yConstraint\n });\n dataNodes.forEach(function (node) {\n var d = node.data;\n d._paired['_' + i + '_' + j] = {\n x: xConstraint.accessor(d),\n y: yConstraint.accessor(d)\n };\n });\n });\n });\n this.options.constraints.forEach(function (constraint) {\n if (constraint.type !== 'binx' &&\n constraint.type !== 'biny' &&\n xTypes.indexOf(constraint.type) === -1 &&\n yTypes.indexOf(constraint.type) === -1) {\n\n constraintsOrdered.push(constraint);\n }\n });\n } else {\n this.options.constraints.forEach(function (constraint) {\n if (constraint.type !== 'binx' && constraint.type !== 'biny') {\n constraintsOrdered.push(constraint);\n }\n });\n }\n\n // Put binx and biny last, since they modify constraint functions\n this.options.constraints.forEach(function (constraint) {\n if (constraint.type === 'binx' || constraint.type === 'biny') {\n constraintsOrdered.push(constraint);\n }\n });\n\n this.legends.selectAll('*').remove();\n\n function styleAxis(a) {\n a.style('shape-rendering', 'crispEdges');\n a.selectAll('line, path')\n .style('fill', 'none')\n .style('stroke', '#000');\n }\n\n constraintsOrdered.forEach(function (constraint, i) {\n var scale, xScale, yScale, ind1, ind2, distances, val1, val2;\n\n constraint.nodeMap = {};\n constraint.index = i;\n\n if (constraint.type === 'x') {\n scale = d3.scale.linear()\n .domain(d3.extent(that.options.data, constraint.accessor))\n .range(constraint.xRange);\n constraint.sizeScale = d3.scale.sqrt()\n .domain(d3.extent(that.options.data, constraint.accessor))\n .range([2, 20]);\n constraint.constrain = function (d) {\n d.x = scale(constraint.accessor(d.data));\n };\n axis = d3.svg.axis().orient('top').scale(scale);\n that.legends.append('g').attr('transform', 'translate(0,20)').call(axis).call(styleAxis);\n } else if (constraint.type === 'y') {\n scale = d3.scale.linear()\n .domain(d3.extent(that.options.data, constraint.accessor))\n .range(constraint.yRange);\n constraint.sizeScale = d3.scale.sqrt()\n .domain(d3.extent(that.options.data, constraint.accessor))\n .range([2, 20]);\n constraint.constrain = function (d) {\n d.y = scale(constraint.accessor(d.data));\n };\n axis = d3.svg.axis().orient('left').scale(scale);\n that.legends.append('g').attr('transform', 'translate(20,0)').call(axis).call(styleAxis);\n } else if (constraint.type === 'linex') {\n scale = d3.scale.linear()\n .domain(d3.extent(that.options.data, constraint.accessor))\n .range(xRange);\n constraint.sizeScale = d3.scale.sqrt()\n .domain(d3.extent(that.options.data, constraint.accessor))\n .range([2, 20]);\n constraint.constrain = function (d) {\n d.x = scale(constraint.accessor(d.data));\n d.y = constraint.yPosition;\n };\n axis = d3.svg.axis().orient('top').scale(scale);\n that.legends.append('g').attr('transform', 'translate(0,' + constraint.yPosition + ')').call(axis).call(styleAxis);\n } else if (constraint.type === 'liney') {\n scale = d3.scale.linear()\n .domain(d3.extent(that.options.data, constraint.accessor))\n .range(yRange);\n constraint.sizeScale = d3.scale.sqrt()\n .domain(d3.extent(that.options.data, constraint.accessor))\n .range([2, 20]);\n constraint.constrain = function (d) {\n d.x = constraint.xPosition;\n d.y = scale(constraint.accessor(d.data));\n };\n axis = d3.svg.axis().orient('left').scale(scale);\n that.legends.append('g').attr('transform', 'translate(' + constraint.xPosition + ',0)').call(axis).call(styleAxis);\n } else if (constraint.type === 'radius') {\n scale = d3.scale.linear()\n .domain(d3.extent(that.options.data, constraint.accessor))\n .range([0, Math.min(that.options.height / 2 - padding, that.options.width / 2 - padding)]);\n constraint.sizeScale = d3.scale.sqrt()\n .domain(d3.extent(that.options.data, constraint.accessor))\n .range([2, 20]);\n constraint.constrain = function (d) {\n var dx = d.x - that.options.width / 2,\n dy = d.y - that.options.height / 2,\n distance = Math.sqrt(dx * dx + dy * dy),\n r = scale(constraint.accessor(d.data));\n if (distance > 0) {\n d.x = r * dx / distance + that.options.width / 2;\n d.y = r * dy / distance + that.options.height / 2;\n } else {\n d.x = r + that.options.width / 2;\n d.y = that.options.height / 2;\n }\n };\n } else if (constraint.type === 'ordinalx') {\n scale = d3.scale.ordinal()\n .domain(that.options.data.map(constraint.accessor))\n .rangePoints(constraint.xRange, 1);\n constraint.sizeScale = d3.scale.ordinal()\n .domain(that.options.data.map(constraint.accessor))\n .rangePoints([2, 20], 1);\n constraint.constrain = function (d) {\n d.x = scale(constraint.accessor(d.data));\n };\n axis = d3.svg.axis().orient('top').scale(scale);\n that.legends.append('g').attr('transform', 'translate(0,20)').call(axis).call(styleAxis);\n } else if (constraint.type === 'ordinaly') {\n scale = d3.scale.ordinal()\n .domain(that.options.data.map(constraint.accessor))\n .rangePoints(constraint.yRange, 1);\n constraint.sizeScale = d3.scale.ordinal()\n .domain(that.options.data.map(constraint.accessor))\n .rangePoints([2, 20], 1);\n constraint.constrain = function (d) {\n d.y = scale(constraint.accessor(d.data));\n };\n axis = d3.svg.axis().orient('left').scale(scale);\n that.legends.append('g').attr('transform', 'translate(20,0)').call(axis).call(styleAxis);\n } else if (constraint.type === 'xy') {\n if (constraint.xOrdinal) {\n xScale = d3.scale.ordinal()\n .domain(that.options.data.map(function (d) {\n return constraint.accessor(d).x;\n }))\n .rangePoints(constraint.xRange, 1);\n } else {\n xScale = d3.scale.linear()\n .domain(d3.extent(that.options.data, function (d) {\n return constraint.accessor(d).x;\n }))\n .range(constraint.xRange);\n }\n if (constraint.yOrdinal) {\n yScale = d3.scale.ordinal()\n .domain(that.options.data.map(function (d) {\n return constraint.accessor(d).y;\n }))\n .rangePoints(constraint.yRange, 1);\n } else {\n yScale = d3.scale.linear()\n .domain(d3.extent(that.options.data, function (d) {\n return constraint.accessor(d).y;\n }))\n .range(constraint.yRange);\n }\n constraint.constrain = function (d) {\n d.x = xScale(constraint.accessor(d.data).x);\n d.y = yScale(constraint.accessor(d.data).y);\n };\n constraint.sizeScale = function (d) { return 4; };\n axis = d3.svg.axis().orient('top').scale(xScale);\n that.legends.append('g').attr('transform', 'translate(0,60)').call(axis).call(styleAxis);\n that.legends.append('text')\n .attr('x', (xScale.range()[xScale.range().length - 1] + xScale.range()[0]) / 2)\n .attr('y', 20)\n .text(constraint.xConstraint.name);\n axis = d3.svg.axis().orient('left').scale(yScale);\n that.legends.append('g').attr('transform', 'translate(60,0)').call(axis).call(styleAxis);\n that.legends.append('text')\n .attr('transform', 'translate(' + 20 + ',' + (yScale.range()[xScale.range().length - 1] + yScale.range()[0]) / 2 + ')rotate(-90)')\n .text(constraint.yConstraint.name);\n } else if (constraint.type === 'map') {\n that.mapOpacity = Math.max(that.mapOpacity, constraint.strength);\n constraint.constrain = function (d) {\n d.x = d.mapX;\n d.y = d.mapY;\n };\n } else if (constraint.type === 'link') {\n constraint.constrain = function () {};\n constraint.sizeScale = d3.scale.sqrt()\n .domain(d3.extent(that.options.data, constraint.accessor))\n .range([2, 20]);\n } else if (constraint.type === 'link-closest') {\n constraint.constrain = function () {};\n constraint.sizeScale = d3.scale.sqrt()\n .domain(d3.extent(that.options.data, constraint.accessor))\n .range([2, 20]);\n distances = [];\n for (ind1 = 0; ind1 < dataNodes.length; ind1 += 1) {\n val1 = constraint.accessor(dataNodes[ind1].data);\n for (ind2 = ind1 + 1; ind2 < dataNodes.length; ind2 += 1) {\n val2 = constraint.accessor(dataNodes[ind2].data);\n distances.push([ind1, ind2, Math.abs(val1 - val2)]);\n }\n }\n distances.sort(function (a, b) { return d3.ascending(a[2], b[2]); });\n for (ind1 = 0; ind1 < dataNodes.length; ind1 += 1) {\n that.links.push({source: dataNodes[distances[ind1][0]], target: dataNodes[distances[ind1][1]], constraint: constraint});\n }\n return;\n } else if (constraint.type === 'link-bin') {\n (function () {\n var index = [], clusters = [], clusterSize;\n constraint.constrain = function () {};\n constraint.sizeScale = d3.scale.sqrt()\n .domain(d3.extent(that.options.data, constraint.accessor))\n .range([2, 20]);\n\n dataNodes.forEach(function (d, i) {\n index.push({index: i, value: constraint.accessor(d.data)});\n });\n index.sort(function (a, b) { return d3.ascending(a.value, b.value); });\n clusterSize = Math.ceil(dataNodes.length / 10);\n index.forEach(function (d, i) {\n var cluster = Math.floor(i / clusterSize);\n while (cluster >= clusters.length) {\n clusters.push({sum: 0, count: 0});\n }\n clusters[cluster].sum += d.value;\n clusters[cluster].count += 1;\n });\n clusters.forEach(function (d, i) {\n var value = d.sum / d.count;\n constraint.nodeMap[i] = {value: value, constraintNode: true, constraint: constraint};\n that.nodes.push(constraint.nodeMap[i]);\n });\n index.forEach(function (d, i) {\n var clusterNode = constraint.nodeMap[Math.floor(i / clusterSize)];\n that.links.push({source: dataNodes[d.index], target: clusterNode, constraint: constraint});\n });\n }());\n return;\n } else if (constraint.type === 'binx') {\n scale = d3.scale.ordinal()\n .domain(d3.set(that.options.data.map(constraint.accessor)).values())\n .rangePoints(xRange, 1);\n constraint.constrain = function (d) {\n var newX = d.x;\n newX /= scale.domain().length;\n newX += scale(constraint.accessor(d.data)) - that.options.width / scale.domain().length / 2;\n d.x = constraint.strength * newX + (1 - constraint.strength) * d.x;\n };\n that.nodes.forEach(function (d) {\n var oldConstrain;\n if (d.constraintNode && (d.constraint.type === 'ordinalx' || d.constraint.type === 'x' || d.constraint.type === 'xy' || d.constraint.type === 'linex' || d.constraint.type === 'liney')) {\n oldConstrain = d.constraint.constrain;\n d.constraint = {type: d.constraint.type, accessor: d.constraint.accessor, strength: d.constraint.strength};\n d.constraint.constrain = function (d) {\n oldConstrain(d);\n constraint.constrain(d);\n };\n }\n });\n axis = d3.svg.axis().orient('top').scale(scale);\n that.legends.append('g').attr('transform', 'translate(0,20)').call(axis).call(styleAxis);\n return;\n } else if (constraint.type === 'biny') {\n scale = d3.scale.ordinal()\n .domain(d3.set(that.options.data.map(constraint.accessor)).values())\n .rangePoints(yRange, 1);\n constraint.constrain = function (d) {\n var newY = d.y;\n newY /= scale.domain().length;\n newY += scale(constraint.accessor(d.data)) - that.options.height / scale.domain().length / 2;\n d.y = constraint.strength * newY + (1 - constraint.strength) * d.y;\n };\n that.nodes.forEach(function (d) {\n var oldConstrain;\n if (d.constraintNode && (d.constraint.type === 'ordinaly' || d.constraint.type === 'y' || d.constraint.type === 'xy' || d.constraint.type === 'linex' || d.constraint.type === 'liney')) {\n oldConstrain = d.constraint.constrain;\n d.constraint = {type: d.constraint.type, accessor: d.constraint.accessor, strength: d.constraint.strength};\n d.constraint.constrain = function (d) {\n oldConstrain(d);\n constraint.constrain(d);\n };\n }\n });\n axis = d3.svg.axis().orient('left').scale(scale);\n that.legends.append('g').attr('transform', 'translate(20,0)').call(axis).call(styleAxis);\n return;\n }\n dataNodes.forEach(function (node) {\n var values = constraint.accessor(node.data),\n i,\n distances,\n value,\n constraintNode;\n if (!_.isArray(values)) {\n values = [values];\n }\n for (i = 0; i < values.length; i += 1) {\n value = values[i];\n if (!_.isString(value)) {\n value = JSON.stringify(value);\n }\n if (constraint.type === 'link') {\n if (!constraint.nodeMap[value]) {\n constraint.nodeMap[value] = {data: node.data, value: value, constraintNode: true, constraint: constraint};\n that.nodes.push(constraint.nodeMap[value]);\n }\n that.links.push({source: node, target: constraint.nodeMap[value], constraint: constraint});\n } else {\n constraintNode = {data: node.data, value: value, constraintNode: true, constraint: constraint};\n that.nodes.push(constraintNode);\n that.links.push({source: node, target: constraintNode, constraint: constraint});\n }\n }\n });\n });\n\n // Copy over x,y locations from old nodes\n if (oldNodes) {\n for (i = 0; i < this.nodes.length && i < oldNodes.length; i += 1) {\n this.nodes[i].x = oldNodes[i].x;\n this.nodes[i].y = oldNodes[i].y;\n }\n }\n\n // Set fixed flags\n this.nodes.forEach(function (d) {\n if (!d.constraintNode) {\n d.fixed = that.options.fixed(d.data);\n }\n });\n\n this.force\n .linkDistance(this.options.linkDistance)\n .linkStrength(function (link) {\n return link.constraint.strength;\n })\n .charge(this.options.charge)\n .gravity(this.options.gravity)\n .theta(0.1)\n .size([this.options.width, 0.75 * this.options.height])\n .nodes(this.nodes)\n .links(this.links)\n .start();\n\n this.svg.selectAll('.link').remove();\n this.svg.selectAll('.node').remove();\n\n this.link = this.svg.selectAll('.link')\n .data(this.links);\n\n colorScale = d3.scale.category10();\n\n this.link.enter()\n .append('line')\n .classed('link', true)\n .style('opacity', function (d) { return d.constraint.strength / 2; })\n .style('stroke', function (d) { return colorScale(d.constraint ? d.constraint.index : -1); })\n .style('stroke-width', that.options.showLinks ? 1 : 0);\n\n this.node = this.svg.selectAll('.node')\n .data(this.nodes);\n\n nodeEnter = this.node.enter()\n .append('g')\n .classed('node', true)\n .call(this.force.drag);\n nodeEnter.append('circle')\n .style('stroke', '#999')\n .style('stroke-width', 1);\n nodeEnter.append('text')\n .style('fill', 'black')\n .text(function (d) {\n if (d.constraint) {\n if (that.options.showConstraints === true && (\n d.constraint.type === 'link' ||\n d.constraint.type === 'link-bin' ||\n d.constraint.type === 'link-all' ||\n d.constraint.type === 'ordinalx' ||\n d.constraint.type === 'ordinaly')) {\n if (_.isNumber(d.value)) {\n console.log(d3.format('.2r')(d.value));\n return d.constraint.name + ' ' + d3.format('.2r')(d.value);\n }\n return d.value;\n }\n return '';\n }\n return that.options.label(d);\n });\n\n this.node\n .style('opacity', function (d) { return d.constraint ? d.constraint.strength : 1; })\n .on('click', function (d) {\n if (!d.constraint) {\n that.options.click(d.data);\n }\n });\n\n this.node.selectAll('circle')\n .attr('r', function (d) { return d.constraintNode ? (that.options.showConstraints ? d.constraint.sizeScale(d.value) : 0) : (that.options.showPoints ? that.options.size(d.data) : 0); })\n .style('fill', function (d) { return d.constraint ? colorScale(d.constraint.index) : that.options.color(d.data); });\n\n this.force.on('tick', function () { that._tick.call(that); });\n this.force.resume();\n },\n\n _tick: function () {\n var that = this;\n\n $(this.element.get(0)).find('img').css('opacity', this.mapOpacity);\n\n that.nodes.forEach(function (node) {\n if (node.constraint) {\n node.constraint.constrain(node);\n }\n });\n\n that.link\n // .filter(function (d) { return !that.options.fixed(d.source.data); })\n .attr('x1', function (d) { return d.source.x; })\n .attr('y1', function (d) { return d.source.y; });\n that.link\n // .filter(function (d) { return !that.options.fixed(d.target.data); })\n .attr('x2', function (d) { return d.target.x; })\n .attr('y2', function (d) { return d.target.y; });\n\n that.node\n // .filter(function (d) { return !that.options.fixed(d.data); })\n .attr('transform', function (d) { return 'translate(' + d.x + ',' + d.y + ')'; });\n }\n });\n}(window._, window.tangelo, window.jQuery, window.d3));\n","(function ($, d3) {\n \"use strict\";\n\n $.fn.string = function (options) {\n var data = options.data;\n d3.select(this.get(0)).append(\"pre\")\n .text(options.data);\n };\n\n}(window.$, window.d3));\n","(function (tangelo, $) {\n \"use strict\";\n\n if (!($ && $.widget)) {\n return;\n }\n\n $.widget(\"tangelo.table\", {\n options: {\n data: null\n },\n\n _create: function () {\n var that = this, saveButton;\n\n if ('saveChanges' in this.options && this.options.saveChanges) {\n\n // create editable table\n this.table = $('
');\n\n // create save button\n saveButton = $('');\n saveButton.click(function () {\n // grab the current table data and format it as CSV\n var csv = $(this.nextSibling).map(function () {\n return $(this).find('tr').map(function () {\n return $(this).find('th,td').map(function () {\n return $(this).html();\n }).get().join(',');\n }).get().join('\\n');\n }).get().join();\n\n // trigger the save event\n if ('saveChanges' in that.options && that.options.saveChanges) {\n that.options.saveChanges('data', csv);\n }\n\n // give the user some visual feedback\n $(this).removeClass(\"btn-primary\");\n $(this).text(\"Saved!\");\n $(this).addClass(\"btn-success\").delay(3000).queue(function (next) {\n $(this).removeClass(\"btn-success\");\n $(this).addClass(\"btn-primary\");\n $(this).text(\"Save\");\n next();\n });\n\n });\n this.element.append(saveButton);\n } else {\n // Read-only mode.\n this.table = $('
');\n }\n this.element.append(this.table);\n this._update();\n },\n\n _update: function () {\n var header = \"\",\n body = \"\",\n headerSet = false,\n fields = this.options.data.fields,\n rows = this.options.data.rows || this.options.data;\n\n this.table.empty();\n\n if (fields) {\n $.each(fields, function (index, value) {\n header += \"
\" + value + \"
\";\n });\n $.each(rows, function (index, value) {\n if (index >= 200) {\n return;\n }\n var row = \"
\";\n $.each(fields, function (index, field) {\n row += \"
\" + value[field] + \"
\";\n });\n row += \"
\";\n body += row;\n });\n } else {\n $.each(rows, function (key, value) {\n if (key >= 200) {\n return;\n }\n var row = \"
\";\n $.each(value, function (key, value) {\n row += \"
\" + value + \"
\";\n if (!headerSet) {\n header += \"
\" + key + \"
\";\n }\n });\n headerSet = true;\n row += \"
\";\n body += row;\n });\n }\n header += \"\";\n body += \"\";\n this.table.append(header);\n this.table.append(body);\n }\n });\n}(window.tangelo, window.jQuery));\n","(function ($, d3, tangelo, vg) {\n \"use strict\";\n\n $.fn.tablelink = function (spec) {\n var nodes = [],\n links = [],\n nodeMap = {},\n linkMap = {},\n source = tangelo.accessor({field: spec.source}),\n target = tangelo.accessor({field: spec.target}),\n that = this[0],\n filteredNodes = [],\n filteredNodeMap = {},\n filteredLinks = [];\n\n spec.data.rows.forEach(function (link) {\n var s = String(source(link)),\n t = String(target(link));\n if (!nodeMap[s]) {\n nodeMap[s] = {id: s, degree: 0, type: spec.source};\n nodes.push(nodeMap[s]);\n }\n if (!nodeMap[t]) {\n nodeMap[t] = {id: t, degree: 0, type: spec.target};\n nodes.push(nodeMap[t]);\n }\n nodeMap[s].degree += 1;\n nodeMap[t].degree += 1;\n if (!linkMap[s]) {\n linkMap[s] = {};\n }\n if (!linkMap[s][t]) {\n linkMap[s][t] = {source: s, target: t, count: 0};\n links.push(linkMap[s][t]);\n }\n linkMap[s][t].count += 1;\n });\n\n links.sort(function (a, b) { return d3.descending(a.count, b.count); });\n // filteredLinks = links.slice(0, 200);\n filteredLinks = links;\n\n filteredLinks.forEach(function (link) {\n if (!filteredNodeMap[link.source]) {\n filteredNodeMap[link.source] = nodeMap[link.source];\n filteredNodes.push(nodeMap[link.source]);\n }\n if (!filteredNodeMap[link.target]) {\n filteredNodeMap[link.target] = nodeMap[link.target];\n filteredNodes.push(nodeMap[link.target]);\n }\n });\n\n return $(that).nodelink({\n data: {nodes: filteredNodes, links: filteredLinks},\n nodeId: function (d) { return d.id; },\n nodeSize: function (d) { return d.degree; },\n nodeLabel: function (d) { return d.id; },\n nodeColor: function (d) { return d.type; },\n nodeCharge: -300,\n linkSource: function (d) { return d.source; },\n linkTarget: function (d) { return d.target; },\n linkOpacity: function (d) { return d.count; },\n linkDistance: 75\n });\n };\n\n}(window.jQuery, window.d3, window.tangelo, window.vg));\n","(function (tangelo, $) {\n \"use strict\";\n\n var app = {key: null};\n\n function stop_vtkweb() {\n if (app.key) {\n tangelo.vtkweb.terminate(app.key);\n app.key = null;\n }\n }\n\n // When the page is closed, make sure to close any processes\n // that were running.\n $(window).on('unload', stop_vtkweb);\n $(window).bind('beforeunload', stop_vtkweb);\n\n if (!($ && $.widget)) {\n return;\n }\n\n $.widget(\"tangelo.tanglegram\", {\n options: {\n tree1: null,\n tree2: null,\n table: null\n },\n\n _create: function () {\n this.div = $('');\n this.element.append(this.div);\n this._update();\n },\n\n _update: function () {\n stop_vtkweb();\n this.div.empty();\n\n var width = $(window).width(), height = $(window).height(),\n args = \"--width \" + width;\n args += \" --height \" + height;\n args += \" --tree1 \" + this.options.tree1;\n args += \" --tree2 \" + this.options.tree2;\n args += \" --table \" + this.options.table;\n args += \" --baseURL \" + window.location.protocol + \"//\" + window.location.host;\n\n tangelo.vtkweb.launch({\n url: \"vtk_tanglegram.py\",\n argstring: args,\n viewport: \"#viewport\",\n callback: function (key, error) {\n if (error) {\n console.warn(\"error!\");\n console.warn(error);\n return;\n }\n app.key = key;\n }\n });\n }\n });\n}(window.tangelo, window.jQuery));\n","(function (tangelo, $, d3) {\n \"use strict\";\n\n function applyTransition(s, t) {\n if (t) {\n s = s.transition(t);\n }\n return s;\n }\n\n $.widget(\"tangelo.timeline\", {\n options: {\n data: [],\n x: tangelo.accessor({field: \"time\"}),\n y: tangelo.accessor({field: \"value\"}),\n margin: {\n top: 10,\n bottom: 30,\n left: 30,\n right: 30\n },\n transition: 0,\n width: null,\n height: null,\n xTicks: 10,\n yTicks: 10\n },\n\n _create: function () {\n this.svg = d3.select(this.element.get(0)).append(\"svg\").attr(\"class\", \"timeline\");\n this.main = this.svg.append(\"g\");\n this.plot = this.main.append(\"g\").attr(\"class\", \"plot\");\n\n this.xaxis = this.main.append(\"g\")\n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"11px\");\n\n this.yaxis = this.main.append(\"g\")\n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"11px\");\n\n this.path = this.plot.append(\"path\")\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"steelblue\")\n .style(\"stroke-width\", \"1.5px\");\n\n this._x = null;\n this._y = null;\n $(window).resize(this._update.bind(this));\n this._update();\n },\n\n _setOptions: function (options) {\n this._super(options);\n this._update();\n },\n\n _update: function () {\n var that = this,\n axisPadding = 15,\n margin = this.options.margin,\n xAcc = tangelo.accessor(this.options.x),\n yAcc = tangelo.accessor(this.options.y),\n width = (this.options.width || this.element.width()) -\n margin.left - margin.right - axisPadding,\n height = (this.options.height || this.element.height()) -\n margin.top - margin.bottom - axisPadding,\n data = this.options.data,\n xaxis,\n yaxis,\n line;\n\n this._x = d3.time.scale()\n .domain(d3.extent(data, function (d) {\n return new Date(xAcc(d));\n }))\n .range([0, width])\n .nice();\n this._y = d3.scale.linear()\n .domain(d3.extent(data, function (d) {\n var val = yAcc(d);\n if (_.isNumber(val) && !isNaN(val)) {\n return val;\n }\n return undefined;\n }))\n .range([height, 0])\n .nice();\n\n xaxis = d3.svg.axis()\n .scale(this._x)\n .orient(\"bottom\");\n xaxis.ticks(this.options.xTicks);\n yaxis = d3.svg.axis()\n .scale(this._y)\n .orient(\"left\");\n yaxis.ticks(this.options.yTicks);\n\n line = d3.svg.line()\n .x(function (d) {\n return that._x(new Date(xAcc(d)));\n })\n .y(function (d) {\n return that._y(yAcc(d));\n })\n .defined(function (d) {\n var val = that._y(yAcc(d));\n return _.isNumber(val) && !isNaN(val);\n });\n\n // resize svg\n this.svg\n .attr(\"width\", width + margin.left + margin.right + axisPadding)\n .attr(\"height\", height + margin.top + margin.bottom + axisPadding);\n this.main\n .attr(\"transform\", \"translate(\" + (margin.left + axisPadding) + \",\" + margin.top + \")\");\n\n // generate axes\n applyTransition(this.xaxis, this.options.transition)\n .attr(\"transform\", \"translate(0,\" + height + \")\")\n .call(xaxis);\n applyTransition(this.yaxis, this.options.transition)\n .call(yaxis);\n\n function styleLine(selection) {\n selection\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", \"1px\")\n .style(\"shape-rendering\", \"crispEdges\");\n }\n\n this.xaxis.selectAll(\"path\").call(styleLine);\n this.xaxis.selectAll(\"line\").call(styleLine);\n this.yaxis.selectAll(\"path\").call(styleLine);\n this.yaxis.selectAll(\"line\").call(styleLine);\n\n // generate the plot\n applyTransition(this.path, this.options.transition)\n .attr(\"d\", line(this.options.data));\n },\n\n xScale: function () {\n return this._x;\n },\n\n yScale: function () {\n return this._y;\n }\n });\n}(window.tangelo, window.jQuery, window.d3));\n","(function ($, tangelo, vg) {\n \"use strict\";\n\n $.fn.timelineVega = function (spec) {\n var y,\n date = tangelo.accessor({field: spec.date}),\n data = spec.data,\n dt = [],\n opt = {\n data: {table: dt},\n renderer: \"svg\",\n el: this[0]\n },\n that = this[0];\n\n spec.y = _.isArray(spec.y) ? spec.y : [spec.y];\n y = [];\n spec.y.forEach(function (row) {\n var accessor = tangelo.accessor({field: row}, undefined);\n accessor.field = row.field;\n y.push(accessor);\n });\n data.rows.forEach(function (row) {\n y.forEach(function (yy) {\n dt.push({\n date: new Date(date(row)),\n group: yy.field,\n y: _.isNumber(yy(row)) ? yy(row) : NaN,\n orig: row\n });\n });\n });\n\n function resize() {\n vg.parse.spec(\"static/built/plugins/flow/extras/timeline.json\", function (chart) {\n console.log($(that).width() + \",\" + $(that).height());\n if ($(that).width() > 0 && $(that).height() > 0) {\n chart(opt).width($(that).width() - 70).height($(that).height() - 70).update();\n }\n });\n }\n $(window).resize(resize);\n resize();\n\n return that;\n };\n\n}(window.jQuery, window.tangelo, window.vg));\n","(function (tangelo, $) {\n \"use strict\";\n\n var app = {key: null};\n\n function stop_vtkweb() {\n if (app.key) {\n tangelo.vtkweb.terminate(app.key);\n app.key = null;\n }\n }\n\n // When the page is closed, make sure to close any processes\n // that were running.\n $(window).on('unload', stop_vtkweb);\n $(window).bind('beforeunload', stop_vtkweb);\n\n if (!($ && $.widget)) {\n return;\n }\n\n $.widget(\"tangelo.treeHeatmap\", {\n options: {\n table: null,\n tree: null\n },\n\n _create: function () {\n this.div = $('');\n this.element.append(this.div);\n this._update();\n },\n\n _update: function () {\n stop_vtkweb();\n this.div.empty();\n\n var width = $(window).width(), height = $(window).height(),\n args = \"--width \" + width;\n args += \" --height \" + height;\n args += \" --table \" + this.options.table;\n args += \" --tree \" + this.options.tree;\n args += \" --baseURL \" + window.location.protocol + \"//\" + window.location.host;\n\n tangelo.vtkweb.launch({\n url: \"vtk_tree_heatmap.py\",\n argstring: args,\n viewport: \"#viewport\",\n callback: function (key, error) {\n if (error) {\n console.warn(\"error!\");\n console.warn(error);\n return;\n }\n app.key = key;\n }\n });\n }\n });\n}(window.tangelo, window.jQuery));\n","(function (flow, $, _, ace, Backbone, Blob, d3, FileReader, girder, tangelo, URL, workflow) {\n \"use strict\";\n\n // The view for selecting, running, and editing analyses\n flow.AnalysisManagementView = Backbone.View.extend({\n\n events: {\n 'click #show-script': function () {\n var hide = d3.select(\"#show-script\").classed(\"active\");\n flow.setDisplay(hide ? \"vis\" : \"editor\");\n this.editor.resize();\n d3.select(\"#show-script-icon\").classed(\"icon-eye\", hide);\n d3.select(\"#show-script-icon\").classed(\"icon-eye-close\", !hide);\n d3.select(\"#show-script-text\").text(hide ? \"Show script\" : \"Hide script\");\n\n if (this.workflowView) {\n this.workflowView.render();\n }\n },\n\n 'click #edit': function () {\n var edit = d3.select(\"#edit\").classed(\"active\");\n this.editor.setReadOnly(edit);\n this.editor.renderer.$cursorLayer.element.style.opacity = edit ? 0 : 1;\n if (this.workflowView) {\n this.workflowView.editable(!edit);\n }\n d3.selectAll(\".edit-controls\").classed(\"hidden\", edit);\n },\n\n 'change #mode': function () {\n if (this.analysis) {\n this.analysis.get('meta').analysis.mode = $(\"#mode\").val();\n this.editor.getSession().setMode(\"ace/mode/\" + this.analysis.get('meta').analysis.mode);\n }\n },\n\n 'click #save': function () {\n var info, curWorkflow;\n if (this.analysis) {\n $(\"#save\").addClass(\"disabled\");\n info = this.analysis.get('meta').analysis;\n info.name = this.$(\".analysis-edit-name\").val();\n info.description = this.$('#analysis-edit-description').val();\n if (info.mode === \"workflow\") {\n curWorkflow = this.workflowView.serialize();\n info.inputs = curWorkflow.inputs;\n info.outputs = curWorkflow.outputs;\n info.steps = curWorkflow.steps;\n info.connections = curWorkflow.connections;\n } else {\n info.script = this.editor.getValue().replace(/(?:\\r\\n|\\r)/g, '\\n');\n info.inputs = this.inputVariables.toJSON();\n info.outputs = this.outputVariables.toJSON();\n }\n\n this.analysis._sendMetadata(this.analysis.get('meta'), _.bind(function () {\n this.analysis.set({name: info.name}).once('g:saved', function () {\n $(\"#analysis\").change();\n $(\"#save\").removeClass(\"disabled\");\n this.editor.savedVersion = this.analysis.get('meta').analysis.script;\n flow.bootstrapAlert(\"success\", info.name + \" saved!\");\n }, this).once('g:error', function (error) {\n flow.bootstrapAlert(\"danger\", \"Failed to save \" + info.name + \": \" + error.statusText, 30);\n }).save();\n }, this), function (error) {\n flow.bootstrapAlert(\"danger\", \"Failed to save \" + info.name + \": \" + error, 30);\n });\n }\n },\n\n 'click .delete-analysis': function () {\n $('#confirm-delete').modal('show');\n },\n\n 'change #analysis': function () {\n this.changeAnalysis(this.analyses.get($(\"#analysis\").val()));\n },\n\n 'click #setup': function () {\n if (this.analysis) {\n this.analysisSetupView.model = this.analysis;\n this.analysisSetupView.render();\n }\n },\n\n 'click .add-input-variable': function () {\n var model = new Backbone.Model();\n this.inputVariableEditView.model = model;\n this.inputVariables.add(model);\n this.inputVariableEditView.render();\n },\n\n 'click .add-output-variable': function () {\n var model = new Backbone.Model();\n this.outputVariableEditView.model = model;\n this.outputVariables.add(model);\n this.outputVariableEditView.render();\n },\n\n 'click #analysis-new': function () {\n var analysis = {\n name: $(\"#analysis-name\").val(),\n inputs: [],\n outputs: [],\n mode: \"python\",\n script: \"\"\n };\n this.createAnalysis(analysis);\n },\n\n 'click #workflow-new': function () {\n var analysis = {\n name: $(\"#analysis-name\").val(),\n inputs: [],\n outputs: [],\n mode: \"workflow\",\n steps: [],\n connections: []\n };\n this.createAnalysis(analysis);\n },\n\n 'click #add-workstep': function () {\n var analysis = this.analyses.get($(\"#workstep\").val());\n this.workflowView.addStep(analysis.get(\"meta\").analysis, analysis.id, analysis.get(\"updated\"));\n },\n\n 'click #add-workvis': function () {\n var vis = this.visualizations.get($(\"#workvis\").val());\n this.workflowView.addStep(vis.get(\"meta\").visualization);\n },\n\n 'click #analysis-download': function () {\n var blob = new Blob([JSON.stringify(this.analysis.get('meta').analysis, null, \" \")]),\n filename = this.analysis.get('meta').analysis.name + '.json',\n anchor = $('');\n $(\"body\").append(anchor);\n anchor[0].click();\n },\n\n 'change #analysis-files': function () {\n var files = $('#analysis-files')[0].files;\n _.each(files, function (file) {\n this.upload(file);\n }, this);\n },\n\n 'click #analysis-upload': function () {\n $('#analysis-files').click();\n }\n\n },\n\n initialize: function (settings) {\n this.analysis = null;\n this.datasets = settings.datasets;\n this.visualizations = settings.visualizations;\n this.presets = settings.presets;\n this.analysisSetupView = new flow.AnalysisSetupView({\n el: $('#analysis-setup-dialog'),\n model: this.analysis,\n datasets: this.datasets,\n visualizations: this.visualizations,\n presets: this.presets\n });\n\n this.editor = ace.edit(\"code-editor\");\n this.editor.setTheme(\"ace/theme/chrome\");\n this.editor.setHighlightActiveLine(false);\n this.editor.setHighlightGutterLine(false);\n this.editor.setShowPrintMargin(false);\n this.editor.setReadOnly(true);\n this.editor.setFontSize(14);\n this.editor.renderer.$cursorLayer.element.style.opacity = 0;\n\n // 'input' instead of 'change' because it's behind a timeout so\n // it gets fired less frequently.\n this.editor.on('input', _.bind(function () {\n if (this.editor.savedVersion !== this.editor.getValue()) {\n $(\"#save\").addClass(\"btn-primary\");\n if (window.onbeforeunload === null) {\n window.onbeforeunload = function (e) {\n return \"You have unsaved changes in the editor.\";\n };\n }\n } else {\n window.onbeforeunload = null;\n $(\"#save\").removeClass(\"btn-primary\");\n }\n }, this));\n\n this.workflowView = null;\n\n this.analyses = settings.analyses;\n this.analysesView = new flow.ItemsView({el: this.$('#analysis'), itemView: flow.ItemOptionView, collection: this.analyses});\n this.analysesView.render();\n\n this.workstepsView = new flow.ItemsView({el: this.$('#workstep'), itemView: flow.ItemOptionView, collection: this.analyses});\n this.workstepsView.render();\n\n this.workvisView = new flow.ItemsView({el: this.$('#workvis'), itemView: flow.ItemOptionView, collection: this.visualizations});\n this.workvisView.render();\n\n this.inputVariables = new Backbone.Collection();\n this.outputVariables = new Backbone.Collection();\n this.inputVariableEditView = new flow.VariableEditView({el: $('#input-variable-edit-dialog'), mode: 'input'});\n this.inputVariablesView = new flow.VariablesView({\n el: this.$('.input-variables'),\n itemView: flow.VariableView,\n itemOptions: {editView: this.inputVariableEditView, collection: this.inputVariables},\n collection: this.inputVariables\n });\n this.outputVariableEditView = new flow.VariableEditView({el: $('#output-variable-edit-dialog'), mode: 'output'});\n this.outputVariablesView = new flow.VariablesView({\n el: this.$('.output-variables'),\n itemView: flow.VariableView,\n itemOptions: {editView: this.outputVariableEditView, collection: this.outputVariables},\n collection: this.outputVariables\n });\n\n // Once the first analysis is added, make it the active analysis\n this.analyses.on('add', _.bind(function (item) {\n if (!this.analysis) {\n this.changeAnalysis(item);\n }\n }, this));\n\n flow.events.on('flow:change-save-location', this.saveLocationChange, this);\n\n $('.really-delete-analysis').click(_.bind(function () {\n if (this.analysis) {\n this.analysis.once('g:deleted', function () {\n this.analyses.remove(this.analysis);\n // Trigger recreating the analysis UI\n $(\"#analysis\").change();\n $('#confirm-delete').modal('hide');\n }, this).destroy();\n }\n }, this));\n },\n\n changeAnalysis: function (analysis) {\n var checkCanEdit = function () {\n if (!this.analysis.get('collection') || this.analysis.get('collection').get('_accessLevel') > 0) {\n d3.select(\"#edit\").classed(\"hidden\", false);\n d3.selectAll(\".edit-controls\").classed(\"hidden\", !d3.select(\"#edit\").classed(\"active\"));\n }\n };\n\n if (this.analysis) {\n this.analysis.off('change:collection', null, this);\n }\n\n this.analysis = analysis;\n if (this.analysis) {\n this.$('.description-container').removeClass('hide');\n var desc = analysis.get('meta').analysis.description || '';\n this.$('#analysis-description').text(desc);\n this.$('#analysis-edit-description').val(desc);\n\n if (this.analysis.get('meta').analysis.mode === \"workflow\") {\n d3.select(\"#code-editor\").classed(\"hidden\", true);\n d3.select(\"#workflow-editor\").classed(\"hidden\", false);\n d3.selectAll(\".analysis-edit-controls\").classed(\"hidden\", true);\n d3.selectAll(\".workflow-edit-controls\").classed(\"hidden\", false);\n this.workflowView = new flow.WorkflowView({el: '#workflow-editor', model: new Backbone.Model($.extend(true, {}, this.analysis.get('meta').analysis))});\n this.workflowView.editable(d3.select(\"#edit\").classed(\"active\"));\n this.workflowView.render();\n } else {\n d3.select(\"#code-editor\").classed(\"hidden\", false);\n d3.select(\"#workflow-editor\").classed(\"hidden\", true);\n d3.selectAll(\".analysis-edit-controls\").classed(\"hidden\", false);\n d3.selectAll(\".workflow-edit-controls\").classed(\"hidden\", true);\n\n // So we can detect whether or not the text was changed.\n this.editor.savedVersion = this.analysis.get('meta').analysis.script;\n this.editor.setValue(this.analysis.get('meta').analysis.script);\n this.editor.clearSelection();\n this.$('#mode').val(this.analysis.get('meta').analysis.mode);\n this.$('#mode').change();\n this.inputVariables.set(this.analysis.get('meta').analysis.inputs);\n this.outputVariables.set(this.analysis.get('meta').analysis.outputs);\n }\n this.$('.analysis-edit-name').val(this.analysis.get('meta').analysis.name);\n\n this.analysis.on('change:collection', checkCanEdit, this);\n _.bind(checkCanEdit, this)();\n } else {\n this.editor.savedVersion = '';\n this.editor.setValue('');\n this.inputVariables.set([]);\n this.outputVariables.set([]);\n this.$('.description-container').addClass('hide');\n }\n },\n\n upload: function (file) {\n var reader = new FileReader();\n\n reader.onload = _.bind(function (e) {\n this.createAnalysis(JSON.parse(e.target.result));\n }, this);\n\n reader.readAsText(file);\n },\n\n createAnalysis: function (analysis) {\n var item = new girder.models.ItemModel({\n name: analysis.name,\n folderId: flow.saveLocation.get('analysisFolder')\n });\n\n item.once('g:saved', function () {\n item.addMetadata('analysis', analysis, _.bind(function () {\n item.id = item.get('_id');\n this.analyses.add(item);\n $(\"#analysis\").val(item.cid).change();\n $(\"#analysis-name\").val(\"\");\n }, this), function (error) {\n // TODO report error\n });\n }, this).once('g:error', function (error) {\n console.log(error);\n }).save();\n },\n\n saveLocationChange: function () {\n this.$('#new-analysis-form').toggleClass('hidden', flow.saveLocation === null);\n },\n\n render: function () {\n this.$('#analysis').select2({\n placeholder: 'Select an analysis',\n width: '100%'\n });\n }\n\n });\n}(window.flow, window.$, window._, window.ace, window.Backbone, window.Blob, window.d3, window.FileReader, window.girder, window.tangelo, window.URL, window.workflow));\n","(function (flow, $, _, Backbone, console, d3, girder) {\n \"use strict\";\n\n flow.AnalysisSetupView = Backbone.View.extend({\n\n events: {\n 'click .run': function () {\n var inputs, outputs = {};\n\n d3.select('.run')\n .classed('btn-primary', false)\n .classed('btn-default', true)\n .attr('disabled', true);\n\n $('#analysis-output').empty();\n\n inputs = this.inputsView.values();\n\n this.model.get('meta').analysis.outputs.forEach(_.bind(function (output) {\n var id = output.id || output.name;\n outputs[id] = {type: output.type, format: flow.webFormat[output.type]};\n }, this));\n this.taskBindings = {inputs: inputs, outputs: outputs};\n\n d3.select('.success-message').classed('hidden', true);\n d3.select('.error-message').classed('hidden', true);\n d3.select('.info-message').classed('hidden', false).text('Running analysis ...');\n\n flow.performAnalysis(this.model.get('_id'), inputs, outputs,\n _.bind(function (error, result) {\n if (error) {\n console.log(error);\n d3.select('.run')\n .classed('btn-primary', true)\n .classed('btn-default', false)\n .attr('disabled', null);\n d3.select('.success-message').classed('hidden', true);\n d3.select('.error-message').classed('hidden', false).text('Error: See console for details.');\n d3.select('.info-message').classed('hidden', true);\n return;\n }\n if (result.error) {\n d3.select('.run')\n .classed('btn-primary', true)\n .classed('btn-default', false)\n .attr('disabled', null);\n d3.select('.success-message').classed('hidden', true);\n d3.select('.error-message').classed('hidden', false).html('Error:\\n' + result.message);\n d3.select('.info-message').classed('hidden', true);\n return;\n }\n this.taskId = result._id;\n setTimeout(_.bind(this.checkTaskResult, this), 1000);\n\n // Stream console output from this analysis.\n this.eventSource = new window.EventSource(\n girder.apiRoot + '/item/' + this.model.get('_id') + '/flow/' +\n this.taskId + '/output?token=' +\n girder.cookie.find('girderToken'));\n\n this.eventSource.addEventListener('log', _.bind(function (e) {\n $('#analysis-output').text($('#analysis-output').text() + e.data);\n }, this));\n this.eventSource.addEventListener('eof', _.bind(function (e) {\n console.log('Shutting down stream.');\n this.eventSource.close();\n }, this));\n this.eventSource.addEventListener('past-end', _.bind(function (e) {\n console.error('Should already be closed!');\n console.log(e);\n }, this));\n }, this));\n },\n\n 'click #show-output': function () {\n var hide = d3.select(\"#show-output\").classed(\"active\");\n d3.select('#analysis-output').classed(\"hidden\", hide);\n d3.select(\"#show-output-icon\").classed(\"icon-eye\", hide);\n d3.select(\"#show-output-icon\").classed(\"icon-eye-close\", !hide);\n d3.select(\"#show-output-text\").text(hide ? \"Show output log\" : \"Hide output log\");\n },\n\n 'click #close-analysis-setup': function () {\n $('#analysis-output').empty();\n }\n },\n\n initialize: function (settings) {\n this.datasets = settings.datasets;\n this.visualizations = settings.visualizations;\n this.presets = settings.presets;\n this.inputsView = new flow.InputsView({\n collection: new Backbone.Collection(),\n idPrefix: 'input-',\n el: this.$('.inputs'),\n datasets: this.datasets\n });\n },\n\n render: function () {\n var analysis = this.model.get('meta').analysis;\n\n // Deep comparison\n if (!_.isEqual(this.inputsView.inputs, this.model.get('meta').analysis.inputs)) {\n // Deep copy\n this.inputsView.inputs = $.map(this.model.get('meta').analysis.inputs, function (value) {\n return $.extend(true, {}, value);\n });\n this.inputsView.collection.set([]);\n this.inputsView.collection.set(this.model.get('meta').analysis.inputs);\n }\n this.inputsView.render({\n showInputInfo: true\n });\n\n this.$('.analysis-setup-title').text(analysis.name);\n this.$('.analysis-setup-description').text(analysis.description);\n this.$('.analysis-setup-outputs-container').html(jade.templates.outputsDescription({\n analysis: analysis\n }));\n this.$('.success-message').addClass('hidden');\n this.$('.info-message').addClass('hidden');\n this.$('.error-message').addClass('hidden');\n this.$el.modal('show');\n return this;\n },\n\n checkTaskResult: function () {\n girder.restRequest({\n path: 'item/' + this.model.get('_id') + '/flow/' + this.taskId + '/status',\n error: null\n }).done(_.bind(function (result) {\n console.log(result.status);\n\n if (result.status === 'SUCCESS') {\n girder.restRequest({\n path: 'item/' + this.model.get('_id') + '/flow/' + this.taskId + '/result',\n error: null\n }).done(_.bind(function (data) {\n var result = data.result,\n outputMessage = '
',\n outputIdToName = {};\n\n this.model.get('meta').analysis.outputs.forEach(function (output) {\n outputIdToName[output.id || output.name] = output.name;\n });\n\n // Put data into list\n $.each(result, _.bind(function (outputId, output) {\n if (outputId === '_visualizations') {\n return;\n }\n var index = 1, outputName = outputIdToName[outputId];\n output = new Backbone.Model(output);\n output.set({name: this.model.get('name') + ' ' + outputName});\n while (this.datasets.findWhere({name: output.get('name')})) {\n output.set({name: this.model.get('name') + ' ' + outputName + ' (' + index + ')'});\n index += 1;\n }\n output.set({bindings: this.taskBindings});\n this.datasets.add(output);\n outputMessage += '